• 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

VPS Starter Arubacloud
0 głosów
351 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ź 750 wizyt
0 głosów
1 odpowiedź 962 wizyt
pytanie zadane 13 grudnia 2016 w Sieci komputerowe, internet przez razor6017 Użytkownik (780 p.)
0 głosów
1 odpowiedź 269 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...