category css

Maak een CSS menu met list-items

0

Als je een horizontale menu wilt hebben maakte ik altijd gewoon de teksten naast elkaar en om ze uit te lijnen zette ik gewoon spaties erin. Maar op die manier is het natuurlijk er veel pielen met spaties enzovoorts.

Als je een goed gestructureerd manier een menu wilt maken moet je met UL en LI gaan werken. Je kan de UL en LI aansturen met CSS.

Voorbeeld

Hieronder de HTML en CSS van (horizontaal & verticaal) menu die opgebouwd is met list-items en opgemaakt met css. (Omschrijvingen staan in de CSS) Lees verder »

category css

CSS classes die niet mogen ontbreken

1

Bij het bouwen van websites gebruik ik in CSS altijd de reset code. Andere nuttige CSS classes zijn bijvoorbeeld float of clear.

Ik ga jullie kort uitleggen waarom ik ze gebruik en wat ze doen. Lees verder »

category algemeen

Handige webdesign boek/ tijdschrift

0

Inspiratie en trucs haal je natuurlijk vaak zelf via het internet. Maar soms is het veel leuker om die informatie via gedrukte media te hebben in de vorm van boeken of tijdschriften.

Onderstaande zijn voor mij de beste boek/ tijdschriften die mij erg geholpen heeft om webdesign leuk te vinden.
Lees verder »

category css

Container DIV in het midden zetten met css

0

Toen ik nog maar klein een beetje bekend ben met css heb ik me altijd afgevraagd hoe ik een website nou in het midden van de pagina kon krijgen.

Voor sommige mensen is dat een makkie, maar als je het niet weet kan dit handig zijn.

01. HTML

Maak eerst een container DIV aan. Dit is de DIV die om alles heen zit.
Lees verder »

category css

CSS Reset code voor webdesigners

0

Vaak werk je website uit in css en je heb de hele pagina klaar ga je testen op verschillende browsers zoals: Firefox, Safari en Internet Explorer zie je ineens dat sommige elementjes niet goed met elkaar aansluit of er aantal dingen verspringen.

Dit heeft soms te maken met de manier van website weergeven van verschillende browsers. 
Om dat te voorkomen zet ik vaak een universele reset in de css. Lees verder »

category css

Embed video op de juiste formaat

0

Zoals je weet kan je via Youtube onder (embed) functie de gewenste video op jou website plaatsen.
Youtube.com heeft een vaste breedte en hoogte voor al hun video’s en dat is 425 pixels breed.


Stel nou dat je website nou eens wat breder content gedeelte heeft. Dat betekent als je een Youtube video op je site zet vult het niet op hele breedte in.

Met een simpele CSS code kan je de video op maat maken voor je website!


object embed, object
   {
   float: left; border: 5px solid #ddd;
   width: 515px;
   }  /*stel gewenste breedte in */

Letop! * De videobreedte schaalt niet mee.

category css

Juiste lettertype voor je website vinden?

0

www.csstypeset.com is een zeer handige website voor webdesigners die naar de juiste lettertype voor hun website willen vinden.
Je kan realtime vanuit je browser de juiste lettertype uitkiezen. Je kan eigenschappen zoals, lettertype, letter spatiëring, lettergrootte, kleuren instellen.

Lettertypes die op de website staat worden op alle browsers weergegeven!

category css

Meerdere classes in je html toekennen

0

Wist je dat je 2 classes kunt gebruiken onder 1 div, h1, p en andere elementen?
Je maakt bijvoorbeeld een website met erg veel content en veel verschillende vierkanten.

Bij de ene wil je padding op 10pixels hebben en de andere niet. Hoe doe je dat zonder 2 verschillende div classes in css aan te maken? Lees verder »

category css

Webpagina print layout in css beheersen

0

Je kan een html pagina voor het printen met css vormgeven door bijvoorbeeld fonts zoals Times te gebruiken om de leesbaarheid te verbeteren.

Of je hebt een bepaalde div die op het web 200 pixels breed wordt weergegeven, maar die wil je graag op volledige breedte op je A4 hebben.
Ook kan je bepaalde stukjes tekst weglaten bij het printen, zoals de footer van je website.
Lees verder »

category css

1, 2 en 3 css kolommen layout maken

0

Als je even niet weet hoe je een stramien (1 kolom 2 kolommen 3 kolommen) voor je website in css moet maken heb ik hier alvast een beginnetje voor jullie.

  • een kolom pagina layout
  • twee kolommen pagina layout
  • drie kolommen pagina layout

Kopieer en plak onderstaande code in Dreamweaver of Kladblok en sla dit op als index.html
Vragen en opmerkingen zijn altijd welkom!
Lees verder »