menu met hover; hoe kan ik achtergrondkleur dezelfde breedte krijgen als hover

Status
Niet open voor verdere reacties.
M

merlijn16

Gebruiker
Lid geworden
2 mrt 2010
Berichten
132
Hoi, ik tracht een menu met hover op mijn website te krijgen waarin de achtergrondkleur dezelfde breedte krijgt als hover.
Ik heb ergens een fout in de code maar weet niet waar.
Misschien kan iemand even meekijken?
Ik heb helaas de website nog niet online staan.

alvast bedankt,
merlijn

onderstaand de code in de stylesheet waar ik aanpassingen in heb gemaakt met betrekking tot de achtergrondkleur en kleurcodes. Mijn probleem is dat de opvulkleur van de menubalk minder breed is dan de hover.
Ik denk dat ik een codefout heb.
Code: 
#leftside{
	float: left;
}
#leftside a{
        color: #ffff99;
        text-decoration: none;}
#leftside a:hover{ color: #666666;}
#leftside h3{
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00306f;
	border-right-color: #00306f;
	border-bottom-color: #00306f;
	border-left-color: #00306f;
	width: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	display: block;
	margin-left: 35px;	
	margin-top: 35px;	
}
#menu ul li a	
        {padding: 5px;	
        margin: 0;}
#menu ul, 
#menu ul li	
        {list-style-type: none;	
        display: inline;	
        padding: 0;	
        margin: 0;}
#menu {float: left; 	
      padding: 0;	
      margin: 5px 0;	
      text-align:center;
background: #660000;
}
#menu a {display: block; 	
        padding: 5px;	
        margin: 1px;	
        line-height: 1.4em;	
        text-decoration: none;	
        border: solid 1px;}
#menu a:hover	
        {color: #ffff99; 	
        background: #000000;}
#menu {width: 13em;}
#menu a {width: 99.9%;}

stukje in xhtml pagina
HTML: 
<div id="menu">
<ul>
<li><a href="index.html"><b>&laquo; Cursusoverzicht</b></a></li>
<li><a href="sprekers.html">&laquo; De sprekers</a></li>
<li><a href="de-cursisten.html">&laquo; Voor wie</a></li>
<li><a href="boeken.html">&laquo; Boeken</a></li>
<li><a href="contact.html">&laquo; Contact</a></li>
</ul>
</div>


Voor de zekerheid nog even hele css code in stylesheet:
Code: 
* {margin:0px;padding:0px;top:0px;left:0px;}

body{
	text-align: center;
	background-color: #000000;                                          
}
#central{
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	position: relative;
	width: 923px;
        text-align: left;
	background-color: #ffffff;
}
#header{
	background-image: url(images/header-tc.jpg);
	height: 144px;
	width: 923px;
	left: 0px;
	top: 0px;
}
#header a{
	font-size: 14px;
	font-style: normal;
	line-height: 30px;
	font-weight: bolder;
	color: #ff0000;
	text-decoration: none;
	margin-left: 880px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin-top: 5px;
}
#navlist{
	margin-left: 0px;
	padding-left: 0px;
	white-space: nowrap;
	position: absolute;
	height: 27px;
	width: 923px;
	top: 143px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}
#navlist a {
	padding: 3px 10px;
	background-image: url(images/button.gif);
	height: 20px;
	width: 91px;
	display: inline;
	position: absolute;
	text-align: center;
	color: #fff;
        font-family: "Arial", Trebuchet MS, Helvetica, sans-serif;   
	text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 116px;}
#n3{left: 232px;}
#n4{left: 348px;}
#n5{left: 464px;}
#n6{left: 580px;}
#n7{left: 696px;}
#n8{left: 812px;}
#leftside{
	float: left;
}
#leftside a{
        color: #ffff99;
        text-decoration: none;}
#leftside a:hover{ color: #666666;}
#leftside h3{
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00306f;
	border-right-color: #00306f;
	border-bottom-color: #00306f;
	border-left-color: #00306f;
	width: 200px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	background-color: #ffffff;
	text-align: center;
	display: block;
	margin-left: 35px;	
	margin-top: 35px;	
}
#menu ul li a	
        {padding: 5px;	
        margin: 0;}
#menu ul, 
#menu ul li	
        {list-style-type: none;	
        display: inline;	
        padding: 0;	
        margin: 0;}
#menu {float: left; 	
      padding: 0;	
      margin: 5px 0;	
      text-align:center;
background: #660000;
}
#menu a {display: block; 	
        padding: 5px;	
        margin: 1px;	
        line-height: 1.4em;	
        text-decoration: none;	
        border: solid 1px;}
#menu a:hover	
        {color: #ffff99; 	
        background: #000000;}
#menu {width: 13em;}
#menu a {width: 99.9%;}
#content{	
        font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;                       
        margin-top: 160px;
	position: absolute;
	width: 923px;
        height: 5020px;
	background-color: #f5f5f5;
}
#footer{
	clear: both;	
	position: relative;
	height: 40px;
	background-image: url(images/footBg.png);	
	background-position: right bottom;
}
#rightside{
	float: right;
	width: 705px;
	height: 5020px;
        background-color: #ffffff;
	margin-right: 0px;
	margin-top: 0px;
	overflow: auto;           
}
p.antwoord {
           display: none;
           width: 630px;
           border: 1px solid; 
           border-color: #003300;
           background-color: #f5f5f5;
           padding: 5px;
           font-size: 12px;
}
div.ex1{
        width: 175px;
        padding: 10px;
        border: 1px solid;
        border-color: #003300;
        margin-top: 15px;
        margin-left: 10px;
}   
#picture1{	
	margin-left: 15px;
        margin-top:  22px;
	height: 75px;
	width: 195px;
	background-image: url(images/);
	border: 0px 
}
hr {
	clear: both;
	}
#rightside .ill-links, #rightside .ill-rechts{  
       	margin-top: 4px;
	text-align: center;
	font-style: italic;
	font-size: .85em;
	}
.ill-links {
	float: left;
	margin-right: 1px;
        padding: 0px;
       	}
.ill-rechts {
	float: right;
	margin-left: 1px;
        margin-right: 1px;
        padding: 0px;
	}	
.ill-links img, .ill-rechts img {
	margin-bottom: 3px;
	}
#rightside p{
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	color: #000000;
	margin-left: 20px;
        margin-right: 20px;
	margin-bottom: 20px;
} 
#rightside h1{
	margin: 10px 0px 10px 0px;
	width: 580px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
        margin-left: 100px;
}
#rightside span{
	margin-top: 10px;
	margin-bottom: 4px;
	width: 625px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
#rightside a{
        color: #660000;
        text-decoration: underline;}
#rightside a:hover{ color: #666666;}
#footer p{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #ffffff;
	float: right;
	padding-top: 23px;
	margin-right: 10px;
}
#footer a{
        color: #ffffff;
        text-decoration: none;}
#footer a:hover{color: #ffffff;}
#imagepreloader{
	visibility: hidden;
	overflow: hidden;
	height: 0px;
	width: 0px;
}

Alvast bedankt voor de moeite.
 
Als je de background color in #menu in #menu a moet die het goed doen.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan