login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Full width achtergrond "afsnijden" bij verkleinen browser window (Opgelost)

Offline IvarioD - 13/06/2012 14:25
Avatar van IvarioDLid 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:

  1. css code
  2. margin: 0 auto



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:

  1. <div id="container">
  2. <div id="top">
  3. <div id="header">
  4. <!-- Hierin het logo -->
  5. <div id="menu">
  6. <!-- Menu items -->
  7. </div>
  8. </div>
  9. </div>
  10.  
  11. <div id="middle">
  12.  
  13. <div id="content">
  14. <!-- hier content -->
  15. </div>
  16.  
  17. </div>
  18.  
  19. <div id="bottom">
  20. <div id="footer">
  21. <!--hier de footer tekst-->
  22. </div>
  23. </div>
  24. </div>
  25. </body>
  26. </html>




Mijn css:

  1. body{
  2. background: #69afac;
  3. margin: 0;
  4. padding:0;
  5. font-family: Arial, Helvetica, sans-serif;
  6. color:#FFF;
  7. font-size: 0.8em;
  8. }
  9. #container{
  10. width: 1918px;
  11. margin: 0 auto;
  12. border: 3px solid #F00;
  13. clip:rect(top right bottom left);
  14. }
  15.  
  16. #top{
  17. height: 470px;
  18. margin:0 auto;
  19. background:url(../images/header.png) no-repeat;
  20. }
  21. #header{
  22. width: 900px;
  23. 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

4 antwoorden

Gesponsorde links
Offline Ontani - 13/06/2012 14:38
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1
Je kan je achtergrond gecentreerd positioneren zodat zowel links als rechts de overschot wordt verwijderd en je content (die ook gecentreerd staat) t.o.v. achtergrond.
Offline Martijn - 13/06/2012 15:39
Avatar van Martijn Crew PHP Het antwoord van Ontani in code:
  1. background:url(../images/header.png) no-repeat center;
Offline IvarioD - 13/06/2012 18:58 (laatste wijziging 13/06/2012 19:00)
Avatar van IvarioD Lid Geniaal, bedankt voor de reacties de oplossing van Martijn werkte inderdaad. Ontani bedoelde ongetwijfeld hetzelfde. Eigenlijk had ik de oplossing zelf al gegeven alleen verkeerd vertaald in code.
  1. margin: 0 auto;
is centreren van de div niet van de achtergrond. Echter wist ik niet af van het bestaan van de center optie voor background. Met 5 jaar webdesign ervaring toch weer wat bijgeleerd. Nogmaals dank
Offline Martijn - 14/06/2012 17:31
Avatar van Martijn Crew PHP Ik heb Ontani de oplossing gegeven, dat was namelijk het antwoord, ik liet alleen maar zien welke css naam daarbij hoort 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2022 Sitemasters.be - Regels - Laadtijd: 0.106s