SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: Layout issue with taskbar
-
Jul 4, 2006, 16:39 #1
- Join Date
- May 2006
- Location
- New York City
- Posts
- 317
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Layout issue with taskbar
Why in the world can I not get my taskbar tabs to...
- Get my tabs to line up in a straight line
- 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; }
-
Jul 4, 2006, 17:35 #2
- 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.
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
-
Jul 4, 2006, 20:22 #3
- 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
-
Jul 4, 2006, 21:57 #4
- Join Date
- May 2006
- Location
- New York City
- Posts
- 317
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Jul 4, 2006, 23:10 #5
- 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.
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
-
Jul 5, 2006, 00:52 #6
- 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!
-
Jul 5, 2006, 00:55 #7
- Join Date
- Oct 2004
- Location
- NSW Australia
- Posts
- 3,564
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by MikesBarto2002
NadiaUnique CSS Templates by Nadia
Dreamweaver: Tutorials.Templates.CSS Designs
SitePoint Books |My Fireworks Tutorials 1 2
Follow me on Twitter | Community Team Advisor
Bookmarks