login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Positionering van een afbeelding.

Offline MicroWaver - 08/11/2006 15:31 (laatste wijziging 08/11/2006 16:36)
Avatar van MicroWaverNieuw lid Hallo allemaal,

Ik ben snel een beetje aan een site bezig en ik heb 1 groot probleem hiermede.

Hier heb je a de link.
http://users.te...s/divs.htm

Wat is de bedoeling?
Naarmate de inhoud in het rechter gedeelte langer wordt zou de foto links ook mee naar beneden moeten verschuiven.
Dus de foto moet net boven de footer geplaatst worden.

Hoe kan ik dit doen?

Ik heb al geprobeerd met de positionering van die foto vertical-align:bottom.


Groetjes, MicroWaver

php code - Bekijk de code zonder highlighting - Klap code in 
  1. body {
  2. height:100%;
  3. text-align:center;
  4. margin:0px;
  5. padding:0px;
  6.  
  7.  
  8. }
  9. #container {
  10. 	width: 900px;
  11. 	margin-right: auto;
  12. 	margin-left: auto;
  13. }
  14.  
  15. #left {
  16. float:left;
  17. width:261;
  18. position:relative;
  19. background-image:url(images/menu_bg.jpg);
  20. background-repeat:repeat-y;
  21. }
  22.  
  23. #right {
  24. float:right;
  25. width:639;
  26. position:relative;
  27. }
  28.  
  29. #content {
  30. background-image:url(images/content_bg.jpg);
  31. background-repeat:repeat-y;
  32. min-height:320px;
  33. }
  34. #picture {
  35. width:100%;
  36. height:100%;
  37. background-repeat:no-repeat;
  38. background-image:url(images/left/left1.jpg);
  39. background-position:50% 100%;
  40.  
  41. }


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <link href="divs.css" rel="stylesheet" type="text/css">
  8. </head>
  9.  
  10. <body>
  11. <div id="container">
  12.  
  13. <div><img src="images/top_lines.jpg"></div>
  14. <div id="left"><img src="images/menu_logo.jpg"><div>[menu]</div><div id="picture"><img src="images/left/left1.jpg" align="absbottom"></div>
  15. </div><div id="right"><img src="images/a-focus_design5_03.jpg"><div id="content">[content]</div></div>
  16. <div><img src="images/footer.jpg"></div>
  17.  
  18. </div>
  19. </body>
  20. </html>

7 antwoorden

Gesponsorde links
Offline Thomas - 08/11/2006 15:36
Avatar van Thomas Moderator Hm, misschien kun je het plaatje relatief ten opzichte van de footer positioneren, maar wellicht makkelijker is er een achtergrondplaatje van maken?
Offline MicroWaver - 08/11/2006 15:45
Avatar van MicroWaver Nieuw lid Ik heb het ook geprobeerd aan de hand van een background-image met background-positioning:bottom. Lijkt niet te werken 
Offline Thomas - 08/11/2006 15:55
Avatar van Thomas Moderator Parlez vous CSS?
Offline MicroWaver - 08/11/2006 16:05
Avatar van MicroWaver Nieuw lid ENneuh, hoe helpt mij dit?
Offline Ultimatum - 08/11/2006 16:10
Avatar van Ultimatum PHP expert Het is de bedoeling dat je de pagina bezoekt en dan zie je gelijk:

Syntax: background-position: <value>

wat dus betekend dat jij een atribuut probeerde te gebruiken die niet bestaat 
Offline Dark_Paul - 08/11/2006 16:11 (laatste wijziging 08/11/2006 16:11)
Avatar van Dark_Paul PHP ver gevorderde FangorN bedoelt dat het moet zijn:
background-position: bottom;
(zonder -ing).
@FangorN
Het is parlez-vous of vous parlez 
Offline MicroWaver - 08/11/2006 16:17 (laatste wijziging 08/11/2006 16:35)
Avatar van MicroWaver Nieuw lid Ik heb gedaan zoals er stond:
background-position:50% 100%;

geen verschil.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.188s