Hoogtes en Laagtes in CSS

Info 
Door: Zorzie Moeilijkheidsgraad: 2/3
Views:13.258Reacties: 4(Bekijken)
  Log in om zelf te reageren
 Waardering:6.7/10 (3 stemmen)



Ik ga het in deze tutorial een beetje hebben over hoogte en breedte in CSS, height en width. Gemakkelijk, weliswaar, maar ik durf er voor wedden dat sommige mensen een aantal begrippen of mogelijkheden in CSS nog niet kennen. Daarom neem ik het nog eens allemaal met u door.

Hoofdstuk 1 : Normal width en height.
Hier ga ik het hebben over hoe je normale hoogte en breedte in een stylesheet bepaald. Het is, zoals verwacht, ongeveer hetzelfde als in HTML. Men kan namelijk ook hier de hoogte en breedte aangeven in percentages of een gewoon zuiver getal (pixels). Om percentages aan te duiden gebruikt men het logische '%'-tekentje. Gewone pixels kunnen ofwel met 'px' erachter weergegeven of gewoon zonder iets erachter. Even een voorbeeld dan :
Breedte wordt aangegeven met het attribuut width en Hoogte met height.

#Code
1
2
3
4
.voorbeeld1{
width : 100%;
height : 120px;
}

Tot zover is het allemaal afgeleid van HTML. Maar nu kan men breedte en hoogte in CSS ook aangeven door het attribuut auto. Daarmee wordt de breedte en/of hoogte automatisch geregeld (als dat sowieso niet is).

Hoofdstuk 2 : Minima en maxima.
Laten we een stap verder gaan. Zoals je uit de titel kan afleiden ga ik het hier hebben over minimumhoogtes en -breedtes en maximumhoogtes en -breedtes. Dit kan handig zijn wil men het design niet laten verknoeien door juist meer of minder tekst.
Deze 2 worden aangegeven door 4 attributen :
*min-height
*max-height
*min-width
*max-width
Deze worden ook aangeduid in ofwel percentages of pixels, maar niet in 'auto', wat nogal logisch is.
een voorbeeld :
#Code
1
2
3
4
.vb2{
min-height : 50px ;
max-height : 100px;
}

Men kan hier ook gaan knoeien met percentages en pixels door mekaar, maar dan moet men zien dat in alle resoluties de minimumhoogte niet groter is dan de maximumhoogte. Nogal logisch lijkt me.

Dit was weer een tutorialtje van mijn hand. Ik hoop dat u ervan genoten heeft (en iets bijgeleerd heeft natuurlijk).
Tot de volgende
Zorzie

4 reacties
Blizt Geplaatst op 18-05-2005 om 16:01
 

Webmaster
Cepheus Geplaatst op 09-03-2005 om 21:23
Avatar van Cepheus

Regular
Paar kleine foutjes,

- na width: 100% staat geen ;
- er moet ALTIJD een eenheid worden gegeven (zoals dexus al zei)
- tussen het getal en de eenheid mag geen spatie

Franky Braem Geplaatst op 17-05-2004 om 09:29
 

Regular
Let op dat de min-width, max-width en max-height nog niet ondersteund worden door IE.
Admin Geplaatst op 16-05-2004 om 11:03
 

Webmaster
Vooral die hoogte wordt ook steeds belangrijker, aangezien het height-attribuut voor html voor veel elementen deprecated is.

Pagina 1 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder