Hallo,
Ik wil m'n template opnieuw bouwen mbv DIV's (en zorgen dat ie nu wel werkt
). Het basisplan ziet er als volgt uit:
#row1 {
height: 80px; /* header */
width: 800px;
background-color: #009; /* later bg-image */
z-index:10; /* content scrollt achter de header door */
/* code voor horizontaal centereren: */
/* methode 1, mbv negatieve marge: */
position: fixed;
left: 50%;
margin-left: -400px;
/* methode 2 - werkt niet:
position: fixed;
margin-right: auto;
margin-left: auto; */
}
#row2 {
height: 36px; /* navbar */
width: 800px;
background-color: #000;
top:80px; /* navbar komt pal onder de header */
z-index:10; /* content scrollt achter de navbar door */
position: absolute;
left: 50%;
margin-left: -400px;
}
#row3 {
height: auto; /* content */
width: 800px;
position: relative;
margin-right: auto;
margin-left: auto;
top:116px; /* komt pal onder navbar */
}
#row4 {
height: 25px; /* footer */
width: 800px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#row-1 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
#row-2 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
#row-3 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
#row-4 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
/* grote achtergrondafbeelding */
#bg-image {
position:fixed; /* afbeelding scrollt niet mee */
background-repeat: no-repeat;
width: 100%; /* schaalt mee met de pagina */
top: 120px; /* afbeelding komt onder de navbar, achter row 3 (content) */
overflow:hidden;
right: 0%;
z-index: -10; /* achtergrondafbeelding */
}
</style>
</head>
<body>
<div id="row1">header img</div>
<div id="row2">navbar img</div>
<div id="row3">content</div>
<div id="row4">footer tekst</div>
<!-- grote achtergrondafbeelding -->
<img id="bg-image" src="img/logo/logo-700x700.jpg"/>
</body>
</html>
Header en navbar staan vast bovenaan de pagina. Horizontaal gecentreerd.
Hoofdvraag:
Ik wil tegels gebruiken zodat de header, navbar en footer schermbreed verbreed worden. Background-tegels van header en navbar moeten dus vaste verticale positie krijgen; bg-tegels voor footer moeten verticaal meescrollen met footer.
Grote vraag: Hoe doe ik dat? (Of is dat onmogelijk?)
Noot: Tegels voor header en navbar kunnen evt gecombineerd worden tot 1 tegel.
Nevenvragen:
(1) Ik merk in webbrowser dat volgens het basisplan de header en navbar elkaar elkaar toch gedeeltelijk overlappen. Hoe kan dat? Row2 begint (met top:80px) toch direct onder waar row1 (= 80 px hoog) ophoudt??
(2) Nevenvraag 2:
Waarom werkt horizontaal centreren volgens methode 2 (zie basisplan) niet?
(3) Waarom komt in webbrowser row4 nu niet onder row3 te staan (maar halverwege row-3 er overheen)?
Ik wil m'n template opnieuw bouwen mbv DIV's (en zorgen dat ie nu wel werkt
). Het basisplan ziet er als volgt uit:#row1 {
height: 80px; /* header */
width: 800px;
background-color: #009; /* later bg-image */
z-index:10; /* content scrollt achter de header door */
/* code voor horizontaal centereren: */
/* methode 1, mbv negatieve marge: */
position: fixed;
left: 50%;
margin-left: -400px;
/* methode 2 - werkt niet:
position: fixed;
margin-right: auto;
margin-left: auto; */
}
#row2 {
height: 36px; /* navbar */
width: 800px;
background-color: #000;
top:80px; /* navbar komt pal onder de header */
z-index:10; /* content scrollt achter de navbar door */
position: absolute;
left: 50%;
margin-left: -400px;
}
#row3 {
height: auto; /* content */
width: 800px;
position: relative;
margin-right: auto;
margin-left: auto;
top:116px; /* komt pal onder navbar */
}
#row4 {
height: 25px; /* footer */
width: 800px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#row-1 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
#row-2 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
#row-3 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
#row-4 div{ margin: 0 0 0 0; padding: 0 0 0 0; border: 0 0 0 0; }
/* grote achtergrondafbeelding */
#bg-image {
position:fixed; /* afbeelding scrollt niet mee */
background-repeat: no-repeat;
width: 100%; /* schaalt mee met de pagina */
top: 120px; /* afbeelding komt onder de navbar, achter row 3 (content) */
overflow:hidden;
right: 0%;
z-index: -10; /* achtergrondafbeelding */
}
</style>
</head>
<body>
<div id="row1">header img</div>
<div id="row2">navbar img</div>
<div id="row3">content</div>
<div id="row4">footer tekst</div>
<!-- grote achtergrondafbeelding -->
<img id="bg-image" src="img/logo/logo-700x700.jpg"/>
</body>
</html>
Header en navbar staan vast bovenaan de pagina. Horizontaal gecentreerd.
Hoofdvraag:
Ik wil tegels gebruiken zodat de header, navbar en footer schermbreed verbreed worden. Background-tegels van header en navbar moeten dus vaste verticale positie krijgen; bg-tegels voor footer moeten verticaal meescrollen met footer.
Grote vraag: Hoe doe ik dat? (Of is dat onmogelijk?)
Noot: Tegels voor header en navbar kunnen evt gecombineerd worden tot 1 tegel.
Nevenvragen:
(1) Ik merk in webbrowser dat volgens het basisplan de header en navbar elkaar elkaar toch gedeeltelijk overlappen. Hoe kan dat? Row2 begint (met top:80px) toch direct onder waar row1 (= 80 px hoog) ophoudt??
(2) Nevenvraag 2:
Waarom werkt horizontaal centreren volgens methode 2 (zie basisplan) niet?
(3) Waarom komt in webbrowser row4 nu niet onder row3 te staan (maar halverwege row-3 er overheen)?
