Autor Zpráva
Anonymní
Profil *
Dobré dopoledne, mám stránky těsně před dokončením a kromě umístění odkazů uplně na dno mě ještě trápí jedna věc...

Možná se to může zdát někomu malicherné, ale mám rád dokonalost...

Oč běží:

.foto {
float: left;
display: inline;
width: 210px;
height: 170px;
overflow: hidden;
margin: 10px 15px 45px 15px;
background-color: white;
text-align: center;
border: 1px solid #FFFFFF;
}

.foto img {
margin: 15px auto 0 auto;
border: none;
}

.foto:hover, .foto.hover {
background-color: #E3F7d4;
border: 1px solid #9AC577;
}

.foto:hover a, .foto.hover a {
text-decoration: none;
}

.foto p a {
font-size: 1.1em;
color: #003960;
font-weight: normal;
display: block;
margin-top: 6px;
}



<div class="foto"><a href=""><img src="" alt="" width="180" height="120"></a>
<p><a href="">První fotka</a></p>
</div>


po najetí na text (První fotka) nebo fotku se objeví hover (zvýraznění okolí fotky), ja však chci, aby odkazem nebyla pouze fotka a text, ale i to okolí

pokud však zadám

.foto a { display: block; width: 210px; height: 170px; } , tak text při hoveru vždy zmizí, zkoušel jsem i různé kombinace, ale bez výsledku, lze to prosím nějak ošetřit?

díky

Petr
toom11
Profil
Já teda nevim jestli to není blbost ale co takhle napsat:
<div class="foto">"><a href=""><img src="" alt="" width="180" height="120">
<p>Prvni Fotka</p></a></div>
... ale třeba je to blbost já nevim jak to tam přesně máš!
Str4wberry
Profil
Anonymní
Podle mě na to jdeš zbytečně složitě. HTML kód — bude stačit tento:
<a class='img' href=""><img src="" alt="" width="180" height="120"><span>První fotka</span></a>
1) „.foto“ nahradíš za „a.img“
2) „.foto:hover, .foto.hover,“ za „a.img:hover“
3) „.foto p a“ za „a.img span“

A mělo by to fungovat.
Anonymní
Profil *
Str4wberry


díky, nakonec jsem to vyřešil trochu jinak, ale díky moc

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: