Topic: dynamically distributing spans Pages that link to <a href="https://ozoneasylum.com/backlink?for=30560" title="Pages that link to Topic: dynamically distributing spans" rel="nofollow" >Topic: dynamically distributing spans\

 
Author Thread
GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

IP logged posted posted 09-23-2008 22:43 Edit Quote

hello,
i have a horizontal navigation bar like this:

code:
<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

code:
.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!

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-24-2008 09:14 Edit Quote

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

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 09-24-2008 13:22 Edit Quote

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

GRUMBLE
Paranoid (IV) Mad Scientist

From: Omicron Persei 8
Insane since: Oct 2000

IP logged posted posted 09-24-2008 14:44 Edit Quote

yes you understood correctly.

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

thanks anyways!

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 09-25-2008 00:43 Edit Quote
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).

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 09-25-2008 01:54 Edit Quote

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

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-25-2008 08:00 Edit Quote

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

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 09-25-2008 10:29 Edit Quote

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.

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-25-2008 11:04 Edit Quote
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 ?

HZR
Paranoid (IV) Inmate

From: Cold Sweden
Insane since: Jul 2002

IP logged posted posted 09-25-2008 12:18 Edit Quote
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)

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 09-25-2008 13:53 Edit Quote

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.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu