 Lid |
|
goedenavond dames en heren,
Ik heb een uitdagend probleem. Of misschien ook niet maar in ieder geval kan ik geen oplossing bedenken.
Het gaat om het volgende:
Voor een klant moet ik een website bouwen waarbij een deel van de achtergrond de volledige browserbreedte bestrijkt. Dit was geen enkel probleem om in te stellen. Echter is het in het menu ontwerp belangrijk dat menu en content op dezelfde plek blijven staan ten opzichte van dit Full width gedeelte van de achtergrond.
het is dus als het ware de bedoeling dat deze full width achtergrond wordt "afgesneden" en een deel ervan verdwijnt in de zijkant van de browser zodat content en menu op dezelfde plek blijven ten opzichte van de achtergrond.
ik heb dit geprobeerd te bereiken door een allesomvattende div de maximale breedte te geven en deze te positioneren met:
in het midden van de browser dus. Echter blijven content en achtergrond ten opzichte van elkaar verschuiven bij het verkleinen van het browser window.
Hier de opbouw van mijn divs:
<html>
<body>
<div id="container">
<div id="top">
<div id="header">
<!-- Hierin het logo -->
<div id="menu">
<!-- Menu items -->
</div>
</div>
</div>
<div id="middle">
<div id="content">
<!-- hier content -->
</div>
</div>
<div id="bottom">
<div id="footer">
<!--hier de footer tekst-->
</div>
</div>
</div>
</body>
</html>
<!-- Hierin het logo --> <!-- Menu items --> <!-- hier content --> <!--hier de footer tekst-->
Mijn css:
body{
background: #69afac;
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
color:#FFF;
font-size: 0.8em;
}
#container{
width: 1918px;
margin: 0 auto;
border: 3px solid #F00;
clip:rect(top right bottom left);
}
#top{
height: 470px;
margin:0 auto;
background:url(../images/header.png) no-repeat;
}
#header{
width: 900px;
margin: 0 auto;
body{ background: #69afac; margin: 0; padding:0; font-family: Arial, Helvetica, sans-serif; color:#FFF; font-size: 0.8em; } #container{ width: 1918px; margin: 0 auto; border: 3px solid #F00; clip:rect(top right bottom left); } #top{ height: 470px; margin:0 auto; background:url(../images/header.png) no-repeat; } #header{ width: 900px; margin: 0 auto;
De klant laat het mij niet toe om een screenshot van de werkelijke site te posten dus heb ik een vereenvoudigde schets gemaakt.
Klik hier voor de schets.
Ter verduidelijking, in dit plaatje mogen "logo","menubalk" en "content" niet onafhankelijk bewegen van "achtergrond overlay" bij het verkleinen van het browser window.
alvast bedank
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
