469,133 Members | 1,440 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,133 developers. It's quick & easy.

Spreading list contents across full width

Suppose I've got HTML with the following in it:

<ul class="navigation">
<li><a href="chapter1.html" title="Chapter 1">Previous</a></li>
<li><a href="./">Contents</a></li>
<li><a href="chapter3.html" title="Chapter 3">Next</a></li>
</ul>

I'd like to style this such that all three links appear on the same
line, with Prev at the far left, Contents in the center, and Next at the
far right. I'm looking for three (possibly) different solutions, in
fact: (1) a solution according to CSS 2.1 specifications, even if no
browser supports it; (2) a solution that works in relatively compliant
browsers like Firefox; and (3) a solution that works in everything
(except maybe IE 5.5 for Mac!).

I don't want to alter the HTML, and the styling should work for other
pages in the same hyper-document.

No, this isn't a homework assignment! I was trying to do this a couple
of days ago, and I couldn't find anything that worked.

David
Stardate 6901.6
Nov 25 '06 #1
7 6156
David Trimboli wrote :
Suppose I've got HTML with the following in it:

<ul class="navigation">
<li><a href="chapter1.html" title="Chapter 1">Previous</a></li>
<li><a href="./">Contents</a></li>
<li><a href="chapter3.html" title="Chapter 3">Next</a></li>
</ul>

I'd like to style this such that all three links appear on the same
line, with Prev at the far left, Contents in the center, and Next at the
far right. I'm looking for three (possibly) different solutions, in
fact: (1) a solution according to CSS 2.1 specifications, even if no
browser supports it; (2) a solution that works in relatively compliant
browsers like Firefox; and (3) a solution that works in everything
(except maybe IE 5.5 for Mac!).

Site navigation toolbar works without javascript support, without CSS
styling, with CSS support disabled.

<link rel="prev" href="chapter1.html" title="Chapter 1">
<link rel="contents" href="./" title="Contents">
<link rel="next" href="chapter3.html" title="Chapter 3">

W3C Quality Assurance tips for webmasters: Use <link>s in your document
http://www.w3.org/QA/Tips/use-links

Link Bars: How Link Relations Are Implemented (slightly outdated)
http://webcoder.info/reference/LinkBars.html

Most webpages at mozilla.org implement <link>s that way. For an example:

http://www.gtalbot.org/NvuSection/Gu...uSection5.html

For Firefox extension:
https://addons.mozilla.org/firefox/2933/

Gérard
--
remove blah to email me
Nov 25 '06 #2
Gérard Talbot wrote:
Site navigation toolbar works without javascript support, without CSS
styling, with CSS support disabled.

<link rel="prev" href="chapter1.html" title="Chapter 1">
<link rel="contents" href="./" title="Contents">
<link rel="next" href="chapter3.html" title="Chapter 3">
Er, well, yes, of course LINKs are good, but that's not what I'm asking
about. I'm looking for stying advice.

It doesn't have to be links. The question is just as valid if I wanted
to, say, have a Yes, No, and Maybe spread across one line:

<ul class="example">
<li>Yes</li>
<li>Maybe</li>
<li>No</li>
</ul>

How would I get them all on the same line with the Yes on the far left,
the No on the far right, and they Maybe in the middle?

David
Stardate 6902.8
Nov 26 '06 #3
Suppose I've got HTML with the following in it:
>
<ul class="navigation">
<li><a href="chapter1.html" title="Chapter 1">Previous</a></li>
<li><a href="./">Contents</a></li>
<li><a href="chapter3.html" title="Chapter 3">Next</a></li>
</ul>
Hi David,

I haven't got the *full* solution to this, however I have got something
that is fairly close without adding anything to your HTML.

Assuming the HTML above, I can get a rough version of what you want
that will work in IE6 and Firefox etc with the following stylesheet:

ul {
list-style:none;
display: block;
text-align: center;
margin: 0;
}

li {
display: inline;
width: 33%;
float: left;
}

Now this isn't the full solution as I stated because doing this gives
you white space to the left of "Prev" and to the right of "next" as
these items become centrally aligned within their own space. Also you'd
need to add some kind of clear after this or everything will try and
float around each other later on in the page.

However with the addition of a couple of attributes you can space the
left and right items out.

So your HTML would have to include an ID attribute for "prev" and one
for "next" and then the additional styles would just tweak the
alignment:

li#prev {
text-align: left;
}

li#next {
text-align: right;
}

This gives a pretty good approximation of what you are after though you
do have to add some extra attributes so isn't a "true" solution.

Which leads me to my final idea - using sibling selectors. This has
absolutely *NO* support in IE6 [and I'm not even certain whether this
works in IE7 - would be good to know actually if someone can test and
get back to us?].

I have tested this is FF1.5 and it works fine so I assume FF2 will be
cool too.

So we use the standard HTML you gave above, and the following
stylesheet:

ul {
display: block;
margin: 0;
}

li {
list-style: none;
display: inline;
width: 33%;
float: left;
}

li + li {
text-align: center;
}

li + li + li {
text-align: right;
}

So you can see that in the UL def, I can remove the text-align: centre
which now shifts everything back to the left of their containers. The
li+li selects the li that is next to an li already so this would select
the CENTRE and RIGHT LIs and apply center text alignment to them.

Finally the li+li+li selects the RIGHT LI element and because it has
higher specificity will override the text-align with a right alignment.

Whilst this has no IE support [response please if IE7 is good], it does
solve the question I think...

How's that? Any other ideas?

Cheers
AndrewF

Nov 26 '06 #4
AndrewF wrote:
>Suppose I've got HTML with the following in it:

<ul class="navigation">
<li><a href="chapter1.html" title="Chapter 1">Previous</a></li>
<li><a href="./">Contents</a></li>
<li><a href="chapter3.html" title="Chapter 3">Next</a></li>
</ul>

ul {
list-style:none;
display: block;
text-align: center;
margin: 0;
}

li {
display: inline;
width: 33%;
float: left;
}
Aha! Float 'em /all/ to the left! That's the key I was missing! I'd
fiddled with floating .navigation:first-child to the left and
..navigation:first-child + li + li to the right, but lack of support for
:first-child made it hard to test to see if I was on the right track.
(Firefox chose /every/ LI element as the first-child!) Floating
everything to the left and then text-aligning everything the way you
want makes much more sense.

[...]
So your HTML would have to include an ID attribute for "prev" and one
for "next" and then the additional styles would just tweak the
alignment:

li#prev {
text-align: left;
}

li#next {
text-align: right;
}

This gives a pretty good approximation of what you are after though you
do have to add some extra attributes so isn't a "true" solution.

Which leads me to my final idea - using sibling selectors. This has
absolutely *NO* support in IE6 [and I'm not even certain whether this
works in IE7 - would be good to know actually if someone can test and
get back to us?].

I have tested this is FF1.5 and it works fine so I assume FF2 will be
cool too.
It works find in Firefox 2.0. I haven't got IE 7 to test.
So we use the standard HTML you gave above, and the following
stylesheet:

ul {
display: block;
margin: 0;
}

li {
list-style: none;
display: inline;
width: 33%;
float: left;
}

li + li {
text-align: center;
}

li + li + li {
text-align: right;
}
[...]
How's that? Any other ideas?

Fantastic! Thanks, Andrew.

David
Stardate 6904.1
Nov 26 '06 #5
Hi David,

Glad I could be of help - very strangely, after doing all of this this
afternoon I was writing some code this afternoon for some page turning
nav and I've just lifted the lot.

I'm not sure what is going on with the :first-child selector in FF.
I've noticed that in 1.5 too, it seems to just use the same behaviour
as "element element" which in the case we're using above, gives you
all the LIs...

If someone is reading this and has IE7 it would be great for some
results posting as I'm not going to taint my dev machine *just* yet...

Cheers
AndrewF

Nov 26 '06 #6
In article <Tj***************@newsfe09.lga>,
David Trimboli <da***@trimboli.namewrote:
>AndrewF wrote:
>>Suppose I've got HTML with the following in it:

<ul class="navigation">
<li><a href="chapter1.html" title="Chapter 1">Previous</a></li>
<li><a href="./">Contents</a></li>
<li><a href="chapter3.html" title="Chapter 3">Next</a></li>
</ul>
...
>Aha! Float 'em /all/ to the left! That's the key I was missing! I'd
fiddled with floating .navigation:first-child to the left and
.navigation:first-child + li + li to the right, but lack of support for
:first-child made it hard to test to see if I was on the right track.
(Firefox chose /every/ LI element as the first-child!)
...
Just as an aside, it looks as if you confused this and really should have
been trying '.navigation li:first-child' as 'navigation:first-child' will
match if the _ul_ is the first-child in its container.

John
--
John P Baker
Nov 27 '06 #7
JP. Baker wrote:
Just as an aside, it looks as if you confused this and really should have
been trying '.navigation li:first-child' as 'navigation:first-child' will
match if the _ul_ is the first-child in its container.
Oh! Thanks, I really did have that wrong. As you can tell, I was
thinking .navigation:first-child meant "match the first child of any
element with the class 'navigation.'"

I guess I really can reference each element individually, with

..navigation li:first-child
..navigation li:first-child + li
..navigation li:first-child + li + li

David
Stardate 6907.0
Nov 27 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by Matthias Kaeppler | last post: by
3 posts views Thread by Brian Henry | last post: by
1 post views Thread by Steve Richter | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.