Avatar billede Slettet bruger
23. november 2002 - 00:30 Der er 6 kommentarer og
1 løsning

centrere indhold af div vertikalt

Hej!

Jeg vil (uden tabeller) centrere et billede vertikalt. Det er åbenbart ikke blevet nemmere med det "smarte" CSS, og jeg har forsøgt at søge herinde. ALle giver op, og går tilbage til tabeller.

Hvorfor skal det være så svært?

Her er hvad jeg har lavet indtil nu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>test</title>
<style>


#enter {
margin:0px auto;
    position: absolute;
    text-align:center;
    z-index: 2;
}

#txt {
    position: absolute;
    text-align:center;
    z-index: 3;
}

</style>
</head>

<body scroll="no" style="margin:0px; padding:0px">

<div style="width:100%" id="enter">
<img src="billeder/enter.jpg" width="251" height="374" alt="" border="0">
</div>

<div style="width:100%" id="txt">
Dette site indeholder bla bla materiale, ønsker du at fortsætte?<br><a href="index2.php" onfocus="this.blur();" style="color:white">Ja</a>&nbsp;&nbsp;&nbsp;<a href="java script:;" onfocus="this.blur();" style="color:white">Nej</a>
</div>

</body>
</html>
Avatar billede knudgert Nybegynder
23. november 2002 - 01:08 #1
Det er da nemt nok :-) og jeg har også postet løsningen er par gange.
Kig på http://home13.inet.tele.dk/smedpark/test/centrer.htm
Og hvis du ikke forstår princippet, så spørg.

Virker i alle nye browsere undt. Netscape 4.x og hvis du laver et ekstremt lille browservindue.

PS. du bør ikke bruge scroll="no", det er ikke valid kode, brug overflow: hidden i stedet gor din css.
Avatar billede Slettet bruger
23. november 2002 - 07:56 #2
Det ser jo meget godt ud, men nu lagde jeg det i tabeller. Men jeg har lagt svaret som bogmærke, så jeg kan bruge det næste gang.

MHT body scroll ved jeg det godt, men hvis jeg bytter det ud med overflow:hidden kommer der margin på hele vinduet i Mozilla, også selvom jeg har sat margin og padding til 0.
Avatar billede cdc Novice
23. november 2002 - 10:28 #3
kan du ikke bare bruge den i body
Avatar billede Slettet bruger
23. november 2002 - 13:09 #4
?

Hvis jeg skifter

<body scroll="no" style="margin:0px; padding:0px">

ud med

<body style="overflow:hidden;margin:0px; padding:0px">

Kommer der en hvid border i Mozilla
Avatar billede cdc Novice
23. november 2002 - 13:29 #5
var det ikke billedet du ville centrere ?
Avatar billede Slettet bruger
23. november 2002 - 15:25 #6
Jo, men under billedet ligger der 2 baggrundsfarver, hver ½ højde af skærmen.

<div style="z-index:1;height:50%; background-color:#B592B5"></div>
<div style="z-index:1;height:50%; background-color:#692B54"></div>
Avatar billede knudgert Nybegynder
24. november 2002 - 02:07 #7
Jeg forstår ikke at du ikke kan få højre margin væk, i Opera er det ikke helt muligt, selv med padding, som den kræver.

http://home13.inet.tele.dk/smedpark/test/hrs.htm

Her er ingen margin, hverken i Mozilla eller IE.
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