Suppose I've got HTML with the following in it:
>
<ul class="navigati on">
<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
