Knoppen werken niet meer door 'absolute' plaatsen van afbeelding

Status
Niet open voor verdere reacties.
R

Roelant

Gebruiker
Lid geworden
20 mrt 2007
Berichten
112
Hoi, Ik heb een pagina gemaakt met aan de linkerkant 3 kleine foto's. Wanneer je met de muis over die foto's gaat wordt een andere afbeelding getoond.

Daarnaast (gecentreerd op de pagina) wordt een groter exemplaar van deze afbeelding getoond. Ik heb deze afbeelding met position:absolute daar geplaatst, omdat hij naast de kleine foto's geplaatst moet worden en niet er onder.

Wat er nu alleen gebeurt is dat de functie van die kleine foto's (andere afbeelding tonen) niet werkt als als er op die hoogte ook die grote afbeelding naast staat. Alsof die grote afbeelding ook over die kleine afbeeldingen is geplaatst en ik ze daardoor niet kan selecteren.

Weet iemand wat hier de oorzaak van is?

Code: 
body{
position:relative;
margin:0;
padding:0;
}
#afb-groot {
position:absolute;
top:50px;
text-align:center;
}

HTML: 
<body>
	<div id="menu">
             Hier staan de kleine afbeeldingen.
	</div>
	<div id="afb-groot">
	<img src="images/test.jpg" alt="test" title="test" width="60%" height="60%" />
	</div>
</body>
 
Bij een relatief gepositioneerde container (div) met absoluut gepositioneerde elementen erin, worden de abs. gepositioneerde elementen uit de normale werkwijze gehaald zodat de container leeg verschijnt ( en de elementen erna komen.)

Denk dat de id="afb-groot" direct aan de <img> toekennen plus de container verwijderen beter werkt maar heb dit niet zelf geprobeerd.
 
De #afb-groot container neemt hier de volle breedte in beslag.
Heb je al eens geprobeerd:
Code: 
#afb-groot {
   position:absolute;
   top:50px;
   text-align:center;
   background: fuchsia;
   }
Aan het paarse kleurtje kan je precies zien tot hoever die container over andere dingen heen gaat: alles op die hoogte!
En dan deze:
Code: 
#afb-groot {
   position:absolute;
   width:400px;
   top:50px;
   left:50%;
   margin-left: -200px; /* halve container-breedte */
   text-align:center;
   background: fuchsia;
}
En inderdaad kan je deze style ook direct geven aan het grote <img> zelf, als je daarvan de precieze breedte van tevoren weet (en deze altijd hetzelfde is).

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ok, bedankt voor de info, ik heb het nu alsvolgt opgelost:

HTML: 
<img src="images/test.jpg" alt="test" title="test" id="afb-groot" width="60%" />

Code: 
#afb-groot{
position:absolute;
top:15px;
left:300px;
}

Maar wat me opviel is dat als ik een height van 60% ingeef, dat hij dan wel heel smal (in hoogte) wordt en de afbeelding compleet uit verhouding weergeeft. Hoe kan dit? Nu heb dus alleen de width ingesteld en past het formaat zich aan als ik de breedte van de browser aanpas, maar niet als ik de hoogte aanpas. Nu weet ik trouwens ook niet hoe vaak je op een website ziet dat de afbeelding zich aanpast aan je scherm...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan