SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict richtestani's Avatar
    Join Date
    Nov 2003
    Location
    Bridgeport
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    List Inheritance Problems

    Im working on a nested menu for a drop menu, the nested menu inherits all of the parent menu's properties - but also multiplies them on some properties.

    My font-size for body is set to 62.5%, so I am working with em sizes throughout. So the child menu is twice as big as the parent - is this supposed to be like this? I know em is relative size so it may be that it works like this.

    One main issue I am having is controlling the list element, for some reason any rule I applu doesn't seem to do much or what I am trying to achieve.

    I want the list to be about 20px high with about 2px padding, but it keeps the height of the parent menu no matter what.

    Any ideas? Thanks

    HTML:
    Code:
    <div id="mainmenu">
    <ul>
    <li><img src="/assets/templates/ronvil/images/attorneys_at_law.png"></li>
        <li class="active">
    	<span>Home</span>
    	
    </li>
    <li id="main12"><a href="/areas_of_practice.html" title="Areas of Practice" >Areas of Practice</a></li>
    <li id="main2"><a href="/About_the_firm.html" title="About the Firm" >About the Firm</a></li>
    <li id="main13"><a href="/cases_results.html" title="Case Results" >Case Results</a></li>
    <li id="main14" class="last"><a href="/contact.html" title="Contact Us" >Contact Us</a></li>
    
        <li><ul id="dropMenu">
    <li id="drop4"><a href="/erbs_palsy.html" title="New York Erb's Palsy Lawyer -- Information and Support on Medical Malpractice" >Erb's Palsy</a></li>
    <li id="drop5"><a href="/cerebral_palsy.html" title="Cerebral Palsy Information and Support -- New York Medical Malpractice Lawyers" >Cerebral Palsy</a></li>
    <li id="drop6"><a href="/medical_malpractice.html" title="New York Medical Malpractice, Hospital Malpractice Lawyers -- Ronemus & Villensky" >Medical Malpractice</a></li>
    <li id="drop26"><a href="/traumatic_brain.html" title="Traumatic Brain Injury (TBI) -- New York Personal Injury Lawyers" >Traumatic Brain Injury</a></li>
    <li id="drop8"><a href="/lead_poisoning.html" title="Lead Exposure Legal Support -- New York Personal Injury Lawyers" >Lead Poisoning</a></li>
    <li id="drop11"><a href="/construction_accidents.html" title="Construction Accident and Injury Information -- New York Personal Injury Lawyers" >Construction Accidents</a></li>
    <li id="drop15"><a href="/civil_rights_violation.html" title="New York Civil Rights Violations -- Personal Injury Lawyers" >Civil Rights Violations</a></li>
    <li id="drop16"><a href="/police_assault_abuse.html" title="Police Assault and Abuse Information  -- New York Personal Injury Lawyers" >Police Assaults or Abuse</a></li>
    <li id="drop62" class="last"><a href="/motor_vehicle_accidents.html" title="New York Auto Accident, Car Accident, Personal Injury Lawyers" >Motor Vehicle Accidents</a></li>
    
    </ul></li>
    </ul>
    </div>
    CSS:
    Code:
    #mainmenu {
    	position: relative;
    	height: 60px;
    	top: 76px;
    	width: 986px;
    	margin: 0 auto;
    	background: url(../images/mainmenu_bg.png) no-repeat;
    }
    
    #mainmenu ul {
    	margin-left: 10px;
    }
    
    #mainmenu ul li, #mainmenu ul li.active {
    	margin-left: 20px;
    	margin-right: 20px;
    	font: small-caps 300 2.2em/32px Georgia, serif;
    	font-weight: 400;
    }
    
    #mainmenu ul li.active {
    	font-weight: 600;
    	padding-right: 4px;
    	padding-left: 4px;
    }
    
    #mainmenu ul li, #mainmenu ul li a {
    	display: block;
    	float: left;
    	color: black;
    	height: 40px;
    }
    
    #mainmenu ul li a:hover {
    	color: white;
    }
    
    ul #dropMenu{
    	width: 200px;
    	position: absolute;
    	top: 32px;
    	left: 250px;
    }
    
    ul #dropMenu li a {
    	display:block;
    	width: 190px;
    	font-size: 1.0em;
    	background-color: white;
    	border: 1px solid black;
    }
    Thank you!
    Rich
    RichTestani
    -------------------------------
    http://www.junkdepot.com
    http://www.rareoopdvds.com | The Movie Poster Site

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    Here's a simplified version of your menu and some simplified selectors that you can use to style the different elements.
    Code:
    <ul id="mainmenu">
      <li><img src="/assets/templates/ronvil/images/attorneys_at_law.png" alt="" /></li>
      <li class="active"><span>Home</span></li>
      <li><a href="/areas_of_practice.html" title="Areas of Practice">Areas of Practice</a></li>
      <li><a href="/About_the_firm.html" title="About the Firm" >About the Firm</a></li>
      <li><a href="/cases_results.html" title="Case Results" >Case Results</a></li>
      <li><a href="/contact.html" title="Contact Us" >Contact Us</a></li>
        <ul>
          <li><a href="/erbs_palsy.html" title="New York Erb's Palsy Lawyer -- Information and Support on Medical Malpractice" >Erb's Palsy</a></li>
          <li><a href="/cerebral_palsy.html" title="Cerebral Palsy Information and Support -- New York Medical Malpractice Lawyers" >Cerebral Palsy</a></li>
          <li><a href="/medical_malpractice.html" title="New York Medical Malpractice, Hospital Malpractice Lawyers -- Ronemus &amp; Villensky" >Medical Malpractice</a></li>
          <li><a href="/traumatic_brain.html" title="Traumatic Brain Injury (TBI) -- New York Personal Injury Lawyers" >Traumatic Brain Injury</a></li>
          <li><a href="/lead_poisoning.html" title="Lead Exposure Legal Support -- New York Personal Injury Lawyers" >Lead Poisoning</a></li>
          <li><a href="/construction_accidents.html" title="Construction Accident and Injury Information -- New York Personal Injury Lawyers" >Construction Accidents</a></li>
          <li><a href="/civil_rights_violation.html" title="New York Civil Rights Violations -- Personal Injury Lawyers" >Civil Rights Violations</a></li>
          <li><a href="/police_assault_abuse.html" title="Police Assault and Abuse Information  -- New York Personal Injury Lawyers" >Police Assaults or Abuse</a></li>
          <li><a href="/motor_vehicle_accidents.html" title="New York Auto Accident, Car Accident, Personal Injury Lawyers" >Motor Vehicle Accidents</a></li>
        </ul>
      </li>
    </ul>
    Code:
    #mainmenu {
    	/* style the top level ul */
    }
    
    #mainmenu li {
    	/* style the top level li elements */
    }
    
    #mainmenu li.active {
    	/* style the top level li element with class="active" */
    }
    
    #mainmenu li a {
    	/* style the top level anchors */
    }
    
    #mainmenu li a:hover {
    	/* hover effect*/
    }
    
    #mainmenu ul {
    	/* style the submenu ul */
    }
    
    #mainmenu ul li {
    	/* style the submenu li elements */
    }
    
    #mainmenu ul li a {
    	/* style the submenu anchors */
    }
    At the moment your structure of menu suggests that the submenu's belong to the contact menu item if this is not the case and they are just separate items then you could use two lists.
    Code:
    <ul id="mainmenu">
      <li><img src="/assets/templates/ronvil/images/attorneys_at_law.png" alt="" /></li>
      <li class="active"><span>Home</span></li>
      <li><a href="/areas_of_practice.html" title="Areas of Practice">Areas of Practice</a></li>
      <li><a href="/About_the_firm.html" title="About the Firm" >About the Firm</a></li>
      <li><a href="/cases_results.html" title="Case Results" >Case Results</a></li>
      <li><a href="/contact.html" title="Contact Us" >Contact Us</a></li>
    </ul>
    <ul id="secondmenu">
      <li><a href="/erbs_palsy.html" title="New York Erb's Palsy Lawyer -- Information and Support on Medical Malpractice" >Erb's Palsy</a></li>
      <li><a href="/cerebral_palsy.html" title="Cerebral Palsy Information and Support -- New York Medical Malpractice Lawyers" >Cerebral Palsy</a></li>
      <li><a href="/medical_malpractice.html" title="New York Medical Malpractice, Hospital Malpractice Lawyers -- Ronemus &amp; Villensky" >Medical Malpractice</a></li>
      <li><a href="/traumatic_brain.html" title="Traumatic Brain Injury (TBI) -- New York Personal Injury Lawyers" >Traumatic Brain Injury</a></li>
      <li><a href="/lead_poisoning.html" title="Lead Exposure Legal Support -- New York Personal Injury Lawyers" >Lead Poisoning</a></li>
      <li><a href="/construction_accidents.html" title="Construction Accident and Injury Information -- New York Personal Injury Lawyers" >Construction Accidents</a></li>
      <li><a href="/civil_rights_violation.html" title="New York Civil Rights Violations -- Personal Injury Lawyers" >Civil Rights Violations</a></li>
      <li><a href="/police_assault_abuse.html" title="Police Assault and Abuse Information  -- New York Personal Injury Lawyers" >Police Assaults or Abuse</a></li>
      <li><a href="/motor_vehicle_accidents.html" title="New York Auto Accident, Car Accident, Personal Injury Lawyers" >Motor Vehicle Accidents</a></li>
    </ul>
    And also what is with your first menu item? Is it the heading for the menu? If this is the case the use a heading
    Code:
    <h2>Attorneys at Law etc..</h2>
    <ul id="mainmenu">
      <li class="active"><span>Home</span></li>
      <li><a href="/areas_of_practice.html" title="Areas of Practice">Areas of Practice</a></li>
      <li><a href="/About_the_firm.html" title="About the Firm" >About the Firm</a></li>
      <li><a href="/cases_results.html" title="Case Results" >Case Results</a></li>
      <li><a href="/contact.html" title="Contact Us" >Contact Us</a></li>
    </ul>
    If you simplify your code you can think less - I think your font shorthand is incorrect.. but then I haven't quite figured out the correct format to use for font shorthand rules so it's possible it's right.. but that's probably where your setting the large font size.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So the child menu is twice as big as the parent - is this supposed to be like this? I know em is relative size so it may be that it works like this.
    If you set the relative font size of a list then of course the children will compound that size as the relationship is to the parent font-size. So if the parent list is 2.2 em then a nested child will be 2.2 times the size of the parent.

    Don't set the size like that on nested elements when you don't want them to compound. You could simply wrap the whole section in a div and apply the font-size to that main div and then there will be no compounding (unless you nest other divs of course.)

    Or alternatively set the nested lists to be 100&#37; of the parent which means they stay the same size.


Bookmarks

Posting Permissions

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