Take a look at it in different resolutions and you’ll see the problem: it’s all over the place. It displays close to the left margin in 800x600, almost centered in 1024x768, and shoved over to the right in 1280x1024. Ironically, I’d like it to display closer to what it does in the smallest display: left-aligned, with a small padding on the left to keep it off the left edge.
Here’s the CSS for the navbar:
#roundbar-blue {
clear:left;
float:left;
width:100%;
min-width: 700px;
max-width: 1200px;
background:#80c8ff url(../images/roundbar-blue.gif) 0 25% repeat;
font-family: "Liberation Sans", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
font-size: 90%;
border-bottom:1px solid #49a9ff;
overflow:hidden;
}
#roundbar-blue ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:89%;
text-align:center;
}
#roundbar-blue ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:100%;
}
#roundbar-blue ul li.first {
border-left:1px solid #49a9ff;
}
#roundbar-blue ul li.last {
border-right:1px solid #99d8ff;
}
#roundbar-blue ul li a {
display:block;
margin:0;
padding:.8em .8em;
color:#29527a;
text-decoration:none;
border-left:1px solid #99d8ff;
border-right:1px solid #49a9ff;
line-height:1.3em;
}
#roundbar-blue ul li.active a,
#roundbar-blue ul li.focus a {
background:url(../images/roundbar-blue.gif) 0 75% repeat;
font-weight:bold;
}
#roundbar-blue ul li a:hover {
background:url(../images/roundbar-blue.gif) 0 75% repeat;
color: #FDF5E6;
text-decoration: underline;
top: 0;
}
#roundbar-blue ul li a span {
display:block;
}
It’s obvious that the problem centers around this line of code: left:89%; in the #roundbar-blue ul element, as well as right:100%; in the #roundbar-blue ul li element, but I’m not sure how to fix it, and I imagine other portions of the CSS may be affecting the alignment as well.
Hi Max,
I wasn’t trying to take your thread off topic but the relative positioning you had on the nav to begin with is what caused me to look further into the layout.
I know you like full width fluid layouts, I thought maybe you were using the layout just for the sake of the equal height columns it produces. If that was the case then there are much simpler ways to get equal columns while keeping a fluid layout. They allow you to eliminate all the relative positioning and extra divs used in the MJT.
Ralph, is it that simple of a fix? Sure seems like it on a quick test drive. I thought it had to be something more complex and evil. I think I’ve been up too long, I should have seen that right off the bat.
Thanks for the assist, and you are free to mock me at your leisure for not catching this myself.
Ray, I like those RP’d MJT layouts. (RP’d? No comprehendo, senor. Radical prostatectomy? Retinitis pigmentosa?) Their virtues outweigh their faults (for me), and I’ve made some fixes to the worst of their problems. I’ve never used that nav bar before (another MJT production, ironic considering I must have looked at fifty at least), and it has its issues also. Thanks for your fixes, I will try them. (Edit: Ray, they work nicely, and they do streamline the code. Nice job, sir.)
You know, one of these days I will jump into the deep water and start knocking these things out for myself.
Ralph, I got about nine hours of sleep, opened the site up again, and went, “Why in hell did I ever post this question? Duhhhhh!” So mock away, and when the ice cracks under both of us, you can use Hardy’s immortal line, “Now look what you made me do!”
Relative positioning, RP…maybe I didn’t get enough sleep after all.
I do like full width fluid layouts (elastic, actually, but that’s a debate for another thread, and I’m not sure these layouts qualify as purely elastic, though he makes them available in px, em, and % versions; I tend towards the ems). One of the biggest advantages to the MJT layouts is its equal height columns. Can you recommend simpler and more efficient fluid layouts that have equal heights? I’m used to dealing with MJT’s relative positioning and extra divs, but I’d prefer something more efficient and streamlined.
Can you recommend simpler and more efficient fluid layouts that have equal heights? I’m used to dealing with MJT’s relative positioning and extra divs, but I’d prefer something more efficient and streamlined.
Hi,
Since you prefer an em width sidebar then the easiest equal column method in that case would be Pauls’ AP Faux Columns. That allows you to set the actual sidebar flaot and AP faux div at the same em width.
You would have to do some tweaking to the min-max settings on these examples below but they convey the basic approach.
You are the man, Ray. Keep this up and Mrs Max will have you over for barbeque (or her new specialty, authentic red beans and rice). Warning, we don’t do that Texas red sauce “BBQ” stuff, this is the real Eastern NC vinegary stuff. Yum.
I’m going to stick with the MJT layout in this design, because with the help of you, Ralph, Alex, and other SP folks, I’ve beaten it into submission but you can believe I’ll try Paul’s and the CSS Labs layouts in future.
Sure seems like it on a quick test drive. I thought it had to be something more complex and evil. I think I’ve been up too long, I should have seen that right off the bat.
