"Dé grootste en gratis computerhelpdesk van Nederland"
Lay out gemaakt nu goed coderen..
- Onderwerp starter volcom
- Startdatum
- Status
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ik zou echt eerst even die knoppen afmaken. Met die line-height ga je te maken krijgen met verschillen tussen browsers.
Als die menubalk met knoppen af is (en goed in alle browsers), dan kun je daarna allerlei andere details gaan doen. Anders ga je nu hieraan sleutelen en blijkt later dat 't toch weer iets hoger of lager moet.
Hij moet trouwens bij #kop, niet bij #kop img
Als die menubalk met knoppen af is (en goed in alle browsers), dan kun je daarna allerlei andere details gaan doen. Anders ga je nu hieraan sleutelen en blijkt later dat 't toch weer iets hoger of lager moet.
Hij moet trouwens bij #kop, niet bij #kop img
Ik zie nergens #kop ?
Ik ga er nu mee beginnen, alleen weet ik nog niet goed hoe de perfecte width voor de buttons te krijgen..
EDIT: Buttons zijn gelukt met de maten, gewoon wat gespeeld.
Alleen is de plaats tussen de buttons fout, waar verander ik dit?
Ik ga er nu mee beginnen, alleen weet ik nog niet goed hoe de perfecte width voor de buttons te krijgen..
EDIT: Buttons zijn gelukt met de maten, gewoon wat gespeeld.
Alleen is de plaats tussen de buttons fout, waar verander ik dit?
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Die #kop moet je toevoegen in de css. Maar ik zou dat later doen, als 't menu werkt. Dat soort hele kleine details moet je pas als laatste doen. Het belangrijkste is dat eerst de grote lijn werkt.
Die knoppen. De breedte moet je uitproberen.
Je hebt de knop info en diensten al uitgesneden. Beide knoppen passen goed. Op precies dezelfde manier doe je de andere knoppen. Met 'n grafisch programma kun je precies opmeten hoe groot ze zijn.
't Enige dat belangrijk is: de hoogte van alle knoppen moet precies hetzelfde zijn. Diensten is 1px hoger dan Info, dat zie je al, dat verschil. Nou kun je 1 px nog wel corrigeren door in de html gewoon dezelfde hoogte als bij info op te geven, maar beter is als ze precies even hoog zijn.
Ik weet niet waarmee je die knoppen uitsnijdt, maar elk programma moet kunnen laten zien hoe groot de uitsnede is.
Maar ik zou gewoon lekker beginnen. Als je 'n kopie hebt gemaakt, kan er niks mis gaan. En mislukken doet 't toch wel 'n aantal keren, daar hoe je helemaal niet je best voor te doen
Die knoppen. De breedte moet je uitproberen.
Je hebt de knop info en diensten al uitgesneden. Beide knoppen passen goed. Op precies dezelfde manier doe je de andere knoppen. Met 'n grafisch programma kun je precies opmeten hoe groot ze zijn.
't Enige dat belangrijk is: de hoogte van alle knoppen moet precies hetzelfde zijn. Diensten is 1px hoger dan Info, dat zie je al, dat verschil. Nou kun je 1 px nog wel corrigeren door in de html gewoon dezelfde hoogte als bij info op te geven, maar beter is als ze precies even hoog zijn.
Ik weet niet waarmee je die knoppen uitsnijdt, maar elk programma moet kunnen laten zien hoe groot de uitsnede is.
Maar ik zou gewoon lekker beginnen. Als je 'n kopie hebt gemaakt, kan er niks mis gaan. En mislukken doet 't toch wel 'n aantal keren, daar hoe je helemaal niet je best voor te doen
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
In de code die je nu hebt, staan twee knoppen in de html (info.jpg en diensten.jpg). Bij diensten.jpg moeten nog de juiste maten worden ingevuld.
Op dezelfde manier zet je die andere knoppen erin, ook met 'n <li> en zo.
Met de breedte van de knoppen bedoel ik dat alle tekst op 'n knop moet passen, dus info.jpg is smaller dan diensten.jpg.
De breedte TUSSEN de knoppen komt later.
Je moet gewoon die knoppen uitsnijden en in die <li>'s stoppen.
Als dat is gedaan, dan gaan ze goed worden neergezet, op de juiste afstand van elkaar. Maar dat doe je niet met de html, dat doe je met css. En daarvoor heb je dus eerst die knoppen nodig.
Op dezelfde manier zet je die andere knoppen erin, ook met 'n <li> en zo.
Met de breedte van de knoppen bedoel ik dat alle tekst op 'n knop moet passen, dus info.jpg is smaller dan diensten.jpg.
De breedte TUSSEN de knoppen komt later.
Je moet gewoon die knoppen uitsnijden en in die <li>'s stoppen.
Als dat is gedaan, dan gaan ze goed worden neergezet, op de juiste afstand van elkaar. Maar dat doe je niet met de html, dat doe je met css. En daarvoor heb je dus eerst die knoppen nodig.
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ha, dat is leuk! En ik maar denken dat je liep te emmeren over 't maken van die knoppen. Zijn ze al af.
Elke knop staat in 'n <li>
Als je de breedte van die <li>'s aanpast, komen de knoppen beter verdeeld te staan.
Probeer maar 'ns of je 't op die manier naar tevredenheid kunt verdelen.
Elke knop staat in 'n <li>
Als je de breedte van die <li>'s aanpast, komen de knoppen beter verdeeld te staan.
Probeer maar 'ns of je 't op die manier naar tevredenheid kunt verdelen.
Inderdaad werkt perfect !
http://droogkuis-castermans.be/nieuw/
alleen is de spatie tussen info & diensten te groot , maar dat ligt aan het design zeker?
http://droogkuis-castermans.be/nieuw/
alleen is de spatie tussen info & diensten te groot , maar dat ligt aan het design zeker?
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Nee, die opening is prima te corrigeren. Anders had je net zo goed bij 'n tabel kunnen blijven. Dat zijn juist de voordelen van divs en zo.
* Je hebt voor de </a> 'n spatie staan. 'n Afbeelding is 'n inline-element, net als tekst. In sommige browsers wordt die spatie getoond, waardoor je 'n klein verschil krijgt. Weg ermee dus.
* Je hebt niet gevalideerd, want er mist 'n </div>. Ik weet niet precies meer waar die </div> mist, dus dat mag je zelf ook even uitvogelen. 'n Missende </div> kan tot de wildste problemen leiden.
Aan 't eind van #kop staat <div>, dat moet </div> zijn.
Wat heel belangrijk is: als je goed inspringt met je code, zie je heel snel waar 'n </div> of zoiets mist:
Dus je moet je code even netjes laten inspringen. En valideren!
* #envelop is 1027px breed. Dat levert op 'n 1024 breed scherm, het meest gebruikte op de desktop, net 'n horizontale scrollbalk op. Als je 'm 1000 px breed maakt, krijg je die horizontale scrollbalk niet.
Je moet dan ook header.gif iets smaller maken.
Dit hoeft niet, maar je voorkomt 'n horizontale scrollbalk. Op 'n kleiner scherm natuurlijk niet, maar dat valt niet te voorkomen.
* Als #envelop 1000 px breed zou zijn, dan worden de <li>'s 199 px breed. Dan passen er precies vijf naast elkaar. Als je #envelop 1027 breed laat, wordt 't 1027 : 5 = 205 px breedte voor elke <li>.
Er zit 'n kleine speling in omdat IE 6 nog wel 'ns spontaan iets net te breed wil maken, en dan past 't net niet meer.
* Dan de kier tussen Info en Diensten. Als je de <li>'s goed over de volle breedte neerzet, is 't al veel beter verdeeld. Misschien vind je 't dan zelfs al goed.
Als je 't dan ook nog te breed vindt, dan kun je de eerste <li> (die met info.jpg erin dus) 'n id geven: <li id="een"> (of welke naam dan ook).
En dan in de css
Nu schuiven de laatste vier knoppen 'n stuk naar links. Of 182 px. Of 178. Je moet maar even uitproberen. Bij mij is 't, vind ik, netjes als #envelop 1000px breed is, de <li>'s 200 px en de eerste <li> met info 180px.
Als je die eerste wat smaller maakt, heb je trouwens gelijk die speling voor IE 6.
* Je hebt voor de </a> 'n spatie staan. 'n Afbeelding is 'n inline-element, net als tekst. In sommige browsers wordt die spatie getoond, waardoor je 'n klein verschil krijgt. Weg ermee dus.
* Je hebt niet gevalideerd, want er mist 'n </div>. Ik weet niet precies meer waar die </div> mist, dus dat mag je zelf ook even uitvogelen. 'n Missende </div> kan tot de wildste problemen leiden.
Aan 't eind van #kop staat <div>, dat moet </div> zijn.
Wat heel belangrijk is: als je goed inspringt met je code, zie je heel snel waar 'n </div> of zoiets mist:
HTML:
<div>
<p>.....</p>
<div>
<img>
<div>
<p>.....</p>
</div>
</div> <!-- Als deze </div> mist, valt dat gelijk op. -->
</div>* #envelop is 1027px breed. Dat levert op 'n 1024 breed scherm, het meest gebruikte op de desktop, net 'n horizontale scrollbalk op. Als je 'm 1000 px breed maakt, krijg je die horizontale scrollbalk niet.
Je moet dan ook header.gif iets smaller maken.
Dit hoeft niet, maar je voorkomt 'n horizontale scrollbalk. Op 'n kleiner scherm natuurlijk niet, maar dat valt niet te voorkomen.
* Als #envelop 1000 px breed zou zijn, dan worden de <li>'s 199 px breed. Dan passen er precies vijf naast elkaar. Als je #envelop 1027 breed laat, wordt 't 1027 : 5 = 205 px breedte voor elke <li>.
Er zit 'n kleine speling in omdat IE 6 nog wel 'ns spontaan iets net te breed wil maken, en dan past 't net niet meer.
* Dan de kier tussen Info en Diensten. Als je de <li>'s goed over de volle breedte neerzet, is 't al veel beter verdeeld. Misschien vind je 't dan zelfs al goed.
Als je 't dan ook nog te breed vindt, dan kun je de eerste <li> (die met info.jpg erin dus) 'n id geven: <li id="een"> (of welke naam dan ook).
En dan in de css
Code:
li#een {width: 180px;}Als je die eerste wat smaller maakt, heb je trouwens gelijk die speling voor IE 6.
Laatst bewerkt:
Voor de div he.
eerst was het dit:
en zoals je zei heb ik dit er van gemaakt:
Maar dan krijg ik een heel ander resultaat , dus ik heb vanonder gewoon nog een </div> bijgezet en dan is het wel goed ..
En dan voor de ruimte tussen info & diensten , wel ik heb de envelop veranderd naar width = 1000 & de header dus ook.
En de LI's een id gegeven.
T'is nog altijd hetzelfde ..
eerst was het dit:
Code:
<div id="kop">
<img src="header.gif" width="1000" height="150" alt="">
<div>en zoals je zei heb ik dit er van gemaakt:
Code:
<div id="kop">
<img src="header.gif" width="1000" height="150" alt="">
</div>En dan voor de ruimte tussen info & diensten , wel ik heb de envelop veranderd naar width = 1000 & de header dus ook.
En de LI's een id gegeven.
T'is nog altijd hetzelfde ..
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Je hebt bij ul#menu li ook 'n breedte van 180 px staan. Dus zijn alle <li>'s 180 px breed. Je moet die breedte in 200 px veranderen, dan heeft alleen de eerste 'n breedte van 180 px.
Die </div> moet echt aan het eind van #kop. Je hebt nu de héle pagina in twee divs gestopt: #envelop én #kop. Dat gaat gegarandeerd problemen opleveren.
De kop is 'n logisch afgerond geheel, net zoals bijvoorbeeld het menu. Dus die open en sluit je met 'n <div></div>. Als dat niet goed werkt, moet je kijken waarom 't niet goed werkt en dat corrigeren. Daarom is voortdurend valideren ook zo belangrijk: dan zie je gelijk als je 'n fout maakt, en niet drie dagen later of zo als je geen flauw idee meer hebt wat je hebt gedaan.
In #kop staat hier nog niet zoveel css. Maar er kan best meer bij gaan kopen. Die css geldt nu opeens voor de héle pagina. De kans dat je je straks 'n ongeluk zoekt waarom iets niet werkt is heel groot op deze manier. In de css voor #kop staat bijvoorbeeld al wel #kop img {border: 0;}
Als je nou later .voet-tekst {img: border; solid red ipx;} opgeeft, werkt dit niet, want 'n id is meer waard dan 'n class. Probeer er dan maar 'ns achter te komen waarom die border niet werkt. Nu is je pagina nog redelijk simpel, maar dat hoeft niet zo te blijven.
Ik zet hier de code neer zoals die bij mij is, met </div> aan het eind van #kop.
Deze code springt ook netjes in. Dat is echt belangrijk, want anders overzie je het niet meer. Het kost mij ook onwijs veel extra tijd als ik steeds die code eerst moet gaan laten inspringen en weer terugkomen. En ga er maar van uit dat als ik dat al doe omdat ik anders geen overzicht heb, dat jij het dan ook echt niet goed ziet zonder inspringen.
Verder heb ik class="voet" veranderd in class="voet-tekst". Je had 'n id én 'n class met dezelfde naam, dat mag niet. 'n id moet echt helemaal uniek zijn.
Komt de code:
Die </div> moet echt aan het eind van #kop. Je hebt nu de héle pagina in twee divs gestopt: #envelop én #kop. Dat gaat gegarandeerd problemen opleveren.
De kop is 'n logisch afgerond geheel, net zoals bijvoorbeeld het menu. Dus die open en sluit je met 'n <div></div>. Als dat niet goed werkt, moet je kijken waarom 't niet goed werkt en dat corrigeren. Daarom is voortdurend valideren ook zo belangrijk: dan zie je gelijk als je 'n fout maakt, en niet drie dagen later of zo als je geen flauw idee meer hebt wat je hebt gedaan.
In #kop staat hier nog niet zoveel css. Maar er kan best meer bij gaan kopen. Die css geldt nu opeens voor de héle pagina. De kans dat je je straks 'n ongeluk zoekt waarom iets niet werkt is heel groot op deze manier. In de css voor #kop staat bijvoorbeeld al wel #kop img {border: 0;}
Als je nou later .voet-tekst {img: border; solid red ipx;} opgeeft, werkt dit niet, want 'n id is meer waard dan 'n class. Probeer er dan maar 'ns achter te komen waarom die border niet werkt. Nu is je pagina nog redelijk simpel, maar dat hoeft niet zo te blijven.
Ik zet hier de code neer zoals die bij mij is, met </div> aan het eind van #kop.
Deze code springt ook netjes in. Dat is echt belangrijk, want anders overzie je het niet meer. Het kost mij ook onwijs veel extra tijd als ik steeds die code eerst moet gaan laten inspringen en weer terugkomen. En ga er maar van uit dat als ik dat al doe omdat ik anders geen overzicht heb, dat jij het dan ook echt niet goed ziet zonder inspringen.
Verder heb ik class="voet" veranderd in class="voet-tekst". Je had 'n id én 'n class met dezelfde naam, dat mag niet. 'n id moet echt helemaal uniek zijn.
Komt de code:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Droogkuis</title>
<style type="text/css">
#envelop {
width: 1000px;
margin: 0 auto;
}
#kop img {
border: none;
}
#inhoud {
background-color: #E1E1E1;
font-family: Verdana, Geneva, sans-serif;
background-image: url(inhoud.gif);
padding: 45px;
margin-top:
5px;
}
#voet {
text-align: center;
margin:
2em;
}
.voet-tekst {
background-color: #F4F4F4;
padding: 1em;
border: 1px solid #d3d3d3;
font-family: Arial, Helvetica, sans-serif;
}
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
background: #e9e9e9;
height: 70px;
}
ul#menu li {
float: left;
width: 200px;
text-align: center;
}
ul#menu li#een {
width: 180px;
}
a#info {
display: inline-block;
width: 93px;
height: 64px;
}
a#diensten {
display: inline-block;
width: 166px;
height: 64px;
}
a#prijslijst {
display: inline-block;
width: 135px;
height: 64px;
}
a#contact {
display: inline-block;
width: 168px;
height: 64px;
}
a#route {
display: inline-block;
width: 132px;
height: 64px;
}
ul#menu img {
border: 0;
}
#menu a:hover img {
display: none;
}
#menu a#info:hover {
background: url(info-hover.jpg);
}
#menu a#diensten:hover {
background: url(diensten-hover.jpg);
}
#menu a#prijslijst:hover {
background: url(prijslijst-hover.jpg);
}
#menu a#contact:hover {
background: url(contact-hover.jpg);
}
#menu a#route:hover {
background: url(route-hover.jpg);
}
</style>
</head>
<body>
<div id="envelop">
<div id="kop"><img src="header.gif" width="1000" height="150" alt=""></div>
<ul id="menu">
<li id="een"><a href="info.html" title="Meer info" id="info"><img src="info.jpg" alt="Meer info" width="93" height="64"></a></li>
<li><a href="diensten.html" title="Diensten" id="diensten"><img src="diensten.jpg" alt="Diensten" width="166" height="64"></a></li>
<li><a href="prijslijst.html" title="Prijslijst" id="prijslijst"><img src="prijslijst.jpg" alt="Prijslijst" width="135" height="64"></a></li>
<li><a href="contact.html" title="Contact" id="contact"><img src="contact.jpg" alt="Contact" width="168" height="64"></a></li>
<li><a href="route.html" title="Route" id="route"><img src="route.jpg" alt="Route" width="132" height="64"></a></li>
</ul>
<div id="inhoud">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
</div>
<div id="voet">
<p><span class='voet-tekst'>Droogkuis Castermans & Jasper Vlayen © 2010</span></p>
</div>
</div>
</body>
</html>nu is het perfect zo !
Bedankt!
ik heb dit toegevoegd aan de css
En nu is de spatie ook meteen goed tussen menubalk & header =D
http://droogkuis-castermans.be/nieuw/
Bedankt!
ik heb dit toegevoegd aan de css
Code:
#kop {
line-height: 14px;
}http://droogkuis-castermans.be/nieuw/
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Klopt. 'n <img> is 'n inline-element, staat gewoon op de regel tussen de tekst. Daarom komt er soms (afhankelijk van hoe je 't precies gebruikt) 'n extra ruimte onder om letters als p en q neer te kunnen zetten. Dat heeft al heel wat mensen gek gemaakt. Netjes dat je 't zelf hebt gevonden.
Nog wel net een fout gevonden.
Ik heb dus alle pagina's gemaakt maar nu bij de contact pagina dan staat heel de "site" meer naar rechts dan alle andere pagina's
de code van de tekst is dit
Ik heb ze al op alle verschillende manieren proberen te zetten maar niets lukt.
De p's ook weg gedaan en vervangen met <br> op het einde maar niets werkt ..
De tekst zelf staat juist maar de "site" zelf dus de kaders (header,inhoud,footer) die staan teveel naar links t.o.v de andere pagina's.
Ik heb dus alle pagina's gemaakt maar nu bij de contact pagina dan staat heel de "site" meer naar rechts dan alle andere pagina's
de code van de tekst is dit
Code:
<div id="inhoud">
<p>Adres: Hovestraat 21 - 2650 Edegem</p>
<p>Telefoon: 03 / 458 10 88</p>
<p>Fax: 03 / 458 10 71</p>
<p>Email: koen@droogkuis-castermans.be</p>
<p>Site: www.droogkuis-castermans.be</p>
<p>Btw: BE 578 778 610</p>
<p>HRA 348 641 </p>
</div>De p's ook weg gedaan en vervangen met <br> op het einde maar niets werkt ..
De tekst zelf staat juist maar de "site" zelf dus de kaders (header,inhoud,footer) die staan teveel naar links t.o.v de andere pagina's.
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Daar is zonder 'n link naar de pagina niets van te zeggen.
Ik weet niet of je in Firefox werkt, maar voor dit soort dingen is Firebug heel handig. Kllikken waar de fout zit en je ziet exact de css die daar geldig is. (Na enige oefening, dat wel...)
Ik weet niet of je in Firefox werkt, maar voor dit soort dingen is Firebug heel handig. Kllikken waar de fout zit en je ziet exact de css die daar geldig is. (Na enige oefening, dat wel...)
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Je contactpagina is veel korter dan de andere. Daardoor is er geen verticale scrollbalk nodig. Die is ongeveer 18px breed. Omdat de pagina in het midden staat, is dat midden dus iets anders bij de contactpagina.
* Je kunt 'n hoogte geven aan #inhoud, waardoor deze even hoog wordt als bij de andere pagina's en er dus altijd 'n scrollbalk staat, ook in de contact-pagina.
* Je kunt de contact-pagina opvullen met je hele familie of zo, waardoor hij langer wordt.
* Je kunt bij de andere pagina's aan #envelop toevoegen: position: relative; en left: 8px;
De scrollbalk is ongeveer (maar niet helemaal precies) 16 px breed. Verschilt iets per browser. En aangezien de leeftijd toeslaat of zo: 't kan ook 18 px breed zijn. Ongeveer. Dan moet je dus left: 9px toevoegen.
Nu zal 't nog wel verschuiven, maar minimaal.
* Je kunt aan de contact-pagina in de css toevoegen bij body: overflow-y: scroll;
Nu wordt altijd 'n verticale scrollbalk getoond in verticale richting. Dit is css 3, dus als je (zoals meestal nog) valideert op css 2.1, geeft dit 'n fout. 't Werkt al jaren in alle browsers, dus die fout kun je negeren.
* Je kunt op je contact-pagina 't omgekeerde doen met position: relative bij #envelop. Met left: -8px; dus.
* Je kunt 'n hoogte geven aan #inhoud, waardoor deze even hoog wordt als bij de andere pagina's en er dus altijd 'n scrollbalk staat, ook in de contact-pagina.
* Je kunt de contact-pagina opvullen met je hele familie of zo, waardoor hij langer wordt.
* Je kunt bij de andere pagina's aan #envelop toevoegen: position: relative; en left: 8px;
De scrollbalk is ongeveer (maar niet helemaal precies) 16 px breed. Verschilt iets per browser. En aangezien de leeftijd toeslaat of zo: 't kan ook 18 px breed zijn. Ongeveer. Dan moet je dus left: 9px toevoegen.
Nu zal 't nog wel verschuiven, maar minimaal.
* Je kunt aan de contact-pagina in de css toevoegen bij body: overflow-y: scroll;
Nu wordt altijd 'n verticale scrollbalk getoond in verticale richting. Dit is css 3, dus als je (zoals meestal nog) valideert op css 2.1, geeft dit 'n fout. 't Werkt al jaren in alle browsers, dus die fout kun je negeren.
* Je kunt op je contact-pagina 't omgekeerde doen met position: relative bij #envelop. Met left: -8px; dus.
- Status
