CSS (minor help)

john555 · #1 Sep 5th, 2006, 21:32

Hi guys,

got the following css code that works fine, but i just dont to seem to able to have a space betweeh each sub-menu title. i.e.

Main-menu Ttitle: INFO
Sub-menu Title: About us
Job Oppertunites

what i want is space between "About us" and "Job Oppertunities". How do i do this?

PHP: Select all


<style type="text/css"> 


#nav, #nav ul { /* all lists */ 
    padding: 0; 
    margin:0; 
    list-style: none; 
    line-height: 1; 
} 

#nav a { 
    display: block;/*display sub below main menu*/ 
    width: 8em; 
} 

#nav li { /* all list items */ 
    float: right; 
    width: 6em; 
     
} 

#nav li ul { /* second-level lists */ 
    position: absolute; /*hide sub content, display whem mouse over*/ 
    background: transparant; 
    width: 7em; 
    font-size:12px; 
    list-style-type: none; 
    left: -999em; 
     
} 

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ 
    left: auto; 
} 

#content { 
    clear: left; 
}

cheers

ukgeoff · #2 Sep 5th, 2006, 22:36

It would be helpful to see the html markup but I'm guessing you need to apply; margin-bottom or padding-bottom somewhere.

Ryan Fait · #3 Sep 6th, 2006, 00:24

You shouldn't be using ems for widths unless your intending for an elastic layout. If anything, use em for text size, but not block elements.

john555 · #4 Sep 6th, 2006, 18:17

thanks for the help guys. Indeed the solution was with the padding, but after having fixed that i am having another problem here. when i move mu mouse over the drop down menu it disappears after reaching half of the menu. here is the link to see for yourself www.webdelux.co.uk

PHP: Select all


 
<style type="text/css">

#nav, #nav ul { /* all lists */
 margin:0;
 list-style: none;
 line-height: 1;
}
#nav a {
 display: block;/*display sub below main menu*/
 width: 9em;
 padding:3px;
}
#nav li { /* all list items */
 float: right;
 width: 6em;
 
 
}
#nav li ul { /* second-level lists */
 position: absolute; /*hide sub content, display whem mouse over*/ 
 width: 9em;
 font-size:12px;
 list-style-type: none;
 left: -999em;
 
}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
 left: auto;
 
}
#content {
 clear: left;
}
</style>
 
 
 
 
<table align="center" width="796"  background="toph3.jpg" cellspacing="0" border="0">
  <!--DWLayoutTable-->
  <!--arrange the links in images-->
  <td height="52">
       <ul id="nav">
           <li>
   <font face="Tahoma" size="2">
   <a href="#" style="text-decoration: none; font-weight:700">
   <font color="#FF9966">SOLUTIONS</font></a></font>
  <ul>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Development</font></a></li>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Design</font></a></li>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">E-Commerce</font></a></li>
   
  </ul>
 </li>
 <li>
   <font face="Tahoma" size="2">
   <a href="#" style="text-decoration: none; font-weight:700">
   <font color="#FF9966">PORTFOLIO</font></a></font>
  <ul>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Development</font></a></li>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Web Design</font></a></li>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">E-Commerce</font></a></li>
   
  </ul>
 </li>
<li>
   <font face="Tahoma" size="2">
   <a href="#" style="text-decoration: none; font-weight:700">
   <font color="#FF9966">ABOUT US</font></a></font>
  <ul>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">About</font></a></li>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">Objective</font></a></li>
   <li><a href="#" style="text-decoration: none; font-weight:700">
            <font color="#FF9966">E-Commerce</font></a></li>
   
  </ul>
 </li>
   
      </ul>
     </div>
 
   </td>
  <td align="right">&nbsp;</td> 
</table>

cheers

john555 · #5 Sep 6th, 2006, 18:24

guys sorry got it fixed....thanks

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Minor IE 6 Problem	mikey	Web Page Design	7	Jun 20th, 2007 08:45
2 minor problems need sorting	AdRock	Web Page Design	2	Mar 26th, 2007 22:12
Minor design Flash needed	Anonymous User	Flash & Multimedia Forum	0	Dec 7th, 2004 20:43

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS (minor help)