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

01/11

Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele

01/11

Google Clouds netop fratrådte topchef har fundet sit nye job: Bliver en af de mest magtfulde personer hos ServiceNow

01/11

Nu går OpenAI efter struben på Google: ChatGPT fungerer nu også som en AI-søgemaskine

01/11

Nørgaard: Agenterne kommer, og jeg er klar: Måske bliver min gamle drøm snart virkelighed

01/11

Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem

01/11

Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver

01/11

Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre

01/11

Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'

01/11

Google indlemmer sin AI Gemini i Google Maps, Google Earth og Waze: Det kommer det til at betyde

01/11

Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner

01/11

Sådan blev Margrethe Vestager ’Silicon Valleys største fjende’

Vis flere artikler

IT-JOB

HOUSE4IT A/S

System- og netværkskonsulent til en professionel IT-virksomhed i Kolding

Paychex Europe

Technical QA Specialist to Danløn

Itm8

CRM-produktejer med bred Microsoftprofil

Danmarks Lærerforening

Erfaren forandringsleder til digital transformation hos Danmarks Lærerforening

TV2

Software Engineer til Live Technology

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 06:10	Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00	Datafordeler Af Lsk i PHP
I går 12:37	Summere beløb pr. dato Af TTA i Excel
31/1022:44	Tilslutte chassic fans Af viking69 i PC
31/1020:28	LED lysstofrør Af ErikHg i Fri debat