Je mist een wrapper of container.
Dit is een div die meestal aan het begin van de broncode staat en die alle andere div’s insluit.
Dus zo:
<div id="wrapper">
<div id="header">
<div class="menu">
.....
</div> <!-- einde menu -->
</div><!-- einde header -->
<div id="main">
.....
</div><!-- einde main -->
</div><!-- einde wrapper -->
Zie je dat alle div’s binnen de wrapper staan.
Als je nu zorgt dat die wrapper een vaste waarde heeft, dus bijv. 1068px breed en een bepaalde positie op het scherm (via margin) dan wordt dat de vaste kern van je site en kan niets zomaar buiten die 1068px komen te vallen.
Daarna is het zaak om je menu en het andere een vaste waarde of positie binnen die wrapper te geven. Zo voorkom je dat als je gaat schuiven met je browser-scherm (groter en kleiner) dat alles mee beweegt.
En dan geef ik je nog een advies om met margin te werken om die wrapper op het scherm te positioneren.
Wil je hem dan in het midden hebben moet je eens zoeken op margin: 0 auto; hiermee zeg je tegen de browser nul ruimte boven en onder de site en verdeel alle open ruimte links en rechts naast de site evenredig, dit is het beste voor kleinere schermen.
Aan de eisen van hele kleine schermen kan je toch niet meer voldoen dan moet je wrapper denk ik al minder dan 800px breed worden, maar op bovenstaande manier krijg je wel het minste scroll-balken in je browser.
Een voorbeeld van hoe je het positioneren NIET moet doen als je content (wrapper) groot is.
Bekijk deze site maar eens op dat kleine scherm dat je nog ergens hebt staan.
Bij mij valt het (hoofd)-menu bovenaan de site voor 90% weg en ik heb niet eens een klein scherm, tenminste ik neem aan dat een MacBook niet onder de categorie kleine schermen valt.
http://www.inekekamps.com/
Thread starter
Ricardo
(@r1cardo01)
Die wrapper moet alleen op mijn index pagina? (en dan #wrapper aanmaken in mijn stylesheet)
Nee ik zou hem aanmaken in de header.php en afsluiten in de footer.php
Dus open header.php
Zoek op waar de <body> begint.
....
<head>
<title> blablabla </title>
....
....
....
</head> <-- is sluiten van de head tag.
<body> <-- daar begint je body tag en je echte html site.
<div id="wrapper"> <-- die moet je aanmaken op die positie dus net onder je body
Dan natuurlijk header.php opslaan.
Open je footer.php openen om de aangemaakte ‘wrapper’ div te gaan sluiten aan het einde van de website.
Eerst krijg je natuurlijk weer een hoop ander codes vanuit de footer..
.....
.....
....
</div> <-- die aanmaken net voor de </body> tag om de wrapper te sluiten.
</body>
</html>
Dan kan je in je style.css ergens bovenin waar de echte stijlen beginnen dit plaatsen.
#wrapper {
width: ....px;
margin: 0 auto;
padding: 0;
}
Thread starter
Ricardo
(@r1cardo01)
Ik heb ze toegevoegd aan de header, footer en de style.css. Maar zodra ik het beeld verklein gooit hij nog steeds alles door elkaar?
Bedankt voor je hulp tot nu toe trouwens! Wordt enorm gewaardeerd!
Het probleem zit hem nu in de
.container class icm met de padding.
Deze stijl heeft een hoop padding en geen vaste waarde. Hierdoor (door de padding) druk je alles buiten de wrapper.
Wie heeft dit thema gemaakt?
Want ik zie dat je nu al 3 verschillende stylesheets gebruikt terwijl dat niet nodig hoeft te zijn.
Ook wordt alles via padding ipv margin verschoven.
Je zou voor het beste resultaat eens de Safari of Chrome browser moeten downloaden en gebruiken dan kan je via de WebInspector de div’s en stijlen zien en wordt het goed duidelijk wat er mis gaat.
Ook is het handig om te weten te komen welke ‘classes’ en ‘id’s’ in welke stylesheets staan en op welke regel.
Hier kan je zien hoe het werkt.
http://www.youtube.com/watch?v=BUQaqn6DM4k
Het is denk ik een must voor iedereen die iets wilt aanpassen in zijn/haar website en het zit gratis in één van de bovengenoemde browsers dus je hoeft geen gekke addon’s? , plugins of weet ik veel te installeren van derde die weer 25 keer p/jaar vragen om te doneren.
In een andere post vroeg je hoe je de sidebar en div content van formaat kon veranderen. Grote kans dat die aanpassing hier ook wat mee te maken heeft.
Thread starter
Ricardo
(@r1cardo01)
Als basis gebruik ik het Whiteboard thema: http://whiteboardframework.com/
