Better design for tabs

This commit is contained in:
Eike Foken
2011-08-07 19:19:55 +02:00
parent 4040c40d69
commit d1b0998f38

View File

@@ -422,23 +422,23 @@ ul.tabs {
padding: 0; padding: 0;
float: left; float: left;
list-style: none; list-style: none;
height: 32px; /*--Set height of tabs--*/ height: 27px; /*--Set height of tabs--*/
border-bottom: 1px solid #999; border-bottom: 1px solid #e8e8e8;
border-left: 1px solid #999; border-left: 1px solid #e8e8e8;
width: 100%; width: 100%;
} }
ul.tabs li { ul.tabs li {
float: left; float: left;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/ height: 26px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/ line-height: 26px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999; border: 1px solid #e8e8e8;
border-left: none; border-left: none;
margin-bottom: -1px; /*--Pull the list item down 1px--*/ margin-bottom: -1px; /*--Pull the list item down 1px--*/
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: #e0e0e0; background: #e0e0e0 url('../images/navigation-off.gif');
} }
ul.tabs li a { ul.tabs li a {
text-decoration: none; text-decoration: none;
@@ -449,7 +449,7 @@ ul.tabs li a {
outline: none; outline: none;
} }
ul.tabs li a:hover { ul.tabs li a:hover {
background: #ccc; background: #f0f0f0;
} }
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/
background: #fff; background: #fff;
@@ -457,7 +457,7 @@ html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that th
} }
.tab_container { .tab_container {
border: 1px solid #999; border: 1px solid #e8e8e8;
border-top: none; border-top: none;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;