login  Naam:   Wachtwoord: 
Registreer je!
 Forum

achtergronden over elkaar laten lopen

Offline Simon - 28/05/2006 14:19 (laatste wijziging 28/05/2006 14:20)
Avatar van SimonPHP expert ik heb <td> met achtergrondafbeelding, daarin zit een tabel met td's die ook achtergrondafbeelding hebben, maar die lopen niet goed in elkaar over 
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table cellpadding="0" cellspacing="0" style="height:100%; width:100%; border:5px solid;">
  2. 					<tr>
  3. 						<td class="menu" style="border:2px solid #FFF;">
  4. 							<!-- START BLOCK : menu -->				
  5. 							<table cellspacing="0" cellpadding="0" style="width:180px;">
  6. 								<tr><td class="menubanner">Voorbeeld</td></tr>
  7. 	  							<tr><td class="menuitem">Blaat</td></tr>
  8. 								<tr><td class="menuitem">Blaat</td></tr>
  9. 								<tr><td class="menuitem">Blaat</td></tr>
  10. 								<tr><td class="menuitem">Blaat</td></tr>
  11. 								<tr><td class="menuitem">Blaat</td></tr>
  12. 								<tr><td class="menuitem">&nbsp;</td></tr>
  13. 							</table>
  14. 							<table cellspacing="0" cellpadding="0" style="width:180px;">
  15. 								<tr><td class="menubanner">Voorbeeld</td></tr>
  16. 	  							<tr><td class="menuitem">Blaat</td></tr>
  17. 								<tr><td class="menuitem">Blaat</td></tr>
  18. 								<tr><td class="menuitem">Blaat</td></tr>
  19. 								<tr><td class="menuitem">Blaat</td></tr>
  20. 								<tr><td class="menuitem">&nbsp;</td></tr>
  21. 							</table>
  22. 							<table cellspacing="0" cellpadding="0" style="width:180px;">
  23. 								<tr><td class="menubanner">Voorbeeld</td></tr>
  24. 	  							<tr><td class="menuitem">Blaat</td></tr>
  25. 								<tr><td class="menuitem">Blaat</td></tr>
  26. 								<tr><td class="menuitem">Blaat</td></tr>
  27. 								<tr><td class="menuitem">Blaat</td></tr>
  28. 								<tr><td class="menuitem">Blaat</td></tr>
  29. 								<tr><td class="menuitem">&nbsp;</td></tr>
  30. 							</table>
  31. 							<!-- END BLOCK : menu -->
  32. 						</td>
  33. 						<td class="content" style="border:2px solid #00FF00;">
  34. 							<!-- START BLOCK : content_block -->
  35. 								<div class="indent2">
  36. 									<div class="margintop">
  37. 										Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
  38. 										Fusce leo leo, facilisis quis, aliquam vel, tincidunt non, lorem. <br />
  39. 										Ut odio est, ultricies id, rutrum nec, volutpat at, erat. <br />
  40. 										Curabitur massa. Etiam molestie velit in nisi. <br />
  41. 										Integer faucibus, dui sollicitudin commodo ullamcorper, <br />
  42. 										nisl metus convallis risus, eu laoreet urna massa ut massa. <br />
  43. 										Vivamus consectetuer tortor vitae purus. <br />
  44. 										Quisque nisl massa, consectetuer sed, accumsan nec, molestie ut, metus.<br />							
  45. 										Nulla facilisi. Donec libero. Maecenas sodales tristique nisi. <br />
  46. 										Phasellus non odio. <br />
  47. 										Proin urna dui, cursus id, bibendum at, lacinia a, nisl. <br />
  48. 										Vivamus hendrerit vehicula libero.<br />
  49. 									</div>
  50. 								</div>					
  51. 								<br /><br />
  52. 							<!-- END BLOCK : content_block -->
  53. 						</td>	
  54. 					</tr>
  55. 				</table>

menu.css
php code - Bekijk de code zonder highlighting - Klap code in 
  1. .menu {
  2. 	background-color: #4B3D32;
  3. 	text-align:left;
  4. 	width:185px;
  5. 	margin-left:0px;
  6. 	vertical-align: top;
  7. 	background-image: url(images/layout/frame-leftmenu.jpg);
  8. 	background-repeat: repeat-y;
  9. 	height:100%;
  10. 	z-index:0;
  11. }
  12.  
  13. a:link			{ color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }
  14. a:visited		{ color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }
  15. a:active		{ color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; }
  16. a:hover			{ color: #0099FF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
  17.  
  18. .menuitem {
  19. 	color: #FFFFFF;
  20. 	vertical-align: top;
  21. 	padding-left: 10px;
  22. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  23. 	font-size: 11px;
  24. 	color: #FFFFFF;
  25. 	text-decoration: none;
  26. }
  27. .menubanner {
  28. 	background-color: #4B3D32;
  29. 	background-image: url(images/layout/menu-itembanner.jpg);
  30. 	background-repeat: no-repeat;
  31. 	font-family: Geneva, Arial, Helvetica, sans-serif;
  32. 	font-size: 14px;
  33. 	font-weight: bold;
  34. 	color: #CCCCCC;
  35. 	text-align: left;
  36. 	vertical-align: middle;
  37. 	height: 25px;
  38. 	padding-left: 5px;
  39. 	z-index:1;
  40. }


(hopelijk niet teveel code )

dus menubanner en menu hebben allebei achtergrond, maar door menubanner wordt een stuk van de andere achtergrond weggestoken...

al geporbeerd dus met z-index, maar helpt nie

2 antwoorden

Gesponsorde links
Offline Ontani - 28/05/2006 14:21
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 misschien een online voorbeeld geven want dit is moeilijk om daar een idee van te krijgen.
Offline Simon - 28/05/2006 14:26 (laatste wijziging 28/05/2006 14:41)
Avatar van Simon PHP expert http://img146.i...ase0wn.jpg

het staat op localhost dus heb ik screen genomen,
er is dus nog een probleem, ze zijn beide omcirkeld, ik heb de td's in een kleurtje gezet, er is dus een ruimte die daar niet hoort, ik weet niet waar het vandaan komt 

EDIT: opgelost, ik had verkeerde width's meegegeven, heb er op auto gezet, nu gaat het 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.195s