clj83
05-02-2009, 09:51 AM
I am using the 'Drop Down Tabs Menu' in a vertical layout rather than the usual horizontal layout however I want my background colour bars to be a fixed width instead of being only as wide as the text. I have played around for ages but cant seem to redefine the width. Does anyone have any ideas?
Here is the style sheet:
.bluetabs2{
height: 28px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
padding-top: 3px;
}
.bluetabs2 ul{
padding: 0px 0;
margin-left: 0;
margin-top: 0px;
margin-bottom: 0px;
font: 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.bluetabs2 li{
display:inline;
margin: 0px;
}
.bluetabs2 li a{
text-decoration: none;
font-weight: bold;
height: 28px;
padding: 6px 12px;
margin-right: 0px;
margin-bottom: 0px;
color:#666666; /*THEME CHANGE HERE*/
background: white top left repeat-x;
}
.bluetabs2 li a:visited{
color:#666666;
}
.bluetabs2 li a:hover{
color: #FFFFFF;
background: #333333 url(media/bluetab1.gif) top left repeat-x;
}
.bluetabs2 li.selected{
color: #FFFFFF;
}
.bluetabs2 li.selected a{ /*selected main tab style */
color: #FFFFFF;
background: #333333 url(media/bluetab1.gif) top left repeat-x;
}
.bluetabs2 li.selected a:hover{ /*selected main tab style */
color: #FFFFFF;
text-decoration: none;
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv_b{
position:absolute;
text-align: left;
border: 0px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0px 1px;;
font: 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 130px;
visibility: hidden;
}
.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0px solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 2px;
padding: 2px 0;
text-decoration: none;
color:#333333;
}
* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color:#666666;
font-weight:bold;
}
Here is the style sheet:
.bluetabs2{
height: 28px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 2px;
padding-top: 3px;
}
.bluetabs2 ul{
padding: 0px 0;
margin-left: 0;
margin-top: 0px;
margin-bottom: 0px;
font: 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.bluetabs2 li{
display:inline;
margin: 0px;
}
.bluetabs2 li a{
text-decoration: none;
font-weight: bold;
height: 28px;
padding: 6px 12px;
margin-right: 0px;
margin-bottom: 0px;
color:#666666; /*THEME CHANGE HERE*/
background: white top left repeat-x;
}
.bluetabs2 li a:visited{
color:#666666;
}
.bluetabs2 li a:hover{
color: #FFFFFF;
background: #333333 url(media/bluetab1.gif) top left repeat-x;
}
.bluetabs2 li.selected{
color: #FFFFFF;
}
.bluetabs2 li.selected a{ /*selected main tab style */
color: #FFFFFF;
background: #333333 url(media/bluetab1.gif) top left repeat-x;
}
.bluetabs2 li.selected a:hover{ /*selected main tab style */
color: #FFFFFF;
text-decoration: none;
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv_b{
position:absolute;
text-align: left;
border: 0px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0px 1px;;
font: 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 130px;
visibility: hidden;
}
.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0px solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 2px;
padding: 2px 0;
text-decoration: none;
color:#333333;
}
* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color:#666666;
font-weight:bold;
}