CSS - Voorbeelden
Weergave van tekst
Zie Jon Duckett, p. 276-296 voor een compleet overzicht, en sommige concrete voorbeelden elders in dit hoofdstuk.
Afbeeldingen centreren
Centreren van afbeeldingen kan complex zijn. Dit is oa. omdat afbeeldingen geen block-objecten zijn, maar inline objecten. Bij block-objecten heb je voor en na het object een nieuwe regel. Het object staat dus vrij en kan gecentreerd worden. Bij inline-elementen of -objecten heb je niet die ruimte eromheen. Daarom heeft het weinig zin om een attribuut dat met centreren te maken heeft, direct toe te kennen aan een afbeelding: De afbeelding kan geen kant op. De truuk lijkt te zijn om de afbeelding in te kapselen in een block-element, of om het grotere element waar de afbeelding in zit, te laten centreren. Een voorbeeld van inkapselen in een block-element:
<p align="center"> <img src="afbeelding.jpeg" /> </p>
of:
<div align="center"> <img src="afbeelding.jpeg" /> </div>
In deze voorbeelden zijn vorgeving en inhoud niet van elkaar gescheiden. We kunnen dit van elkaar scheiden door het align-commando onder te brengen in een klasse-definitie in een style-sheet, en bij de declaratie van de de div-sectie daar naar te verwijzen. Het complete html-bestand:
<html> <head> <link href="stijl.css" rel="stylesheet" type="text/css" /> <title> LocaalCentreren.htm </html> </head> <body> <div id="Centreren"> <img src="Logo_0500x148.jpg"> </div> </body> </html>
Het bijbehorende css-bestand:
#Centreren
{
text-align:center;
}
Overigens kun je je afvragen of het zin heeft om in dit geval een extern css-bestand te gebruiken, omdat de betreffende klasse maar één commando lang is. Aan de andere kant, de definitie kan al snel complexer worden, zoals in onderstand voorbeeld. Overigens is deze klasse niet alleen toepasbaar op afbeelden.
#Centreren
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
Overigens, niet alle browsers lijken toe te staan dat een afbeelding wordt geconverteerd van lijn-element naar blok-element.
Verder lijkt het soms nodig te zijn om de float:none-eigenschap toe te passen, in combinatie met center. Een voorbeeld is het centreren van een logo in een Zen-subtheme:
#logo
{
margin:0 auto 0 auto;
padding:0;
float: none;
text-align:center;
}
Vermoedelijk is de float:none-declaratie nodig om een eerdere declaratie waarin het object naar links dreef, te overloaden.
Meerdere afbeeldingen naast elkaar
Tekstkleur aanpassen
Probleem: Op een website willen we in de voeter de kleur van tekst aanpassen. De tekst staat hard-coded in page.tpl.php. We kunnen daar ook ter plekke iets met kleur hacken, maar liever regelen we dat afzonderlijk middels css.
Oplossing: In style.css onderaan de volgende code toegevoegd:
/* Strompf, mei 2011 */
div.VoetTekst
{
color: #000000;
}
En dit wordt op de volgende wijze aangeroepen in page.tpl.php:
<div class="VoetTekst"> Lorum ipsum </div>
Tabel centreren
Html-code:
<html> <head> <link href="stijl.css" rel="stylesheet" type="text/css" /> </head> <body> Dit is een gewone paragraaf <table class="CentreerTabel"> <tr> <td> 1,1 </td> <td> 1,2 </td> </tr> <tr> <td> 2,1 </td> <td> 2,2 </td> </tr> </table> En nog een gewone paragraaf </body> </html>
CSS-code:
.CentreerTabel
{
margin-left: auto;
margin-right: auto;
}
Tabel, borders & ruimte daartussen
HTML
<table class="test">
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
CSS
table.test td {
border: 1px solid #dadada;
}
table.test {
border-collapse: separate;
border-spacing: 10px;
}
De truuk is, dat je de betreffende CSS-code moet toepassen op het juiste object. Je kunt de code niet toepassen op iets dat hoger in de hierarchie staat en dan verwachten dat het vanzelf wordt toegepast op lagere objecten. Specifieker: Het tweede CSS-statement moet echt op een tabel worden toegepast. In Drupal werd dit:
.view-grid-met-alle-wielen table
{
border-collapse: separate;
border-spacing: 15px;
}
.view-grid-met-alle-wielen td
{
border: 1px solid #dadada;
}
Als ik in het eerste statement table achterwege liet, werkte het niet.
Tabel met kolommen van gelijke breedte