css layout
- Onderwerp starter willem008
- Startdatum
- Status
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ik zie dat je 'n nieuw topic hebt geopend. Mooi.
Ik ga eerst weer even zeuren over de validator, want er zitten 'n paar fouten in.
css : http://jigsaw.w3.org/css-validator/
html: http://validator.w3.org/
Dat is echt altijd het eerste wat je moet doen als er problemen zijn, heel vaak gaat het om 'n typo of zo die je zelf over het hoofd ziet.
In dit geval is 't helaas niet zo simpel.
Je gebruikt relatieve maten (procenten e.d.) door absolute maten (px e.d.) heen. De pagina is 90% breed. Bij 'n smaller scherm wordt die dus 90% van 'n smaller scherm. Maar die foto's staan op 750 px van links, en die staan op 'n smaller scherm dus nog steeds op 750 px van links: buiten het scherm.
Wat je zou kunnen doen. Je hebt 'n div #container. Om te beginnen zou ik álles daarin zetten. Nu staan menu en header en zo er buiten. Je kunt dan die #container gebruiken om het goed op het scherm te zetten.
Die div#container geef je in de css position: relative;
Nu kun je de inhoud van #container, zoals je foto's en tekst, neerzetten ten opzichte van #container.
De breedte van 90% haal je weg. Je hebt twee mogelijkheden: rekening houden met schermen van 800 px breed (die zijn er nauwelijks nog), of met schermen van 1024 px en breder (het leeuwendeel).
Als je alleen voor die bredere gaat, krijgen de kleinere 'n horizontale scrollbalk.
#container geef je 'n breedte van 1000 px of 780 px. De eerste houdt alleen rekening met die bredere schermen. ('t Is iets smaller vanwege de scrollbalk en zo die ook nog op 't scherm moeten).
(Er zijn trouwens ook nog andere oplossingen, maar dat gaat tamelijk ingewikkeld worden, dus ik zou 't eerst gewoon even zo doen.)
Je tekst staat in 'n <h4>. Daar worden zoekmachines (en spraakbrowsers en zo) niet vrolijk van. 'n <h> is bedoeld voor kopjes. De <h1> voor de belangrijkste (maar 1x gebruiken op 'n pagina), <h2> voor minder belangrijke, enz.
Die <h4> moet je vervangen door <div>. De lettergrootte en zo geef je dan aan in de css. Je hebt nu <h4> gebruikt voor het uiterlijk, css is daar veel geschikter voor.
De ruimte aan de bovenkant van de div kun je ook krijgen door in de css 'n margin-top op te geven. Nu kunnen er heel veel <br>'s weg. Dat is belangrijk, want 'n <br> verschilt per browser iets. Bovendien is 'n margin-top veel simpeler te wijzigen (1 getal in de css) dan 97 <br>'s.
Ruimte tussen twee alinea's krijg je niet door 'n <br>, maar door elke alinea in 'n <p> te zetten. Die heeft automatisch ruimte. Nu kun je weer 'n serie <br>'s weghalen.
Deze div (die dus de h4 heeft vervangen), geef je nu 'n breedte van 600 px of 800 px, afhankelijk van met welk scherm je rekening wilt houden. Aan de linkerkant geef je de div 'n marge (die moet je dan weer van de breedte aftrekken). Mag ook smaller natuurlijk, net wat je mooi vindt.
Nu kun je alle <br>'s om nieuwe regels te forceren ook weghalen, want nu worden automatisch nieuwe regels begonnen op de grens van de div.
Omdat de div 'n breedte heeft en marges, kunnen nu ook alle nbsp's weg. Dat maakt je code ook 'n heel stuk overzichtelijker.
Dus anders dan in het verleden gebruik je nauwelijks nog <br>'s en nbsp's om iets op de goede plek te zetten, maar zoveel mogelijk css. Is even wennen maar uiteindelijk veel sneller en makkelijker en nauwkeuriger.
Nu heb je rechts 'n lege kolom voor de foto's. En omdat de tekst nu altijd dezelfde breedte heeft, ongeachte de resolutiek kun je nu veilig rechts die foto's parkeren.
't Makkelijkste is om die foto's niet links, maar rechts te positioneren: right: 0;
Staan ze altijd rechts, zonder rekenwerk.
Ze worden gepositioneerd ten opzichte van #container. Om dat te kunnen doen moest je #container die position: relative geven, anders kan dat niet.
Als je alles binnen die #container hebt gezet, krijg je in eerste instantie waarschijnlijk even dat menu en header en zo niet goed meer staan. Dat kun je echter later corrigeren: je kunt alles gaan positioneren t.o.v. #container.
Als je wilt kun je de header en 't menu ook nog centreren, en voor 't menu zijn ook iets betere oplossingen mogelijk dan elke link in 'n eigen div. maar ik denk dat je hier al even mee vooruit kunt.
Ik ga eerst weer even zeuren over de validator, want er zitten 'n paar fouten in.
css : http://jigsaw.w3.org/css-validator/
html: http://validator.w3.org/
Dat is echt altijd het eerste wat je moet doen als er problemen zijn, heel vaak gaat het om 'n typo of zo die je zelf over het hoofd ziet.
In dit geval is 't helaas niet zo simpel.
Je gebruikt relatieve maten (procenten e.d.) door absolute maten (px e.d.) heen. De pagina is 90% breed. Bij 'n smaller scherm wordt die dus 90% van 'n smaller scherm. Maar die foto's staan op 750 px van links, en die staan op 'n smaller scherm dus nog steeds op 750 px van links: buiten het scherm.
Wat je zou kunnen doen. Je hebt 'n div #container. Om te beginnen zou ik álles daarin zetten. Nu staan menu en header en zo er buiten. Je kunt dan die #container gebruiken om het goed op het scherm te zetten.
Die div#container geef je in de css position: relative;
Nu kun je de inhoud van #container, zoals je foto's en tekst, neerzetten ten opzichte van #container.
De breedte van 90% haal je weg. Je hebt twee mogelijkheden: rekening houden met schermen van 800 px breed (die zijn er nauwelijks nog), of met schermen van 1024 px en breder (het leeuwendeel).
Als je alleen voor die bredere gaat, krijgen de kleinere 'n horizontale scrollbalk.
#container geef je 'n breedte van 1000 px of 780 px. De eerste houdt alleen rekening met die bredere schermen. ('t Is iets smaller vanwege de scrollbalk en zo die ook nog op 't scherm moeten).
(Er zijn trouwens ook nog andere oplossingen, maar dat gaat tamelijk ingewikkeld worden, dus ik zou 't eerst gewoon even zo doen.)
Je tekst staat in 'n <h4>. Daar worden zoekmachines (en spraakbrowsers en zo) niet vrolijk van. 'n <h> is bedoeld voor kopjes. De <h1> voor de belangrijkste (maar 1x gebruiken op 'n pagina), <h2> voor minder belangrijke, enz.
Die <h4> moet je vervangen door <div>. De lettergrootte en zo geef je dan aan in de css. Je hebt nu <h4> gebruikt voor het uiterlijk, css is daar veel geschikter voor.
De ruimte aan de bovenkant van de div kun je ook krijgen door in de css 'n margin-top op te geven. Nu kunnen er heel veel <br>'s weg. Dat is belangrijk, want 'n <br> verschilt per browser iets. Bovendien is 'n margin-top veel simpeler te wijzigen (1 getal in de css) dan 97 <br>'s.
Ruimte tussen twee alinea's krijg je niet door 'n <br>, maar door elke alinea in 'n <p> te zetten. Die heeft automatisch ruimte. Nu kun je weer 'n serie <br>'s weghalen.
Deze div (die dus de h4 heeft vervangen), geef je nu 'n breedte van 600 px of 800 px, afhankelijk van met welk scherm je rekening wilt houden. Aan de linkerkant geef je de div 'n marge (die moet je dan weer van de breedte aftrekken). Mag ook smaller natuurlijk, net wat je mooi vindt.
Nu kun je alle <br>'s om nieuwe regels te forceren ook weghalen, want nu worden automatisch nieuwe regels begonnen op de grens van de div.
Omdat de div 'n breedte heeft en marges, kunnen nu ook alle nbsp's weg. Dat maakt je code ook 'n heel stuk overzichtelijker.
Dus anders dan in het verleden gebruik je nauwelijks nog <br>'s en nbsp's om iets op de goede plek te zetten, maar zoveel mogelijk css. Is even wennen maar uiteindelijk veel sneller en makkelijker en nauwkeuriger.
Nu heb je rechts 'n lege kolom voor de foto's. En omdat de tekst nu altijd dezelfde breedte heeft, ongeachte de resolutiek kun je nu veilig rechts die foto's parkeren.
't Makkelijkste is om die foto's niet links, maar rechts te positioneren: right: 0;
Staan ze altijd rechts, zonder rekenwerk.
Ze worden gepositioneerd ten opzichte van #container. Om dat te kunnen doen moest je #container die position: relative geven, anders kan dat niet.
Als je alles binnen die #container hebt gezet, krijg je in eerste instantie waarschijnlijk even dat menu en header en zo niet goed meer staan. Dat kun je echter later corrigeren: je kunt alles gaan positioneren t.o.v. #container.
Als je wilt kun je de header en 't menu ook nog centreren, en voor 't menu zijn ook iets betere oplossingen mogelijk dan elke link in 'n eigen div. maar ik denk dat je hier al even mee vooruit kunt.
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ja, ik weet dat je 't graag zelf doet, dus succes! En je gaat zeker nog terug komen, denk ik zo 
Trouwens: als je deze pagina hebt aangepast en zo, dan heb je in feite het grootste deel voor je andere pagina's ook al gedaan. Als je die ook zou willen aanpassen, hoef je maar relatief weinig in de html aan te passen, en de css is grotendeels hetzelfde.
Trouwens: als je deze pagina hebt aangepast en zo, dan heb je in feite het grootste deel voor je andere pagina's ook al gedaan. Als je die ook zou willen aanpassen, hoef je maar relatief weinig in de html aan te passen, en de css is grotendeels hetzelfde.
- Status
