Zoals je ziet gaan we in deze stap vorm brengen aan de top van de pagina.
Aangezien het logo van Modern Markup al aanwezig is als een IMG
element, hoeven we aan het logo zelf geen aandacht te besteden. Wel moeten we
ervoor zorgen dat het logo en het zoek formulier naast elkaar komen in dezelfde
zwarte balk die we nu bovenaan de pagina zien.
Als je de HTML code van deze pagina bekijkt zie je dat we een
DIV element hebben toegevoegd en om het logo en het zoek formulier
hebben gedaan. Dit hebben we gedaan voor de afbeeldingen die we als achtergrond
gebruiken. Zoals je ziet bestaat de top namelijk uit 3 plaatjes:
De linkerkant van de balk zit als aan het logo vast, dus hoeven we ons daar
niet druk om te maken. De rechterkant van de balk met de ronde hoeken kunnen als
achtergrond worden ingesteld van het zoekformulier, dus dat is ook niet een
probleem. De achtergrond van de balk die je ziet tussen het logo en het zoek
formulier in en achter het formulier kan echter nergens als achtergrond worden
ingesteld. Daarom hebben we ervoor gekozen om het logo en het zoek formulier
samen te voegen in 1 DIV element zodat we op dat element de
achtergrond van de balk kunnen plaatsen.
Maar voordat we gaan beginnen met het toevoegen van de achtergrond
afbeeldingen om de balk te vormen moeten we er eerst voor zorgen dat
DIV#top (de DIV die we net hebben toegevoegd) aan
het goede formaat voldoet. Dus we beginnen met het samenvoegen van het logo en
het zoek formulier op 1 regel. Eerder in de handleiding kwamen we in aanraking
met het float
eigenschap. Dit eigenschap gebruikten we toen om de biografie van Sir Tim
Berners-Lee naast zijn foto te krijgen. Deze methode gaan we voor de top van de
pagina opnieuw gebruiken. Dus we gebruiken deze code:
h1 {
float:left;
}
#top form {
float:right;
}We geven het zoek formulier aan door #top form als selector te
nemen. Als we alleen form hadden gekozen, zoals we bij
h1 hebben gedaan, dan zou elk formulier op de pagina
float:right krijgen. Bij H1 kunnen we echter
#top wel weg laten omdat we maar 1 H1 element op de
hele pagina hebben, dus hoeven we niet bang te zijn dat die code andere
elementen zal beïnvloeden. Zo zie je dus dat je door slim met selectors om te
gaan op sommige plekken in je CSS bytes kan besparen waardoor je CSS
overzichtelijk en klein van formaat blijft.
Ook zien we float:right bij het zoek formulier (#top
form). Dit hebben we gedaan zodat het formulier helemaal aan de
rechterkant van de balk gaat. Doen we dat niet, dan komt het formulier direct
naast het logo door de float:left die we H1 hebben
gegeven.
Nu gaan we de achtergrond afbeeldingen aan de top toevoegen. Maar eerst
moeten we ervoor zorgen dat de balk het juiste formaat heeft. Aangezien een
DIV een block-level element is, is dit element net zo breed als het
element waar de DIV#top in zit. In dit geval is dat het
BODY element. Deze is dankzij de 1.5em padding die we
aan het HTML element hebben gegeven bijna net zo breed als de
pagina. Zoals we het willen dus. Maar nu nog de hoogte. Het logo is 55 pixels
(beeldpunten) hoog, dus moeten we ervoor zorgen dat de hele DIV#top
én het zoek formulier ook 55 beeldpunten hoog zijn. Daarvoor voegen we deze CSS
code toe:
#top,#top form {
height:55px;
}Nu zijn we dan echt klaar om de achtergrond afbeeldingen toe te voegen. We
beginnen met het element waar we al mee bezig waren: DIV#top. Aan
dat element voegen we de volgende code toe:
#top,#top form {
height:55px;
background:url(/style/head-bg.png);
}head-bg.png is het plaatje van 1 pixel breed waar we het al eerder over
hadden. Aangezien we niet no-repeat, repeat-x of
repeat-y aangeven wordt dit plaatje over het hele DIV#top
element herhaald waardoor het het effect creëert van een solide balk.
Nu is het echter zo dat ook het zoek formulier dezelfde achtergrond krijgt
omdat die ook in de selector staat. Dat moeten we natuurlijk niet hebben want
die hebben we nodig om de rechterkant van de balk als achtergrond te geven. Geen
nood! We zeggen gewoon dat #top form een andere achtergrond moet
hebben door de volgende code toe te voegen aan #top form. Let
echter op dat dit CSS blok na die van #top,#top form komt
aangezien de browser de laatst aangegeven achtergrond kiest voor een element.
#top form {
float:right;
background:url(/style/head-right.png) no-repeat right;
}We willen dat de rechterkant maar 1 keer wordt laten zien, dus voegen we
achter de IRI (beter
bekend als URL) het sleutelwoord
no-repeat. En uiteraard hoort de rechterkant van de balk helemaal
rechts, dus voegen we ook het sleutelwoord right toe, waardoor de
afbeelding maar één keer aan de uiterste rechterkant van het zoek formulier (en
dus de balk) wordt laten zien.
Verder voegen we wat padding toe om het zoek formulier op de
juiste plaats te zetten. Ook veranderen we de kleuren van de tekst en de
formulier elementen om het wat mooier eruit te laten zien. Hier besteden we
echter niet zoveel aandacht aan. Ben je benieuwd hoe dit is gedaan, lees dan de
CSS code van
deze pagina. Heb je hier geen behoefte aan, dan gaan we beginnen aan de navigatie.
Copyright © 2006 Modern Markup. Alle rechten voorbehouden.