Web Analytics Made Easy -
StatCounter CSS List menu - borders - CodingForum

Announcement

Collapse
No announcement yet.

CSS List menu - borders

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS List menu - borders

    Hi,

    I'm trying to create a simple menu, such as the one at http://css.maxdesign.com.au/listamatic2/vertical02.htm. In the example, the menu items are seperated by white space, thanks to the 1px margin below each <li>. However, I would like each item in my menu to be surrounded by a black box, so I added:

    border: 1px solid #000000;

    to the '#navcontainer a' element in the CSS and removed the margin.

    This works fine, except each menu item has a border below and above, so when combined, each item has a 2px line in between.

    How do I get it so there is only a single line? I tried using:

    border-bottom, border-left, border-right...

    but that means that the first list item (i.e. at the top) is missing it's line, and I can't see a way of adding it.

    Is there a way of specifying in CSS that I want a border-top, but only for the first <li> on the page?

    Hope this is clear enough!

    -------------------------------------

    I've progressed further, and now have an additional problem...

    I've got the following HTML and CSS:

    Code:
    /*Menu*/
    #menu ul {
    	margin: 0;
    	padding: 0;
    	list-style-type:none;
    }
    
    #menu li {
    	margin: 0px 0px 0px 0px;
    }
    
    #menu a {
    	display: block;
    	padding: 4px 6px 4px 6px;
    	color: #000000;
    	background-color:#D6D6CA;
    	text-decoration:none;
    	font-weight:bold;
    	width: 140px;
    	text-align:left;
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    }
    
    #menu a:link {
    	color: #000000;
    	background-color:#D6D6CA;
    }
    
    #menu a:visited {
    	color: #000000;
    	background-color:#D6D6CA;
    }
    
    #menu a:hover {
    	color: #FFFFFF;
    	background-color:#009900;
    }
    
    #menu a:active {
    	color: #FFFFFF;
    	background-color:#0000CC;
    }
    
    /*Selected*/
    #selectedMenu a:link {
    	color:#FFFFFF;
    	font-weight:bold;
    	background-color:#0000CC;
    }
    #selectedMenu a:visited {
    	color:#FFFFFF;
    	font-weight:bold;
    	background-color:#0000CC;
    }
    #selectedMenu a:hover {
    	color:#FFFFFF;
    	font-weight:bold;
    	background-color:#009900;
    }
    #selectedMenu a:active {
    	color:#FFFFFF;
    	font-weight:bold;
    	background-color:#0000CC;
    }
    
    /*Submenu*/
    #menu ul ul a {
    	display: block;
    	padding: 4px 6px 4px 6px;
    	text-decoration:none;
    	font-weight:normal;
    	width: 140px;
    	text-align:left;
    	border-bottom: 1px solid #000000;
    	border-left: 1px solid #000000;
    	border-right: 1px solid #000000;
    }
    
    #menu ul ul a:link {
    	color: #000000;
    	background-color:#D6D6CA;
    }
    
    #menu ul ul a:visited {
    	color: #000000;
    	background-color:#D6D6CA;
    }
    
    #menu ul ul a:hover {
    	color:#FFFFFF;
    	background-color:#009900;
    }
    
    #menu ul ul a:active {
    	color:#FFFFFF;
    	background-color:#0000CC;
    }
    
    /*Selected Submenu*/
    #selectedSubmenu a:link {
    	color:#FFFFFF;
    	font-weight:normal;
    	background-color:#0000CC;
    }
    #selectedSubmenu a:visited {
    	color:#FFFFFF;
    	font-weight:normal;
    	background-color:#0000CC;
    }
    #selectedSubmenu a:hover {
    	color:#FFFFFF;
    	font-weight:normal;
    	background-color:#009900;
    }
    #selectedSubmenu a:active {
    	color:#FFFFFF;
    	font-weight:normal;
    	background-color:#0000CC;
    }
    PHP Code:

    <div id="menu">
        <
    ul id="">
            <
    li id=""><a href="#" id="">ffsfgfd</a></li>
            <
    ul id="">
                <
    li id="selectedSubmenu"><a href="#" id="">ffsfgfd</a></li>
                <
    li id=""><a href="#" id="">ffsfgfd</a></li>
                <
    li id=""><a href="#" id="">ffsfgfd</a></li>
            </
    ul>
            <
    li id=""><a href="#" id="">ffsfgfd</a></li>
            <
    li id="selectedMenu"><a href="#" id="">ffsfgfd</a></li>
            <
    li id=""><a href="#" id="">ffsfgfd</a></li>
        </
    ul>
    </
    div
    - the overall aim is there are 4 CSS groups - root menu (normal or selected) and submenu (normal or selected). Each 'should' be contained in a black box.

    In IE, the boxes render correctly, but in Firefox, the 'border-bottom' only seems to take effect every second line (or thereabouts).

    Also, the 'selectedSubmenu' style doesn't seem to fire at all.

    Would someone know what I'm doing wrong? I'd say I'm not doing the styles correctly, or if (somehow) I am, is there a way around it?!

    Many thanks.
    Last edited by member101; Jul 29, 2005, 12:17 PM. Reason: Update

  • #2
    Look at my example here http://dwight.tendirect.com/hhelper/...toys/menu2.htm it will solve your problem and there is no JavaScript in it.
    Master Newbie http://dwightstegall.com/

    Comment


    • #3
      Thanks for that. I was told before though that lists were a better way to go than tables for what I was doing, but your way seems just as easy.

      Any ideas why my attempt didn't work though? Especially why the 'selectedSubmenu' style doesn't work on the 2nd level when it works fine on the first level.

      Comment

      Working...
      X