Hoi,
Voor een afstudeeropdracht moet ik oa. een web interface voor een applicatie ontwikkelen. Voor de layout heb ik een rapidweaver template als uitgangspunt genomen en hiervanuit verder gaan uitbouwen. Nu wil ik op het moment dat de gebruiker zijn muis over een afbeelding houdt dat deze vergroot in een box getoond wordt. Dit lukt ook, echter alleen als ik voor het block in css absolute positioning gebruik. Als ik relative gebruik wordt het image ook vergroot vertoond maar 'ingevoegd' tussen de overige content.
Onderstaand een klein deel van de html, waarbij de pop-up image tussen de span elements staat.
<div id="articlegroup">
<div id="popup">
<a href=""> <img src="${article["image"]}" style="width:100px;">
<span>
<img src="${article["image"]}">
</span>
</a>
</div> <div id="article">
<span class="shortdesc">${article["shortdesc"]}</span>
<span class="duration">
En bijgaand het relevante css. Als ik nu in css definitie "#articlegroup #popup a:hover span" absolute wijzig in relative wordt de image nog wel getoond maar tussen de rest van de getoonde content gevoegd. Als ik absolute gebruik wordt de afbeelding absoluut ten opzicht van de browserwindow getoond, met als gevolg dat de pop-up niet vlak bij het originele image wordt getoond, of als de pagina lang is helemaal niet wordt getoond omdat dat deel van de pagina al weer weggescrolled is. Is er een CSS guru die mij bij dit waarschijnlijk kleine probleempje kan helpen?
#articlegroup {
float: left ;
width: 100% ;
background-color: #e5e5e5;
margin-bottom: 2px;
z-index: 1;}
#articlegroup #popup {
float: left;
}
#articlegroup #popup a span {
display: none;
}
#articlegroup #popup a span img {
width: 400px ;
height: auto ;
}
#articlegroup #popup a:hover span{
display: block;
position:absolute ;
top: 100px;
left: 50px;
width: 400px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
}
[img]
Gast
