Sidder og har et mindre problem i min opgave jeg skal lave på skolen. jeg har brugt display:
inline-block, til at lave en hover-effekt bl.a.
sådan så den blir den der grønne farve.
- jeg har valgt at lave en <a id> til alle mine knapper, så jeg nemmere kan styre bredden.
er det HELT forkert eller hvordan ser det ud?
Problemet er, at jeg gerne vil have, at den tager de sidste 5 px som i kan se af knappen med, så den får den farve på hoveren ..
http://img15.imageshack.us/img15/7596/fejl.jpgHer er HTML koden
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Opgave 1-a</title>
<style type="text/css">
* {
margin: auto;
}
body {
background-color: #333333;
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
}
#wrapper {
width: 800px;
height: 600px;
}
#header {
background-image: url('images/hd.jpg');
background-repeat: no-repeat;
width: 647px;
height: 70px;
}
#menu {
background-image: url('images/nav.jpg');
background-repeat: no-repeat;
width: 647px;
height: 50px;
}
#content {
background-image: url('images/bg.jpg');
width: 800px;
height: 8px;
}
.headeroverskrift {
padding-left: 30px;
font-size: 35px;
}
a {
text-decoration: none;
font-size: 20px;
display: inline-block;
font-weight: bold;
color: #c7d130;
padding-top: 15px;
}
a:hover {
background-color: #dfe539;
color: #000;
}
a:active {
background-color: #dfe539;
color: #000;
}
#knap {
width: 110px;
height: 33px;
text-align: center;
}
#knap2 {
width: 125px;
height: 33px;
text-align: center;
}
#knap3 {
width: 122px;
height: 33px;
text-align: center;
}
#knap4 {
width: 130px;
height: 33px;
text-align: center;
}
#knap5 {
width: 141px;
height: 33px;
text-align: center;
}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">
<div id="wrapper">
<div id="header"><br /><span class="headeroverskrift">Webintegrator</span></div>
<div id="menu">
<a id="knap" href="#">HOME</a>
<a id="knap2" href="#">ABOUT</a>
<a id="knap3" href="#">CONTACT</a>
<a id="knap4" href="#">STORE</a>
<a id="knap5" href="#">DONATE</a>
</div>
<div id="content"> </div>
<div id="bund"></div>
</div>
</body>
</html>