Kilka elementów div obok siebie z hover

Question

Witam,

Jak sprawić, aby kilka elementów div wraz z CSS hover układało się obok siebie?

 

Obecny kod HTML:

<div class="srodowiska_graficzne">
<a name="srodowiska_graficzne"></a>
<center><h2>Środowiska graficzne</h2></center>
<a href="#"><div id="gnome"></div></a>
</div>
<a href="#"><div id="kde"></div></a>
</div>
<a href="#"><div id="lxde"></div></a>
</div>
<a href="#"><div id="xfce"></div></a>
</div>
</div>

 

CSS:

#gnome
{
width: 25%;
height: 317px;
float:left;
background-image: url(../grafika/gnome1.png);
}

#gnome:hover
{
float:left;
background-image: url(../grafika/gnome2.png);
}

#kde
{
width: 25%;
height: 317px;
float:left;
background-image: url(../grafika/kde1.png);
}

#kde:hover
{
float:left;
background-image: url(../grafika/kde2.png);
}

 

Answer 1

Musisz elementowi nad #gnome czyli "a" nadać atrybut float: left

Answer 2

Strasznie dziwny ten kod. Po co wsadzasz diva do a? Nie wiem czy nadal jest to błędem, ale wiem, że nie powinno się tak robić. Chociażby, dlatego że jest to bez sensu. Można przecież nadać elementowi a display: block;

Dodatkowo najlepiej wsadzić to w jakąś listę i jej elementy ustawić w poziomie.

No i wywalić ten znacznik center.

Answer 3

<a name="srodowiska_graficzne"></a>

Pierwszy raz się z takim czymś spotkałem chyba powinno wyglądać to tak:

<p id="srodowisko_graficzne"></p>

lub zrób to tak jak wyżej napisał  writen   dodaj to w listę np. tak :

http://codepen.io/anon/pen/xZEXxZ

 

 

Comments

http://www.kurshtml.edu.pl/html/do_etykiety,odsylacze.html

---

Dzięki  writen  za info z tym

<a name="nazwa_etykiety"></a>,

przyznam się, że nigdy takiego czegoś nie używałem.

 

Answer 4

Próbowałem uzyskać taki efekt z tabelą

 

<table class="srodowiska">
<tr>
<td>
<img src="/grafika/gnome2.png" alt="" />
</td>
<td>
<img src="/grafika/kde2.png" alt="" />
</td>
<td>
<img src="/grafika/lxde1.png" alt="" />
</td>
<td>
<img src="/grafika/xfce1.png" alt="" />
</td>
</tr>
</table>

Niestety cały element rozciągnął się poza okno przeglądarki. Efekty: www.linux-zsp2.cba.pl