Ok, I have my site here (<!-- m --><a class="postlink" href="http://mjdimick.zacknetwork.net/index.php">http://mjdimick.zacknetwork.net/index.php</a><!-- m -->) and I'm working on converting it to div's instead of tables. I ran into a problem. How can I stup a div to make it look like it's columns like a table? If you look here:<br />
<br />
<!-- m --><a class="postlink" href="http://mjdimick.zacknetwork.net/index.php">http://mjdimick.zacknetwork.net/index.php</a><!-- m --><br />
<br />
You will see the table version which is layed out how I want. If you look here:<br />
<br />
<!-- m --><a class="postlink" href="http://mjdimick.zacknetwork.net/test/head.php">http://mjdimick.zacknetwork.net/test/head.php</a><!-- m --><br />
<br />
You will see the div version I'm working on. If you look closly you will see that I had a nav bar right under the logo and each link was inside a td and each td was 20% wide which made them spaced out evenly accross the 100% table. What I want to do is have this same effect with the div version. How would I accomplish this? Thanks.
<!--content-->Use LI's and CSS.<br />
<br />
<br />
<ul style="list-style: none; margin: 0 auto; padding: 0; width: 100%;"><br />
<li style="float: left; width:20%; margin: 0; padding: 0; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" title="Home" style="display: block; width:100%;"></li><br />
</ul><br />
<br />
<br />
[J]ona<!--content-->Thank you very much. That worked like a charm. I have one other question that is related to the same thing. How can I vertically center the links within that?<!--content-->You can push them down with a margin-top. You DO know how to factor all that repeated style junk out of the list into an embedded sheet, right?<!--content-->Yes, I plan to add it to my external style sheet but right now I'm just trying to get it to look right!
<!--content-->I have now tried the margin-top but now it is making the div taller than it is supposed to be?<!--content-->Perhaps try padding-top.<!--content-->I have now tried both and they both output the same results. They make the div taller than it should be. Is there another way? 
<br />
<br />
Here's my code: <div class="navbar"><br />
<ul style="list-style: none; margin: 0; padding-top: 5px; width: 100%; height: 100%;"><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" title="Home" style="display: block; width:100%; height: 100%;">Home</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php" title="About Us" style="display: block; width:100%; height: 100%;">About Us</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"portfolio.php" title="Portfolio" style="display: block; width:100%; height: 100%;">Portfolio</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php" title="Contact Us" style="display: block; width:100%; height: 100%;">Contact Us</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"prices.php" title="Prices" style="display: block; width:100%; height: 100%;">Prices</a></li><br />
</ul><br />
</div><!--content-->Originally posted by mjdimick <br />
Yes, I plan to add it to my external style sheet but right now I'm just trying to get it to look right! But it's a LOT easier to do the fiddling one place instead of having all that presentation crap in the list. Just do it in an embedded sheet and move it out later.<!--content-->I have now tried both and they both output the same results. They make the div taller than it should be. Is there another way? <br />
Put the menu text into <p>s or <span>s and apply the styles to that. Bare text is often problematic.<!--content-->Originally posted by ray326 <br />
Put the menu text into <p>s or <span>s and apply the styles to that. Bare text is often problematic. <br />
<br />
He would have to use <SPAN>s, because <P>s are block-level elements and cannot be contained inside of a <UL> or <LI> tag.<br />
<br />
Mjdimick, make a class for your LI's, instead of writing out the CSS code for each one--I had just given an example.<br />
<br />
[J]ona<!--content-->Mjdimick, the text links seem to vertically align in both my Mozilla FireFox and Internet Explorer 6.0 browsers.<br />
<br />
[J]ona<!--content-->I find the easiest way to vertically center something is to add a line-height that is equal to the height of the containing element. This works quite well -- as long as you don't have something like 500px tall.<!--content-->
<br />
<!-- m --><a class="postlink" href="http://mjdimick.zacknetwork.net/index.php">http://mjdimick.zacknetwork.net/index.php</a><!-- m --><br />
<br />
You will see the table version which is layed out how I want. If you look here:<br />
<br />
<!-- m --><a class="postlink" href="http://mjdimick.zacknetwork.net/test/head.php">http://mjdimick.zacknetwork.net/test/head.php</a><!-- m --><br />
<br />
You will see the div version I'm working on. If you look closly you will see that I had a nav bar right under the logo and each link was inside a td and each td was 20% wide which made them spaced out evenly accross the 100% table. What I want to do is have this same effect with the div version. How would I accomplish this? Thanks.
<!--content-->Use LI's and CSS.<br /><br />
<br />
<ul style="list-style: none; margin: 0 auto; padding: 0; width: 100%;"><br />
<li style="float: left; width:20%; margin: 0; padding: 0; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" title="Home" style="display: block; width:100%;"></li><br />
</ul><br />
<br />
<br />
[J]ona<!--content-->Thank you very much. That worked like a charm. I have one other question that is related to the same thing. How can I vertically center the links within that?<!--content-->You can push them down with a margin-top. You DO know how to factor all that repeated style junk out of the list into an embedded sheet, right?<!--content-->Yes, I plan to add it to my external style sheet but right now I'm just trying to get it to look right!
<!--content-->I have now tried the margin-top but now it is making the div taller than it is supposed to be?<!--content-->Perhaps try padding-top.<!--content-->I have now tried both and they both output the same results. They make the div taller than it should be. Is there another way? <br /><br />
Here's my code: <div class="navbar"><br />
<ul style="list-style: none; margin: 0; padding-top: 5px; width: 100%; height: 100%;"><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.php" title="Home" style="display: block; width:100%; height: 100%;">Home</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.php" title="About Us" style="display: block; width:100%; height: 100%;">About Us</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"portfolio.php" title="Portfolio" style="display: block; width:100%; height: 100%;">Portfolio</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.php" title="Contact Us" style="display: block; width:100%; height: 100%;">Contact Us</a></li><br />
<li style="float: left; width:20%; height: 100%; display: block;"><a href=http://www.webdeveloper.com/forum/archive/index.php/"prices.php" title="Prices" style="display: block; width:100%; height: 100%;">Prices</a></li><br />
</ul><br />
</div><!--content-->Originally posted by mjdimick <br />
Yes, I plan to add it to my external style sheet but right now I'm just trying to get it to look right!
But it's a LOT easier to do the fiddling one place instead of having all that presentation crap in the list. Just do it in an embedded sheet and move it out later.<!--content-->I have now tried both and they both output the same results. They make the div taller than it should be. Is there another way? <br />Put the menu text into <p>s or <span>s and apply the styles to that. Bare text is often problematic.<!--content-->Originally posted by ray326 <br />
Put the menu text into <p>s or <span>s and apply the styles to that. Bare text is often problematic. <br />
<br />
He would have to use <SPAN>s, because <P>s are block-level elements and cannot be contained inside of a <UL> or <LI> tag.<br />
<br />
Mjdimick, make a class for your LI's, instead of writing out the CSS code for each one--I had just given an example.<br />
<br />
[J]ona<!--content-->Mjdimick, the text links seem to vertically align in both my Mozilla FireFox and Internet Explorer 6.0 browsers.<br />
<br />
[J]ona<!--content-->I find the easiest way to vertically center something is to add a line-height that is equal to the height of the containing element. This works quite well -- as long as you don't have something like 500px tall.
<!--content-->