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

boxerfjaes Nybegynder

12. april 2010 - 09:53 Der er 12 kommentarer og
1 løsning

div 100%

Jeg har lidt problemer med at få placeret div-elementet så det præcis fylder det aktuelle vindue. Problemet er at elementet bliver placeret 20 px fra toppen. Hvorfor gør dét det?

html, body {
background: #000;
height: 100%;
margin: 0;
padding: 0;
}

#display {
background: #fff;
height: 100%;
width: 100%;
margin: 0px;
}

Det kan løses med følgende ændring, men hvorfor er det nødvendigt?

#display {
background: #fff;
height: 100%;
width: 100%;
margin: -20px 0px;
}

Synes godt om

claes57 Ekspert

12. april 2010 - 10:06 #1

du kan være kommet til at sætte et linjeskift ind.
Kom med et komplet kodeeksempel.

Synes godt om

boxerfjaes Nybegynder

12. april 2010 - 10:11 #2

Ok, det ser således ud:
html:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/DA"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sydhavsørenes brøndboring</title>
<meta name="title" content="brøndboring">
<meta name="description" content="brøndboring ved autoriceret brøndborer">
<meta name="keywords" content="brønboring, lukning af brønd, lolland, falster, sjæland">
<meta name="robots" content="all">
<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="display">

<div id="title">

</div>

<div id="content">
<h2>Velkommen til Sydhavsørenes brøndboring.</h2>
<p>Sydhavsørenes bøndboring udfører lukning af brønde osv.
Indehaver er A-satificeret og har en længere karrire som selvstændig entreprenør på
<a href="overview.shtml">CV'et</a>.</p>
</div>

<div id="left">
<h6>Velkommen til Sydhavsørenes brøndboring.</h6>

</div>

<div id="rightmenu">

</div>

<div id="bar">

</div>

</div>

</body>
</html>

--------------------------------------------------------------------------------------------------
CSS:

html, body {
background: #000;
height: 100%;
margin: 0;
padding: 0;
}

#display {
background: #fff;
height: 100%;
width: 100%;
/* margin: -20px 0px;
*/ margin: 0px;
}

Synes godt om

boxerfjaes Nybegynder

12. april 2010 - 10:42 #3

Her er en helt strippet, som gør det samme.
html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/DA"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sydhavsørenes brøndboring</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="display">
<h2>Velkommen til Sydhavsørenes brøndboring.</h2>
</div>
</body>

</html>

---------------------------------------------------------------------------
Hvis jeg derimod ændre <h2> til <h6> er det 25px elementet flyttes ned af og ved ændring af <h2> til <p> er det 16px.

Synes godt om

claes57 Ekspert

12. april 2010 - 10:42 #4

aller første linje
du mangler et < som første tegn

det er den linje, der så fylder...

Synes godt om

claes57 Ekspert

12. april 2010 - 10:45 #5

og
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/DA" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

det skal stå i en linje i din kode.

Synes godt om

keysersoze Guru

12. april 2010 - 10:51 #6

og så er jeg ret sikker på at der ikke er nogen doctype med DA - http://www.web-dev.dk/post/DOCTYPE-og-valid-kode-ens-udseende-i-Internet-Explorer-og-FireFox.aspx

Synes godt om

boxerfjaes Nybegynder

12. april 2010 - 12:24 #7

Ok, nu har jeg ændret min doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Det løser desværre ikke problemet, til gengæld kan det løses ved at slette <h6> og blot skriver:
...
<div id="display">
Velkommen til Sydhavsørenes brøndboring.
</div>
...
eller ved at indsætte et linje skift først:
...
<div id="display">
<br/>
<p>Velkommen til Sydhavsørenes brøndboring.</p>
</div>
...
Jeg har afprøvet det i IE8, FF, Safari, Chrome og Opera, med præcis samme resultat.

Det virker altså som om div elementet bliver rykket ned svarende til skriftstørrelsen på det første element efter <div id="display">

Synes godt om

claes57 Ekspert

12. april 2010 - 12:41 #8

denne fejler altså ikke noget:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/DA" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sydhavsørenes brøndboring</title>
<meta name="title" content="brøndboring">
<meta name="description" content="brøndboring ved autoriceret brøndborer">
<meta name="keywords" content="brønboring, lukning af brønd, lolland, falster, sjæland">
<meta name="robots" content="all">
<style type="text/css">
html, body {
background: #000;
height: 100%;
margin: 0;
padding: 0;
}

#display {
background: #fff;
height: 100%;
width: 100%;
/* margin: -20px 0px;
*/
margin: 0px;
}
</style>
</head>

<body>
<div id="display">

<div id="title">

</div>

<div id="content">
<h2>Velkommen til Sydhavsørenes brøndboring.</h2>
<p>Sydhavsørenes bøndboring udfører lukning af brønde osv.
Indehaver er A-satificeret og har en længere karrire som selvstændig entreprenør på
<a href="overview.shtml">CV'et</a>.</p>
</div>

<div id="left">
<h6>Velkommen til Sydhavsørenes brøndboring.</h6>

</div>

<div id="rightmenu">

</div>

<div id="bar">

</div>

</div>

</body>
</html>

Synes godt om

keysersoze Guru

12. april 2010 - 12:50 #9

jo - der er ikke noget der hedder Strict/DA.

Synes godt om

boxerfjaes Nybegynder

12. april 2010 - 13:04 #10

Det kan jeg ikke forstå, når jeg copy/paster det ind i en ny fil sker det samme igen. div elementet rykkes 20px ned?

Synes godt om

boxerfjaes Nybegynder

12. april 2010 - 20:31 #11

Jeg har lavet et par eksempler på problemet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sydhavsørenes brøndboring</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="display">
<p>Velkommen til Sydhavsørenes brøndboring.</p>
</div>
</body>

</html>

ser så dan ud: http://www.sofuspoulsen.dk/
Det er den sorte bar øverst jeg ikke er tilfreds med. Jeg går ud fra at den fremkommer fordi div elementet bliver rykket ned, da der også kommer en scroll-bar.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Sydhavsørenes brøndboring</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<div id="display">
</br>
<p>Velkommen til Sydhavsørenes brøndboring.</p>
</div>
</body>

</html>

Ved at indsætte et </br> før <p> forsvinder den sorte bar og det ser sådan ud: http://sofuspoulsen.dk/medlinieskift.html

Synes godt om

boxerfjaes Nybegynder

12. april 2010 - 22:33 #12

Jeg fik løst problemet ved at tilføje position:absolute; til div elementet i stylesheet'et.

html, body {
background: #000;
height: 100%;
margin: 0;
padding: 0;
}

#display {
background: #fff;
height: 100%;
width: 100%;
margin: 0px;
position: absolute;
}

Synes godt om

keysersoze Guru

13. april 2010 - 19:04 #13

position: absolute kan være en rigtig uheldig ting at benytte hvis ikke man er klar over hvad den præcis gør.

De eksempler du poster i #11 skyldes;

Eksempel 1: nulstil margin på dit p-tag og problemet forsvinder.

Eksempel 2: der er ikke noget der hedder </br> og mellemrum vil stadig kunne løses med at sætte margin: 0px; på dit p-tag.

Det er altså ikke din div der er problemet men margin på nogle elementer inden i - h1, h2 etc har fx også nogle standard-indstillinger, der bryder det du ellers ønsker.

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
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