Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter
Support for Vanilla Forums Cloud product

In this Discussion

Follow Us


Styling Issue

edited February 2012 in Questions

Having a little trouble with this styling. Cant seem to get it to fit properly.

If you go to www.forum.amphicraft.com you'll see what I mean.

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> {asset name='Head'}

        <div class="container">

            <div class="header">
                <div class="nav">
                    <span style="float: left;">AMPHICRAFT FORUM</span>
                    <span style="float: right; font-size: 13px; padding-top: 1px;">
                    <div class="menu">
                    <ul>
                     {dashboard_link}{discussions_link}{activity_link}{custom_menu}
                        </ul>
                        </div> 

                    <div id="mac"></div>
                </div>

                <div id="logo">The number one true survival server.<span id="arrow"></span></div>

            </div>

            <div class="container_blue">
                <div id="contentcontainer"> 

                    <div class="red">
                        Latest Server News:
                        <div class="notice">
                        <?PHP
                        $category = "1";
                        include("cutenews/show_news.php");
                        ?>
                        </div>
                    </div>
                    <div class="green">
                        User Panel:
                        <div class="notice">
                        <ul>
                        {if $User.SignedIn}
                        <div id="userinfo">
                        <div class="ProfileBox">
                        <span class="Photo">
                            {photo_link}
                        </span>
                            {profile_link}
                            {inbox_link}
                            {signinout_link}
                        </div>
                        </div>
                        {/if}
                        </ul>
                        </div>

                    </div>

                        <div class="clear"></div>


                    <div class="grey">
        <div class="Wrapper">
            <div id="Panel">
                {asset name="Panel"}
            </div>        
            <div id="Content">
                {asset name="Content"}
            </div>
            </div>
        </div>
                    </div>


                </div>
            <div style="text-align: center; font-size: 8pt; color: #03789d">
            Designed by <b>Amphios</b><br />
            Coded by <b><a REL="noAJAX" href="http://www.amazorize.com">Amazorize</a></b><br />
            Copyright <b>Amphicraft</b>&copy; 2011-2013
            </div>

            </div>

         </div> 

        </body>
        </html>`
«1

Answers

  • rprrpr
    edited February 2012

    your parent/child DIV widths are causing problems. For example #contentcontainer is 920px wide, but its children: #Panel = 250px and #Content = 680px (250px + 680px = 930px)

    The children are larger than their parent.

  • yep like rpr says the content with is causing problem, if you take the content width away (implicit), or make ti smaller it will work. howver there is more styling issues.

    I really recomend geting a good book in the subject. htmldog is a good source.

    grep is your friend.

  • Ah, I thought it had something to do with the widths. Are the panel and content widths in the CSS or burried somewhere?

  • the main Vanilla CSS file is in the default theme directory, but yours looks like a custom layout embedding Vanilla in something else?

    The standard procedure is to create a custom theme, then create a file called 'custom.css' to override the CSS rules you wish to change, this is documented. Use your Browser development tools (Firebug, Dragonfly, etc) to determine what CSS rules are effecting the layout.

    amphios
  • I'm using a custom.css file. It's a theme I've modified but in the CSS there is no #content or #panel div.

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... Moderator

    I'm using a custom.css file. It's a theme I've modified but in the CSS there is no #content or #panel div.

    @amphios - so add them in to your custom.css !

    Your forum will take a lot of rules from the basic Vanilla css file.

    If you add a rule to your custom.css it will almost always overrule any other css rules.

    amphios
  • Oh right I see, I'm so used to using Vbulletin. It's all so different doing it with Vanilla. I'll give it a try now.

  • edited February 2012

    Alright, that worked. For testing purposes. I used 500px for the content and 250px for the panel. Now it's just not going where I want it too. As in, if you look it's over the top when the area should expand with it.

    http://www.amphicraft.com/forum/vanilla/

    Also if anyone know's what the {} for if a user isn't signed in? It's not {if $User.NotSignedIn}

  • rprrpr
    edited February 2012

    Think you're going to have to learn the quirks of writing CSS rules?

    try adding overflow:auto to your container_blue class:

    .container_blue { background-image: url("../img/blue.png"); bottom: 0; height: 100%; overflow: auto; padding-top: 47px; }

    You don't need a height value.

    amphios
  • I've added it. I also know HTML and CSS to a more than basic level. I still don't know a lot but I'm getting there. It's doing what I want. It's just still a bit messed up.

  • 422422 Developer MVP
    edited February 2012

    not sure what menu does, no declaration.

    change #mac to

    #mac {
        background-image: url("../img/mac.png");
        height: 367px;
        margin: 35px 0 0 487px;
        position: absolute;
        right: 0;
        width: 464px;
    }
    

    and .header

    .header {
        background-image: url("../img/gradient.png");
        height: 372px;
        padding-top: 10px;
        position: relative;
    }
    

    The designed by Amphios, needs a class. I would position this absolutely. And whack it in the header portion on the left. Then you can fix the content and panel divs.

    Incidentally, you seem to be nesting things a tad weirdly, with regard to additional classes you have made.

    422 Real Estate Australia , now open Check it out

    amphios
  • Thanks, that made my mac image come back. I had no idea where it went. Just vanished. I sorted the problem. It was actually really easy and I dont know why I didnt think to do it. I just decreased the contentarea by 10 pixels (width).

    Thanks for all your help guys.

    Last 2 quick questions.. before I used an inline tag for my nav links but now it doesn't seem to work. I want them all in a line, and also all my text is centered now for some odd reason? Anyone know how to fix that.

    Last of all. Is it possible to change the categorie headers? So say.. I could put a gradient webkit background behind them so they're easy to see.

  • 422422 Developer MVP

    for titles and meta

    .Drafts .ItemContent a.Title, .Discussions .ItemContent a.Title {
    text-align:left;
    }
    .DataList .Meta {
        color: #70727C;
        font-size: 11px;
        text-align: left;
    }
    

    422 Real Estate Australia , now open Check it out

    amphios
  • It made the list correct.. nothing seemed to want to happen with the title though. Is something conflicting?

  • 422422 Developer MVP

    perhaps, I havent looked at custom.css

    Also you have text-align:center for logo.

    I also didnt check if you had left div open for this.

    422 Real Estate Australia , now open Check it out

    amphios
  • 422422 Developer MVP

    .Tabs

    set text-align:left;

    422 Real Estate Australia , now open Check it out

    amphios
  • Nope, doesn't seem to be working. I'm looking through the CSS but there isn't anything that's even centered. The discussions themselves (the text when you click into one) is still centered. It's all odd. Any way to fix the inline issue for the navbar?

  • 422422 Developer MVP

    Usually its been set in body class accidentally.

    Or you arent closing divs.

    Persevere you will find it

    422 Real Estate Australia , now open Check it out

    amphios
  • Well as far as I can see, theres nothing in the body apart from the background: repeat; and I dont think I've missed a closing DIV.. although they're a bastard to find.

  • 422422 Developer MVP
    edited February 2012

    in your style.css body tag you have >>>> text-align:center !!!!!!!!!!

    change to left

    or in custom.css add

    body {text-align:left !important;}

    422 Real Estate Australia , now open Check it out

    amphios
  • edited February 2012

    It's not even using it, or it's not supposed to be anymore. I deleted the rel to it. Thanks for pointing that out. I feel foolish now for missing it. That's worked.

    Now just 2 questions, fixing the inline on my nav and adding a background to the categorie titles.

    Also, so I understand. Does !important; make it so it over-rides everything else?

  • 422422 Developer MVP
    edited February 2012

    Customary to click LIKE if you have received good advice, so far fixed a heap of issues for you.

    Your site uses style.css and custom.css be careful.

    Regarding other issues, sorry not at pc now so cannot inspect src code.

    Good luck.

    422 Real Estate Australia , now open Check it out

    amphios
  • It's fine, thanks for the help so far and of course I'll click like. I just forgot there was a function.

    Cheers!

    422
  • 422422 Developer MVP
    edited February 2012

    as previously stated you have class .menu

    but no declaration for it in css

    you need to do styles for menu menu ul and menu ul li

    and dont wrap divs in spans !

    422 Real Estate Australia , now open Check it out

  • I have .Menu ul li { display:inline } in my custom.css ?

  • 422422 Developer MVP

    case sensitive

    change Menu to menu

    422 Real Estate Australia , now open Check it out

    amphios
  • Wow it was that freaking simple? A capital M? I could of sworn it didn't matter in CSS?

  • 422422 Developer MVP

    no it does.

    Plus I wouldnt call it menu I would rename it .mymenu and style accordingly, otherwise you will get confused

    422 Real Estate Australia , now open Check it out

    amphios
  • Odd, I've never ran into any problems with capitalisation before until now. Oh well, you learn something new every day! Thanks for all your help man, I've changed that yeah. I'll have to try figure out the categorie title thing.

    Off the top of your head I dont suppose you know why my:

    {if $User.NotSignedIn}
                    Test
                    {/if}
    Wont show? But does work because it disappears if you're logged in.
  • 422422 Developer MVP

    in

    .MyMenu ul li {
        display: inline;
    }
    
    add
    
     padding-left: 10px;
    
    

    422 Real Estate Australia , now open Check it out

«1
Sign In or Register to comment.