Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Styling Issue

edited February 2012 in Vanilla 2.0 - 2.8

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>`
«13

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.

  • 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... MVP

    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.

  • 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.

  • 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.

    There was an error rendering this rich post.

  • 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;
    }
    

    There was an error rendering this rich post.

  • 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.

    There was an error rendering this rich post.

  • 422422 Developer MVP

    .Tabs

    set text-align:left;

    There was an error rendering this rich post.

  • 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

    There was an error rendering this rich post.

  • 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;}

    There was an error rendering this rich post.

Sign In or Register to comment.