Randen in alle vormen en kleuren

Info 
Door: Zorzie Moeilijkheidsgraad: 1/3
Views:18.867Reacties: 5(Bekijken)
  Log in om zelf te reageren
 Waardering:7.5/10 (4 stemmen)



Deze tutorial zal gaan over randen in CSS, en hoe ze weer te geven zoals je zelf wil. Randen kunnen je images, tables ... een nieuwe kleur/vorm/wending geven en zo je site nog beter maken. In CSS heeft men veel mogelijkheden met randen en die ga ik nu met u allemaal overlopen.

Algemeen.
We beginnen met de algemene vorm van een rand in css. Deze wordt aangegeven door het attribuut 'border'. Dat lijkt me logisch. Als men een border wil weergeven, moet men altijd 3 items aanduiden, nl. de dikte, de kleur, en de vorm. De dikte wordt aangegeven met het attribuut 'border-width', de kleur met 'border-color' en de vorm met 'border-style'. Even een voorbeeldje :

#Code
1
2
3
4
.rand { border-style : solid ;
          border-width : 1px ;
          border-color : #000000 ;
}

Dit voorbeeld geeft een gewone, zwarte rand weer die 1 pixel groot is. In het volgende deel leren we nog over andere soorten randen.

Soorten randen
Van een border kan men niet alleen de kleur en de dikte veranderen, maar ook het type. Dit doe je dan met het attribuut border-style. Het standaardtype is 'solid', de gewone, ononderbroken rand. Maar er bestaan nog allerlei verschillende soorten borders. Dit is zeer handig als je afwisseling in je pagina wil krijgen.

*Websitemaken.be gebruikt stipped borders rond zijn codeareas.

Alle randen appart
Men kan alle randen ook aparte stijl, dikte of kleur geven. Dit is een zeer handige functie in CSS, maar niet zo veel gebruikt. Toch kan ze af en toe van pas komen. Dit wordt aangegeven door verschillende attributen. Deze zijn : 'border-left', 'border-right', 'border-top' en 'border-bottom'. Deze worden weer gevolgd door : 'width', 'style' en 'color'. Een voorbeeldje :
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
.rand2 { border-top-width : 3px ;
            border-top-style : solid ;
            border-top-color : #000000 ;
            border-right-width : 2px ;
            border-right-style : double ;
            border-right-color : #ff0000 ;
            border-bottom-width : 3px ;
            border-bottom-style : solid ;
            border-bottom-color : #000000 ;
            border-left-width : 2px ;
            border-left-style : double ;
            border-left-color : #ff0000 ;
}

Men kan ook alle borders appart gebruiken, dus als je bv alleen een rand links wil, geef je dat aan met 'border-left' en moet je de rest van de attributen niet meer weergeven

Zo, dat was alles wat ik te vertellen heb over borders
Tot de volgende
Zorzie

5 reacties
edter Geplaatst op 06-06-2007 om 16:35
Avatar van edter

Regular
nee, dit kan niet met 1 div, hier heb je dan minimaal 2 verschillende div's voor nodig.

van de onderste gebruik je dan 1px border, 1px background. en van die daarboven zit gebruik je ook 1px border.
Niels1994 Geplaatst op 07-03-2007 om 14:43
 

Regular
kan je een dubbele border maken? met drie randen met de middelste rand in het rood?
nielles Geplaatst op 09-11-2006 om 12:28
 

Regular
mmmmmmmmmmmmm.....
derek Geplaatst op 24-01-2005 om 19:04
 

Regular
kan je ook borders in framesets gebruiken en zo ja, hoe kan je dan een style toevoegen in een frameset tag.
joolee Geplaatst op 25-07-2004 om 12:11
Avatar van joolee

Regular
mooie tutorial, dat kan denk ik best we van pas komen aangezien ik niet wist dat je ook de randen apart kan aanpassen

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