www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS horizontal list - stop long links from dissapearing

  1. #1
    Join Date
    Jan 2005
    Location
    UK
    Posts
    381

    CSS horizontal list - stop long links from dissapearing

    Hi Folks,

    Can someone please tell me how I can style up the following list so when the links wrap around they don't dissapear. I have attached a screenshot.

    HTML Code:
     <ul class="submenu">  
         <li class="page_item page-item-81"><a href="http://www.greatbridgepartnerships.co.uk/?page_id=81">Cordley Street ( GBPH )</a></li>
    
    <li class="page_item page-item-85"><a href="http://www.greatbridgepartnerships.co.uk/?page_id=85">Izons Road Surgery ( West Bromwich Partnerships )</a></li>
    <li class="page_item page-item-79"><a href="http://www.greatbridgepartnerships.co.uk/?page_id=79">Slater St Surgery ( GBPH )</a></li>
    <li class="page_item page-item-88"><a href="http://www.greatbridgepartnerships.co.uk/?page_id=88">Vicarage Road ( Oldbury Partnerships for Health)</a></li>
    <li class="page_item page-item-83"><a href="http://www.greatbridgepartnerships.co.uk/?page_id=83">Yew Tree Surgery ( GBPH )</a></li>
    <li class="page_item page-item-90"><a href="http://www.greatbridgepartnerships.co.uk/?page_id=90">Yew Tree Surgery ( Oldbury Partnerships for Health )</a></li>
      
     </ul>  
    CSS:

    Code:
    .submenu {
    	font-size:100%;
    	background-color: #CEDBEE;
    	width: 100%;
    	overflow: hidden;
    	padding: 5px 0;
    	margin: 0px auto;
    
    }
    
    
    
    .submenu li {
    	text-align:left;
    	list-style: none;
    	float: left;
    	border-right: 1px solid #999999;
    	margin: 0 -1em 0 1em
    	display: block;
    
    
    
    }
    
    
    
    .submenu li a {
    	color: #000000;
    	text-decoration: none;
    	display: block;
    	width:20em;
    	height: 1.5em;
    	line-height: 1.5em;
    	padding-left: 2em;
    	float: left;
    	font-weight: bold;
    }
    
    
    
    .submenu li a:hover {
    	color: #E1017B;
    	text-decoration: underline;
    
    
    
    }
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    Don't specify a height for .submenu li a
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles