
Oh wauw! Volgens mij heb ik het nu eindelijk voormekaar met de layout
Auteur Richard,
geplaatst in "Website & Server" op
Dit artikel is 84 keer gelezen en heeft 0 reactie(s).
Dit artikel is 84 keer gelezen en heeft 0 reactie(s).
Gisteravond voelde ik aan m'n water dat ik op de goede weg zat met de layout van de website en vannacht werd ik er alweer mee wakker en dan kun je verder slapen wel vergeten, want dan blijft het in je koppie malen. De beste oplossing is dan ook om je nest uit te gaan en weer voor de computer te gaan zitten met een bak koffie.
Sommige onderdelen lagen te dicht tegen elkaar aan en dat zag er niet zo mooi uit vond ik. Ik had er liever wat ruimte tussen, maar dan flipt de boel weer helemaal om, omdat het dan volgens de browser niet er tussen past. Ja hallo! 25% en 75% maakt toch gewoon 100% zou je zeggen. Zelfs de W3-CSS w3-quarter en w3-threequarter klassen fixen dit vreemde gedrag niet. Hmmm maf! Maar eigenlijk ook wel weer logisch, er wordt geen rekening gehouden met marges en sommige onderdelen hebben nu eenmaal margers ingesteld. Nog veel logischer zou zijn dat men in de CSS specificate gewoon de buitenrand neemt van een element in plaats van de buitenrand minus de marge. Of nog beter gewoon een buitenrand maat opgeven en een buitenmarge en een binnenmarge in stellen van een element. Maar goed ik heb die CSS standaard niet verzonnen, daar schijnt een heel comite aan knappe koppen over te gaan en je ziet wel waar dat toe leidt.
Uiteindelijk maar eens gaan snuffelen bij W3-Schools, daar komt ook die W#-CSS stylesheet code vandaan. Met name die responsive en grtid toestanden vind ik wel een dingetje, dus toch maar eens even goed lezen. Daarbij zag ik dat ze in plaats van w3-row, w3-row-padding gebruiken, wat er dus voor zogt dat er wat extra ruimte wordt gemaakt binnen het element. Daarbij zag ik ook dat men nog 2 zaken gebruiken, w3-section en w3-stretch. Hiermee kreeg ik wel het gewenste effect en ziet het er net even wat mooier uit.
Ook in formulieren komt alles net even wat verder uit elkaar te staan, wat voor een beter overzicht zorgt, soms staat er wel heel veel dicht op elkaar, vooral als het scherm ook nog klein is.
Met deze nieuwe kennis, aan de slag gegaan en inderdaad het begint er nu een stuk beter uit te zien nu, dus hier ga ik mee verder.
Foto's bij dit artikel:
Klik op een foto vor een vergroting.
