neutrall
Level: Scholar
Registered: 28-03-2004
Posts: 43
|
Help needed with a menu bar.
I'm having some problem with a menu when the windows is too small and the button fall into a second line. See this address for a example : http://membres.lycos.fr/landsoftimes/template-human.html
When the windows is too small, the button overlaps. Here the CSS code I'm using :
/* *******************************
Menu Box
**********************************/
.menu {
position:relative;
height:25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
font-weight:bold;
}
/* *******************************
Place the main menu list in order
**********************************/
.menu li {
display: inline;
}
/* *******************************
Place the proper margin and border
**********************************/
.menu ul {
list-style: none;
margin: 0,0,2px,0;
padding: 0;
padding-top: 4px;
}
/* *******************************
Color for the link in the menu only
**********************************/
.menu a:link, .menu a:visited, .menu a:active {
margin-right: 2px;
padding: 3px 10px 2px 10px;
color:BLACK;
background-color: SILVER;
background-position: center;
background-image: url(../images/button_back.gif);
text-decoration: none;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-bottom: 1px solid #717171;
border-right: 1px solid #717171;
}
/* *******************************
Color for the link selected or hover on top of.
**********************************/
.menu a:hover {
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
} |
Does anyone has a clue ? (I didn't inclue the HTML part since you can view the source at the given address)
____________________________
A Stick give a wise man something to think about... and a fool, something to put in is mouth.
|
