• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Kilka elementów div obok siebie z hover

Object Storage Arubacloud
0 głosów
377 wizyt
pytanie zadane 24 grudnia 2015 w HTML i CSS przez Bakr Mądrala (6,850 p.)

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);
}

 

4 odpowiedzi

0 głosów
odpowiedź 24 grudnia 2015 przez Ivan Maniak (60,650 p.)
Musisz elementowi nad #gnome czyli "a" nadać atrybut float: left
0 głosów
odpowiedź 25 grudnia 2015 przez writen Nałogowiec (29,060 p.)
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.
0 głosów
odpowiedź 25 grudnia 2015 przez jaca121212 Nałogowiec (40,760 p.)
<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

 

 

komentarz 25 grudnia 2015 przez writen Nałogowiec (29,060 p.)
komentarz 25 grudnia 2015 przez jaca121212 Nałogowiec (40,760 p.)

Dzięki  writen  za info z tym

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

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

 

0 głosów
odpowiedź 25 grudnia 2015 przez Bakr Mądrala (6,850 p.)

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

Podobne pytania

+2 głosów
1 odpowiedź 812 wizyt
0 głosów
1 odpowiedź 1,058 wizyt
pytanie zadane 13 grudnia 2016 w Sieci komputerowe, internet przez razor6017 Użytkownik (780 p.)
0 głosów
1 odpowiedź 300 wizyt

92,760 zapytań

141,684 odpowiedzi

320,470 komentarzy

62,104 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...