SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Horizontal flyout menu problem - Driving me MAD!!

    I have been working with a flyout menu for a client and I am not happy about it's expansion problem - for example if I increase the text size using control+ the menu eventually covers the content text
    This is the URL of the sitehttp://www.wholisticnutrition.co.uk

    this is the CSS coding
    Code CSS:
    #nav, #nav ul { /* all lists */
    		padding: 0;
    		margin: 0;
    		list-style: none;
    		float : left;
    		width : 80%;
    	}
     
    #nav li { /* all list items */
    		position : relative;
    		float : left;
    		line-height : 2em;
    		margin-bottom : -1px;
    		width: 80%;
    		border-bottom: 1px solid #810000;
    	    text-decoration: none;
    	}
     
    #nav li ul { /* second-level lists */
    		position : absolute;
    		left: -999em;
    		margin-left : 11.05em;
    		margin-top : -1.35em;
    	}
     
    #nav li ul ul { /* third-and-above-level lists */
    		left: -999em;
    	}
     
    #nav li a {
    		width: 11em;
    		w\idth : 10em;
    		display : block;
    		color : #810000;
    		font-weight : bold;
    		text-decoration : none;
    		background-color : #DBDEA6;
    		border : 1px solid #810000;
    		padding : 0 0.5em;
    	}
     
    #nav li a:hover {
    		color : #fff;
    		background-color :  #AFA877;
    	}
     
    #nav li:hover ul ul,  #nav li.sfhover ul ul {
    		left: -999em;
    	}
     
    #nav li:hover ul, #nav li li:hover ul,  #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
    		left: auto;
    	}

    The website is a fixed width of 800px wide, is there a method of preventing the menu from growing over the whole page at the largest enlargement.
    Also I seemed to have left out some Javascript so that the menu is usable in MS IE5 and 6 - This is the javascript
    Code JavaScript:
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);

    Where would I put this in context to the menu or does it go in the header with the following
    Code JavaScript:
    <script type="text/javascript" src="..... .js"></script>
    or some thing like this
    Code JavaScript:
    type="text/javascript">
    </script>
    - I'm still trying to get my head around javascript - I try to build totally CSS sites without the need for hack or other types of scripts.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's because the width of your nav items is in ems and also because you're mixing &#37; and em values on widths/padding/margins. For that layout, you're better off just giving the left column a pixel width and using pixels for everything else in the left column too.

    Also, you don't need to do this: #outerWrapper #contentWrapper #leftColumn1; specifying just #leftColumn1 is all you need in your case (and most probably likewise anywhere else through your layout where you've specified numerous IDs).

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2007
    Location
    Ryde, Isle of Wight, UK
    Posts
    116
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Tyssen,
    thanks for the advice, it works very well up to a zoom factor of 200%, above this the page starts to disintegrate.
    I will talk to my client about having switch style sheets that should help with zoom factors above this.


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
  •