CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

marx Nybegynder

20. april 2007 - 11:12 Der er 9 kommentarer

div boks midt på skærmen

ærede brugere..

Hvordan laver man en div boks centreret både vertikalt og horisontalt???

Har følgende kode, som centrerer det fint horisontalt, men kan ikke hitte ud af det vertikalt:

div#page {
width: 780px;
height: 480px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:left;
padding: 15px;
border: 1px solid #999999;
background-color: #CCCCCC;
}

margin-top er sat til 20px, og kan regne ud at den skal erstattes af noget andet, men hvad!?

Synes godt om

madeindk Nybegynder

20. april 2007 - 11:32 #1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<style type="text/css">

body, html {
height: 100%;
margin: 0px;
padding: 0px;
}

body {
text-align: center;
}

div#page {
width: 780px;
height: 480px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:left;
padding: 15px;
border: 1px solid #999999;
background-color: #CCCCCC;
}

</style>

<body>

<table cellpadding="0" cellspacing="0" style="width:100%; height:100%;">

<tr>
<td style="text-align:center;">

<div id="page">
fin fin tekst
</div>

</td>
</tr>

</table>

</body>
</html>

Synes godt om

marx Nybegynder

20. april 2007 - 12:07 #2

madeindk:
Det virker tilsynladende kun uden <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">, men er det ikke en god idé at have den linje med i html tag'et?

Synes godt om

madeindk Nybegynder

20. april 2007 - 13:18 #3

Jo, det er det. Det prøvede jeg også først med, men kan aldrig rigtig finde ud af det med doctype på og gad ikke bruge en times tid på det her, for selvfølgelig findes der en løsning på det. Ved bare ikke hvordan.

Men nej, var godt klar over det ikke virkede med doctype.

Synes godt om

mm12010 Nybegynder

20. april 2007 - 13:25 #4

prøv om du ikke kan finde inspiration til en lødning her: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Synes godt om

mclemens Nybegynder

20. april 2007 - 14:25 #5

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
html,body {margin:0px;padding:0px;height:100%;}

div#page {
width: 780px;
height: 480px;
margin:0 auto;
padding: 15px;
border: 1px solid #999;
background-color: #ccc;
}

#table1 {height:100%;width:100%;background:red;}
</style>

</head><body><table id="table1"><tr><td id="td1">
<div id="page">Noget</div>
</td></tr></table></body></html>

Synes godt om

mclemens Nybegynder

20. april 2007 - 14:37 #6

Ulempen ved "dead center" centrering via negativ margin samt position:absolute - top og left er at man tit ikke kan se indholdet hvis vinduet bliver mindre end box'en eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">

div#page {
position:absolute;
top:50%;left:50%;
width: 780px;
height: 480px;
margin:-256px 0 0 -406px;
padding: 15px;
border: 1px solid #999;
background-color: #ccc;
}

</style>

</head><body><div id="page">Lav vinduet mindre end denne box, kan du stadig se mig :o) ?</div></body></html>

Synes godt om

roenving Novice

20. april 2007 - 15:11 #7

-- jeg ville også nøjes med at centrere et site horisontalt, hvilket jo allerede sker med den kode, du starter med !-)

-- måske ville jeg overveje f.eks. deadcentre, hvis mit initielle indholdsområde bevidst var lavet relativt lille ...

Synes godt om

marx Nybegynder

23. april 2007 - 08:24 #8

Hvis jeg går tilbage til mit oprindelige forslag, og gerne vil have lagt indhold (flere bokse) ind i min centreret boks, hvordan kommer jeg videre der??

Som det ser ud nu med denne kode, flagerer mine indholdsbokse rundt på hele sitet:

body {
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
text-align:center;
}

div#page {
width: 780px;
height: 480px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
text-align:left;
padding: 15px;
border: 1px solid #999999;
background-color: #CCCCCC;
}

#header {
position:absolute;
height: 120px;
width: 780px;
top: 0px;
left: 0px;
background-color: #99FF00;
}

#content {
position:absolute;
overflow: auto;
height: 100%;
width: 780px;
top: 120px;
left: 0px;
padding: 10px;
background-color: #bbbbbb;
}

#footer {
position:absolute;
height: 30px;
width: 780px;
bottom: 0px;
left: 0px;
background-color: #666666;
}

hjææælp :-)

Synes godt om

tza Nybegynder

21. maj 2007 - 23:05 #9

Husk at et elementer med position: absolute; tages ud af det normale flow, og elementet vil derefter tilhøre FØRSTE relative element.
Hvis ikke andet, er dette <body>-tagget. Prøv at give din div#page position: relative; og se hvad der sker.. ;)

Er ikke sikker på at det fuldstændig løser dit problem, men som jeg ser din CSS har jeg svært ved at forstå hvorfor fx en footer skal have position: absolute;?? den sidder vel nederst alligevel i din markup?

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
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

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