Avatar billede anetteogjesper Nybegynder
27. juni 2005 - 01:58 Der er 7 kommentarer og
1 løsning

Forsiden er ikke central

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 de ville jeg gerne. Er der nogen der kan hjælpe med det? css koden er:
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;

    }
Avatar billede roenving Novice
27. juni 2005 - 02:11 #1
Hrm, det virker som om I har brugt et helt forkert design-grundlag ...

-- det er rasende nemt at lave et centreret design, men man skal som udgangspunkt have en fuldt korrekt doctype, og derefter primært bruge flow-layout, kun i særlige tilfælde bruge absolut positionering !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Standard design</title>
<meta name="keywords" content="søgeord adskilt af komma">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style/style.css">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#site{position:relative;width:776px;height:100%;margin:0 auto;background:#def;}
</style>
</head>

<body>

<div id="site">
  Heri fyldes indholdet
</div>
</body>
</html>
Avatar billede hvideg Nybegynder
27. juni 2005 - 13:44 #2
Du kan naturligvis klare det med en style, som så sættes på body
men body har også en attribute som er praktisk til at centrere med

</head>

<body>

<div id="site" align="center">
  Heri fyldes indholdet



alternativt :
<style>.ctr{text-align:center;}</style>
</head>

<body>

<div id="site" class="ctr">
  Heri fyldes indholdet
Avatar billede hvideg Nybegynder
27. juni 2005 - 13:58 #3
Problemet er at hvis du opererer med absolute, så vil x/y differentiere i placering på forskellige klienter og skærmopløsninger. roenving har ret i at hvis du definerer din relative_til så er det nemmere at få et ensartet look, hvis du ikke vil bruge en form submission på at bede klienten om at fortælle hvor stor dens skærmopløsning er, så du kan udregne de absolute x/y positioner)
Avatar billede hvideg Nybegynder
27. juni 2005 - 14:05 #4
Brug eventuelt javascript til at skifte elementernes style, fordi klienten selv kender sine formater af bredde og højde, så kan de sætte de tilhørende stil klasser. og så kan du nøjes med at definere et par case af hvis mindre end/ større end t.eks. Det skulle gøre det muligt at opnå det resultat du beskriver med absolute placeringer i css.
Avatar billede anetteogjesper Nybegynder
27. juni 2005 - 15:03 #5
Siden står allerede i center, men som du skrev ændrer det ikke så meget :-)
Jeg kender desværre ikke noget til javascript
Avatar billede roenving Novice
28. juni 2005 - 14:17 #6
-- hvis man bruger en doctype, som tvinger IE til at indrette sig efter standarderne, kan man ikke bruge text-align (eller align !-) til at centrere, da den kun skal virke overfor inline-elementer, ikke blok-elementer ...

-- men når man medtager en fuldt kvalificeret doctype inkl. dtd-link vil nyere IE'er overholde css-rekommendationerne i hvert fald så man kan bruge margin:auto; til at centrere ...

-- og det er tåbeligt at tænke i at ændre klasse på elementer on-the-fly, da browseren så er nødt til at genberegne hele dokumnetets visning, mens det at skifte enkelte properties ikke har den slags uheldige side-effekter !-)
Avatar billede hvideg Nybegynder
28. juni 2005 - 19:42 #7
Jeg tror at problemet er at dine stylesheets venstreorienterer

du kan evt. løse det ved at lægge en div om hele din body, sætte dens bredde og vidde til 100% og så text align center

altså
<style>.ctr{text-align:center;width:100%;height:100%;}</style>
</head>

<body>
<div id="site" class="ctr">
    <!-- Her skal der så klistres alt det almindelige indhold -->
</div>
</body>
</html>

Du har fortalt så er der absolute positioner, så de bliver ikke ændret ved at aligne ting og sager. men hvis du ændrer ordet absolute til relative, så kan du bestemme start x/y position af det element som de er relativt e.g. en div hvis denne div ligger i en body eller anden tag som er centereret, kan du bestemme offset ved at gøre bredden mindre end 100% og således får en procentuel ens indrykning af din relative offset. Men at position absolute står samme sted offsætnings mæssigt er netop pr design, så hvis det ikke er det du ønsker så brug relative!
Avatar billede roenving Novice
28. juni 2005 - 23:43 #8
>>hvideg

Øehm ...

-- det er for det første ukorrekt, for det andet gøres det som jeg har vist @27/06-2005 02:11:54 ...

-- derimod er det rigtigt at absolut positionering beregnes ud fra det først omkransende element, som har en positionering (uanset om den er absolut eller relativ !-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester