Topic: dynamically distributing spans

hello,
i have a horizontal navigation bar like this:

<div class="blackbar">
<span class="blackbar-text"><a href="a.php">hello</a></span>
<span class="blackbar-text"><a href="b.php">world</a></span>
<span class="blackbar-text"><a href="v.php">how are</a></span>
<span class="blackbar-text"><a href="a.php">you</a></span>
</div>

the style for it looks like this

.blackbar
{	
	text-align: center;
	vertical-align: middle;
}
.blackbar-text
{
	padding: 0px 20px;

}

now this distributes the elements on the navigation bar nicely.

but if the window is resized so that its width is smaller than the width of the bar, the elements start to wrap to the next line.
is there a possibility to not have them wrap to the next line, but to have them get closer to each other? make the space between them narrower depending on the available width?

thanks!

IIUC you want the items to have a fluid width. On top of my head, I can't think of a way to do that just with CSS

Also, a UL LI would be better suited for a navigation, and the class "blackbar-text" is probably unecessary : you can use ul.blackbar > li to style the children of .blackbar

Yeah, I don't think this can be done with CSS alone. You'd have to detect the size of the browser window and then recalculate the spacing based on that, and that can't be done in CSS.

Unless, of course, there's an outside-the-box solution that I'm just not thinking of.


___________________________
Suho: www.liminality.org | Cell 270 | Sig Rotator | the Fellowship of Sup

yes you understood correctly.

too bad, that this can't be done with css easily.

thanks anyways!

quote:

---

Suho1004 said:
You'd have to detect the size of the browser window and then recalculate the spacing based on that, and that can't be done in CSS.

---

Actually, it can, with media queries. Supported by Opera 9+, Safari 3 and Firefox 3.1.

GRUMBLE, I don't really have a good solution either. You can sort of achieve fluidness with display: table-cell, but it's hard to get right. I don't think IE 7 support that either (maybe IE 8 does).

HZR: Yeah, but that's still in the candidate phase, right?

yes, but if it's supported in 2-3 rendering engines out of the major 4, it's worth considering as a progressive enhancement.

For as much as I hate IE, though, you can't really ignore it. Although if it at least won't break in IE, I suppose it's worth a shot.

It sure would be nice to have access to that sort of information, though.

quote:

---

if it at least won't break in IE

---

That's the point of the whole progressive enhancement approach. Make things accesible and work even in the lamest browser you can find, and add "bells and whistles" where and when possible.

HZR: I haven't played much with display:table-cell; but I'm not sure how to make the elements wrap. Would a simple min-width:XXXem; or white-space:nowrap; do the trick ?

quote:

---

Suho1004 said:
HZR: Yeah, but that's still in the candidate phase, right?

---

Yeah, it's a candidate recommendation, basically meaning that they want input from implementors. The spec is pretty stable at this point.

quote:

---

poi said:
HZR: I haven't played much with display:table-cell; but I'm not sure how to make the elements wrap. Would a simple min-width:XXXem; or white-space:nowrap; do the trick ?

---

The elements won't wrap as it's displayed as a table. Unless I'm misunderstanding you.

(Edited by HZR on 09-25-2008 12:19)

That's exactly what I was wondering. I thought that maybe having a min-widht:XXXem; on the elements would make them wrap if the container is too narrow to fit them all.

And float:left; will probably make the elements go bonkers.