SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overlapped DIV Issue

    Hello,

    http://surpassarcade.com/newtest/

    I'm trying to re-work my site to get rid of tables. I'm in for some long nights as this is pretty difficult until I get the hang of it.

    As you can see, the category menu is in the correct spot, but for some reason they are overlapping each other.

    You can see the source, but here is the css anyways:

    Code:
    /*nav bar */
    
    ul#navlist li {
    font-weight:400;
    }
    
    ul#navlist li {
     position:static;
     display:block;
     width:45px;
     height:26px;
    }
    
    ul#navlist
    {
    	margin: 0;
    	display: block;
    	padding: 0;
    	float:right;
    	text-align: center
    }
    
    ul#navlist li
    {
    	display: block;
    	float: right;
    	position:relative;
    }
    
    ul#navlist li a
    {
    	border-left:0px solid #253e17; border-right:1px solid #253e17; display: block;
    	float: right;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	padding-left: 8px;
    	padding-right: 8px;
    	text-decoration: none;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	font-size: 114%;
    	color: #253e17;
    	white-space: nowrap
    }
    
    ul#navlist li a:hover
    {
    	background: #253e17;
    	color: #FFFFFF
    }
    
    ul#navlist li a.active
    {
    	color: #fff;
    	font-weight: bold;
    }
    
    /* end nav bar */
    Adding padding doesnt seem to help, but I may be adding it to the wrong one.

    Any suggestions?
    BKerr

  2. #2
    SitePoint Addict
    Join Date
    Apr 2006
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This works when I test in Firebug:
    Change the LI elements to "display: inline;"
    Get rid of the fixed width setting (45px) on the LI elements also.

    And if you don't already have it, get the firebug extension for firefox, it makes figuring out css problems tons easier!

  3. #3
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    I made the changes you suggested, and will get that firebug thing, but when you did it, did they list vertically or horizontally? Because im trying to making them go horizontally across the light green bar.
    BKerr

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give this a shot:

    HTML Code:
    /*nav bar */
    
    ul#navlist li {
    font-weight:400; 
    height:26px;
    display: block;
    float: left;
    position:relative;
    }
    
    ul#navlist
    {
    	margin: 0;
    	display: inline;
    	padding: 0;
    	float:right;
    	text-align: center
    }
    
    ul#navlist li a
    {
    	border-left:0px solid #253e17; border-right:1px solid #253e17;
                 display: block;
    	padding-top: 2px;
    	padding-bottom: 2px;
    	padding-left: 8px;
    	padding-right: 8px;
    	text-decoration: none;
    	font-family: Tahoma, Verdana, Arial, sans-serif;
    	font-size: 114%;
    	color: #253e17;
    	white-space: nowrap
    }
    
    ul#navlist li a:hover
    {
    	background: #253e17;
    	color: #FFFFFF
    }
    
    ul#navlist li a.active
    {
    	color: #fff;
    	font-weight: bold;
    }
    
    /* end nav bar */

  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    USA
    Posts
    594
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    Thank You rson5. That worked perfectly.
    Do you mind explaining what you changed so that I can learn from this?
    BKerr

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first thing i did was condense your li styles into one section, since you had mutliple references to it and duplicate definitions.
    HTML Code:
    ul#navlist li {
       position:static;
       display:block;
       width:45px;
       height:26px;
    }
    
    ul#navlist li
    {
        display: block;
        float: right;
        position:relative;
    }

    see how you have 2 different position definitions?

    you don't need to float the li, and then the 'a' the same way. you only need to float the li. this will put all of them in line, then if you wanted the items to float to the right as one group, simply float the entire ul to the right.


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
  •