problemen met positionering

[jurschouten]

Als je kijkt naar .zutphendraaitdoor.nl, dan heb ik een paar vragen:
-hoe kan ik de pagina centreren
-hoe kan ik ervoor zorgen dat er geen marge aan de top is
-hoe kan ik de banner en het menu vastzetten, dus als je moet scrollen, het menu zichtbaar blijft

voor de duidelijkheid: er moet nog veel meer veranderen, maar dat denk ik wel te kunnen...
al vast bedankt!

#container_div {
width: 980px;
left: auto;
right: auto;
top: 0px;
text-align: center;
}
#koppen_div {
width: 980px;
}
#menu_div {
height: auto;
width: 980px;
}
#content_div {
width: 980px;
}
#chambre-d-hote_div {
background-image: url(afbeeldingen/0-janine-boudewijn-bolderheij-janine-zestig.jpg);
width: 980px;
}
#logeren {
background-image: url(afbeeldingen/1-zwembad.jpg);
background-attachment: fixed;
width: 980px;
background-repeat: no-repeat;
position: static;
height: auto;
}

@charset "utf-8";
#index_div {
width: 980px;
background-image: url(afbeeldingen/masmas.jpg);
position: absolute;
top: 0px;
}

 

[vince14]

#index_div {
background-image: url("afbeeldingen/masmas.jpg");
width: 980px;
margin: 0px auto;
}
dan staat hij in het midden


position: fixed
daarmee zet je hem vast op de pagina.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position

 

[csshunter]

-hoe kan ik ervoor zorgen dat er geen marge aan de top is

Even de allereerste <p>&nbsp;</p> er uit halen. Waarschijnlijk heeft je html-editor die er gratis bijgeleverd, toen er nog geen tabel aangemaakt was.
Maar die maakt een mooie witregel, voordat de tabel begint.

Met vriendelijke groet,
CSShunter

 

[jurschouten]

ik kan die niet vinden.....(ben ik nou echt zo dom...)
kan je de plek iets specificeren?
alvast bedankt (geldt ook voor vince, met zijn mooie link)

 

[csshunter]

Hoi Jur,
Deze bedoelde ik:

Met vriendelijke groet,
CSShunter

 

[jurschouten]

als ik dat doe krijg ik een foutmelding, maar bovendien staat de index.htm natuurlijk al boven aan de pagina.
probleem is dat ik m midden op de pagina wil hebben......
dat geldt ook voor de volgende:
klik op de enig werkende link (logeren als god in frankrijk) Ook die wil ik graag in het midden hebben............
wil je er nog even naar kijken aub? dank je

 

[csshunter]

Hoi Jur,

als ik dat doe krijg ik een foutmelding

Huh? :shocked: Wat voor foutmelding, en van wie?

maar bovendien staat de index.htm natuurlijk al boven aan de pagina.

Je bedoelt de <div id="index_div">?
Dat klopt, maar de <p>&nbsp;</p> is een lege regel met een spatie (de &nbsp; is een spatie), en die zit binnen de <div id="index_div">. Dus dat veroorzaakt een lege regel bovenaan in die <div>.
Als je even een x in plaats van de &nbsp; zet, kan je zien waar die regel zit.
Verder speelt nog mee, dat een <h2>-regel automatisch altijd wat witruimte boven en onder krijgt. Dat kan je wegwerken door in de css voor de h2 een {margin:0; padding:0;} op te geven. Hetzelfde geldt voor een alinea <p> en de rest van de koppenserie <h1>, <h2>, <h3>, enz.

Nu het centreren.
De hele pagina kan je centreren zoals vince14 hierboven zei.
De inhoud van elementen binnen de pagina kan je centreren met {text-align: center;}.
Als je alle dingen binnen een pagina gecentreerd wilt hebben, dan kan je het ook allemaal tegelijk doen met body * {text-align: center;}; het * is een wildcart, die "alles" betekent.

Als ik verder naar de pagina kijk, zie ik dat ie is opgebouwd uit tabellen. Dat lijkt makkelijk, maar uiteindelijk is dat lastiger en moeilijker om van opmaak te voorzien. Tabellen zijn eigenlijk niet voor opmaak bedoeld.
Ook zitten er regelmatig een serie "blockquotes" in. Dat is de manier waarmee FrontPage een regel (herhaald!) laat inspringen, en ook niet zo tof.

• Gebruik je soms FrontPage als html-editor? - Dat was en is een programma, dat er erg slechte codes van maakt.
• In dat geval kan je het beste snel overstappen op KompoZer (gratis, met o.a. NL taalpakket), die er qua bediening erg op lijkt, maar stukken betere code genereert.

Geen tabellen, hoe dan wel? Met CSS!
Met css kan de opmaak van een html-pagina tot in de puntjes geregeld worden. Het je eigen maken van css vraagt wat studie & doorzettingsvermogen, maar de beloning is groot!

Als proeve van bewijs heb ik de pagina omgezet van tabellen naar css-opmaak.
Er zit in:

• Pagina is gecentreerd bij alle resoluties.
• Foto rechtgezet (stond 1,5 graad uit het lood) en lucht aangepast, zodat deze kan aansluiten op een lichtblauwe background-kleur van de pagina.
• Foto ingekrompen van 1015px breed naar 990px breed, zodat de pagina ook altijd op een resolutie van 1024*768px past zonder scrollbalk onderaan bij een hoge pagina.
• Een strookje gras gemaakt, dat als background-img van de pagina (met repeat-y) onder de foto komt, en bij lange pagina's net zo hoog wordt als de pagina nodig heeft.
• Alle inwendige dingen gecentreerd.
• De container <div id="index_div"> er uit gehaald wegens overbodigheid.
• Een container-<div> aangemaakt voor de vlaggen-serie, die als een net horizontaal lijstje in de html is gezet.
• Positie van de teksten en vlaggen zo afgesteld, dat alles nu ook in één oogopslag gezien kan worden op een resolutie van 1024*768px (verdwenen onder beeld).

Hier komt ie:

• www.bliksekaters.nl/tests/domaineLF.htm
  Zie de broncode, waar alles in staat hoe het gedaan is.
  
  
• En als erg lange pagina, waarin je de uitbreiding van het grasveld goed kunt zien:
  www.bliksekaters.nl/tests/domaineLF-lang.htm

Met vriendelijke groet,
CSShunter

 

[jurschouten]

ik ben weer erg onder de indruk van jouw uitgebreide antwoord; hartelijk dank
ga er dit weekend mee bezig en laat je het resultaat weten

 

[jurschouten]

hartstikke bedankt voor alles. ik kan nu weer een poosje vooruit!