statisch pagina laat inhoudt niet zien!

Door Mohamed nvt op 15-08-2022 21:21 gewijzigd op 15-08-2022 21:40

3.803 views

Voor een kennis maak ik een website.
Tot nu toe loop ik tegen aantal issues en ik kom er niet uit hoe ik ze kan oplossen
De issue waarbij ik jullie advies/hulp nodig heb:

1. ruimte tussen container div en browser wil ik weg hebben
2. statisch pagina laat inhoud niet zien!

De volgende code gebruik ik


.wrapper {

    margin: 0 auto;
    width: 80%;
    border: 1px solid;
    background-color: black;
    border-radius: 10px;

}

Update1:
Het tweede probleem heb ikzelf opgelost
Alvast bedankt voor het meedenken!

- Ariën -

15-08-2022 21:52

Een padding denk ik?

Tuig anders even een testcase op in JSfiddle.net.

? Onbekende gebruiker

16-08-2022 14:54

Wat voor kan komen als je zelf HTML tikt, is dat er een spatie en/of nieuwe regels zitten tussen de opening van de body tag en de eerste div, zoals dit:


<!DOCTYPE html>
<html lang="nl">
  <head>
    <title>titel</title>
  </head>
  <body>
    <div>test</div>
  </body>
</html>

Omdat er een nieuwe regel is na de body tag, en een paar spaties, worden die vervangen voor 1 spatie. Je kunt dat met CSS wegnemen, door de font-size van de body op 0 te zetten en die van de div op een normale grootte zoals 12px, maar dat is eigenlijk een hack. Beter is om de HTML zo te maken:


<!DOCTYPE html>
<html lang="nl"><head><title>titel</title></head><body><div>test</div></body></html>

Maar dat doe je meestal met PHP code, zoals met DOMDocument als hulpmiddel.

Dit is maar een gok, misschien ligt het nog ergens aan?

Jan Koehoorn

23-08-2022 16:27

De meeste browsers zetten een margin op de body. Als je die eraf haalt, is de witruimte weg:


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
    	body {
    		margin: 0;
    	}
	    .wrapper {
	        margin: 0 auto;
	        width: 80%;
	        border: 1px solid;
	        background-color: black;
	        border-radius: 10px;
	        min-height: 200px;
	    }
    </style>
</head>

<body>
	<div class="wrapper"></div>
</body>

</html>

@Ad Fundum: het ligt dus niet aan whitespace. Uit de MDN web docs:

In the case of HTML, whitespace is largely ignored — whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored.

? Onbekende gebruiker

24-08-2022 09:01 gewijzigd op 24-08-2022 09:17

Als de witruimte letterlijk tussen het browser-venster en het buitenste block element zit (en niet iets als een .wrapper, wat meestal niet de buitenste is), dan heb je helemaal gelijk natuurlijk.

Het citaat uit MDN beschrijft maar ten dele wat ik bedoel. Elke combinatie van spaties en/of nieuwe regels wordt gecombineerd tot 1 spatie, dat is zo ja. Maar die spatie is wel zichtbaar, afhankelijk van de display mode van omliggende HTML-elementen. Een (niet zo nette maar) effectieve fix is om de lettergrootte van die spatie 0px groot te maken met wat ik eerder schreef.

Reageren

Inloggen om te reageren