View Full Version : CSS Tabs

02-01-2012, 05:14 PM
Hello Everyone,

New to the forums, a bit rusty on my coding so would like some help. Ill be sure to help everyone when I can as well, what the community is for.

So I am trying to center my CSS tabs which have not worked in my favor, I spent hours among hours playing with it yesterday, researching, nothing seemed to work. When something did work in dreamweaver, live view and preview would work when actually uploaded to my server, it would not. Should I try using something different then Dreamweaver for one? I typically dont use a lot of the functions and create the code from sniplets myself and just like to view whats being done or to be able to highlight an area and see where that is in the code.

Anyway here is my CSS for the tabs, any help would be greatly appreciated. If you need website link just let me know.

{ width: 880px;
height: 46px;}

{ float: right;
margin: 0;}

ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #ff8e26 url(http://www.getglovered.com/pillowshirt/images/tab.png) no-repeat 0 0;}

ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #ff8e26 url(http://www.getglovered.com/pillowshirt/images/tab.png) no-repeat 100% 0;}

ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}

ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #ff8e26 url(http://www.getglovered.com/pillowshirt/images/tab_selected.png) no-repeat 0 0;}

ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #ff8e26 url(http://www.getglovered.com/pillowshirt/images/tab_selected.png) no-repeat 100% 0;
color: #FFF;}

ul#menu li a:hover
{ color: #E4EC04;}

02-01-2012, 06:18 PM
matthew james taylor's beautiful-css-centered-menus-no-hacks-full-cross-browser-support (http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support) had multiple examples plus 'Holy Grail' Layouts.

02-01-2012, 06:48 PM
I found that one yesterday but thank you. I tried it last night and it wasnt working, preview in the browser was showing it all messed up. I just tried again and actually uploaded it to ftp and it worked. I also am running into issues where the view in dreamweaver gets all screwy, refreshing it doesnt help. I have to save and reload the file. Any ideas?

Do I have a lot of options with changing the size of the tabs besides just the colors?

Thanks again for the response