Verticaal layouten met flexbox

uit de cursus Webdesign & Layout met css (2019)

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een antwoord

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Webdesign & Layout met css (2019)

perm_identity Belinda | video_library 58 video's | query_builder 03:28:15

Webdesign met CSS

Met css bepaal je de layout en de vormgeving van een webpagina. CSS schrijf je in een apart bestand dat je koppelt aan de html-pagina’s. Hiermee koppel je de inhoud los van de vormgeving en dat biedt heel veel voordelen. Dankzij externe css-stijlbladen zorg je voor een consistente vormgeving en opmaak voor de gehele website. Leer op welke manier je CSS kan verbinden aan webpagina’s en gebruik te maken van de juiste css-selectors.

CSS blijft in ontwikkeling

CSS biedt een groot aantal css-stijlopdrachten waarmee je onder andere teksten en afbeeldingen perfect kunt vormgeven. CSS is continu in beweging omdat hier elke dag aan ontwikkeld wordt. Het is dus een taak om altijd op de hoogte te blijven van de nieuwe mogelijkheden en de veranderingen. Maar de basis is de basis, en die leer je in deze cursus. Vanuit dit startpunt kun je jezelf blijven ontwikkelen in deze krachtige manier van het consistent vormgeven van je HTML-pagina’s.

Doelgroep van deze cursus

Wil jij zelf de vormgeving van html-pagina’s bepalen dan is deze cursus absoluut een must.

Wat ga je leren

In deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). Waaronder hoe je met grid en flexbox op een waanzinnig snelle, efficiënte en makkelijke manier snel een responsive design kunt maken die zich automatisch op elk formaat beeldscherm perfect aanpast. In deze cursus leer je direct hoe je jouw website responsive maakt met mediaqueries. Klinkt misschien ingewikkeld maar je zult merken dat dit reuze meevalt. En daarnaast is het vaardig worden van responsive design een ‘must’ voor webdesigners.

Vereiste voorkennis en vaardigheden

Voor het volgen van deze cursus heb je kennis en ervaring nodig van het vervaardigen en structureren van html-pagina’s.

Open uit de local root folder de bestanden index-.html en index-.css.

Onderaan de pagina in de footer staat een lijst.

De footer is onderdeel van de layout van het grid.

De ul is de ouder van een lijst met links.

Als ik de links, dus de lijstitems wil gaan layouten verticaal of horizontaal.

Dan gebruik je hiervoor flexbox.

Ik plaats daarvoor in het stijlblad voor de ouder van de lijst een selector.

Deze plaats ik nog voor de mediaquerie voor schermen vanaf zeshonderd pixels.

Daar kom ik in de volgende video op terug.

De footer heeft als classnaam footer. Dus ik typ punt footer en dan ul

om aan het ul-element de flexopdracht te kunnen verbinden met de eigenschap display:flex.

En kijk in het voorvertoningsvenster.

Direct worden alle list-items achter elkaar aangezet.

Dat is de standaard waarde.

Maar, de richting die ik wil aanhouden is onder elkaar, dus flex-direction is column.

Zo simpel is het en erg veel meer opties voor de verticale flexitems zijn er nu niet.

Maar misschien wel leuk om nog even iets meer te doen met de vormgeving.

Dit komt later nog uitgebreid aan bod bij het vormgeven van teksten en lijsten.

Maar wellicht al wel leuk om nu alvast mee kennis te maken.

Ik plaats de volgende selector. Dit wordt .footer ul li

Allereerst haal ik de standaard bullets weg met list-style-type:none;

Zo de bullets zijn verdwenen.

Ik geef de li's ook een achtergrondkleur met de background-color.

Ik gebruik de kleur van de aside om hierop toe te passen.

Met een margin: twee pixels en daarna de waarde nul...

zorg ik dat er alleen transparante afstand naar de boven- en onderkant wordt aangehouden.

Nu nog de teksten wat meer afstand geven ten opzichte van de boxrand met padding: tien pixels.

Dan wordt de padding langs alle zijden toegepast. Zo, dat ziet er al wat beter uit.

Om de links te kunnen gaan vormgeven typ ik de selecter .footer ul li a -a- voor het linkelement.

Ik maak de links zwart met color:black;

En ik verwijder de onderstreping met text-decoration:none;

Nu de onderstreping weg is is het niet duidelijk meer dat dit links zijn. Dus ga ik nog een mouse-over maken.

Hiervoor plaats ik de pseudo-selector .footer ul li:hover.

En als achtergrondkleur gebruik ik dezelfde kleur als het content-gebied.

Plak ik als background-color.

Kijk nu reageren deze links als ik er met de muis overheen beweeg.

En zou je de links ook nog willen centreren. Gebruik je daarvoor de opdracht text-align:center.

Je ziet hoe eenvoudig het is om de children van een parent om te zetten naar flexitems.

En hoe eenvoudig je deze vervolgens kunt voorzien van vormgeving.

En hoe eenvoudig je deze vervolgens kunt voorzien van vormgeving.