login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div onder div

Offline TNTH - 27/07/2005 21:40 (laatste wijziging 27/07/2005 21:40)
Avatar van TNTHLid Ik zit met het volgende probleem:

Ik heb dit in html:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="bg_content">
  2.   {content}
  3.   <div id="shadow_content"></div>
  4.   </div>


en dit in css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #bg_content {
  2. 	position: absolute;
  3. 	background-image: url(images/bg_content.gif);
  4. 	width: 451px;
  5. 	min-height: 100%;
  6. 	top: 163px;
  7. 	left: 0px;
  8. 	z-index: 50;
  9. }
  10.  
  11. #shadow_content {
  12. 	position: absolute;
  13. 	background-image: url(images/shadow_content.gif);
  14. 	float: right;
  15. 	width: 391px;
  16. 	height: 95%;
  17. 	bottom: -10px;
  18. 	right: -10px;
  19. 	z-index: 40;
  20. }


Maar de shadow wil dus met geen mogelijkheid onder bg?!
Omdraaien van de divs in html maakt helaas geen donder uit.

Wie weet de oplossing?

8 antwoorden

Gesponsorde links
Offline cracker - 27/07/2005 21:47
Avatar van cracker Onbekend ik zou zeggen, maak een <td> met als achtergrond die shadow en zet daarin dan met de <img>-tag de gewone afbeelding.
Offline TNTH - 27/07/2005 22:11 (laatste wijziging 27/07/2005 22:11)
Avatar van TNTH Lid Ik was vergeten om er bij te zeggen dat er tekst over de bg_content moet komen.

Zou ik het spul in een tabel zetten, dan zou ik de shadow niet meer kunnen schalen.

Dit is zoals ik het wil zien: http://www.kralensite.nl/temp.gif
Offline Brycer - 28/07/2005 01:43
Avatar van Brycer HTML interesse Dan maak je een tabel in de tabel (<td> met shadow-achtergrond) en die geef je als achtergrond bg_content. Nu kun je er gewoon in schrijven;-)
Brycer
Offline BladiN - 28/07/2005 02:14 (laatste wijziging 28/07/2005 02:16)
Avatar van BladiN Gouden medailleGouden medaille

Grafische gevorderde		 http://www.invisionpower.nl/smarty/demo/

Zoals dit? Kijk maar in de source hoe ik het heb opgelost (dmv wat javascript)

Ik zou dan alleen dat onderste deel van de schaduw een plaatje maken, en dan zou ik het op background-position: bottom right; zetten van je shadow div
Offline Ontani - 28/07/2005 02:26
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 na een paar minuutjes in kladblok en photoshop:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <style type="text/css">
  7. <!--
  8. body, html {
  9. 	heigth: 100%;
  10. 	padding: 0px;
  11. 	margin: 5px;
  12. }
  13.  
  14. .sub {
  15. 	position:relative;
  16. 	width: 487px;
  17. }
  18.  
  19. .top {
  20. 	position: absolute;
  21. 	background-image: url("top.gif");
  22. 	width: 487px;
  23. 	height: 14px;
  24. 	top: 0px;
  25. 	left: 0px;
  26. }
  27.  
  28. .rightTop {
  29. 	position:absolute;
  30. 	background-image: url("right.gif");
  31. 	width: 37px;
  32. 	height: 14px;
  33. 	right: 0px;
  34. 	top: 14px;
  35. }
  36.  
  37. .content {
  38. 	position: absolute;
  39. 	background-image: url("rightrepeat.gif");
  40. 	background-repeat:repeat-y;
  41. 	background-position:right;
  42. 	background-color: #B0B000;
  43. 	width: 487px;
  44. 	top: 14px;
  45. }
  46.  
  47. .text {
  48. 	padding: 5px;
  49. 	padding-right: 37px;
  50. 	font-family:Verdana, Arial, Helvetica, sans-serif;
  51. 	font-size:12px;
  52. 	color:#FFFFFF;
  53. }
  54.  
  55. .bottom {
  56. 	position:relative;
  57. 	background-image: url("bottom.gif");
  58. 	width: 487px;
  59. 	height: 23px;
  60. }
  61. -->
  62. </style>
  63. </head>
  64.  
  65. <body>
  66. <div class="sub">
  67.  <div class="top"></div>
  68.  <div class="content">
  69.   <div class="head"><img src="head.gif" alt="" /></div>
  70.   <div class="text">
  71.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
  72.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
  73.   </div>
  74.   <div class="bottom"></div>
  75.  </div>
  76.  <div class="rightTop"></div>
  77. </div>
  78. </body>
  79. </html>


resultaat is te zien op:

http://ontani.net/sitemasters/helpdesk/tnth
Offline Brycer - 28/07/2005 02:29 (laatste wijziging 28/07/2005 02:33)
Avatar van Brycer HTML interesse @Ontani
bovenaan in IE zit hij niet helemaal recht, maar verder is ie oke:)
Offline TNTH - 28/07/2005 11:32
Avatar van TNTH Lid Got it finally working. Bedankt allemaal voor de oplossingen. Kheb een stukje van Ontani gebruikt en nog wat eigen input .

Ziehier het resultaat:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">
  2.   <div id="top_content"></div>
  3.   <div id="content_shade">
  4.   <div id="breadcrumb">
  5.     <div id="breadcrumb_txt">{breadcrumb}</div>
  6.   </div>
  7.   <div id="content_txt">
  8.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
  9.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
  10.    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt erat et velit. In tempor enim nec nisl. Fusce porttitor, sem at eleifend convallis, sem ligula congue wisi, nonummy scelerisque ante metus at lorem. Sed nec lacus in ipsum dapibus ullamcorper. Donec arcu. In hac habitasse platea dictumst. Maecenas elit.
  11.   </div>
  12.   <div id="shadow_content"></div>
  13.   </div>
  14.   <div id="rightTop"></div>
  15.   </div>


en de css:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. #content {
  2. 	position: absolute;
  3. 	width: 487px;
  4. 	float: left;
  5. 	top: 158px;
  6. 	left: 0px;
  7. }
  8.  
  9. #top_content {
  10. 	position: absolute;
  11.     background-image: url("images/top_content.gif");
  12.     width: 143px;
  13.     height: 5px;
  14.     top: 0px;
  15.     left: 0px;
  16. }
  17.  
  18. #content_shade {
  19.     position: absolute;
  20.     background-image: url("images/rightrepeat.gif");
  21.     background-repeat:repeat-y;
  22.     background-position:right;
  23.     background-color: #B0B000;
  24.     width: 487px;
  25.     top: 5px;
  26. }
  27.  
  28. #breadcrumb {
  29. 	position: absolute;
  30. 	background-image: url(images/bg_breadcrumb.gif);
  31. 	width: 217px;
  32. 	height: 35px;
  33. 	top: 5px;
  34. 	left: 0px;
  35. }
  36.  
  37. #breadcrumb_txt {
  38. 	position: absolute;
  39. 	font: Arial, Helvetica, sans-serif;
  40. 	font-size: x-large;
  41. 	font-weight: bolder;
  42. 	color: #CCCCCC;
  43. 	top: 2px;
  44. 	left: 5px;
  45. }
  46.  
  47. #content_txt {
  48.     padding: 5px;
  49.     padding-right: 42px;
  50.     font-family: Verdana, Arial, Helvetica, sans-serif;
  51.     font-size: small;
  52.     color: #FFFFFF;
  53. 	margin-top: 45px;
  54. }
  55.  
  56. #shadow_content {
  57. 	position:relative;
  58.     background-image: url("images/bottom.gif");
  59.     width: 487px;
  60.     height: 23px;
  61. }
  62.  
  63. #rightTop {
  64.     position:absolute;
  65.     background-image: url("images/right.gif");
  66.     width: 37px;
  67.     height: 14px;
  68.     right: -2px;
  69.     top: 0px;
  70. }


En een voorbeeld op: http://kralensite.nl/temp.html
Offline TNTH - 02/08/2005 09:49 (laatste wijziging 02/08/2005 10:51)
Avatar van TNTH Lid
Citaat:
Nu ben ik dat stadium voorbij, maar ik krijg de footer niet aan de voet van het contentgedeelte. De footer moet meeschuiven met de content en niet vast aan de onderkant van het beeld zitten. Kan iemand me helpen met dit probleem?

Een voorbeeld van mijn huidige code en css staat hier:
(beste te bekijken in IE, FF plaatst het spul net niet correct helaas)
een uitgewerkt photoshopmodel staat in:


Tis al opgelost 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.211s