Tekstomloop met Float

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.

We gaan nu leren hoe je tekst om de afbeelding kunt laten lopen met de eigenschap float.

Voor de éénkoloms mobile-versie vind ik het prima dat de afbeelding tachtig procent van de beschikbare breedte in beslag neemt.

Maar als ik het scherm breder maak dan zeshonderd pixels.

Dan wijzigt de éénkoloms layout in een driekoloms-layout.

Dankzij de mediaquerie die ik onderaan mijn css-stijlblad heb beschreven.

Ik wil dat nu de afbeelding kleiner wordt.

Dus geef ik voor de afbeelding een breedte mee van vijftig procent.

Nu zou er ruimte zijn voor de tekst om ernaast te gaan lopen.

Dit doe je door de afbeelding uit zijn natuurlijke flow te halen.

Daarvoor gebruik je de eigenschap float met de waarde links of rechts.

Ik start met de rechts, right.

De afbeelding gaat dan aan de rechterkant staan.

De ruimte ernaast wordt opgegeven en hierdoor gaat de tekst ernaast lopen.

Je kunt de afbeelding ook naar de linkerkant plaatsen. Dan geef je left op als waarde in plaats van right.

Om afstand tussen de tekst en de afbeelding op te geven kun je een margin.

Naar rechts met margin-right, tien pixels.

Inderdaad wordt de linkermarge nu smaller maar de overige marges verdwijnen niet.

Dat komt omdat ik deze margin in de mobiele versie voor alle zijden gelijk is gezet met een margin van vijf procent.

Deze zal ik dan allemaal moeten overschrijven in de mediaquerie van min-width zeshonderd.

Dus in plaats van margin-right plaats je gewoon margin.

En voer ik vier waarden in. De eerste waarde is voor naar boven. Die zet ik op nul.

Dan de tweede waarde voor de rechterzijde blijft op tien pixels staan.

De derde en de vierde waarde zijn respectievelijk voor de onderzijde en linkerkant ook nul.

Dit is precies wat ik wilde. Dan maak het browservenster breder.

Er komt een moment dat de tweede kop ook naast de afbeelding kan gaan komen te staan.

Maar dat wil ik niet. De tweede kop, een h-drie moet hoe dan ook altijd op een nieuwe regel beginnen.

Ik kan voor deze h-drie een aparte selector gaan schrijven.

Hij staat in het html-element main met de class .main-content.

Spatie en dan de h-drie.

Daarmee kan ik dan alle h-drie's die in een html-element met de class-naam 'main-content' staan gaan voorzien van deze css-regel.

Het opheffen van de vrijgekomen ruimte bepaal je met de eigenschap clear.

De waarde 'both' maakt dat het niet uitmaakt of die vrije ruimte zich aan de linker- of rechterzijde bevindt.

Dus ongeacht of iets voorgaands naar links of rechts is gaan staan.

Dus ongeacht of iets voorgaands naar links of rechts is gaan staan.

Mag dit element niet meer in die ruimte gaan staan en wordt deze gedwongen op de eerstvolgende nieuwe regel te komen.

Ook precies wat ik wilde.

Alleen de kop staat dan wel heel dicht op de afbeelding.

Door een padding naar boven te geven aan de h-drie met padding-top tien pixels. k

Kun je ervoor zorgen dat deze kop nooit te dicht op de afbeelding komt te staan.

En dat de er altijd afstand is ten opzichte van de voorgaande paragraaf.