Hoi Jelle,
Nou, dat kan wel; maar dat betekent dat je een zogenaamd "liquid design" wilt maken, dat goed is voor elke resolutie. En dat is als je nog niet zoveel css-kennis en -ervaring hebt een heel pittige uitdaging (en anders ook!).
- Niet alleen de achtergrond moet dan n.l. meescharnieren met de schermbreedte, ook alle inhoud-blokken die er in gaan komen moeten dat ook.
- Bij meer breedte van een inhoud-blok komen er meer woorden op een regel, en wordt dat blok tegelijkertijd minder hoog.
- Bij een ander inhoud-blok zal die hoogte niet automatisch meeschalen met het eerste blok, enz.
- Ook speelt mee: bij hoge resoluties kunnen het erg lange (onleesbare) regels tekst worden, als je daar geen speciale maatregelen voor treft.
- Kijk maar eens welke css-kunstgrepen uitgehaald moesten worden om deze pagina "liquid" te krijgen!
Als ik jou was, zou ik beginnen met een pagina met een vaste breedte.
Als je daarvoor 980px neemt, past ie nog goed op een scherm met resolutie van 1024*768px.
Voor hogere resoluties kan je 'm centreren, met:
Code:
body {
width: 980px;
margin: 0 auto;
}
De nul betekent hierin: onder en boven. De "auto" is: automatisch links en rechts, d.w.z. automatisch evenveel links en rechts, als er ruimte in de breedte over is.
Het volgende probleem zal zijn, dat niet alle pagina's even hoog zijn, en dat de hoogte van de achtergrond-afbeelding zich ook zal moeten aanpassen aan de hoeveelheid tekst op de pagina. Anders krijg je ofwel (bij weinig tekst) een erg hoge pagina, die je onderaan kunt scrollen maar waar je dan niets op ziet staan behalve de achtergrond. Ofwel (bij veel tekst) gaat de tekst onderaan uit de achtergrond ontsnappen: "het past er niet op!".
Gelukkig is hier met css wel een mouw aan te passen.
In nr. #8 schreef je:
... (ik kan namelijk geen css) ...
Dan zou je eens een kijkje kunnen nemen op bv.:
www.web-garden.be/cursus-html/cursus-html.
Het principe is erg eenvoudig. Waar nu bv. staat:
HTML:
<div style="margin: 210px 115px 0 115px;">
... inhoud van de site ...
</div>
maak je een
aangrijpingspunt met een "ID" of een "class" (een "ID" is maar voor één speciaal element, met een "class" kan je een hele serie tegelijk bedienen).
Dan wordt de html bv.:
HTML:
<div id="inhoud">
... inhoud van de site ...
</div>
Alles wat nu in de
style="..." eigenschap stond, wordt nu met het aangrijpingspunt (een ID wordt voorzien van een hekje #) als css-eigenschap opgeschreven:
Code:
#inhoud {
margin: 210px 115px 0 115px;
}
De css-eigenschappen voor alles wat je nodig hebt, kan je onder elkaar zetten en dan samen opslaan als stylesheet (met een
.css uitgang). Het enige wat dan nog nodig is, is in de <head> van je pagina een verwijzing naar waar het stylesheet gevonden kan worden, bv.:
HTML:
<head>
...
<link rel="stylesheet" type="text/css" href="stylesheets/mijnmooiestylesheet.css">
...
</head>
Klaar!
D.w.z.: nu begint het pas.
Want nu moet je weten wat er allemaal aan style-eigenschappen mogelijk is (bv.
dit, staat bij
deze tutorial; complete richtlijnen in technisch jargon:
hier [brrr...]), en hoe je die toepast. En dat is best heel veel (tegelijk).
Maar of je nu
style="margin: ...; padding: ... ; background: ...; color: ...;" enz. eigenschappen opneemt in de html of in een apart stylesheet, maakt niet uit: in beide gevallen moet je je in css-vaardigheden verdiepen om er iets moois van te maken.
Maar: leuk is het wel, want je gaat steeds meer ontdekken!
Succes!
Met vriendelijke groet,
CSShunter
