Diskuze: Přesouvající se tlačítko

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

David Moškoř

Člen

David Moškoř:21.11.2016 18:35

Dobrý den, mám problém udělal jsem si hvězdičkové hodnocení:

<style>
.hodnoceni-hvezdami li span input
{
background:none;border:none;cursor:pointer;margin:2.2px;width:25px;height:25;
}

.hodnoceni-hvezdami
{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url("images/hv.gif") top left repeat-x;
cursor:pointer;
}
.hodnoceni-hvezdami li
{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}

.hodnoceni-hvezdami li span
{
display:block;
width:30px;
height: 30px;
text-decoration: none;
z-index: 20;
position: absolute;
padding: 0px;
}

.hodnoceni-hvezdami li span:hover
{
background: url("images/hv.gif") left center;
z-index: 2;
left:0px;
}

.hodnoceni-hvezdami .jedna-hvezda
{
left: 0px;
}

.hodnoceni-hvezdami .jedna-hvezda:hover
{
width:30px;
}

.hodnoceni-hvezdami .dve-hvezdy
{
left:30px;
}
.hodnoceni-hvezdami .dve-hvezdy:hover
{
width: 60px;
}

.hodnoceni-hvezdami .tri-hvezdy
{
left: 60px;
}

.hodnoceni-hvezdami .tri-hvezdy:hover
{
width: 90px;
}

.hodnoceni-hvezdami .ctyri-hvezdy
{
left: 90px;
}

.hodnoceni-hvezdami .ctyri-hvezdy:hover
{
width: 120px;
}

.hodnoceni-hvezdami .pet-hvezd
{
left: 120px;
}

.hodnoceni-hvezdami .pet-hvezd:hover
{
width: 150px;
}

.hodnoceni-hvezdami li.current-rating
{
background: url("images/hv.gif") left bottom;
position: absolute;
height: 30px;
display: block;
z-index: 1;
}

</style>
<?php
// prihlaseni do databaze
$host = "185.64.219.6:3306";
$dbuser = "kolemzeme.wz3044";
$dbpass = "***";
$db = "kolemzeme.wz3044";

// zpracovani databaze
$con = mysql_connect($host, $dbuser, $dbpass);
if(!$con){
die(mysql_error());
}

$select = mysql_select_db($db, $con);
if(!$select){
die(mysql_error());
}
$ip = $_SERVER['REMOTE_ADDR'];
$vysledek = mysql_query("SELECT * from hlasovani WHERE zkouska_ip = '$ip';");
$overim = mysql_num_rows($vysledek);


if(!empty($_POST['send'])){
if($overim != 0){
$hlaska="Již jsi hlasoval/a!";
}else{
$sql = "INSERT INTO hlasovani(zkouska, zkouska_ip) VALUES (".$_POST['send'].", '$ip')";
if(mysql_query($sql)) //pokud byl hlas uložen
{
echo "<script>window.location.replace('zkouska.php'); </script>";
}
}
}
$hvezdicky30 = mysql_query("SELECT * from hlasovani WHERE zkouska = 30");
$vyhodnoceni30 = mysql_num_rows($hvezdicky30);
$hvezdicky60 = mysql_query("SELECT * from hlasovani WHERE zkouska = 60");
$vyhodnoceni60 = mysql_num_rows($hvezdicky60);
$hvezdicky90 = mysql_query("SELECT * from hlasovani WHERE zkouska = 90");
$vyhodnoceni90 = mysql_num_rows($hvezdicky90);
$hvezdicky120 = mysql_query("SELECT * from hlasovani WHERE zkouska = 120");
$vyhodnoceni120 = mysql_num_rows($hvezdicky120);
$hvezdicky150 = mysql_query("SELECT * from hlasovani WHERE zkouska = 150");
$vyhodnoceni150 = mysql_num_rows($hvezdicky150);
$hvezdicky = mysql_query("SELECT * from hlasovani WHERE zkouska");
$vyhodnoceni = mysql_num_rows($hvezdicky);
$vse = 30*$vyhodnoceni30 + 60*$vyhodnoceni60 + 90*$vyhodnoceni90 + 120*$vyhodnoceni120 + 150*$vyhodnoceni150;
if($vyhodnoceni != 0){
$hotovo = $vse / $vyhodnoceni;
}else{
$hotovo = 0;
}
?>

<html>
<body>
<?php if(!empty($hlaska))echo '<b>'.$hlaska.'</b>'; ?>
<ul class="hodnoceni-hvezdami">
<li class='current-rating'  style='width:<?php echo $hotovo;?>px;'></li>
<li><form method="POST"><span class='jedna-hvezda'><input type="hidden" name="send" value="1"><input type="submit" title='1 hvězda z 5' value=""></span></form></li>
<li><form method="POST"><span class='dve-hvezdy'><input type="hidden" name="send" value="2"><input type="submit" title='2 hvězdy z 5' value=""></span></form></li>
<li><form method="POST"><span class='tri-hvezdy'><input type="hidden" name="send" value="3"><input type="submit" title='3 hvězdy z 5' value=""></span></form></li>
<li><form method="POST"><span class='ctyri-hvezdy'><input type="hidden" name="send" value="4"><input type="submit" title='4 hvězdy z 5' value=""></span></form></li>
<li><form method="POST"><span class='pet-hvezd'><input type="hidden" name="send" value="5"><input type="submit" title='5 hvězd z 5' value=""></span></form></li>
</ul>
</body>
</html>

Problém je v tom, že když najedu na hvězdičku a neviditelné tlačítko, které je na ni, tak se mi to tlačítko přesune na začátek. Kyž jsem vymazal left:0; tak mi zase nefungovaly hvězdičky. Pomůžete mi prosím?

Odpovědět

21.11.2016 18:35

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Ján Timoranský

Tvůrce

Ján Timoranský:21.11.2016 19:47

Nemáš to niekde hostované? Takto ťažko posúdiť, nakoľko tam máš jednak PHP a tiež v štýloch používaš obrázky, ktoré nemáme odkiaľ zobrať. Skús dať link, prípadne mi napíš správu, ak to nechceš dávať verejne.

Nahoru Odpovědět

21.11.2016 19:47

Find what you love and let it kill you.

David Moškoř

Člen

David Moškoř:21.11.2016 19:53

http://kolemzeme.wz.cz/zkouska.php

Tady to je

Nahoru Odpovědět

21.11.2016 19:53

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Ján Timoranský

Tvůrce

Ján Timoranský:21.11.2016 20:06

Rozšír si css o tieto hodnoty:

.hodnoceni-hvezdami li span input {
    position: absolute;
    right: 0;
}

Input to napozicuje absolútne napravo k spanku, ktorému meníš background. Malo by to fungovať, prípadne otestuj

Editováno 21.11.2016 20:06

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

21.11.2016 20:06

Find what you love and let it kill you.

David Moškoř

Člen

David Moškoř:22.11.2016 6:53

Díky moc

Nahoru Odpovědět

22.11.2016 6:53

Život je příliš krátký na to, abyste vymýšleli smysluplné názvy proměnných...

Naučíme tě pracovat na home-office.

Zjistit více...

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.