Trädvy Permalänk
Medlem
Plats
Luleå
Registrerad
Jan 2004

Fixa bredd på CSS "Tooltip"

Jag har på min hemsida www.arcticknives.com några "tooltips" om man hovrar över länkarna i "News"-rutan på förstasidan.
Ändrade storleken på bilden som ingår i tooltipsen, och nu kan jag inte få till rutans bredd ordentligt.

Jag är ju bara en glad amatör, så har inte någon djupare kunskap om webbdesign, men av vad jag kunnat läsa mig till så går det inte att ställa width-värde för ett inline-element som Span.. och med padding lyckas jag inte lösa problemet med att bilden hamnar utanför rutan. Vad kan jag i så fall göra för att fixa det här problemet, vill helst hitta en enkel lösning som jag snabbt kan duplicera när jag ska skriva in en ny nyhet på sidan igen. Tacksam för all hjälp!

CSS ser ut såhär:

/* Tooltip Code */ #news a.tooltip strong {/*line-height:20px;*/ color:#666666; font-size:1.4em; display:block; width:100%; margin:0 auto; text-align:center; } a.tooltip:hover {text-decoration:none;} a.tooltip span { z-index:20; display:none; padding:10px 30px 10px 10px; margin-top:-34px; margin-left:auto; margin-right:auto; line-height:1em; } a.tooltip:hover span{ display:inline-block; float:left; width: 300px; position:absolute; color:#333; border:1px solid #999999; background:#ffffff; } .callout { z-index:20; position:absolute; top:30px; border:0; left:-12px;} /*CSS3 extras*/ a.tooltip span { border-radius:4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 5px 5px 8px #CCC; -webkit-box-shadow: 5px 5px 8px #CCC; box-shadow: 5px 5px 8px #CCC; } /* End Tooltip Code */ .tooltipNews{ width:230px; margin: 0 auto; }

och html:

<div class="tooltipNews"> <span><strong>2016-01-06:</strong> My last knife of 2015 is now available in the gallery and up for sale. <a href="_pages/knives/winter.php" class="tooltip">Winter<span> <img class="callout" src="_images/layout/callout.gif" /> <img src="_images/gallery/thumbs/winter.jpg" style="display:block; margin:0 auto;" /><br /><strong>Winter</strong></span></a> has arrived! </div>

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2004

problemet kommer sig av att din css sätter width på din tooltip-span på en massa olika ställen;
#news span (width: 180px) (rad 38)
a.tooltip:hover span (width: 500px) (rad 599)
a.tooltip span (width: 250px) (rad 601)
a.tooltip span (width: 240px) (rad 598)

du kan antingen ta bort alla de angivna bredderna helt eller ange width: auto !important; i regeln a.tooltip:hover span.
kan man undvika !important är det väl bra, så jag skulle nog kört på förslag ett (om det inte orsakar några andra problem på sidan).

tips är att använda sig av "Developer Tools" i din browser. man brukar komma åt detta läge genom att trycka på F12. det brukar bli lättare att felsöka sådana här saker där.

as far as we can tell, the massacre went well...

Trädvy Permalänk
Medlem
Plats
Luleå
Registrerad
Jan 2004
Skrivet av jovnas:

problemet kommer sig av att din css sätter width på din tooltip-span på en massa olika ställen;
#news span (width: 180px) (rad 38)
a.tooltip:hover span (width: 500px) (rad 599)
a.tooltip span (width: 250px) (rad 601)
a.tooltip span (width: 240px) (rad 598)

du kan antingen ta bort alla de angivna bredderna helt eller ange width: auto !important; i regeln a.tooltip:hover span.
kan man undvika !important är det väl bra, så jag skulle nog kört på förslag ett (om det inte orsakar några andra problem på sidan).

tips är att använda sig av "Developer Tools" i din browser. man brukar komma åt detta läge genom att trycka på F12. det brukar bli lättare att felsöka sådana här saker där.

Tack för hjälpen, jag tror att det löste sig!