hdshngout
08-01-2006, 12:10 AM
what im trying to do is get this (done with tables)
http://img180.imageshack.us/img180/3058/footermj2.png
converted to divs for a different section. I have no idea how to do it. Any suggestions. BTW my links are
<!-- Left Aligned -->
Copyright ? 2006 <a href="http://mindlesstrio.com" class="navlink">Mindless
Trio</a>
<!-- Center Aligned -->
<a href="http://" class="navlink">Site Map</a><a href="http://"
class="navlink">Terms of Use</a><a href="http://" class="navlink">Contact
Us</a>
<!-- Right Aligned -->
Design by <a href="http://grungyart.com" class="navlink">Melicbot
Entertainment</a>
Please help!
bourdelson
08-01-2006, 12:15 AM
Wouldn't this work?
<!-- Left Aligned -->
Copyright ? 2006 <a href="http://mindlesstrio.com" class="navlink" style="text-align:left;">Mindless Trio</a>
<!-- Center Aligned -->
<a href="http://" class="navlink" style="text-align:center;">Site Map</a> <a href="http://" class="navlink" style="text-align:center;">Terms of Use</a> <a href="http://" class="navlink" style="text-align:center;">Contact Us</a>
<!-- Right Aligned -->
Design by <a href="http://grungyart.com" class="navlink" style="text-align:right;">Melicbot Entertainment</a>
hdshngout
08-01-2006, 12:20 AM
nope. it displays them as 1 big jumbled mess :\
http://img120.imageshack.us/img120/9219/footer2zj4.png
bourdelson
08-01-2006, 12:24 AM
If you're using tables, have you tried to put each portion [Copyright thing aligned to the left, stuff aligned to the center and then the stuff aligned to the right] in separate tds, and then inside of the td put style="text-align:whatever;"?
hdshngout
08-01-2006, 12:50 AM
well, the original layout was in tables, but im trying to do it in xhtml/css only. Its murder. lol
bourdelson
08-01-2006, 12:58 AM
Ah, I see.
There's probably a better alternative than this, but have you thought about giving each link margins or padding to just align them in that manner? Or putting each link in a separate div and then doing text-align in the div tag?
J to the izzosh
08-01-2006, 02:37 AM
Well, I'm not usually one to just give away code - I much prefer to give directions and have people figure it out - but since this is something that I had to figure out instead of just reciting an answer, I'll let you off this time for feedback purposes. ;)
The below method will only work reliably across the major browsers when in standards-compliant mode, so I hope you're using XHTML 1.0 strict or 1.1. It is not the only method, but only the one that I prefer. I went with an unordered list for the semantich value and also to take advantage of the block-level display of the <li> elements. Because block level elements are automatically preceded and followed by line breaks, I used negative margins to position them on the same line. This allowed me to avoid the use of the float property which separates content from the normal document flow. 0 and auto margins were also used to position the elements horizontally: 0 left margin with auto right to position on far left, auto left and right to center, and 0 right with auto left to position on far right. Each <li> element must have an absolute width, or the auto margin will fail to calculate. The line height of each <li> element was set to match the height of their content box to better center the text vertically.
Below is the CSS I used with the accompanying HTML. It works consistently among Fx 1.x, IE 6.x, and Opera 9.00. If you're curious about earlier versions, I'm afraid you'll have to test them yourself.
body { margin:0; }
#footer {
width:100%;
margin:0;
padding:0;
list-style-type:none;
border-top:solid 10px rgb(207,220,230);
border-bottom:solid 10px rgb(207,220,230);
background-color:rgb(48,130,191);
}
#footer li {
font-size:10pt;
font-family:verdana,sans-serif;
color:white;
height:25px;
line-height:25px;
text-align:center;
}
#footer li a { color:rgb(255,255,255); text-decoration:none; }
#footer li a:hover { color:rgb(207,220,230); }
#footer .copyright { width:250px; margin:0 auto 0 0; }
#footer .footnav { width:300px; margin:-25px auto 0; }
#footer .designer { width:250px; margin:-25px 0 0 auto; }
<ul id="footer">
<!-- Left Aligned -->
<li class="copyright">
Copyright © 2006 <a href="http://mindlesstrio.com">Mindless Trio</a>
</li>
<!-- Center Aligned -->
<li class="footnav">
<a href="http://">Site Map</a> |
<a href="http://">Terms of Use</a> |
<a href="http://">Contact Us</a>
</li>
<!-- Right Aligned -->
<li class="designer">
Design by <a href="http://grungyart.com">Melicbot Entertainment</a>
</li>
</ul>
Here is a sample (http://jfweb.fastmail.fm/3align/navbar_test.htm) that I've uploaded.
hdshngout
08-02-2006, 04:06 AM
Ive got it working. Sorry, i forgot to edit this post. I simply changed my footer to
<div id="footer">
<div id="footer_left">
Copyright © 2006 <a href="http://mindlesstrio.com"
class="navlink">Mindless Trio</a></div>
<div id="footer_center">
<a href="http://" class="navlink" style="text-align:center;">Site Map</a>
<a href="http://" class="navlink" style="text-align:center;">Terms of
Use</a> <a href="http://" class="navlink">Contact Us</a></div>
<div id="footer_right">Design by <a href="http://grungyart.com"
class="navlink">Melicbot Entertainment</a></div>
</div>
then in my css
#footer_left {
float: left;
text-align: left;
width: 32%;
padding-left: 16px;
line-height: 18px;
}
#footer_center {
float: left;
text-align: center;
width: 34%;
line-height: 18px;
}
#footer_right {
float: left;
text-align: right;
width: 32%;
line-height: 18px;
}
J to the izzosh
08-02-2006, 04:18 AM
And to think that I'd originally abandoned float because I couldn't make 100% width when dividing it into three sections as 3 x 33% never quite added up. I can't believe that I didn't think to just use slightly different values that would add up, like you did (32-34-32), instead of going for even division. Sometimes I wonder about how well my head actually works. Oh well, I prefer what I ended up with for its semantical value :stickout:, but congratulations on finding your solution.