Forum Moderators: not2easy
I've been scouring the forums and google to try and find an answer for a problem I've managed to create for myself. I'm at the stage where I'm about to give up and reapproach the design, but I thought I'd see if anyone else can offer a solution.
Basically, I have a navigation bar for my site which is based on unordered-lists-as-navigation concepts. The basic layout looks a little like this, or is intended to:
__________________________________________
¦ {logo}...................................¦
¦__________________________________________¦
_____ _______ ______ ______ ______________
¦link ¦¦link 2 ¦¦link 3¦¦link 4¦¦..........¦
¦_____¦¦_______¦¦______¦¦______¦¦__________¦The problem I have is the bottom right panel; I need to find a way to fill the remaining space. I'm trying to keep the layout as fluid as possible - I don't currently know the width of the links, and I want to be able to allow a moderate amount of font scaling without breaking the layout entirely.
Experiments with background tricks I haven't yet been able to make work (I'm using strong borders with light coloured fills), and I've tried various combinations of floats, 100%'s, inlines, etc, all to no avail.
I've created a test-case of the code as it stands. Has anyone successfully attempted anything like this, or have any ideas? Or should I go back to the drawing board for my design?
PS: The below code should work in FF; I'm not yet at the stage of fixing the mistakes IE will introduce...
Cheers,
Matt
CSS
body {
margin: 0;
padding: 0;
margin-top: 20px;
}
#outer {
margin: 0 auto;
width: 712px;
}
#title-top {
width: 710px;
border: 1px solid black;
margin-bottom: 3px;
}
#title-nav {
display: inline;
}
#title-nav ul {
display: inline;
padding: 0px;
}
#title-nav li {
margin-right: -3px;
display: inline;
}
#title-nav li a {
padding: 3px;
border: 1px solid black;
font-size: 0.8em;
}
#title-filler div {
border: 1px solid;
padding: 3px;
font-size: 0.8em;
display: inline;
}
HTML (4.01 strict, validates with no errors)
<div id="outer">
<div id="title">
<div id="title-top">
</div>
<div id="title-nav">
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Another Item</a></li>
<li><a href="#">Third Item</a></li>
<li><a href="#">Fourth Item</a></li>
<li><a href="#">Fifth</a></li>
<li><a href="#">Sixth Longer Item</a></li>
<li id="title-filler"><div> </div></li>
</ul>
</div>
</div>
</div>
Thanks again,
Matt
[edited by: SuzyUK at 2:34 pm (utc) on May 23, 2008]
[edit reason] tried to fix ascii [/edit]
and style the ul or a parent of it (but they all seem to be inline (why?), so get one of them to be block)
Thanks for your suggestions; the UL and it's parent are inline because I was trying to force the whole thing left and use a float:right to solve the issue... unsuccessfully.
There's a weird issue - in Firefox, at least - if I style the UL or the parent DIV, the buttons themselves overflow the top and bottom of the styled area. I've managed to get the right combination to stop that happening - problem is, if I style the DIV or the UL - give it a background and a border - I end up with a missing border to the left of the what-was-a-filler area.
I don't think that method's a dead-end, though - it's just a matter of finding the right combination to make it work. I'm thinking of styling the whole bar - DIV or UL - with background and border, and then using :after to put a "border-space-border" image to the right of each <a>... if that makes any sense.
The :after element has some issues in some browsers, though, doesn't it?
Both solutions involve swa66's suggestion of changing the background/border of the parent element to suit.
Once I'd done that, for the first method I created a wide-but-short transparent gif. One side of the GIF had a 4-pixel, black-white-white-black stripe. I used margins and relative positioning so the <a> overlapped the containing LI/UL, then set the background on every element but the first. This created a fake border-space-border on the right of each element.
The upside is that I can create rollovers for each link using this method that impact the "borders" of each <A>... to an extent. The downsides? It doesn't scale well with text size changes, and the active area of each <A> now includes the gap between them.
#title-nav li a {
position: relative;
top: -1px;
margin-left: -1px;
padding: 3px;
background-image: url('border.gif');
background-repeat: repeat-y;
}
The second method I stripped back the GIF to just the border image. I manually created a DIV after each <A>, and set it's properties so it used the GIF as a background, and only it would overlap the containing UL/LI. This worked quite well, and it scales... better. The placing of the DIV can be handled by PHP, so that's neither here nor there. It limits my rollovers a little, though - I can only change background colours, not borders.
#split {
position: relative;
top: -1px;
background-image: url('border.gif');
background-repeat: repeat-y;
width: 4px;
display: inline;
padding-bottom: 4px;
}
<li><a href="#">Item</a><div id="split"> </div></li>
Anyway, I hope that helps someone. I'm actually debating even using either technique, and I'll probably go back to the drawing board for a simpler design.
Thanks all,
-m
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>ul{display:block; margin:0; padding:0; list-style-type:none; line-height:1.5em; overflow:hidden; background-color:red;}
li{display:inline; text-align:left; background-color:orange;}
a{padding:0.25em 0.75em; background-color:yellow;}
Background colors can be replaced by other colour and image combinations. You could also go for pixel defined dimensions if that's your preference, not that it really matters all that much...
[edited by: SuzyUK at 7:32 am (utc) on May 28, 2008]
[edit reason] fixed scroll [/edit]
