Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
CSS > left and right in same <li> ... !?
On this page at the left side the (nav)list where I want the numbers (1,2,…) lining up to the left and the words (ien, twa,…) to the right. Is that possible? And how?
<ul id="nav">
<li class="een"><a href="een">1 <span>ien</span></a></li>
<li class="twee"><a href="twee">2 <span>twa</span></a></li>
<li class="drie"><a href="drie">3 <span>trije</span></a></li>
<li class="vier"><a href="vier">4 <span>fjouwer</span></a></li>
<li class="vijf"><a href="vijf">5 <span>fiif</span></a></li>
<li class="empty"> </li>
<li class="publicaties"><a href="publicaties">publicaties</a></li>
<li class="biografie"><a href="biografie">biografie</a></li>
</ul>Last edited by RedFox (2009-03-17 10:25:07)
Offline
Re: CSS > left and right in same <li> ... !?
You can just float the span right:
ul#nav li a span
{
display: inline;
text-align: right;
float: right;
}Offline
Re: CSS > left and right in same <li> ... !?
BTW – you have a couple of validation errors in your CSS. FYI!
Offline
Re: CSS > left and right in same <li> ... !?
jstubbs:
Offline
Re: CSS > left and right in same <li> ... !?
Mmmm. Worked for me using CSSEdit. What about: #nav li.negentig a span {float: right;}?
Offline
#6 2008-11-24 22:21:21
- els
- Moderator
- From: The Netherlands
- Registered: 2004-06-06
- Posts: 7,458
Re: CSS > left and right in same <li> ... !?
It works if you add another span, like this:
<li class="zestig"><a href="1960-1969"><span class="links">1</span> <span class="rechts">ien</span></a></li>and this in the CSS (but after all other navigation styling):
ul#nav li a span.links {float: left;}
ul#nav li a span.rechts {float: right;}Last edited by els (2008-11-24 22:21:44)
Offline
Re: CSS > left and right in same <li> ... !?
Bingo … thanks to all!
Last edited by RedFox (2008-11-25 09:06:28)
Offline
Re: CSS > left and right in same <li> ... !?
Glad it worked. Lovely looking site, by the way ;-)
Offline