28 Dec 2005 13:41

0 reacties

Listed - deel 3

In deel 1 hebben we een HTML-pagina gemaakt met een todo-lijstje. In deel 2 hebben we een CSS bestand met wat code aan de pagina gelinkt. In deel 3 gaan we voor meer opmaak zorgen.

Gecentreerd

Op dit moment wordt de tekst in de browser tegen de linkerkant van het venster geplakt. Als je met een redelijk grote schermresolutie werkt is het handiger om de tekst meer in het midden van het venster te plaatsen. We passen onze HTML code aan: 


<body>
<h1>Listed</h1>
<ul>
	<li>Nieuwjaarsbrief voorlezen</li>
	<li>Melk kopen</li>
	<li>Cadeaus kopen</li>
</ul>
</body>

wordt… 


<body>
<div id="content">
<h1>Listed</h1>
<ul>
	<li>Nieuwjaarsbrief voorlezen</li>
	<li>Melk kopen</li>
	<li>Cadeaus kopen</li>
</ul>
</div>
</body>

In tegenstelling tot bijvoorbeeld de a, p en h1 elementen heeft het div element geen semantische waarde. Het geeft met andere woorden geen extra betekenis aan de tekst die het omvat. Vergelijk dit met het p element: dit geeft aan dat de tekst binnen de p tags tot een paragraaf behoort. Net zoals tekst binnen h1 tags een titel is. Toch is het div element van groot belang voor webpagina’s: ze laten toe om dingen te doen die zonder dit element moeilijk of semantisch niet correct zouden zijn (dit is bijvoorbeeld een p element gebruiken om een titel voor te stellen).

De div in bovenstaande code maakt het voor ons bijvoorbeeld mogelijk om de tekst in het midden van het scherm te gaan plaatsen. Hiervoor voegen we volgende CSS code toe aan screen.css: 


#content {
	margin: 0 auto;
	width: 500px;
}

In het vorige deel werd al vermeld hoe CSS code wordt opgebouwd. Toen hebben we echter gebruik gemaakt van het body element als selector. Hier gebruiken we #content als selector. Dit wil zeggen dat de browser de properties binnen de accolades moet toepassen op het HTML element met de id content. Even een blik werpen op onze HTML code: die id wordt gebruikt door ons div element. De CSS code die we net hebben toegevoegd wordt dus op de div toegepast.

De eerste property die we bekijken is width. De waarde van de property is 500px. Als de browser dit toepast op de div krijgt deze een vaste breedte van 500 pixels. Stel dat we tekst zouden toevoegen binnen de div tags: de lijnen zijn dan maximaal 500 pixels lang, in plaats van de totale breedte van je venster.

De tweede property is margin. Met behulp van deze property kunnen we een marge toepassen op een element. 0 auto is een afkorting voor 0 auto 0 auto waarbij we de kanten van het element aflopen in wijzerrichting, startend met de bovenkant, eindigend met de linkerkant. Een margin met de waarde 0 auto wil eigenlijk zeggen: ik wil geen marge aan de bovenkant (en onderkant) van het element, maar ik wil een automatische marge langs de linker- en rechterkant van het element. Die automatische marge wordt berekend door de browser en komt neer op het oplossen van de vergelijking: auto = (vensterbreedte - breedte) / 2. Als we even aannemen dat ons browservenster 1024 pixels breed is komen we tot: auto = (1024 pixels - 500 pixels) / 2 = 524 pixels / 2 = 262 pixels. De browser zal aan de linker- en rechterkant een marge van 262 pixels plaatsen waardoor de div in het midden van het browservenster komt te staan.

Logo time

Listed

Hoog tijd om die titel te vervangen door een afbeelding. We gaan het eenvoudig houden en de tekst binnen de h1 tags vervangen door een img (of image) element. Ik heb de afbeelding geplaatst binnen een images directory in de reeds bestaande styles directory. 


<h1><img src="styles/images/listed.png" width="167" height="104" alt="Listed" /></h1>

Het src attribuut werkt op dezelfde manier als het href attribuut van de a en link elementen die we eerder tegenkwamen. De waarde van het attribuut is een absoluut of relatief pad naar een afbeelding. Het alt attribuut geeft een alternatief aan. Stel dat er wat mis is gegaan en de gebruiker de afbeelding niet kon downloaden: dan wordt de waarde van het alt attribuut gebruikt in plaats van de afbeelding. De width en height bevatten respectievelijk de breedte en hoogte van de afbeelding, uitgedrukt in pixels.

De lijst wat opfleuren

Nu gaan we het lijstje zelf onder handen nemen. Eerst gaan we de marker verwijderen. De marker is het bolletje of vierkant dat voor ieder list item staat. 


ul {
	list-style-type: none;
}

Bovenstaande code voegen we toe aan onze CSS. Deze code wordt toegepast op ieder ul element in de webpagina. Dit maakt weinig uit aangezien we momenteel slechts 1 zo’n element hebben. De property list-style-type laat toe om aan te geven welk type marker moet worden gebruikt: in ons geval is dit none of geen.

Als je nu nog eens naar de pagina in je browser kijkt zal je zien dat de marker verdwenen is. Spijtig genoeg hebben we wel nog altijd een inspringing bij ieder item in de lijst. Om deze te verwijderen passen we onze CSS code aan. 


ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

De property margin kennen we al. Deze op 0 zetten zorgt er voor dat we geen inspringing meer hebben in Internet Explorer. Als we de pagina bekijken in Firefox hebben we echter nog altijd een inspringing. Firefox gebruikt immers de padding property om voor inspringing te zorgen.

margin en padding lijken erg veel op elkaar, maar de eerste werkt buiten het element terwijl de andere binnen het element werkt. Als we bijvoorbeeld een marge van 10 pixels toepassen op de div dan zal die op 10 pixels van de rand van het browservenster worden geplaatst. Als we echter een padding van 10 pixels toepassen op de div zal de div tegen de rand van het browservenster worden geplaatst, maar zal de inhoud van de div 10 pixels van de rand van de div worden geplaatst.

Aangezien Firefox dus die padding gebruikt, moeten we ook de padding op 0 zetten. Vervolgens voegen we onderstaande code toe. 


li {
	background: #def;
	border: 1px solid #bcd;
	margin: 0 0 10px 0;
	padding: 10px;
}

Deze code wordt toegepast op ieder list item. De background property krijgt de waarde #def wat een afkorting is voor #ddeeff en overeenkomt met een lichtblauwe kleur. Dan geven we ieder item een rand. De border property krijgt immers de waarde 1px solid #bcd wat wil zeggen dat rondom een list item een lijn moet worden getrokken die

  • 1 pixel breed is: 1px.
  • vol is: solid. Een andere mogelijkheid is bijvoorbeeld dashed waardoor we een streepjeslijn zouden krijgen.
  • als kleur een wat donkerder blauw dan de achtergrondkleur heeft: #bcd, een afkorting voor #bbccdd.

Om wat ruimte tussen de verschillende items te krijgen passen we een margin van 10 pixels toe op de onderkant van ieder list item. Om de tekst van een list item wat van de rand te plaatsen, zetten we de padding op 10 pixels. padding: 10px is een afkorting voor padding: 10px 10px wat op zijn beurt dan weer een afkorting is voor padding: 10px 10px 10px 10px.

Van boven naar rechts, van onder naar links

In bovenstaande code heb ik laten zien dat we waarden voor margin en padding op verschillende manieren kunnen opgeven. Misschien is het tijd voor een overzicht (je kan in het onderstaande margin vervangen door padding).

margin: Xpx
In dit geval wordt een marge van X pixels toegepast op de boven-, rechter-, onder- en linkerkant van het element.
margin: Xpx Ypx
In dit geval wordt een marge van X pixels toegepast op de boven- en onderkant en een marge van Y pixels op de rechter- en linkerkant van het element.
margin: Xpx Ypx Zpx Apx
In dit geval wordt een marge van X pixels toegepast op de bovenkant, een marge van Y pixels op de rechterkant, een marge van Z pixels op de onderkant en een marge van A pixels op de linkerkant van het element.

Alsof dit nog niet genoeg is hebben we nog andere opties: we kunnen margin: Xpx Ypx Zpx Apx vervangen door (ook hier mogen we margin vervangen door padding…) 


margin-top: Xpx;
margin-right: Ypx;
margin-bottom: Zpx;
margin-left: Apx;

Dit kunnen we ook gebruiken voor de rand van een element: 


border-top: 0;
border-right: 1px solid #ff0000;
border-bottom: 5px dotted #00ff00;
border-left: 10px dashed #0000ff;

Het element waarop deze code wordt toegepast zou geen rand aan de bovenkant hebben, maar wel…

  • een 1 pixel brede, volle, rode lijn aan de rechterkant
  • een 5 pixel brede, groene, stippellijn aan de onderkant
  • een 10 pixel brede, blauwe, streepjeslijn aan de linkerkant

Scripting

In het volgende deel gaan we er voor zorgen dat de todo-lijst wordt opgeslagen in een database en dat alle interactie met het lijstje gebeurt via scripting.

Dit artikel werd opgenomen in ontwikkeling, webdesign.