headershadow

Latest Blogposts

Tekstvak maken met CSS

In het vorige artikel over CSS hebben we al heel even de box genoemd, waarin je bijvorbeeld een tekst kunt plaatsen. Zo’n box heeft heel veel mogelijkheden en kan bij heel wat zaken van pas komen. Bijvoorbeeld bij de manier waarop we op deze site een html-code weergeven. We gaan in dit artikel wat uitgebreider in op het maken van zo’n textbox, of, vrij vertaald, een tekstvak (kun je natuurlijk voor vanalles gebruiken).

We gaan even uit van het volgende artikeltje:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Duis autum vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facillisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facillisi.

Tekst die heel handig en veelgebruikt wordt voor dit soort voorbeelden. Nu zul je begrijpen dat er al aan de stijl van dit voorbeeld is gesleuteld voor deze website, maar als je hier klikt dan krijg je het voorbeeld te zien zonder ook maar een enkele stijverandering van onze kant. Om het allemaal wat aantrekkelijker te maken hebben we er een plaatje bij gezet.

Nu gaan we eens bekijken welke mogelijkheden er allemaal zijn voor ons artikeltje, eigenlijk voor ons tekstvak. Ten eerste gaan we er een rand omheen zetten. Ook moet de achtergrondkleur veranderen. Het lettertype passen we aan. Ook moet de tekst niet helemaal vooraan de kant beginnen. De regeleindes moeten ook mooi gelijk zijn, en het plaatje moet onderdeel worden van de tekst.

Eerst maken we een stijlblad. Daar moet de html-pagina heen verwijzen. dat verwijzen gaat als volgt:
<link rel=”stylesheet” type=”text/css” href=”stijl.css” />

het stijblad kan nu apart gemaakt worden en heeft als naam stijl en als extentie .css.

Omdat de stijl geldt voor dit tekstvak gebruiken we de tag p (paragraph) en daar geven we een naam aan (class). De naam is ‘nummer1′. Het eerste wat nu op het stijlbald komt is deze naam en accolades. Dus als volgt:
p.nummer1 {

}

Nu gaan we de verschillende onderdelen er aan toevoegen. De rand er omheen bepaal je met de ‘border’. In ons geval kiezen we voor een border om de hele tekst heen. Je kunt alle vier de randen apart benoemen door te kiezen voor border-left, border-bottom, border-right en border-top. Voor alle borders kun je weer een aantal onderdelen benoemen, namelijk de kleur (color), de dikte (width) en de stijl (style). Dit kun je allemaal apart benoemen, maar ook samenvoegen. In ons voorbeeld voegen we het samen als volgt:
p.nummer1 {
border: 1px solid gray;
}

Hierbij is de hele rand 1 pixel dik (1px), doorlopend (solid) en grijs van kleur (gray). Klik hier voor het voorbeeld. (In het voorbeeld hebben we de stijl in de htmlpagina gezet, om te kijken hoe dat werkt bekijk je de broncode.)

We gaan verder en willen nu dat de achtegrond van ons tekstvak blauw wordt. Dat gaat met ‘background-color’. Met background-image kun je een plaatje als achtergrond maken en met ‘background-repeat’ kun je bepalen hoe vaak dat plaatje terug komt. Voor ons niet nodig, maar het kan allemaal. Nu gaan we het lettertype aanpassen. We kiezen voor een pakketje, waarbij de browser kiest voor het eerste hem bekende lettertype. Dat gaat met ‘font-family’. Ook de lettergrootte passen we aan en dat doen we met font-size. Dit kan in px, pt, em en nog een paar mogelijke maten.
Het is ook nog eens handig om de tekst wat vanaf de kantlijn te laten beginnen. Dat doen we met padding-left. Hierbij kun je ook weer boven (top), onder (bottom), links (left) en rechts (right) aanpassen. Zet je alleen padding neer met een maat dan wordt alles aangepast aan die afstand.

De regeleindes moeten allemaal gelijk zijn en dat kan met text-align: justify;.
De breedte van de kolom bepalen we met width. Ook de hoogte kun je eventueel bepalen met height.
In de img-tag van het plaatje zetten we nu nog align=”left” hspace=”5px” en dan zijn we klaar.

We krijgen na deze veranderingen de volgende code:

p.nummer1 {
border: 1px solid gray;
background-color: #ADD8E6;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
padding: 5px;
text-align: justify;
width: 150px; }

Hierbij hoort dan dit voorbeeld.

0 reacties op “Tekstvak maken met CSS

Plaats een reactie

*