|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
December 12th, 2003, 08:06 PM
|
|||
|
|||
|
CSS, Menu using UL (lists), border
Hello all,
I have a menu within a tabel that's made using html lists. I'm using something like this to draw a litle bellow each element (li) to improve separation from the other elements - I'm not using any bullets. Code:
border-bottom: 1px solid color The problem is the following: If the menu consists of A, B and C it shows: A ___ B ___ C ___ Where __ is that border-bottom property. But then the table closes and I get a ___ real near the table border which is not great. I would like to know if there's a way to do this, taking out the border of that last one? My current fix was to creat a similar class in the .css file where I've put all properties of the except the border-bottom one. the code is then something like this: Code:
<ul> <li>A</li> <li>B</li> </ul> <ul> <li>C</li> </ul> Any other way? Thanks in advance.
|
|
#2
December 13th, 2003, 09:06 AM
|
||||
|
||||
|
Code:
css:
li {
border-bottom:1px solid #000000;
}
li.last {
border-bottom:none;
}
html:
<ul>
<li>punkt</li>
<li>punkt</li>
<li class="last">punkt</li>
</ul>
this one way of doing it. by assigning a class to the last li element. you could also use Adjacent sibling selectors, which works in standard compliant browsers, though then you have to know the number of menu elements. Code:
css:
li {
border-bottom:1px solid #000000;
}
li + li + li {
border-bottom:none;
}
html:
<ul>
<li>punkt</li>
<li>punkt</li>
<li>punkt</li>
</ul>
Last edited by Akh : December 13th, 2003 at 09:08 AM.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS, Menu using UL (lists), border |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
