|
|
 | Forsiden er ikke central
Fra :  anetteogjesper  | Vist : 429 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>
| |
|
Det vil jeg lige prøve i løbet af dagen
| |
|
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 |
| | |
|
Jeg fandt ud af det selv ved at bruge bla:
display: inline;
| |
 | 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.
| |
|
|