/ Forside/ Teknologi / Udvikling / PHP / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn 

Kodeord  


Reklame
Top 10 brugere
PHP
#NavnPoint
rfh 3959
natmaden 3372
poul_from 3310
funbreak 2700
stone47 2230
Jin2k 1960
Angband 1743
Bjerner 1249
refi 1185
10  Interkril.. 1146
Centrering af siden
Fra : anetteogjesper
Vist : 1368 gange
70 point
Dato : 04-06-05 12:29

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">


</div>
</body>

 
 
Kommentar
Fra : jeppebundsgaard


Dato : 04-06-05 12:39

Jeg har ikke kigget nærmere på din kode, men jeg kan fortælle - hvad jeg opdagede meget sent og har været ret træt af - at ie kan forstå en text-align:center på de fleste (alle) tags, mens andre (firefox, opera) kun mener det handler om text. Den rette måde at gøre det på, så det virker i alle browsere er margin-left:auto; og margin-right:auto; - så centreres bokse som table, div osv.
Jeppe

Accepteret svar
Fra : TeWeE

Modtaget 80 point
Dato : 04-06-05 13:19

Du kan faktisk gøre det kortere og bare sige margin:auto;

<div style='text-align:center;'>
<div style='width:700px; margin:auto;'>
Lalalala, siden her blah blah blah..
</div>
</div>

Kommentar
Fra : anetteogjesper


Dato : 04-06-05 14:04

Jamen placerer boksene sig så ikke oven i hinanden?

Kommentar
Fra : TeWeE


Dato : 04-06-05 14:31

Ikke så vidt jeg ved af.. Har ikke haft problemer med det.. Du skal jo bare lade vær med at give den som har text-align:center; nogen border-style ;)

Kommentar
Fra : anetteogjesper


Dato : 04-06-05 18:52

Jeg vil prøve

Kommentar
Fra : anetteogjesper


Dato : 04-06-05 19:24

De placerer sig oven i hinanden og jeg vil jo gerne bruge border style, så det virker altså ikke. Jeg har ikke noget imod at ændre text-align:center , men til hvad?

Kommentar
Fra : TeWeE


Dato : 04-06-05 20:35

Jamen du skal kun have en border på den for teksten er i.. ikke den hvor der står "text-align:center;" uden om...
Altså:
<div style='text-align:center;'>
<div style='width:700px; margin:auto; border-style:solid; border-width:1px; border-color:#000000;'>
Lalalala, siden her blah blah blah..
</div>
</div>

Kommentar
Fra : anetteogjesper


Dato : 04-06-05 23:36

Okay dvs. du vil have jeg fjerner borde fra mit CSS dokument?

Det kan godt være jeg er lidt fatdum, men vil du ikke lave et eksempel på min kode?

Kode
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;

}


Kode
<?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"><iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="120" height="60" src="http://www.partner-ads.com/dk/visbannerrotation.php?rid=1400"></iframe></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"></iframe></div>

</div>
</body>


Kommentar
Fra : TeWeE


Dato : 04-06-05 23:44

Kan ikke lige overskue at rette hele din kode til men hør her :)

========================
<div style="text-align:center"><div class="boks" style='margin:auto;'>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 class="reklame"><iframe marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="468" height="60" src="<" target="_blank">http://www.partner-ads.com/dk/visbannerrotation.php?rid=1375"> e></div>
========================

Jeg har taget starten og slutningen af din kode.. Starten er <div style="text-align:center"><div class="boks" style='margin:auto;'>, og der har jeg bare tilføjet style='margin:auto;' i den 2. div du har..
Den første hvor der står text-align:center; slutter du til aller sidst i dit dokument, du kan se at det sidste der er i den kode der er </div>, det slutter den som vi startede med... Fjern så alle andre steder hvor du har tilføjet <div style="text-align:center"> </div>, så burde det virke optimalt :)

Godkendelse af svar
Fra : anetteogjesper


Dato : 05-06-05 00:14

Tak for svaret TeWeE.
                        

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 173451
Tips : 31650
Nyheder : 719565
Indlæg : 6382310
Brugere : 218248

Månedens bedste
Årets bedste
Sidste års bedste