NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
petericek
Člen
Avatar
petericek:17.6.2015 14:35

Zdravím, vytvoril som si na stránke 4 tlačidlá, cez ktoré sa chcem prekliknúť.

Problém je v tom, že Internet Explorer, síce zobrazí použitie hover, nepreklikne; Mozila nezobrazí použitie hover, nepreklikne; kým Opera a Chrome sa správajú korektne, zobrazia najazd myšky na tlačidlo a prekliknú sa kam chcem. Prosím o radu.

Zdroják prikladám.

html:
<section class="tlacidla">

<button class="tlacidlo"><a href="nase_us­pechy_predmeto­ve_sutaze.html">Pred­metové súťaže</a></button>
<button class="tlacidlo"><a href="nase_us­pechy_sportove_su­taze.html">Špor­tové súťaže</a></button>
<button class="tlacidlo"><a href="nase_us­pechy_umelecke_su­taze.html">Ume­lecké súťaže</a></button>
<button class="tlacidlo"><a href="nase_us­pechy_olympia­dy.html">Olym­piády</a></but­ton>
</section>

css:
.tlacidlo { display: block; margin-left: 10px; float: left; text-align: center; font-size: 16px; color: white; background: blue; height:40px; border-radius: 15px; }
.tlacidlo a { text-align: center; font-size: 16px; color: white; background: blue; height:40px; border-radius: 15px; text-decoration: none; }
.tlacidlo a:hover { text-align: center; font-size: 16px; color: red; background: blue; height:40px; border-radius: 15px; text-decoration: none; }
.tlacidla { float: left; width: 610px; margin-left: 10px; margin-top: 0px; margin: 15px;}

 
Odpovědět
17.6.2015 14:35
Avatar
petericek
Člen
Avatar
petericek:17.6.2015 15:02

Ukážka na našej školskej stránke, momentálne pripravujem novú verziu, len tá časť, čo nefunguje:

http://www.zsobchodsec.edu.sk/…uspechy.html

Vďaka za odpovede

 
Nahoru Odpovědět
17.6.2015 15:02
Avatar
adder
Člen
Avatar
Odpovídá na petericek
adder:17.6.2015 21:50

Ahoj,

nejsem si úplně jist, jak se chová odkaz v

<button>

, ale jsem si jist, že to není dobře. Tag

<button>

se používáš ve formulářích, přesměrování na jinou stránku přes odkaz - tag

<a>

.

Také jsem si všiml, že máš 2x definované stejné styly, stačí jednou.

Když použiješ

float: left;

, tak už nemusíš psát

display: block;

- float to zařídí.

Jako opravené řešení lze použít tohle: http://jsfiddle.net/2gehufxa/1/

Nahoru Odpovědět
17.6.2015 21:50
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
petericek
Člen
Avatar
Odpovídá na petericek
petericek:17.6.2015 21:51

Problém vyriešený, použitá metóda <form method="post" action="xxx.html"><in­put value="XXX" name="submit" class="submit" type="submit"></for­m>, funguje aj hover v IE, O, MF, GCH

 
Nahoru Odpovědět
17.6.2015 21:51
Avatar
petericek
Člen
Avatar
Odpovídá na adder
petericek:17.6.2015 21:57

Vďaka za odpoveď, tvoje riešenie vyzerá inteligentnejšie ako moje ...

 
Nahoru Odpovědět
17.6.2015 21:57
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.