Jeg er ved at lave forsiden på min side
www.xxxxx.dk
Jeg prøver at udvikle den i css, men nu ved jeg ikke hvordan jeg centrer siden.
Jeg har lavet boksene med position:absolute, så nå browseren bliver større, rykker siden sig helt ud i venstre side og det ser lidt dumt ud.
Koden er:
a, a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: #000000;
}
body {
background-color: #DCDFE6;
background-image: url("runding1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #00000;
margin-top: 0px;
text-align: center;
}
p {
font-size:90%;
font-face:Verdana;
}
.boks {
font-weight: bold;
font-size:90%;
padding-top:20px;
position:absolute;
top: 10px;
left: 50px;
height: 100px;
width: 500px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.porto {
position:absolute;
font-size:60%;
margin-top: 125px;
margin-left: -300px;
font-face:Verdana;
}
.boks1 {
padding-top:10px;
padding-bottom:10px;
position:absolute;
top: 160px;
left: 10px;
height: 320px;
width: 300px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.billede {
float:left;
border: 1px solid black;
}
.boks2 {
padding-top:1px;
position:absolute;
top: 160px;
left: 320px;
height: 150px;
width: 150px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.boks3 {
padding-top:1px;
position:absolute;
top: 330px;
left: 320px;
height: 150px;
width: 150px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.boksa {
padding-top:2px;
position:absolute;
top: 160px;
left: 480px;
height: 150px;
width: 150px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.boksb {
padding-top:2px;
position:absolute;
top: 330px;
left: 480px;
height: 150px;
width: 150px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.nyhed {
position:absolute;
font-size:100%;
font-weight: bold;
margin-top: 510px;
margin-left: -200px;
font-face:Verdana;
}
.boks4 {
padding-top:20px;
position:absolute;
top: 550px;
left: 10px;
height: 150px;
width: 200px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.boks5 {
padding-top:40px;
position:absolute;
top: 550px;
left: 220px;
height: 150px;
width: 200px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.boks6 {
padding-top:40px;
position:absolute;
top: 550px;
left: 430px;
height: 150px;
width: 200px;
border: 3px solid black;
border-width: thin;
border-style: double;
border-color: #BDBCCC;
background: white;
}
.reklame {
position:absolute;
margin-top: 770px;
margin-left: -300px;
}
og
<?php
// forside.php v1.00 04/06/2005
?>
<html>
<head>
<title>Forsiden</title>
<link rel="stylesheet" type="text/css" href="rullepanel2.css">
<link rel="stylesheet" type="text/css" href="css/forside1.css">
</head>
<body>
<div style="text-align:center"><div class="boks">Hos 5xX biXen finder du en masse flot tøj til dame, baby og barn - legetøj og ting til den kreative og så er der jo også lidt til både far og mor</div></div>
<div style="text-align:center"><div class="porto">>>PORTOFRI LEVERING*<< *efterkrav + 30 kr og portofri levering gælder kun DK.</div>
<div class="boks1"><div id="billede">
<a href="
http://www.xxxxx.dk/vareOversigt.php?category=13&ucategory=50" target="Main"><img src="boger/tvilling.jpg" alt="Personlige bøger til en personlig hilsen">
<p><br>Spændende bøger<br>for både voksne og børn<br>Personlige bøger<br>til en personlig hilsen<br></p></a>
</div>
</div>
<div class="boks2"><div id="billede">
<a href="
http://www.xxxxx.dk/vareOversigt.php?category=1&ucategory=1" target="Main"><img src="css/2.JPG" alt="Kjoler til prinsessen"></a>
</div></div>
<div class="boks3"><div id="billede">
<a href="
http://www.xxxxx.dk/vareOversigt.php?category=4&ucategory=48" target="Main"><img src="css/3310.jpg" alt="COVERS TIL DIN MOBIL"></a>
</div></div>
<div class="boksa"></div>
<div class="boksb"></div>
<div class="nyhed"><a href="javascript:popUp('tilmeldnyhed.php')">Tilmeld vores NYHEDSBREV</div>
<SCRIPT LANGUAGE="JavaScript">
<!--
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("popup" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=500,height=300,left = 287,top = 364');");
}
-->
</script>
<div class="boks4"><a href="
http://tracker.tradedoubler.com/click?p=3386&a=978988&url=http://www.e-boghandel.dk/shop/item.asp?id=180885&wishuserguid=" target="_new"><IMG SRC="
http://www.e-boghandel.dk/isbnimage.asp?isbn=87-7905-682-2&width=105" border="0"></a></div>
<div class="boks5"><a href="
http://www.braz.dk" target="_blank"><img border="0" src="
http://www.braz.dk/templates/subSilver/images/braz_120_60_logo.gif" alt="Besøg det nye auktionssted på nettet" width="120" height="60"></a></div>
<div class="boks6"></div>
<div style="text-align:center"><div class="reklame"><iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="468" height="60" src="
http://www.partner-ads.com/dk/visbannerrotation.php?rid=1375">