Flytte tekst med CSS med position og margin

[Romy]

Hei.

 

Jeg har et bilde,hvis man tar mus over det bilde dukker det opp tekst (javascript), som er stilert med CSS koden nedenfor:

#bannertext {
position: absolute;
left:450px;
top:400px;
width:210px;
display:none;
font-family:verdana;
font-size:16px;
padding:10px;
margin: 0cm 0cm 0cm 0cm;
border: solid 1px #333333;
}

 

Tar man mus over dukker teksten opp rett under bilde og ikke i selve bilde der jeg vil ha den. Eller at den følger musepekeren?

 

Jeg har forsøkt med noe margin instillinger men det fungerer heller ikke og jeg tror det er pga position: absolute, men fjerner jeg position: absolute så kommer teksten helt feil sted.

 

Hva gjør jeg?

[TheDarknessOberst]

Hva skjer, vis du prøver dette da?

 

#bannertext {
position: relative;
width:210px;
display:none;
font:verdana 16px;
padding:10px;
margin: 0;
border: solid 1px #333333;
}

 

 

Edit: Vis det fungerer like dårlig, ta koden din igjen - å legg til:

 

margin-top:-50px !important;

Endret 16. desember 2008 av TheDarknessOberst

[trygveaa]

Hvis du bare skal vise tekst over bildet (ikke flytte den med musepekeren som du foreslo), så trenger du bare css.

 

edit: Jeg glemte selvfølgelig at IE bare støtter :hover på a elementer... Så da bør du vel bruke javascript, hvis ikke bildet er en link.

 

Med position: absolute skal du kunne plassere den akkurat hvor du vil, men du kan prøve position: relative.

 

CSS:

div.bilde, div.bilde img {
width:400px;
}
div.bilde div {
width:210px;
top:-200px;
margin:auto;
display:none;
position:relative;
font-family:verdana;
font-size:16px;
border: solid 1px #333333;
}
div.bilde:hover div {
display:block;
}

 

HTML:

<div class="bilde">
<img src="url" />
<div>Bildetekst</div>
</div>

Endret 17. desember 2008 av trygveaa

[Romy]

Hva skjer, vis du prøver dette da?

 

#bannertext {
position: relative;
width:210px;
display:none;
font:verdana 16px;
padding:10px;
margin: 0;
border: solid 1px #333333;
}

 

 

Edit: Vis det fungerer like dårlig, ta koden din igjen - å legg til:

 

margin-top:-50px !important;

 

Den siste nevnte fungerte litt da.

Hva betyr !important? Hva sørger den for?

 

Problemet nå er at den flytter seg til venstre hvis oppløsningen på skjermen er høy eller til høyre hvis den er lav. Hva gjør jeg for å få den stå et sted egentlig? Egentlig vil jeg at den SKAL følge musen så lenge pekeren er over det bilde.

Bilde er lenket til en URL.

 

Trenger også hjelp til JavaScripten

Endret 17. desember 2008 av Romy

[TheDarknessOberst]

Ligger dette problemet ute? Link?

[Romy]

Ønsker helst å være anonym.

 

edit: da har jeg funnet løsningen.

Endret 18. desember 2008 av Romy