login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div variabele hoogte verticaal centreren werkt niet in internet Explorer

Offline driess - 13/11/2010 17:25 (laatste wijziging 13/11/2010 19:29)
Avatar van driessNieuw lid Beste,

Ik ben nieuw op dit forum en heb me lid gemaakt in de hoop hier een antwoord te vinden op het mysterie waar ik ben voor komen te staan bij het maken van een website.

Ik heb een site gemaakt met daarin een portfolio. Omdat aan dat portfolio later nog afbeeldingen moeten kunnen worden toegevoegd, heb ik dat gemaakt met JAlbum. Daarvan heb ik de skin-bestanden aangepast, aan de hand van die bestanden genereert JAlbum dan de html-bestanden voor het portfolio, welke ik dmv een Iframe in mijn website plaats.

Alles leek goed te werken, behalve in Internet Explorer (ik gebruik versie 7.nog iets). Ik wil dat de afbeelding mooi verticaal gecentreerd staat tussen de twee pijlen links en rechts ervan. Maar IE 7 plakt deze helemaal bovenaan tegen de rand van het Iframe. Het onderschrift dat bij de afbeelding hoort, staat dan weer te laag en valt deels weg. In Internet Explorer 9 (8 ben ik overgeslagen) is dat dan weer niet, daar geeft hij alles correct weer.

Een voorbeeld van de site vinden jullie hier: http://www.charlottefroyen.be/test/portfolio.html

een afbeelding met daarin de foute weergave, zodat jullie zien wat ik bedoel:
http://www.char...E-site.JPG

De code waarop JAlbum zich baseert (of het echt html is weet ik niet, het ziet er zo uit maar het draagt de extensie htt, JAlbum maakt er zijn html bestanden mee):
html4strict 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.  
  5. 		<meta http-equiv="content-type" content="text/html; charset=$textEncoding">
  6. 		<title>${title}</title>
  7. 		<link href="../../../styles/images.css" rel="stylesheet" type="text/css" />
  8.  
  9.  
  10.  
  11. 	</head>
  12.  
  13. 	<body>
  14.  
  15. <div id="koepel">
  16.  
  17. <!-- navigatie vorige -->
  18. 	<div id="navlinks">	
  19. 		<ja:if exists="previousPage">
  20.    		 <a href="${previousPage}"><img src="${resPath}/pijl_previous.gif" alt="Previous image" title="vorige afbeelding" class="links"/></a>
  21. 		</ja:if>
  22. 	</div>
  23.  
  24. <!-- afbeelding -->
  25. <div id="buiten">
  26. <div id="midden">	
  27. 	<div id="binnen">
  28. 	<div id="image" width="${imageWidth}px">
  29. 		<ja:if exists="originalPath">
  30. 			<a href="${originalPath}"><img class="afbeelding" src="${imagePath}" alt="${title}"></a>
  31. 			</ja:if>
  32. 		<ja:else>
  33. 			<img class="afbeelding" src="${imagePath}" alt="${title}" />
  34. 			</ja:else>
  35. 	</div></div></div></div>
  36.  
  37. <!-- commentaar -->	
  38. 	<div id="comment">		
  39. 		<ja:if exists="comment">
  40.    			<p align="bottom">${comment}</p>
  41. 		</ja:if>
  42. 	</div>
  43.  
  44. <!-- navigatie volgende -->
  45. 	<div id="navrechts">
  46. 		<ja:if exists="nextPage">
  47.    	 		<a href="${nextPage}"><img src="${resPath}/pijl_next.gif" alt="Next image" title="volgende afbeelding" class="links"/></a>
  48. 			</ja:if>	
  49. 	</div>
  50.  
  51. </div>
  52. <!-- nog plaatsen -->
  53.  
  54.  
  55.  
  56.  
  57. 	</body>
  58. </html>


en de css waarmee ik werk
css code - Bekijk de code zonder highlighting - Klap code in 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4.  
  5. /*opmaak afbeelding*/
  6.  
  7. #koepel {
  8. 	position: absolute;
  9. 	width: 640px;
  10. 	height: 335px;
  11. 	top: 4px;
  12. 	left: 1px;
  13. 	z-index: 21;
  14. }
  15.  
  16. #comment {
  17. 	position: absolute;
  18. 	bottom: -17px;
  19. 	left: 54px;
  20. 	width: 527px;
  21. 	text-align: center;
  22. 	z-index: 22;
  23. }
  24.  
  25. #image {
  26. 	position: relative; 
  27. 	left: 54px;
  28. 	text-align: center;
  29. 	z-index: 22;
  30. 	width: 527px;
  31. 	display: table;
  32. 	vertical-align: middle;
  33. }
  34.  
  35. #buiten {
  36. 	height: 335px; 
  37. 	overflow: hidden; 
  38. 	position: relative; 
  39. 	width: 600px;	
  40. }
  41.  
  42. #buiten[id] {
  43. 	display: table; 
  44. 	position: static; 
  45. }
  46.  
  47. #midden[id] {
  48. 	display: table-cell; 
  49. 	vertical-align: middle; 
  50. 	width: 100%;
  51. }
  52.  
  53. #binnen {
  54. 	position: relative; 
  55. 	top: -50%;
  56.  
  57. }
  58. #binnen[id] {
  59. 	position: static;
  60. }
  61.  
  62. #navlinks {
  63. 	position: absolute;
  64. 	float: left;
  65. 	width: 40px;
  66. 	height: 40px;
  67. 	top: 145px;
  68. 	left: 14px;
  69. 	z-index: 23;
  70. 	clear: both;
  71. }
  72.  
  73. #navrechts {
  74. 	position: absolute;
  75. 	float: right;
  76. 	width: 40px;
  77. 	height: 40px;
  78. 	top: 145px;
  79. 	left: 585px;
  80. 	z-index: 23;
  81. 	clear: both;
  82. }
  83.  
  84. .afbeelding {
  85. 	border-width: 4px;
  86. 	border-color: #fff;
  87. 	border-style: solid;
  88. 	vertical-align: middle;
  89. }
  90.  
  91. p {
  92. 	font-family: Arial, Helvetica, sans-serif;
  93. 	font-size: 11px;
  94. 	color: #660000;
  95. 	font-weight: bold;
  96. 	margin-top: 5px;
  97. }
  98.  
  99. .links {
  100. 	border-style: none;
  101. }
  102.  
  103. /* opmaak index afbeeldingen */
  104.  
  105. #koepelindex {
  106. 	position: absolute;
  107. 	width: 190px;
  108. 	height: 345px;
  109. 	top: 0px;
  110. 	right: 0px;
  111. 	z-index: 21;
  112. }
  113.  
  114. #index_prev {
  115. 	position: absolute;
  116. 	width: 22px;
  117. 	height: 22px;
  118. 	bottom: 20px;
  119. 	right: 124px;
  120. 	z-index: 23;
  121. }
  122.  
  123. #index_next {
  124. 	position: absolute;
  125. 	width: 22px;
  126. 	height: 22px;
  127. 	bottom: 20px;
  128. 	right: 6px;
  129. 	z-index: 23;
  130. }
  131.  
  132. table {
  133. 	float: right;
  134. 	clear: both;
  135. }
  136.  
  137. .thumb {
  138. 	width: 70px;
  139. 	height: 70px;
  140. 	border-style: none;
  141. 	display: block;
  142. }
  143.  
  144. /* transparantie index afbeeldingen */
  145.  
  146. .thumb img {
  147. 	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
  148. 	-moz-opacity: 0.8;
  149. 	opacity: 0.8;
  150.  
  151. }
  152.  
  153. .thumb:hover img {
  154. 	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  155. 	-moz-opacity: 1;
  156. 	opacity: 1;
  157. }
  158.  
  159. .thumb:active img {
  160. 	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  161. 	-moz-opacity: 1;
  162. 	opacity: 1;
  163. }
  164.  
  165. .thumb:focus img {
  166. 	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  167. 	-moz-opacity: 1;
  168. 	opacity: 1;
  169. }


In beide codes gaan jullie waarschijnlijk wel een aantal vreemde constructies terugvinden. Dat zijn of beginnersfouten of sporen van mijn vele pogingen om het op te lossen.

Ik hoop dat iemand mij kan helpen met deze vreemde fout in IE 7 en mij kan vertellen wat ik moet veranderen om die afbeelding mooi in het midden te krijgen en het onderschrift volledig te tonen.
Alvast bedankt!

3 antwoorden

Gesponsorde links
Offline Kevin - 13/11/2010 17:35 (laatste wijziging 13/11/2010 17:39)
Avatar van Kevin Crew Ajax/REST Mag ik even vragen waarom je die vierkante brackets gebruikt in je css?

vb
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #binnen[id]


- Een ID gebruik je toch maar 1 keer
- Als je die css stijl over meerdere zaken wil doen (in jouw geval onderliggende divs) zou ik het zou doen:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #binnen div {  }
Offline WouterJ - 13/11/2010 18:06
Avatar van WouterJ HTML gevorderde Wil je even lange codes op plaatscode.be zetten?
Offline driess - 13/11/2010 19:23
Avatar van driess Nieuw lid Alvast bedankt voor de snelle reacties.

-ddReborn: die #binnen is, samen met de #buiten en #midden, een truck die op internet had gevonden en die het dus wel doet, behalve in IE7. Die [id] erbij is dus eigenlijk gewoon klakkeloos overgenomen (copy-paste). Ik zal het veranderen en kijken of het dan nog werkt.
-Waldio: goede tip, ik vond het al een rommeltje lijken met die lange codes in het bericht. Ik hou er rekening mee.
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.202s