Jeg har et problem med min CSS kode på
http://mpetersendk.1go.dk/,
hvis man minimere browservinduet rykker mine lag sig, hvorimod
http://mpetersendk.1go.dk/index2.html ligger det perfekt, jeg tænker
på de lag jeg har lagt øverst, kodningen på de 2 sider er stort set
ens, pånær de ekstra par lag jeg har lagt på index.html, hvis der er
nogen der kan hjælpe mig med at finde en løsning på problemet vil jeg
blive glad (NB: det er mit første forsøg med CSS)
Koden brugt i index.html er følgende:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type="text/css">
@import "css.css";
</style>
<title>MP-VISION.dk</title>
</head>
<body>
<div id="side"></div>
<div id="news">Content for id "news" Goes Here</div>
<div id="news2">test</div>
<div id="news3">test igen</div>
<div id="hovedfelt">her er hovedområdet</div>
</body>
</html>
Og CSS dokumentets kode dertil er:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
background-color: #333333;
background-image: url("images/background.jpg");
background-position: 50% 10px;
background-repeat: no-repeat;
}
#side {
position: relative;
margin-left: auto;
margin-right: auto;
width: 700px;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
text-decoration: none;
}
a:hover, a:active {
color: #ffffff;
text-decoration: underline;
}
#navigation {
position: absolute;
height: 10px;
width: 700px;
left: 0px;
top: 95px;
}
#news {
position:absolute;
height: 100px;
width: 228px;
left: 217px;
top: 135px;
border: thin solid;
border-width: 1px;
}
#news2 {
position:absolute;
height: 100px;
width: 228px;
left: 453px;
top: 135px;
border: thin solid;
border-width: 1px;
}
#news3 {
position:absolute;
height: 100px;
width: 223px;
left: 690px;
top: 135px;
border: thin solid;
border-width: 1px;
}
#hovedfelt {
position:absolute;
height: 348px;
width: 380px;
left: 217px;
top: 250px;
border: thin solid;
border-width: 1px;
}
Koden til index2.html er følgende:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@import "css2.css";
</style>
<title>MP-VISION.dk</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="side">
<div id="navigation">
<div align="center" class="style1"><a href="index.html"
target="_self">forsiden</a> - <a href="webdesign.html"
target="_self">webdesign</a> - <a href="3d.html" target="_self">3D
art</a> - <a href="vektor.html" target="_self">vektor</a> - <a
href="illu.html" target="_self">illusioner</a> - <a href="logo.html"
target="_self">logoer</a> - <a href="kontakt.html"
target="_self">kontakt</a> </div>
</div>
<div id="news">
<p>Nyheder på MP-vision:</p>
<p>intet og atter intet </p>
<p><br>
nemlig
</p>
</div>
</body>
</html>
og koden til dens css dokument er:
body {
font: 8pt Verdana;
background-color: #333333;
background-image: url("images/bg.jpg");
background-position: 50% 10px;
background-repeat: no-repeat;
}
#side {
position: relative;
margin-left: auto;
margin-right: auto;
width: 700px;
}
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
text-decoration: none;
}
a:hover, a:active {
color: #ffffff;
text-decoration: underline;
}
#navigation {
position: absolute;
height: 10px;
width: 700px;
left: 0px;
top: 95px;
}
#news {
position:absolute;
height: 100px;
width: 233px;
left: 10px;
top: 140px;
}
Håber nogen kan hjælpe mig
Med venlig hilsen
Martin Petersen