Notifikationer

Markér alle som læst Log ud

dorgbar Nybegynder

18. juni 2005 - 18:51 Der er 14 kommentarer

"position absolute" centrering

jeg har

<div style=" text-align: center; width: 274px; height: 83px; background: url(images/logo.gif); position: absolute; top: 24px;">
</div>

som jeg gerne vil centrere horisontalt iforhold til vinduet.

hvad gør jeg?

Synes godt om

dorgbar Nybegynder

18. juni 2005 - 18:58 #1

<div style="position: absolute;></div> <--- det er faktisk bare denne der jeg vil centrere :)

Synes godt om

dorgbar Nybegynder

18. juni 2005 - 18:58 #2

<div style="position: absolute;"></div> <--- den der

Synes godt om

olebole Juniormester

18. juni 2005 - 19:03 #3

<ole>

Det kan du ikke uden at bruge JavaScript ... og det er jo ikke videre smart at basere sit layout på JS :)

Men du kan jo gøre noget à la:

<div style="position:relative;width:400px;height:100%;background-color:yellow;margin:0 auto">
<div style=" text-align: center; width: 274px; height: 83px; background: url(images/logo.gif); position: absolute; top: 24px; left: 62px;border:1px solid red">
Blablabla
</div>
</div>

/mvh
</bole>

Synes godt om

dorgbar Nybegynder

18. juni 2005 - 19:21 #4

det virker :) men jeg kan ikke lige overskue din kode :P så hvis du kan gøre det ved denne her

<div style="position: absolute;"></div>

istedet for vil det hjælpe :)

Synes godt om

olebole Juniormester

18. juni 2005 - 20:00 #5

Det bedste, jeg kan gøre, er nok at forklare min kode. Så na du selv rette din egen kode til, så den virker :)

CSS foreskriver, at et element, der positioneres absolute, skal placere sig i forhold til det første, omkransende element, der er positioneret. Om dette så er poitioneret relative eller absolute er i den forbindelse ligemeget.
Findes et sådan elementet ikke, skal elementet placere sig i forhold til body-elementet.

Det yderste element positioneres relativt og centreres med: 'margin:0 auto':
<div style="position:relative;width:400px;height:100%;background-color:yellow;margin:0 auto"></div>

I det div kan du så placere dit andet div. Left-property'en på dette skal så sættes til det yderste divs bredde - minus det inderstes bredde - divideret med to:
<div style=" text-align: center; width: 274px; height: 83px; background: url(images/logo.gif); position: absolute; top: 24px; left: 62px;border:1px solid red">Blablabla</div>

Et absolut positioneret div kan ikke umiddelbart centreres, men vil placere sig efter, hvad der er sat af top- og left-værdier på elementets style-objekt.
Derfor må vi først centrere et relativt div ... og derefter placere det absolut positionerede div inde i dét.

Synes godt om

olebole Juniormester

18. juni 2005 - 20:01 #6

oooops ... en sdavø-fajl, der er ret meningsforstyrrende:
"Så kan du selv rette din egen kode til, så den virker"
- skulle der stå :)

Synes godt om

dorgbar Nybegynder

19. juni 2005 - 14:35 #7

tak skal du have
du må gerne oprette svar :)

Synes godt om

olebole Juniormester

19. juni 2005 - 22:29 #8

Hvis det dermed betyder, du forstod forklaringen og kan bruge den til noget ... gerne :)

Synes godt om

dorgbar Nybegynder

20. juni 2005 - 15:23 #9

:) det gjorde jeg :) mere eller mindre

Synes godt om

dorgbar Nybegynder

20. juni 2005 - 15:24 #10

hmm men det virker ikke i internet explore :\

Synes godt om

olebole Juniormester

20. juni 2005 - 15:31 #11

Jo, det gør det - men det er muligt, du ikke bruger en fuldt kvalificeret DTD (DocType Definition) før <html>-tag'et. Prøv denne:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Hvis du udelader den - eller blot udelader URL'en i den - disables det meste CSS i IE

Synes godt om

dorgbar Nybegynder

20. juni 2005 - 16:01 #12

ja ok, det det skaber nogel andre probelmmer, nu sidder min div godt nok i mindten, men den bagrund som skulle med width 100% starter nu først horizontalt der hvor min div sidder :S

Synes godt om

dorgbar Nybegynder

20. juni 2005 - 16:08 #13

<div style="width: 100%; height: 100%; background-color: red;">
<div style="z-index: 3; position:relative; width: 400px; margin: 0 auto;">

<div style="width: 274px; height: 83px; background: url(images/logo.gif); position: absolute; top: 24px; left: 62px;">
</div>

</div></div>

koden derover har bagrund, men hvis man insætter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

så forsvinder den

Synes godt om

olebole Juniormester

20. juni 2005 - 16:29 #14

Det tror jeg ikke - DTD'en giver dig sådan set heller ikke problemer. Tværtimod ... nu læser IE bare din kode, som den bør læses. Giver den øjensynligt problemer, skyldes det fejl i din kode.

Har elementet, der indeholder divet:
<div style="width: 100%; height: 100%; background-color: red;">
- explicit fået sat en højde? Ellers er der jo ikke noget at beregne de 100% af ... 100% af hvad? ;o)

Er den højde ikke sat, bliver dit 100%-div kun 0px højt - og så kan man jo ikke se et baggrundsbillede i divet :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS