CSS Is Being a bitch

[VaginaMuncher]

#Logo

#Logo {
background-image:url('/Images/Logo.png');
background-repeat:no-repeat;
padding-top: 100px; }

And this usually works, I've been involved in retro development, seem to have lost my touch xD

The Final Product:

You must be registered for see links

I basically wanted this to move down so it levels out with the bar (Half way )

 

[Hindi]

add padding-top: 20px; and not 100%

 

[Mega]

You should set height & width for the logo then add padding.

 

[VaginaMuncher]

add padding-top: 20px; and not 100%

Right done that, Still wont work.

You should set height & width for the logo then add padding.

I know, I was seeing if it was stopping it from working

So Its now:

#Logo {
background-image:url('/Images/Logo.png');
background-repeat:no-repeat;
height:43px;
width:176px;
padding-top: 20px;
}

And still wont budge :S
Image:

You must be registered for see links

 

[Sysode]

Try adding display:inline to both elements. I'll take a better look when I get home - on phone at the moment.

 

[VaginaMuncher]

Okay
EDIT: That won't work either.

 

[Hindi]

Okay
EDIT: That won't work either.

Do you need logo in the center ye?

 

[VaginaMuncher]

I was planning on this being the main navigation like links pull-right and logo left, But I guess we could try centering it

 

[Sysode]

Let me try and get an idea of what you want first of all, you want your logo aligned to the left and your navigation aligned to the right? Inline with each other?

 

[Hindi]

I was planning on this being the main navigation like links pull-right and logo left, But I guess we could try centering it

Erm Just put the image in between <center> </center> tags if you want to center it, Or you could add

margin-top:20px; in css and see if it works the way u wanted it

 

[VaginaMuncher]

Yeah Sysode

 

[Queef]

Why don't you just, create a transparent container in which both your logo and navigation will be placed withing, specify the width and center it. The width will determine how far out from the left and right your logo and navigation will be, obviously the larger it is the smaller the gap will be. Put both the logo and nav classes inside that container and give the logo float:left; and navigation bar float:right;

Then to space the logo from the top of the page, have you tried giving it a margin instead of padding?

 

[VaginaMuncher]

No I haven't.
Could you make a markup? For align left and right? Would help as I'm helping someone atm

 

[Queef]

This is the html for my new template, it uses the same concept as my above post, floating the logo to the left and the navigation to the right.

Screen:

You must be registered for see links

<div class="header">
                <div class="nav-container">
                    <div class="logo">
                        <a href="#"><img src="images/logo2.png"></a>
                    </div>             
                    <ul>
                        <li><a href="/vote">Vote for us</a></li>
                        <li><a href="/faq">FAQ</a></li>
                        <li><a href="/shop">Shop</a></li>
                        <li><a href="/rules">Rules</a></li>
                      <li><a href="/staff">Management</a></li>
                      <li class="selected"><a href="#">Home</a></li>
                    </ul>     
                </div>
            </div>

CSS For the container:

.nav-container { width: 800px; height: 52px;text-align:right;clear: both; font-size: 11px;}

Remember, this is just a container, make sure you keep the code for the actual header there and just insert your container inside the main header class.

Notes:
The 52px height in the container relates to the size of the background image used on the main header class.
Don't forget to give your logo a float:left; and navigation float:right;

 

[VaginaMuncher]

Thanks, Ill try this now

 

[Sysode]

Seems this has pretty much been spoon fed to you, hoping you're leaving credit to Queef to whoever you are 'helping' out..