HTML / CSS - Tekst bevæger sig når jeg resizer browser
når jeg resizer min browser holder baggrundsbilled og andet grafisk setup sin plads. men teksten skubber sig ifh. grafiken: (resize en del fra højre til venstre)www.spiegelberg.dk/rusrejser
min html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rusrejser</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><!--BEGIN CONTAINER-->
<div id="header"></div>
<div id="nav">
<ul>
<li class="active"><a href="#"><div id="home"></div></a></li>
<li><a href="#"><span>Rejsen</span></a></li>
<li><a href="#"><span>Bestil</span></a></li>
<li><a href="#"><span>Om os</span></a></li>
</ul>
</div>
</div><!--END CONTAINER-->
</body>
</html>
css:
@charset "UTF-8";
/* RusRejser */
*{
padding:0;
margin:0;
}
html {
height:100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
background: url(images/pagelook.png) fixed repeat-y top center;
min-height: 100%;
}
#container {
width: 1020px;
margin: auto;
height: 100%;
}
#header {
width: 1021px;
height: 120px;
background: url(images/header.png) fixed top center;
}
#nav {
height: 40px;
width: 1020px;
background:url(images/nav.png) fixed top center;
}
#nav ul {
float: left;
width:1020px;
}
#nav ul li {
display: block;
float: left;
height: 40px;
list-style-type:none;
}
#nav ul li a {
color: #231f20;
display: block;
text-decoration: none;
font-size: 20px;
font-weight: bold;
height: 100%;
line-height: 40px;
padding: 0 10px 0 10px;
}
#nav li a span {
display: block
float: left;
height: 100%;
padding: 0 10px 0 10px;
}
#nav li a:hover, #nav li.active a {
background: url(../images/hover.jpg) no-repeat left;
color: #ffffff;
cursor: pointer;
text-decoration: none;
}
#nav li.active a span, #nav li a:hover span {
background: url(../images/hover.jpg) no-repeat right;
}
#home {
background: url(images/home.png);
width: 40px;
height: 40px;
margin-left: 30px;
}
teksten skal følge de skygge indramninger der er på navigations billedet.
er der nogle der har en løsning til dette problem?
