#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    96
    Rep Power
    11

    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. #2
  3. |<.+#f@#+.&.|
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    3,009
    Rep Power
    1224
    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.

IMN logo majestic logo threadwatch logo seochat tools logo