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>
