Styling Issue

amphios · February 2012

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

rpr · 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.

x00 · February 2012

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.

amphios · February 2012

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

rpr · February 2012

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 · February 2012

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.

whu606 · February 2012

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 · February 2012

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.

amphios · 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}

rpr · 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 · February 2012

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.

422 · 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.

amphios · February 2012

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.

422 · February 2012

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

amphios · February 2012

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

422 · February 2012

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 · February 2012

.Tabs

set text-align:left;

amphios · February 2012

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?

422 · February 2012

Usually its been set in body class accidentally.

Or you arent closing divs.

Persevere you will find it

amphios · February 2012

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.

422 · 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;}

amphios · 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?

422 · 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.

amphios · February 2012

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 · 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 !

amphios · February 2012

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

422 · February 2012

case sensitive

change Menu to menu

amphios · February 2012

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

422 · February 2012

no it does.

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

amphios · February 2012

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.

422 · February 2012

in

.MyMenu ul li {
    display: inline;
}

add

 padding-left: 10px;

Howdy, Stranger!

Categories

In this Discussion

Styling Issue

Answers