/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
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
Lodret centrering af <div>??
Fra : Karina[6000]


Dato : 12-11-03 20:59

hvordan gør man det nemmest?

til vandret centrering har jeg brugt margin-left: auto; og margin-right:
auto; ..... .... ... hra dog ikke sat position på, for så virker det ik?

men tilbage til det oprindelige spm - hvordan centrerer man en div lodret?

mvh

Karina



 
 
Thomas Lindgaard (12-11-2003)
Kommentar
Fra : Thomas Lindgaard


Dato : 12-11-03 21:53

Hejsa

> hvordan gør man det nemmest?
>
> til vandret centrering har jeg brugt margin-left: auto; og margin-right:
> auto; ..... .... ... hra dog ikke sat position på, for så virker det ik?

Internet Explorer er lidt en knold til det med centrering... så
"margin-left, margin-right: auto" virker ikke.

Tricket er at sætte "text-align: center" på DIV'ens parent. F.eks.

<html>
<body style="text-align: center">
<div style="width: 300px; background-color: red">
hejsa
</div>
</body>
</html>

Det virker så bare ikke i Mozilla m.fl. og teksten i DIV'en vil være
centreret... så man er nødt til at udvide style'n på DIV'en:

<div style="width: 300px; background-color: red; margin-left: auto;
margin-right: auto; text-align: left">

> men tilbage til det oprindelige spm - hvordan centrerer man en div lodret?

Vertikal centrering kan (hvis du kender højden på din DIV) gøres på følgende
måde:

<html>
<body>
<div id="horizon" style="position: absolute; top:50%; left: 0%; width: 100%;
height: 1px; overflow: visible; text-align: center; background-color: red">
<div id="content" style=" position: absolute; width: 300px; height:
200px; top: -100px; left: 50%; margin-left: -150px; text-align: left;
background-color: green">
Denne grønne kasse skulle gerne være midt i vinduet
</div>
</div>
</body>
</html>

Håber det hjælper.

Mvh.
/Thomas



Jens Gyldenkærne Cla~ (13-11-2003)
Kommentar
Fra : Jens Gyldenkærne Cla~


Dato : 13-11-03 07:39

Thomas Lindgaard skrev:

> Internet Explorer er lidt en knold til det med centrering...
> så "margin-left, margin-right: auto" virker ikke.

Jo - i IE6 sat i standardsmode virker det fint (lige som
Mozilla/Opera m.fl.)


> Tricket er at sætte "text-align: center" på DIV'ens parent.

Men ovenstående trick er nødvendigt hvis man vil have ældre IE-er
med.


> Vertikal centrering kan (hvis du kender højden på din DIV)
> gøres på følgende måde:

[Snip, eksempel med negativ margen]

Tricket med negativ margen virker fint - så længe indholdet holder
sig inden for den angivne højde på boksen og browservinduet er
stort nok til at rumme boksen. Ellers kan det give ulæselige sider
fordi toppen af siden forsvinder ud af toppen af browseren (og det
er ikke muligt at scrolle derop).

Der er ikke nogen valid og fejlsikker måde at centrere lodret på i
html.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

Thomas Lindgaard (13-11-2003)
Kommentar
Fra : Thomas Lindgaard


Dato : 13-11-03 08:46

> > Internet Explorer er lidt en knold til det med centrering...
> > så "margin-left, margin-right: auto" virker ikke.
>
> Jo - i IE6 sat i standardsmode virker det fint (lige som
> Mozilla/Opera m.fl.)

Okaj - det vidste jeg faktisk ikke...

> Tricket med negativ margen virker fint - så længe indholdet holder
> sig inden for den angivne højde på boksen og browservinduet er
> stort nok til at rumme boksen. Ellers kan det give ulæselige sider
> fordi toppen af siden forsvinder ud af toppen af browseren (og det
> er ikke muligt at scrolle derop).

Jep - det stiller nogle krav til siden.

> Der er ikke nogen valid og fejlsikker måde at centrere lodret på i
> html.

.... og det er lidt træls!

Mvh.
/Thomas



Lobais (13-11-2003)
Kommentar
Fra : Lobais


Dato : 13-11-03 16:42

> > Der er ikke nogen valid og fejlsikker måde at centrere lodret på i
> > html.
> .... og det er lidt træls!
Tja, sådan er det. Der er forskel, ikke bare på koden i tabel og css
design, men også på de mulige layouts. Fx. er kollone design også mest
tabel.

--
Vil du lære at kode HTML, XHTML, CSS, SSI eller ASP?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

Jesper Brunholm (13-11-2003)
Kommentar
Fra : Jesper Brunholm


Dato : 13-11-03 16:41



Karina[6000] wrote:

> hvordan gør man det nemmest?
> men tilbage til det oprindelige spm - hvordan centrerer man en div lodret?

Du kan fifle med noget i retning af:

<div style="margin: 20% 0 20% 0;">
</div>

- dvs man sætter 20% af vindueshøjden af til margin i top og bund.

Hvordan forskellige browsere fordeler pladsen hvis div'en fylder mere
end de tiloversblevne 60% kan jeg ikke garantere, men jeg har lavet et
eksempel som ser fornuftigt ud på min mozilla (1.6), Opera 7.20 og
Explorer 5.5

Lidt eksperimenteren tyder på at browserne beregner vindueshøjdens
samlede størrelse ud fra det indhold som så udgør de resterende procent,
så metoden er langt fra foolproof på tværs af mange forskellige sider...

mvh

Jesper Brunholm

--
Phønix - dansk folk-musik i front - <http://www.phonixfolk.dk/>
H.C. Andersen-Centret: <http://www.andersen.sdu.dk/>
Vi har killinger på Garion.dk: <http://garion.dk/>

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste