CSS - Voorbeelden

De CSS-toepassingen die hier behandeld worden, zijn zowel eenvoudige op-zich-zelf-staande toepassingen als Drupal-gerelateerde toepassingen.

zie ook artikel CSS - Inleiding.

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

De code...

...en het resultaat

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;
}

Tabbed navigation

Zie Tabbed navigation (Drupal)

Afbeelding en tekst naast elkaar verticaal gecentreerd

Probleem: Ik wil links een afbeelding hebben, en daarnaast een paragraaf. Ik wil ze allebei in het midden gecentreerd hebben. Dat laatste is me tot op heden niet gelukt.

Themen van een view: Tekst & afbeelding naast elkaar

Zie Theming van een View voor details.

CSS - Voorbeelden

Inhoud