login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Layout variabele en vaste achtergrond (Opgelost)

Offline Dawud - 09/03/2011 09:54
Avatar van DawudNieuw lid Heeft iemand een idee hoe ik dit probleem het beste oplos?

De link onderaan is een verwijzing naar een visueel voorbeeld van onderstaand probleem:

Ik heb dus een achtergrond, vanboven wit en vanonder zwart. De hoogte van die zwarte rechthoek moet altijd hetzelfde blijven, het witte zou variabel moeten zijn. Het grijs is de effectieve pagina en zal dus korter of langer worden.
Ik wil het echter zo dat de grijze pagina altijd evenveel over die zwarte rechthoek "hovered".

Ik heb al wat zitten proberen met DIVs, maar ik heb echt geen idee hoe ik dat het beste oplos.
Tips en tricks zijn welkom!

http://tinypic.com/r/zludmr/7

4 antwoorden

Gesponsorde links
Offline valles10 - 09/03/2011 11:16 (laatste wijziging 09/03/2011 11:17)
Avatar van valles10 HTML interesse ehm, ik denk dat hiervoor javascript nodig is...

Ten eerste die witte achtergrond, is dat je body? zoja dan hoef je daar niet aan te komen
Ten tweede dat zwart, wil je dat die ALTIJD op dezelfde plaats staat (onderaan je scherm dus)?


Ik heb eergisteren in js iets simpels gemaakt, zodat mijn content div altijd werd aangepast van hoogte, zodat die ALTIJD tot aan mijn footer kwam. Ook bij resizen enz van de browser.
Offline Dawud - 09/03/2011 12:43
Avatar van Dawud Nieuw lid Beide zijn eigenlijk background images.
Het wit is een afbeelding met repeat-x en het zwart is een afbeelding met repeat-x.
Daartussen is er een witte strook wat gewoon een background-color van de body is.

Het wit is gemakkelijk te positioneren, omdat die altijd op dezelfde plaatst start.
Het is echter dat zwarte vlak dat constant van hoogte moet veranderen omwille van de content in het grijze vlak.

Offline voltrex - 09/03/2011 13:33
Avatar van voltrex Lid Maak hiervoor geen gebruik van images, pak gewoon background-color: #FFF (wit) en #000 voor zwart.
Offline Dawud - 09/03/2011 13:46
Avatar van Dawud Nieuw lid Voltrex, bedankt voor uw antwoord maar het gaat hier effectief over images.

Ik heb het met hulp van een collega reeds opgelost:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. body  {
  2. 	margin: 0px 0px 0px 0px; 
  3. 	padding: 0px 0px 0px 0px;
  4. 	background-color: #FFFFFF;
  5. 	background-image: url("images/style/background_bottom.jpg");
  6. 	background-repeat: repeat-x;
  7. 	background-position: bottom left;
  8. 	height: 100%;
  9. }
  10.  
  11. .MAIN  #container { 
  12. 	margin: 0px 0px 0px 0px; 
  13. 	padding: 0px 0px 80px 0px;
  14. 	background-image: url("images/style/background_top.jpg");
  15. 	background-repeat: repeat-x;
  16. }
  17.  
  18. .MAIN #center { 
  19. 	width: 980px;  
  20. 	margin: 0 auto; 
  21. 	border: 0px;
  22. 	background-color: #000000;
  23. 	padding: 0px 0px 0px 0px;
  24. 	text-align: left; 
  25. }



html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <body class="MAIN">
  2.  
  3. <div id="container">
  4. 	<div id="center">
  5. 	test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
  6. 	test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>
  7. 	</div>
  8. </div>
  9.  
  10.  
  11. </body>
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.172s