login  Naam:   Wachtwoord: 
Registreer je!
 Forum

afbeeldinggallerij

Offline brechtjah - 10/05/2008 18:37 (laatste wijziging 10/05/2008 19:01)
Avatar van brechtjahNieuw lid Ik heb 2 probleemtjes met de afbeeldinggallerij die ik in elkaar wil steken...
Het eerste is waarschijnlijk het makkelijkste en dat is; ik wil dat mijn div over de hele grootte van de browser gaat. Nu is die 100% alleen maar voor het kleine venster of deel van de website waar je door kijkt, als je naar beneden scrollt, dan stopt mijn div net daaronder als je begrijpt wat ik wil zeggen.
_______
Pagina
div
div
--------
als je naar beneden scrollt:
_______
div
-------- border van div
meer
content
_______

Het tweede probleem is dit:
omdat ik mijn opacity van mijn tabel op 70% heb, gaat mijn afbeelding hierop ook vervagen, kan ik de opacity van mijn achtergrondkleur van mijn tabel (hier zwart) veranderen in plaats van de hele tabel?
Code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. 	<head>
  3. 		<title>test.htm</title>
  4. 		<link href="stijl.css" rel="stylesheet" type="text/css" />
  5.  
  6. 		<style type="text/css">
  7. 			html,body{
  8. 				margin: 0;
  9. 				padding: 0;
  10. 				height: 100%;
  11. 				width: 100%;
  12. 				border: none;
  13. 			}
  14.  
  15. 			div.containerke {
  16. 				width: 100%;
  17. 				height: 100%;
  18. 				left: 0;
  19. 				top: 0;
  20. 				position: absolute;
  21. 				display: inline;
  22. 			}
  23.  
  24. 			table.transparantie {
  25. 				height: 100%;
  26. 				width: 100%;
  27. 				margin-left: 0;
  28. 				margin-top: 0;
  29. 				text-align: center;
  30. 				background-color: #000000;
  31.  
  32. 				filter: alpha(opacity=70);
  33. 				opacity: 1.0;
  34. 			}
  35.  
  36. 			picNT {
  37. 				filter: alpha(opacity=100);
  38. 				opacity: 1.0;
  39. 			}
  40.  
  41. 			p {
  42. 				color: #ffffff;
  43. 			}
  44. 		</style>
  45. 	</head>
  46.  
  47. 	<body background="afbeeldingen/layout/achtergrond.png">
  48. 		<table width="809" align="center" border="0" cellspacing="0" cellpadding="0">
  49. 			<tr>
  50. 				<td colspan="2"><img src="afbeeldingen/layout/header.png" /></td>
  51. 			</tr>
  52.  
  53.  
  54. 			<tr>
  55. 				<td width="244" valign="top" align="center">
  56. 				<br />
  57. 				<a href="index.htm"><img src="afbeeldingen/layout/knop_introduction_out.png" onmouseover="this.src='afbeeldingen/layout/knop_introduction_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_introduction_out.png'" border="0" /></a>
  58. 				<a href="location.htm"><img src="afbeeldingen/layout/knop_location_out.png" onmouseover="this.src='afbeeldingen/layout/knop_location_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_location_out.png'" border="0" /></a>
  59. 				<a href="cathedral.htm"><img src="afbeeldingen/layout/knop_cathedral_out.png" onmouseover="this.src='afbeeldingen/layout/knop_cathedral_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_cathedral_out.png'" border="0" /></a>
  60. 				<a href="shopping.htm"><img src="afbeeldingen/layout/knop_shopping_out.png" onmouseover="this.src='afbeeldingen/layout/knop_shopping_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_shopping_out.png'" border="0" /></a>
  61. 				<a href="eatingdrinking.htm"><img src="afbeeldingen/layout/knop_eatingdrinking_out.png" onmouseover="this.src='afbeeldingen/layout/knop_eatingdrinking_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_eatingdrinking_out.png'" border="0" /></a>
  62. 				<a href="walkingroute.htm"><img src="afbeeldingen/layout/knop_walkingroute_out.png" onmouseover="this.src='afbeeldingen/layout/knop_walkingroute_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_walkingroute_out.png'" border="0" /></a>
  63. 				<a href="englishcustoms.htm"><img src="afbeeldingen/layout/knop_englishcustoms_out.png" onmouseover="this.src='afbeeldingen/layout/knop_englishcustoms_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_englishcustoms_out.png'" border="0" /></a>
  64. 				<a href="dovercastle.htm"><img src="afbeeldingen/layout/knop_dovercastle_out.png" onmouseover="this.src='afbeeldingen/layout/knop_dovercastle_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_dovercastle_out.png'" border="0" /></a>
  65. 				<a href="aboutme.htm"><img src="afbeeldingen/layout/knop_aboutme_out.png" onmouseover="this.src='afbeeldingen/layout/knop_aboutme_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_aboutme_out.png'" border="0" /></a>
  66. 				<a href="impressions.htm"><img src="afbeeldingen/layout/knop_impressions_out.png" onmouseover="this.src='afbeeldingen/layout/knop_impressions_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_impressions_out.png'" border="0" /></a>
  67. 				<a href="links.htm"><img src="afbeeldingen/layout/knop_links_out.png" onmouseover="this.src='afbeeldingen/layout/knop_links_hover.png'" onmouseout="this.src='afbeeldingen/layout/knop_links_out.png'" border="0" /></a>
  68. 			  	</td>
  69.  
  70. 				<td valign="top" style="background-repeat: no-repeat;" width="565" height="638" background="afbeeldingen/layout/body_text_final.png">
  71. 					<p class="titel">&nbsp;About me</p>
  72. 					<p class="tekst">My name is Brecht Debaere I was born in Izegem, city of brushes and shoes. My former crib was in Ingelmunster.
  73. 					 Now it is located in Wijnendale. I currently go to school at Sint-Jozefsinstituut-College. My hobbies include: drive-by, extortion,
  74. 					 blackmailing, illegal transport, and of course: computer. Movies I liked are: Lord of the Rings, National Treasure, Freddy got
  75. 					 Fingered, etc. Games I play(ed) are: World of Warcraft, Warcraft, Quake 3 Arena, Prince of Persia 1. There’s a new MMORPG coming and that’s
  76. 					 <a href="http://www.aiononline.com" target="_blank">Aion</a>, I’ll buy that and play it online as well. I like RPG’s because they have magic in them and a nice fantasy setting.</p>
  77. 					<p class="tekst"I follow computer science at my current school, I like the course less than expected. However, every now and then I learn some stuff that I did not yet know.</p>
  78. 				</td>
  79. 			</tr>
  80.  
  81.  
  82. 			<tr>
  83. 				<td colspan="2"><img src="afbeeldingen/layout/footer.png" /></td>
  84. 			</tr>
  85. 		</table>
  86.  
  87. 		<div class="containerke">
  88. 			<table class="transparantie">
  89. 				<tr>
  90. 					<td class="picNT">
  91. 						<p><img class="picNT" src="afbeeldingen/pic/canterbury-cathedral.jpg" />
  92. 						<p>Commentaar</p>
  93. 					</td>
  94. 				</tr>
  95. 			</table>
  96. 		</div>
  97. 	</body>
  98. </html>


EDIT: dat tweede probleem is me al gelukt door een 70% zwart laagje toe te voegen en die tabel met image op een ander laagje te zetten boven dat 70% zwart laagje :-)
Als jullie nog iets weten voor dat andere probleem...

3 antwoorden

Gesponsorde links
Offline jc2 - 10/05/2008 19:01
Avatar van jc2 PHP interesse heb je ook een link?
Offline brechtjah - 10/05/2008 19:02
Avatar van brechtjah Nieuw lid Nee, die heb ik niet, maar als je mijn uitleg niet snapt kan je altijd wat vragen...
Offline StommePoes - 14/05/2008 13:15 (laatste wijziging 14/05/2008 13:17)
Avatar van StommePoes Nieuw lid *Edit, ik heb net gezien dat je een oplossing voor het eerste probleem hebt gevonden...

Tweede, denk ik dat het gewoon "absolute positioning" is.
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. div.containerke {
  2. width: 100%;
  3. height: 100%;<-- hier is een probleem voor veel browsers
  4. left: 0;
  5. top: 0;
  6. position: absolute;<-- hier is het andere
  7. display: inline;<-- dit doet helemaal nix : )

Absolute positioning betekent dat jouwe div kan niet meer de pagina zien, en de pagina kan niet je div zien. Daarom kan andere content onder de div zitten. Je zegt: top: 0 en left: 0 maar weet je dat dat is van de dichtste-bij "positioned" voorvader, en je hebt er geen, dus gebruikt ie de body als verwijzer. Zet hem met geen positioning en dan zou hij onder de andere tabel blijven.

Ook is height: 100% slecht voor iedereen behalve IE6. Andere browsers doen dit literaal-- 100% = alles. lk zou liever geen height zetten. De div zou altijd alle content houden, behalve floats.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.332s