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

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Forsiden er ikke central
Fra : anetteogjesper
Vist : 438 gange
25 point
Dato : 27-06-05 02:02

X Hej

Jeg har lavet vores forside i css: www.xxxxx.dk

Mit problem er dog er jeg kun har kunne finde ud af at placere boksene absolute, hvis jeg skal have dem til at stå, som de ca. står nu. Problemet er nu at de står ikke centralt på siden og det ville jeg gerne have, men hver gang jeg prøver flytter boksene sig helt forkert. Er der nogen der kan hjælpe med det?
css koden er:
Kode
a {
   text-decoration:none;
}

a:link {
   color: #000000;

}
a:visited {
   color: #000000;

}
a:active {
   background-color: #FFFFFF;

}
a:hover {
   color: #000000;

}

img {
border: 0px;
}


body {
   background-color: #E8E9F9;
   font-family: verdana, arial, sans-serif, "Times New Roman";
   font-size: 100%;
   color: #000000;
   margin-top: 0px;
   text-align: center;
   scrollbar-3dlight-color: #E8E9F9;
   scrollbar-arrow-color: #E8E9F9;
   scrollbar-base-color: #E8E9F9;
   scrollbar-darkshadow-color: #E8E9F9;
   scrollbar-face-color: #E8E9F9;
   scrollbar-highlight-color: #E8E9F9;
   scrollbar-shadow-color: #000000;
   scrollbar-track-color: #E8E9F9;

}

p {
   font-size:80%;
}


.boks {
   font-weight: bold;
   font-size:90%;
   padding-top:20px;
   position:absolute;
   top: 10%;
   left: 60%;
   height: 100px;
   width: 500px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   
}

.porto {
   position:absolute;
   font-size:70%;
   top: 10px;
   left: 30px;
   
}


.boks1 {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 80%;
   font-weight: bold;
   padding-top:0px;
   padding-bottom:0px;
   position:absolute;
   top: 35px;
   left: 5px;
   height: 320px;
   width: 300px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}

#reklame1 {
   position:relative;
   top: 30px;
}


.boks2 {
   padding-top:0px;
   position:absolute;
   top: 35px;
   left: 320px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}

#reklame2 {
   position:relative;
   top: 15px;
}

.boks3 {
   padding-top:1px;
   position:absolute;
   top: 205px;
   left: 320px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);
}

#reklame3 {
   position:relative;
   top: 5px;
}

.boks4 {
   padding-top:0px;
   position:absolute;
   top: 35px;
   left: 485px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}
#reklame4 {
   position:relative;
   top: 5px;
}

.boks5 {
   padding-top:2px;
   position:absolute;
   top: 205px;
   left: 485px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}

#reklame5 {
   position:relative;
   top: 5px;
}

.nyhed   {
   position:absolute;
   top: 370px;
   left: 190px;
   font-size:100%;
   font-weight: bold;
   
}


.boks6 {
   padding-top:0px;
   position:absolute;
   top: 395px;
   left: 5px;
   height: 150px;
   width: 200px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}
#reklame6 {
   position:relative;
   top: 5px;
}

.boks7 {
   padding-top:0px;
   position:absolute;
   top: 395px;
   left: 220px;
   height: 150px;
   width: 200px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);
}

#reklame7 {
   position:relative;
   top: 5px;
}

.boks8 {
   padding-top:0px;
   position:absolute;
   top: 395px;
   left: 435px;
   height: 150px;
   width: 200px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}
#reklame8 {
   position:relative;
   top: 5px;
}

.boks9 {
   padding-top:0px;
   position:absolute;
   top: 585px;
   left: 5px;
   height: 150px;
   width: 200px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}
#reklame9 {
   position:relative;
   top: 15px;
}

.boks10 {
   padding-top:0px;
   position:absolute;
   top: 585px;
   left: 220px;
   height: 150px;
   width: 200px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);
}

#reklame10 {
   position:relative;
   top: 45px;
}

.boks11 {
   padding-top:0px;
   position:absolute;
   top: 585px;
   left: 435px;
   height: 150px;
   width: 200px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}
#reklame11 {
   position:relative;
   top: 45px;
}

.reklame   {
   position:absolute;
   top: 775px;
   left: 70px;
   filter: progid:DXImageTransform.Microsoft.dropShadow( Color=CCCCCC,offX=10,offY=10,positive=true);

}

#tekst
{
   position: absolute;
   top:5px;
   left:px
   z-index:5
   font-family: Porky's, Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 50%;
   color: #000;
   letter-spacing: 2px;

}


 
 
Accepteret svar
Fra : molokyle

Modtaget 25 point
Dato : 27-06-05 09:32

Har du prøvet at lave en <span> container med centreret indhold ?

.center
{
text-align:center;
}

..og sætte denne container uden om det indhold der skal centreres :

<span class="center">
Dit indhold...
</span>

Du skal så selvfølgelig fjerne dine egenskaber : position:absolute; top=xxx; left=yyy; osv...

Hvis flere boxe skal centreres i samme <span> må du adskille dem med :

position:relative; left:32px;

..eller :

position:relative;margin-left:16px;margin-right:16px;

..eller lignende. Det ér og bliver et puslespil

Billeder centreres med :

img
{
display:block;
margin-left:auto;
margin-right:auto;
}

</MOLOKYLE>

Kommentar
Fra : anetteogjesper


Dato : 27-06-05 10:22

Det vil jeg lige prøve i løbet af dagen

Kommentar
Fra : anetteogjesper


Dato : 27-06-05 15:17

Siden går fuldstændig amok, hvad gør jeg galt: http://www.xxxxx.dk/diverse.php

Kode
.boks1 {
   padding-top:0px;
   padding-bottom:0px;
   position:relative;
   margin-top: 35px;
   margin-left: 5px;
   height: 320px;
   width: 320px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
}

#reklame1 {
   position:relative;
   top: 35px;
}


.boks2 {
   padding-top:0px;
   position:relative;
   margin-top: 35px;
   margin-left: 330px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
}

#reklame2 {
   position:relative;
   top: 5px;
}

.boks3 {
   padding-top:1px;
   position:relative;
   margin-top: 205px;
   margin-left: 330px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
}

#reklame3 {
   position:relative;
   top: 40px;
}

.boks4 {
   padding-top:0px;
   position:relative;
   margin-top: 35px;
   margin-left: 485px;
   height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
}
#reklame4 {
   position:relative;
   top: 5px;
}

.boks5 {
   padding-top:2px;
   position:relative;
   top: 205px;
   margin-left: 485px;
   margin-height: 150px;
   width: 150px;
   border: 3px solid black;
   border-width: thin;   
   border-style: double;   
   border-color: #BDBCCC;
   background: white;
}

#reklame5 {
   position:relative;
   top: 12px;
}

Osv.


Kode
<span class="center">

<div class="boks1"><div id="reklame1">
<script language="javascript">
var uri = 'http://impdk.tradedoubler.com/imp/img/401660/978988?' + new String (Math.random()).substring (2, 11);
document.write('<a href="http://clk.tradedoubler.com/click?p=16072&a=978988&g=401660" target="_blank"><img src="'+uri+'" border=0></a>');
</script>
</div></div>

<div class="boks2"><div id="reklame2">
<a href="http://www.xxxxx.dk/stationaer.php" target="Main"><img src="diverse/com.jpg" alt="Stationære computere"></a>
</div></div>

<div class="boks3"><div id="reklame3">
<script language="javascript">
var uri = 'http://impdk.tradedoubler.com/imp/iframe/35344/978988?' + new String (Math.random()).substring (2, 11);
document.write('<iframe src="'+uri +'" width="125" height="60" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>');
</script>
</div></div>

<div class="boks4"><div id="reklame4"><script language="javascript">
var uri = 'http://impdk.tradedoubler.com/imp/iframe/842123/978988?' + new String (Math.random()).substring (2, 11);
document.write('<iframe src="'+uri +'" width="125" height="125" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>');
</script>
</div></div>

<div class="boks5"><div id="reklame5"><script language="javascript">
var uri = 'http://impdk.tradedoubler.com/imp/iframe/11644390/978988?' + new String (Math.random()).substring (2, 11);
document.write('<iframe src="'+uri +'" width="125" height="125" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>');
</script>
</div></div>

</span>

osv.


Kommentar
Fra : molokyle


Dato : 27-06-05 19:12
Kommentar
Fra : anetteogjesper


Dato : 27-06-05 23:31

Jeg fandt ud af det selv ved at bruge bla:
   display: inline;

Godkendelse af svar
Fra : anetteogjesper


Dato : 27-06-05 23:31

Tak for svaret molokyle.
                        

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 : 177577
Tips : 31968
Nyheder : 719565
Indlæg : 6409068
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste