Al 1000 keer gesteld denk ik...

[DeGeestJ]

Het is een vraag die al duizenden keren is gesteld denk ik, maar kga het toch nog maar eens vragen...

als je een website maakt hoe maak je die dan dat iedere resolutie die goed ziet zonder dat je beeld in elkaar loopt en dergelijke dingen...moet ik in % werken of px?

heeft er mss iemand van jullie een zeer goede uitleg voor, want dit is namelijk 1 van de dingen waar ik niet uit wijs geraak en die ik toch wel heel hard nodig heb om een deftige website ineen te proberen boxen...

Groeten Jeroen:evil:

 

[That Guy]

Je gaat dan met procenten werken. Het werkt ongeveer zo:



100% is de totale breedte van je scherm. Oftewel, als je scherm ge-resized is naar 800px. breedte, en je hebt een element dat dus een 'width' van '100%' heeft, zal het dus 800 px zijn. Als je je scherm dan resized naar 20px, zal het element dus ook maar 20px. zijn.

Dit is erg handig, maar het probleem dat je wel krijgt is dat je site misvormd wordt als je het te klein maakt (plaatjes bewegen verkeerd, achtergrond, etc etc.) Daarom is het handig om een min-xxx mee te geven. Dit werkt zo:

//css
element {
   width: 100%;
   /* hier dus de min-width: */
   min-width: 800px;
}

dit zorgt ervoor dat het element de breedte krijgt die je aangeeft, in dit geval 100%, maar minimaal 800px is. Een voorbeeld: kijk eens op www.void-studios.com en resize je pagina. Zoals je ziet blijft de layout goed, terwijl de pagina minder dan 1000px breedt is (je krijgt dan wel een scrollbar). Een voorbeeld welke % gebruikt EN min-width: http://second-thought.nl/ - resize, en je zult zien.


*note: je hebt ook min-height enzo. Go figure.

:thumb: