sterre afbeelding

Status
Niet open voor verdere reacties.
N

Nawien

Gebruiker
Lid geworden
25 jun 2009
Berichten
6
Hallo
ik heb een site gemaakt met filmpjes en flash games maar nu heb ik een sterretjes score die ik eronder wil zetten maar er zijn 5 sterren en er word er maar 1 afgebeeld en dan is de ene helft score 1 en de andere helft score 2
Code: 
<style>
    /* Dit zijn de styles die gebruikt worden door het systeem */
    .sterren{
        width:80px;
        height:16px;
        margin:0 0 20px 0;
        padding:0;
        list-style:none;
        clear:both;
        position:relative;
        background:url(stars/star_green.gif) no-repeat 0 0;
    }
    .s0star {background-position:0 0}
    .s1star {background-position:0 -16px}
    .s2star {background-position:0 -32px}
    .s3star {background-position:0 -48px}
    .s4star {background-position:0 -64px}
    .s5star {background-position:0 -80px}
    ul.sterren li {cursor:pointer;float:left;text-indent:-999em;}
    ul.sterren li a {
        position:absolute;
        left:0;
        top:0;
        width:16px;
        height:16px;
        text-decoration:none;
        z-index:200;
    }
    ul.sterren li.s1 a {left:0}
    ul.sterren li.s2 a {left:16px;}
    ul.sterren li.s3 a {left:32px;}
    ul.sterren li.s4 a {left:48px;}
    ul.sterren li.s5 a {left:64px;}
    ul.sterren li a:hover {
        z-index:2;
        width:80px;
        height:16px;
        overflow:hidden;
        left:0;
        background:url(stars/star_green.gif) no-repeat 0 0;
    }
    ul.sterren li.s1 a:hover {background-position:0 -96px;}
    ul.sterren li.s2 a:hover {background-position:0 -112px;}
    ul.sterren li.s3 a:hover {background-position:0 -128px}
    ul.sterren li.s4 a:hover {background-position:0 -144px}
    ul.sterren li.s5 a:hover {background-position:0 -160px}
    h3{margin:0 0 2px 0;font-size:110%}
</style>
alvast bedankt
 
Laatst bewerkt door een moderator:
Daar is zo moeilijk wat van te zeggen. Zo te zien maak je gebruik van 'n achtergrond-afbeelding waar de sterren op staan, en waarvan dan het juiste deel getoond wordt. Als ik het goed heb.

In je css staat o.a. (even op één regel gezet en het niet-relevante weggehaald):
Code: 
ul.sterren li a:hover {background:url(stars/star_green.gif) no-repeat 0 0;}

Verderop staat:
Code: 
ul.sterren li.s1 a:hover {background-position:0 -96px;}

Sommige browsers hebben moeite als je background-position gebruikt en in een andere regel de url opgeeft. Wat je zou kunnen proberen is het te combineren:
Code: 
ul.streern li.s1 a:hover {background: url(stars/star_green.gif) no-repeat 0 -96px;}
(En dat dan natuurlijk voor alle vijf de regels.)

Geef anders even 'n link naar de code.
 
Dit is de hele code

PHP: 
<HTML>
<HEAD>
<style>
    /* Dit zijn de styles die gebruikt worden door het systeem */
    .sterren{
        width:500px;
        height:50px;
        margin:0 0 20px 0;
        padding:0;
        list-style:none;
        clear:both;
        position:relative;
        background:url(stars/star_g.png) no-repeat 0 0;
    }
    .s0star {background-position:0 0}
    .s1star {background-position:0 -50px}
    .s2star {background-position:0 -100px}
    .s3star {background-position:0 -150px}
    .s4star {background-position:0 -200px}
    .s5star {background-position:0 -250px}
    ul.sterren li {cursor:pointer;float:left;text-indent:-999em;}
    ul.sterren li a {
        position:absolute;
        left:0;
        top:0;
        width:50px;
        height:50px;
        text-decoration:none;
        z-index:200;
    }
    ul.sterren li.s1 a {left:0}
    ul.sterren li.s2 a {left:16px;}
    ul.sterren li.s3 a {left:32px;}
    ul.sterren li.s4 a {left:48px;}
    ul.sterren li.s5 a {left:64px;}
    ul.sterren li a:hover {
        z-index:2;
        width:80px;
        height:16px;
        overflow:hidden;
        left:0;
        background:url(stars/star_g.png) no-repeat 0 0;
    }
    ul.sterren li.s1 a:hover {background-position:0 -96px;}
    ul.sterren li.s2 a:hover {background-position:0 -112px;}
    ul.sterren li.s3 a:hover {background-position:0 -128px}
    ul.sterren li.s4 a:hover {background-position:0 -144px}
    ul.sterren li.s5 a:hover {background-position:0 -160px}
    h3{margin:0 0 2px 0;font-size:110%}
</style>
<TITLE>Sterren</TITLE>
</HEAD>
<BODY>
<?php
// Verbinding maken met MySQL.
include("connection.php");

// Stem uitbrengen. (Controle of de stem wel tussen de 1 en de 5 zit)
if(isset($_GET["vote"]) && $_GET["vote"] > 0 && $_GET["vote"] <= 5){
    // Oude data ophalen...
    $query = "SELECT score,votes FROM starvote";
    $result = mysql_query($query)or die(mysql_error()."<br>".$query);
    $VotesSQL = mysql_fetch_assoc($result);
    // ...nieuwe data opslaan...
    $new_votes = ($VotesSQL['votes'] + 1);
    $new_score = ($VotesSQL['score'] + $_GET["vote"]);
    // ...en toevoegen aan de database!
    $query = "UPDATE starvote SET score = '".$new_score."', votes = '".$new_votes."'";
    mysql_query($query)or die(mysql_error()."<br>".$query);    
}

// Votes ophalen en in een string zetten.
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
$votes = $VotesSQL['votes'];
$score = $VotesSQL['score'];

// Gemiddelde berekenen en er netjes 1 waarde van maken; het aantal sterren.
$score != 0 ? $stars = round(($score / $votes)) : $stars = 0;
$stars > 5 ? $stars2 = 5 : $stars2 = $stars;
//$starsTxt = array('s0','s1','s2','s3','four','five');

// Door midden van de aantal sterren, de CSS class definieren in een string.
for ($i=1;$i<=$stars;$i++){
	
	echo ("<img src =stars/star_g.png />");
}
$StarClass = 'sterren s'.$stars2.'star';
echo $stars.' sterren door '.$votes.' stemmen.';

//Sterren CSS class dynamisch toevoegen, en de sterren weergeven. ?>
<ul class="<?php echo $StarClass; ?>">
<li class="s1"><a href="news.php?newsid=<?php echo $_GET['newsid'] ?>&vote=1" title="1 Star" onFocus="this.blur()">1</a></li>
<li class="s2"><a href="index.php?newsid=<?php echo $_GET['newsid'] ?>&vote=2" title="2 Stars" onFocus="this.blur()">2</a></li>
<li class="s3"><a href="index.php?newsid=<?php echo $_GET['newsid'] ?>&vote=3" title="3 Stars" onFocus="this.blur()">3</a></li>
<li class="s4"><a href="index.php?newsid=<?php echo $_GET['newsid'] ?>&vote=4" title="4 Stars" onFocus="this.blur()">4</a></li>
<li class="s5"><a href="index.php?newsid=<?php echo $_GET['newsid'] ?>&vote=5" title="5 Stars" onFocus="this.blur()">5</a></li> 
</ul>
</BODY>
</HTML>
 
Laatst bewerkt:
Dat gaat zo niet lukken, omdat ik het totaal van de code mis.
Ik vrees dat hier echt 'n link naar de code online nodig is. Er worden gegevens uit 'n database in gestopt en zo, en dat is zo niet te zien.
In principe moet er naar de browser alleen maar html, css, e.d. worden gestuurd en gebeurt de rest op de server.
Uit jouw beschrijving van het probleem maak ik op (gok ik) dat het aan de css zou kunnen liggen. En dan is dus die pagina, zoals de browser die te zien krijgt, nodig.

Ik kan wel vast zeggen dat dit hele slechte code is. (Ik hoop niet dat je 'm zelf hebt geschreven en dat ik je nu op je ziel trap :) )
Er mist 'n doctype. Dat garandeert (heel grote) weergaverschillen tussen browsers. 'n Geldig doctype kun je hier vinden: http://www.w3.org/QA/2002/04/valid-dtd-list.html
(doctype én url daaronder nemen)
Ik zou html strict nemen, dan zit je ook in de toekomst goed.
Er mist 'n tekenset. In de head moet je toevoegen:

HTML: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Dit moet de eerste regel in de head zijn, anders herkent niet elke browser hem. Dit voorkomt problemen met accenten e.d.

<style> is fout en kan grote probelemen geven in sommige browsers. Het moet zijn:
HTML: 
<style type="text/css">

Als je heel veel geluk hebt, is het hiermee opgelost, maar die kans is klein.
Dan graag 'n link naar waar het online staat.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan