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

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
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
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

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

17/05

Test: Motorolas lækre nye toptelefon er skarpt prissat – men den gemmer på en gevaldig bommert

17/05

Her er de nye medlemmer af Statens It-råd: Skal vurdere it-projekter på over 15 millioner kroner

17/05

Antallet af anmeldelser af ulovligt indhold på beskedtjenester stiger: Regeringen skubber ansvaret videre til EU og Belgien

17/05

Nørgaard: Det kendte pekingeser-fænomen kunne alligevel ikke føre os til sejr i melodi grand prix

17/05

Tredje gang på under en uge: Google retter alvorlig sårbarhed i Chrome-browseren

17/05

Efter masser af kritik af store prisstigninger: VMware åbner for gratis licenser - ændrer i licens-strukturen

17/05

Google hælder masser af privacy og sikkerhed i Android 15-opdatering

17/05

Seks store selskaber med på årets image-liste for første gang: Kæmper alle med lav kendskabsgrad

17/05

Vi har fundet 10 spændende it-job, som du kan søge lige nu

17/05

Netcompany i gang med at positionere sig som leverandør af nyt centralnerve-system til det danske forsvar

17/05

Film: Andy Serkis vender tilbage som Gollum

Vis flere artikler

IT-JOB

Udviklings- og Forenklingsstyrelsen

Kontorchef til Erhvervs- og EU-løsninger

Devoteam A/S

Erfaren Power Platform Consultant til næste skridt som Solution Architect

Udviklings- og Forenklingsstyrelsen

Erfaren projektleder til at styre og gennemføre projekter succesfuldt

TV2

Staff Software Engineer til Content Creation

Styrelsen For It og Læring

Erfaren softwareudvikler til Styrelsen for It og Læring – vær med til at skabe forretningskritiske it-systemer til test, prøver og eksamen

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 15:20	Geninstallation af Office 2019 Af ErikHg i Office & Kontorpakker
I dag 09:13	Antivirus til en Linux Mint computer? Af Polle i Linux
I går 15:30	signalforstærker til trådløs rutrer tænkes brugt til pc næt pc -og MÅSKE TV 4 m borte eller begge Af Novice-1 i Routere & Switches
I går 11:43	Hvilket styresystem på en gammel Pc ??? Af Jan Post i Andre styresystemer
I går 07:44	Virus advarsler - falske Af jdann i Backup- & Antivirus