Witam.
Na podstronie umieściłem 2 obrazki i po kliknięciu na jeden z obrazków,
przechodzę do ostatniej podstrony.
Po najechaniu kursorem na obrazek nr 1 lub obrazek nr 2, wyświetla się tekst w ramce.
Te oba obrazki są obok siebie, ale jest 1 problem.
Po najechaniu kursorem na obrazek nr 1 wyświetla się ramka z tekstem,
ale chowa się ona za obrazek nr 2, czyli nie widać za bardzo tekstu w ramce.
Jak zrobić, aby po najechaniu kursorem na obrazek nr 1, tekst w ramce był widoczny, a nie zasłonięty?
Kod HTML:
<div id="content">
<ul style="float: left">
<li>
<a href="opel.html">
<img class="motoryzacja" src="obrazki/horror/astra.jpg" width="125" height="178"></img>
</a>
<div class="ramka">
<p class="data-tooltip0"></p>
<p class="data-tooltip1" style="color:yellow">Opel</p>
<p class="data-tooltip3" style="color:red">Model:<span>Astra</span></p>
<p class="data-tooltip5" style="color:red">Rok produkcji:<span>1994</span></p>
<p class="data-tooltip7" style="color:red">Typ paliwa:<span>Benzyna</span></p>
</div>
</li>
</ul>
<ul style="float: left; margin-left: 150px">
<li>
<a href="honda.html">
<img class="motoryzacja" src="obrazki/horror/civic.jpg" width="125" height="178"></img>
</a>
<div class="ramka">
<p class="data-tooltip0"></p>
<p class="data-tooltip1" style="color:yellow">Honda</p>
<p class="data-tooltip3" style="color:red">Model:<span>Civic</span></p>
<p class="data-tooltip5" style="color:red">Rok produkcji:<span>1998</span></p>
<p class="data-tooltip7" style="color:red">Typ paliwa:<span>Benzyna</span></p>
</div>
</li>
</ul>
</div>
Kod CSS:
ul li
{
position: absolute;
display: block;
}
span
{
margin-left: 5px;
color: white;
}
.motoryzacja
{
float: left;
width: 125px;
height: 178px;
border: 3px solid #0066FF;
}
.data-tooltip0
{
font-size: 15px;
margin-top: -30px;
margin-left: 15px;
}
.data-tooltip1
{
font-size: 12px;
font-weight: bold;
margin-top: -30px;
margin-left: 15px;
}
.data-tooltip3
{
margin-top: -30px;
margin-left: 15px;
}
.data-tooltip5
{
margin-top: -30px;
margin-left: 15px;
}
.data-tooltip7
{
margin-top: -30px;
margin-left: 15px;
}
.ramka
{
display: none;
width: 300px;
height: 135px;
white-space: pre;
padding: 0px;
border-radius: 10px;
background-color: #000000;
font-size: 11px;
position: absolute;
left: 110%;
}
ul li:hover>.ramka
{
display: block;
}