SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Layout issue with taskbar

    Why in the world can I not get my taskbar tabs to...

    1. Get my tabs to line up in a straight line
    2. Get them to line up flush with the black bar above them


    Here is the page, and here is my css...

    Code:
    body, html{
    	margin : 0 auto;
    	padding : 0;
    	background : #FFFFFF;
    	color : #000000;
    }
    
    body{
    	min-width : 804px;
    }
    
    
    .clearfix:after{
    	content : "."; 
    	display : block; 
    	height : 0; 
    	clear : both; 
    	visibility : hidden;
    }
    
    .clearfix{
    	display : inline;
    }
    
    /* mac hide \*/
    * html .clearfix{
    	height : 1%;
    }
    
    .clearfix{
    	display : block;
    }
    /* End hide */
    
    /*-----------------------------*/
    /*---------- LAYOUT ----------*/
    /*-----------------------------*/
    
    #container{
    	width : 804px;
    	margin : 0 auto;
    	padding : 0;
    }
    
    #header{
    	padding : 0;
    	margin : 0;
    }
    
    #navigation{
    	padding : 0;
    	margin : 0;
    }
    
    #navigation ul{
    	list-style : none;
    }
    
    #navigation ul li{
    	display : inline;
    }
    
    #leftcolumn{
    	float : left;
    	width : 350px;
    }
    
    #rightcolumn{
    	float : right;
    	width : 454px;
    }
    
    #video{
    	width : 320px;
    	background : #6600FF;
    }
    
    #latest{
    	width : 320px;
    	background : #0099FF;
    }
    
    #video p, #latest p{
    	margin : 0 10px;
    }
    
    .roundtop_purple{ 
    	background: url('../pics/tr_purple.gif') no-repeat top right; 
    }
    
    .roundbottom_purple{
    	background: url('../pics/br_purple.gif') no-repeat top right; 
    }
    
    .roundtop_blue{ 
    	background: url('../pics/tr_blue.gif') no-repeat top right; 
    }
    
    .roundbottom_blue{
    	background: url('../pics/br_blue.gif') no-repeat top right; 
    }
    
    img.corner {
    	width: 5px;
    	height: 5px;
    	border: none;
    	display: block !important;
    }
    
    #rightcolumn img.inlinephoto{
    	margin-right : 5px;
    	margin-bottom : 5px;
    }

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't have time to get into your code, but I'd say the reason for your buttons not lining up and dropping down to the next line is that the image is too wide... the total of your images is 804 and your container width is also 804, but each image does have some space between them, so I'd suggest making the images a bit smaller, or recaluation your widths. Regardless, for someone viewing on 800*600, they will get a drop anyway.

    Nadia

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe your problem is that the browsers are implementing their own "default" value for margin of the list items. Try setting the margin of the #navigation li tags to 0. I don't think you have to worry about the padding because by default if you display something inline, all padding is set to 0 to begin with. I could be wrong thought so if someone more advanced in CSS can verify that then please do.

    Try that and see what happens and if that doesn't work, then I would suggest instead of doing a display:inline; on the li tags, do a float to them. With float, you can control the width, height, margins and padding a bit more.

    HTH

  4. #4
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Still isn't working

    Thanks for you suggestions, but neither of them worked.

    I made the tabs smaller, but that still didn't move them into a straight line. And I am still having trouble getting them to butt up against the header. Anymore suggestions would be appreciated!

  5. #5
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    These fixed worked for me:

    Adding padding:0; margin:0; to the #navigation ul
    brings the navbar directly beneath the black edge of the header.

    If I changed the size of the nav images to 130px, the images all show in a row (with a couple of px to spare on the right hand side.... you will have to do some more maths if you want the nav to end flush with the right hand side of the header image.

    Nadia

  6. #6
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank worked beautifully, thanks for you help!

  7. #7
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikesBarto2002
    Thank worked beautifully, thanks for you help!
    You're welcome

    Nadia


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
  •