Hoe maak je 'elastische spaties' aan de zijkant van je pagina?

Sommige beeldschermen hebben een 1:1 verhouding en sommigen bijv. 16:19. Maar hoe zorg je dat je website altijd goed weergegeven wordt. En dan bedoel ik dat de website gemaakt wordt voor 1:1 beeldscherm en dat er bij bredere schermen een witte balk aan de zijkant komt.

Bedankt

Verwijderde gebruiker

12 jaar geleden

in: Programmeren

1.1K

1.1K keer bekeken

Verwijderde gebruiker

12 jaar geleden

1:1 beeldschermen? 4:3, 5:4 ken ik maar 1:1 niet.

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Het beste antwoord

Wat je zoekt in de css "margin: 0 auto".

Voorbeeld:

Hier komt de inhoud in. :D

Met margin: 0 auto; centreer je de div tag in het scherm.
width: 300px betekend dat de div tag 300 pixels breed is.
height: 100% betekend dat hij het scherm van boven tot beneden vult. (Voor de duidelijkheid.)
background-color: Yellow betekend dat de achtergrond van de div tag geel is. (Zo kun je goed zien dat het gecentreerd is.)

Good luck. :)

Toegevoegd na 2 dagen:
Als je wil dat deze functie ook in IE 7 en 8 werkt, is het wel verplicht om deze regel helemaal bovenaan je html te zetten:

Dus in totaal wordt het dan:

Hier komt de inhoud in. :D

(Lees meer...)

Verwijderde gebruiker

12 jaar geleden

rose

12 jaar geleden

Dit werkt niet in Internet Explorer (althans, niet in 7 of 8)

rose

12 jaar geleden

Met de doctype erin werkt de height weer niet lekker...

Verwijderde gebruiker

12 jaar geleden

Gelukkig is de hoogte van de div afhankelijk van de inhoud. En mocht hij toch 100% willen, dan is dat te doen door de html en body een height van 100% mee te geven. Dus:
html {
height: 100%;
}
body {
height: 100%;
} Doctype is overigens wel verplicht. (Althans, als je je aan de w3c regels wilt houden.)

rose

12 jaar geleden

Da's ook een mooie oplossing. En, uiteraard, doctype is verplicht. Ik heb ook nooit anders beweerd. Toch?

Verwijderde gebruiker

12 jaar geleden

Dat probeerde ik ook niet te beweren hoor. ;) Was slechts een mededeling.

Verwijderde gebruiker

12 jaar geleden

Ik heb het met deze oplossing gedaan maar werkt het nu echt niet in ie 7 en 8 en is dit een grote hindernis, zodra mijn website online komt (binnen een paar dagen) dan zal ik meer toelichten

Andere antwoorden (2)

Wanneer je tekst uitvult in plaats van links, rechts of midden uitlijnt, dan zul je zien dat de elke regel even breed wordt.
In het Engels (en dus HTML e.d.) noemt men dit justify.
Zie de bron voor meer uitleg hierover.

(Lees meer...)

Verwijderde gebruiker

12 jaar geleden

Deze oplossing werkt ook in oudere (b.v. IE8 of ouder) browsers:

Hier kun je plaatsen wat je wilt

left: 50% zet de linkerkant van je content in het midden
margin-left: -400px schuift je content met de helft van je width naar links (waardoor de helft rechts en de helft links van het midden (left 50% !) komt)

Toegevoegd na 22 uur:
n.a.v. de opmerking van ivar:

Als je in je header het volgende script opneemt:

en de openingstag van je body verandert in:

dan voorkom je dat bij kleine vensters er inhoudt aan de linkerkant verdwijnt.

(Lees meer...)

rose

12 jaar geleden

Verwijderde gebruiker

12 jaar geleden

Nadeel van deze functie is, dat het div blok altijd gecentreerd wordt. Als je dus een klein scherm hebt, zie je niet het begin van de pagina, maar het midden, wat niet altijd de bedoeling is... (Zie: http://ikore.nl/gv/images/margin_vs_left.png) Dat hij niet werkt in IE 7 en 8 is in principe geen grote ramp, gezien hij toch normaal wordt weergegeven (alleen niet gecentreerd).

rose

12 jaar geleden

Dat laatste is natuurlijk aan sgcr om te beoordelen, maar het werkt daar niet, het geeft geen 'elastische marges', hetgeen de vraag was... Maar je hebt gelijk dat bij vensterbreedtes minder dan de breedte van je div de zaak naar links opschuift, dat is een nadeel. Een voordeel is dan wel weer dat je opmaak niet verwrongen wordt. Je plaatje verheldert overigens niets. Althans, niet voor mij.

Verwijderde gebruiker

12 jaar geleden

Reden dat mijn manier het niet deed bij IE was omdat de doctype niet aanwezig was. Met doet hij het prima. :) Plaatje was overigens alleen ter verduidelijking van wat ik erboven had beschreven.

rose

12 jaar geleden

Ik heb overigens mijn antwoord aangepast teneinde het bovenvermelde probleem te verhelpen...

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000