Lijst vormgeven als horizontaal menu

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

Volgende video: Background-color toepassen

Geef een reactie of stel een vraag

Geef een reactie

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

n deze online basiscursus  leer je de grondbeginselen van css (Cascading Style Sheets). 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.

Responsive design en -layout met css

CSS biedt met grid en flexbox een waanzinnig snelle, efficiënte en makkelijke manier om snel een responsive design te 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.

Tekst en afbeeldingen vormgeven met css

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.

Voor het maken van horizontale navigatiemenu's maken we ook gebruik van lijsten.

In het html-bestand staat de hoofdnavigatie bovenin het header-element. Deze gaan we helemaal opnieuw vormgeven en stijlen.

De html-broncode blijft gewoon zoals deze nu is.

Alleen verwijder ik alle hiervoor gemaakte css-stijlen uit mijn css-stijlblad.

Deze start met de class head ul en eindigt bij de li:hover.

De hoofdnavigatie is nu weer volledig ontdaan van opmaak. Dit is zoals standaard een lijst verschijnt.

Allereerst maak ik de selector aan voor de menulijst. De lijst staat in het html-element met de class-naam head. Dus .head

spatie en dan het soort lijst, de ul. De ul is de ouder,

de parent van zijn kinderen de list-items, de li's. Door aan de ul de opdracht display:

flex te geven worden alle list-items nu flex-items.

Met de eigenschap flex-direction en de waarde row plaats je de listitems naast elkaar op een rij.

Standaard krijgen de listitems van een ongenummerde lijst, een ul stippen.

Om die te verwijderen maak je een selector aan voor de listitems. Dat is dan .head ul li.

Plaats de eigenschap list-style-type met de waarde none om de opsommingstekens te verwijderen.

Om de menuknoppen groter te maken gebruik je een padding. Deze geef ik langs alle zijden tien pixels op met één rem.

Je kunt een rand opgeven. Dat doe ik met border-right, Ik wil een rand maar dan alleen aan de rechterkant.

Deze geef ik een breedte van één pixel, solid in een witte kleur. De de teksten zelf,

kun je vormgeven met de selector .head ul li a.

De menuteksten zijn namelijk gelinkt met het a-element in de html-pagina. Nu staat er een hashtag-teken,

maar normaliter plaats je hier natuurlijk de url naar de bijbehorende pagina. Links krijgen standaard een onderstreping.

Om die te verwijderen gebruik je de eigenschap text-decoration met de waarde none.

Met font-size bepaal je de corpsgrootte van de tekst. Die zet ik op twee rem, dat is gelijk aan twintig pixels.

Het letterype bepaal je met font-family. Ik kies voor de Heebo,

anders de verdana of gewoon een schreefloze met de generieke fontnaam sans-serif.

Wil je de teksten vetter maken, dan doe je dat met font-weight en de gewenste waarde als bijvoorbeeld zevenhonderd.

Om de gehele tekst in kapitalen te plaatsen gebruik je de eigenschap text-transform: uppercase.

Iets meer witruimte tussen de letters kan met letter-spacing en een kleine waarde als bijvoorbeeld punt twee rem.

Staat gelijk aan twee pixels. En de tekstkleur bepaal je met color. Deze maak ik nu zwart met black.

Om aan de bezoeker duidelijk te maken dat deze hoofdmenu-items aanklikbaar

maak je gebruik van de zogeheten pseudo-class selectors. Hierin is de volgorde belangrijk.

Je start met link, dan visited, daarna de hoover en als laatste de active.

Ik wil de lijst-items andere achtergrond-kleuren gaan geven als de bezoeker boven de links gaat staan.

Ik maak hiervoor eerst de selectors aan.

Zodra de bezoeker met de muis boven de link gaat staan

dan wil ik dat deze verkleurd naar een lichte achtergrondkleur. Dat geef ik aan bij hover. Bij backgroundcolor,

En dan # E, A, F nul, E nul.

Dat kun je direct testen in de browser en inderdaad,

Nu kun je zelf voor de overige pseudo-classes andere achtergrondkleuren gaan opgeven als je dat wilt.

Je kunt dan ook per pseudo-class de kleur van de letter aanpassen met de color-eigenschap.