I am trying to vertically align the MENU to the bottom of the 'head' which is 70px in height, but the height of the LI is unknown for obvious reasons...FONT change, etc?
I'm using the nested DIV inside id="head" to force the UL down a fixed number of pixels, but if the font changes height, everything goes screwy...
I would ditch the extra <div></div> It's uneeded. Have you tried using relative absolute positioning using selectors? You can position the list absolutely with respect to the div#head.
Edit: Just noticed a new requirement...maybe LI isn't going to work...I need pixel precision when placing the LI as there is a single pixel between each LI and inactive LI are bumped up a single pixel as well, only active selected LI items are flush with the bottom of the previous DIV...
I'm not a huge fan of CSS (mostly because I am no good at it) so pardon my ignorance...
I dropped the extra DIV already and placed the UL next inline with the header DIV
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
[syntax="html"]
<style type="text/css">
div#head {
position: relative;
top: 200px;
width: 700px;
height: 100px;
background-color: #000000;
}
#nav {
position: absolute;
top: 75px;
width: 100%;
background:color: #FFFFFF;
list-style:none;
padding:0;
margin:0;
}
#nav li {
display:block;
float:left;
width: 25%;
height: 20px;
background-color: #FFFFFF;
text-align:center;
}
</style>
<div id="wrap">
<div id="head">
<ul id="nav">
<li>Dashboard</li>
<li>Contacts</li>
<li>Groups</li>
<li>Admin</li>
</ul>
</div>
</div>
Here is an example for you. note the use of the div#head selector. Basically it places a reference point for the absolutely positioned element. Absolute positioning, positions an element relative to a reference point. Relative positioning positions an element relative to it's position within the flow of the document. I hope that helps a bit. CSS can be confusing especially positioning, but if you can understand it, everything else is a sinch.
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
The inner DIV must be *exactly* flush with the bottom...the inner DIV will contain (or be replaced) byu a UL and LI but how can I get the inner DIV to align with the bottom? I also need pixel accuracy becuase when the DIV is replaced with the UL inactive LI items will be bumped up a single pixel...only active LI items are perfectly flush with the bottom...make sense?
I have a quick snapshot of what I'm trying to accomplish if that helps?
Let me see your example. The code above works. I just set the position of div#header to relative and #nav bottom property to 0 so it's flush with the bottom.
Position:relative - sets the the position of the element relative to the normal flow of the document. Say for instance you have an htm page of all text and you have an image in some where in the document. If you position the image relative and set top property to 25px then the image will be 25px lower than it would be if you hadn't changed it.
#nav { Position:absolute - Positions #nav to an absolute location which is relative to it's container's reference point (the selector). In the absence of a selector, #nav would default to the absolute position within the document window.
I don't know if that makes things simpler or more complicated :-/...
I'm realizing that they way you think of layout is drastically different when done in CSS. Requires more quirky browser insight and a different way of layout thinking then tables.
Years of table design has left me stubborn to learn anything new I guess
I'll read some articles on it, as the CSS does work nicely and is far less HTML then using tables, so no dought it is nice
p.s-I removed the selector div#nav to be just #nav and everything works fine in FF and IE??? which only confused me more
Anyways, I appreciate the help dude...I'm slowly learning this stuff, but my time is limited as I have projects which need finishing...
The position attribute doesn't take too much to understand. Static is the default positioning. Relative allows it to move relative to default positioning. Absolute allows it to move absolutely. Fixed stops any movement.
Absolute positioning is useless in dynamic websites (if your basically making just a picture, then absolute is fine... I guess) unless it is within an object with relative positioning. Relative positioning does a lot of special thing.
Firstly, you can move something (useful if you like IE hacks) although it continues to take up the space where it was, you can assign a z-index (only works when you have a position attribute set), and you can control absolutely positioned elements to be absolutely positioned within a relative space.
I'm realizing that they way you think of layout is drastically different when done in CSS. Requires more quirky browser insight and a different way of layout thinking then tables.
Years of table design has left me stubborn to learn anything new I guess
I'll read some articles on it, as the CSS does work nicely and is far less HTML then using tables, so no dought it is nice
p.s-I removed the selector div#nav to be just #nav and everything works fine in FF and IE??? which only confused me more
Anyways, I appreciate the help dude...I'm slowly learning this stuff, but my time is limited as I have projects which need finishing...
Cheers
If you really want to understand how to do use layouts in CSS, fire up Photoshop and draw boxes and layers, center them with respect to each other or to the background. Essentially that's what your doing with CSS.