Specific positioning for Navigation Bar

Discussion about Positioning a Navigation Bar with CSS

[rezachemical]

Good afternoon everyone, it is me again.

This time with yet another newbie problem. In this instance my problem involves an UL element that requires some positioning. However, I am not prepared to use absolute positioning and I don't think it should be necessary. So far I have used padding and margin to try and attempt the affect I am looking for.

If you take at the look at this link www.elitebeat.net/test/new/backend.html you will see a "tab" style nav bar on top of an image. My goal is to align the bottom white border of this "tab" nav bar to line up w/ the bottom of the image. So far no good, thus brings me here...

Here is my CSS source:

/* CSS Document */

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:75%;
background-color:#666666;
color:#ffffff;
margin:0;
}

/*
a {
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
}

a:hover, a:active, a:current {
color:#cccccc;
text-decoration:overline;
}
*/

ul {
margin-left:5em;
}

p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
color:#666666;
}

/* div props */

#header {
width:100%;
height:97px;
background-image:url(aesthetic-bg.gif);
background-repeat:repeat-x;
}

#header ul {
margin:0;
border-bottom:3px solid #ffffff;
list-style:none;
text-align:center;
}

#header ul li {
display:inline;
}

#header ul li a {
border:1px solid #ccccff;
border-bottom:none;
padding:0 2em;
text-decoration:none;
text-transform:capitalize;
color:#000000;
background-color:#ccccff;
}

#header ul li a.active {
background-color:#666666;
color:#cccccc;
}

#header ul li a:hover {
color:#cccccc;
}

#dashboard {
width:450px;

margin:2em;
border:1px solid #ffffff;
border-top:none;
padding:.5em;
background-color:#CCCCFF;}

/* element props */

p.p1 {
font-size:102%;
}

p.p2 {
text-indent:1.5em;
}

p.p3 {
font-size:90%;
}

[coopersita]

I would set #header to position: relative, and then set the menu to position: absolute, bottom: 0.

You could use padding top to move the menu down, but if you increase text size, the menu will grow downward, on top of the other container.

By the way, you can't put a list inside a span.

[rezachemical]

but there IS a list in a span? anyhow i've removed the span because it is useless. either way i don't get that part of your reply...

as for relative positioning goes, i've never really understood fully the use of it. if i position something relatively it will be relative to the position of it's parent?

if anyone could provide some links to some documentation that'd be terrific as w3schools and webmonkey don't do a great job at explanation.

[Vhadakhan]

you could use the magical three column CSS (google) FAQ, and turn the left side transparent, and the right side transparent, thus centering the content to 'seem' like it aligns with the nav.

[coopersita]

When I mentioned the span I meant that a span is an inline element, while a list is a block element. Inline elements can't contain block elements:

Wrong: <span><ul><li>...
Right: <ul><li><span>...

When you set a container to position relative, all descendats that are position (absolute or fixed) will be relative to the parent. For example:

<div style="position: relative;">
<div style="position: absolute; bottom: 0; left: 0;">
...
</div></div>

The inner div will be positioned to bottom 0, left 0 of the outer div, instead of the whole page.

Hope I clarified things.