www.webdeveloper.com
Results 1 to 6 of 6

Thread: What is wrong with this menu?

Hybrid View

  1. #1
    Join Date
    Oct 2012
    Posts
    55

    What is wrong with this menu?

    Has me stumped but since I added to my page everything below it gets sucked upwards and top margin or padding does not help it.
    Maybe there is something wrong, it has me stumped.

    I have various images i the "a" link as a background image, simple tab menu with images.


    Code:
    ul#mainnav{float:right;
    	         margin:0px;
    	         padding:0px;
    		 list-style-type:none;
    	         text-transform:uppercase;
    	         background:#000033;
    	         font-family:Helvetica,Arial,Verdana,sans-serif;
                     }
    
    ul#mainnav li {
        float:left;
        display: inline;
        }
    
    ul#mainnav li a {
        width:192px;
        height: 30px;
        display: block;
        background-position:center;
        color: #ffffff;
        text-decoration: none;
        font-size: 11px;
        padding-top: 10px;
        text-align: center;
        font-weight: bold;
       }
    
    #current1 a {background-image: url('tab1.png');color: #ffffff;}
    #current2 a {background-image: url('tab2.png');color: #ffffff;}
    #current3 a {background-image: url('tabhome.png');color: #ffffff;}		
    #current4 a {background-image: url('tabhome.png');color: #ffffff;}
    #current5 a {background-image: url('tabhome.png');color: #ffffff;}

  2. #2
    Join Date
    Nov 2012
    Posts
    4
    The "float" attribute of an element causes this. I don't exactly know why, but it's caused me to cease using "float" altogether. There was a site I found ages back that offered a fix for the issue, but I can't seem to find it now.

    All I can suggest for now would be to use the "clear" attribute.

    Example:
    Code:
    ul#mainnav li 
    {
    float:left;
    display: inline;
    clear: both;		
    }

  3. #3
    Join Date
    Nov 2012
    Posts
    8
    yes must clear

    mjwebsolutionshttp://www.themjwebsolutions.com

  4. #4
    Join Date
    Sep 2008
    Location
    Dallas
    Posts
    154
    Learn how to use clear and float effectively. They're vital to a good developer.

  5. #5
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    Floats are tricky.

    CSS FLOAT property (similar to position: absolute) partially takes element out of normal HTML flow of elements.

    See, for instance,
    http://coding.smashingmagazine.com/2...loat-property/
    Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements
    http://css-tricks.com/all-about-floats/
    http://coding.smashingmagazine.com/2...u-should-know/
    http://www.w3schools.com/css/css_float.asp

  6. #6
    Join Date
    Oct 2012
    Posts
    55
    Thanks

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