I have made a sample voting system here: Sample Voting System
However after repeated attempts I couldn’t get it to style the way I want because the developer has used way too many divs here. Either the font becomes too big or gets overlapped with the number or goes out of proportion, etc.
I want it to look something like this:
And here is my code:
<!DOCTYPE html> <head> <title>Sample Polling System</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $(".vote").click(function() { var id = $(this).attr("id"); var name = $(this).attr("name"); var dataString = 'id='+ id ; var parent = $(this); if(name=='up') { $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">'); $.ajax({ type: "POST", url: "up_vote.php", data: dataString, cache: false, success: function(html) { parent.html(html); } }); } else { $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">'); $.ajax({ type: "POST", url: "down_vote.php", data: dataString, cache: false, success: function(html) { parent.html(html); } }); } return false; }); }); </script> <style type="text/css"> body { font-family:'Georgia', Times New Roman, Times, serif; } #main { height:100px; width:800px; } a { color:#DF3D82; text-decoration:none; } a:hover { color:#DF3D82; text-decoration:underline; } .up { height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px; -moz-border-radius: 6px;-webkit-border-radius: 6px; } .up a { color:#FFFFFF; text-decoration:none; } .up a:hover { color:#FFFFFF; text-decoration:none; } .down { height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px; -moz-border-radius: 6px;-webkit-border-radius: 6px; } .down a { color:#FFFFFF; text-decoration:none; } .down a:hover { color:#FFFFFF; text-decoration:none; } .box1 { float:left; height:80px; width:50px; } .box2 { float:left; width:440px; text-align:left; margin-left:10px;height:60px;margin-top:10px; font-size:18px; } img { border:none; padding-top:7px; } </style> </head> <body> <div align="center"> <h3>Sample Polling System</h3><hr> <?php include('config.php'); $sql=mysql_query("SELECT * FROM Messages LIMIT 9"); while($row=mysql_fetch_array($sql)) { $msg=$row['msg']; $mes_id=$row['mes_id']; $up=$row['up']; $down=$row['down']; ?> <div id="main"> <div class="box1"> <div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a><!--Tried placing here, didn't work--></div> <div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div> </div><!-- tried to put this box below box2 but still didn't work --> <div class='box2' ><?php echo $msg; ?></div> </div><!-- tried atleast 10 permutations and combinations, couldn't get it work--> <hr> <?php } ?> </div> </body> </html>
Please help me get the effect I want to achieve.
Thank You
Advertisement
Answer
I fixed your code:
<!DOCTYPE html> <head> <title>Sample Polling System</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function() { $(".vote").click(function() { var id = $(this).attr("id"); var name = $(this).attr("name"); var dataString = 'id='+ id ; var parent = $(this); if(name=='up') { $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">'); $.ajax({ type: "POST", url: "up_vote.php", data: dataString, cache: false, success: function(html) { parent.html(html); } }); } else { $(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">'); $.ajax({ type: "POST", url: "down_vote.php", data: dataString, cache: false, success: function(html) { parent.html(html); } }); } return false; }); }); </script> <style type="text/css"> body { font-family:'Georgia', Times New Roman, Times, serif; } #main { width:800px; overflow:hidden; } a { color:#DF3D82; text-decoration:none; } a:hover { color:#DF3D82; text-decoration:underline; } .up { height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px; -moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; width:40px; } .up a { color:#FFFFFF; text-decoration:none; } .up a:hover { color:#FFFFFF; text-decoration:none; } .down { height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px; -moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; margin-left:40px; width:40px; } .down a { color:#FFFFFF; text-decoration:none; } .down a:hover { color:#FFFFFF; text-decoration:none; } .box1 { float:left; clear:both; } .box2 { float:left; width:440px; text-align:left; font-size:18px; } img { border:none; padding-top:7px; } </style> </head> <body> <div align="center"> <h3>Sample Polling System</h3><hr> <?php include('config.php'); $sql=mysql_query("SELECT * FROM Messages LIMIT 9"); while($row=mysql_fetch_array($sql)) { $msg=$row['msg']; $mes_id=$row['mes_id']; $up=$row['up']; $down=$row['down']; ?> <div id="main"> <div class='box2' ><?php echo $msg; ?></div> <div class="box1"> <div class='up'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="up"><?php echo $up; ?></a></div><span style="margin-top:10px; float:left; margin-left:10px;">People Agree to This</span> <div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div><span style=" margin-top:10px; float:left; margin-left:10px;">People Disagree to This</span> </div><!-- tried to put this box below box2 but still didn't work --> </div><!-- tried atleast 10 permutations and combinations, couldn't get it work--> <hr> <?php } ?> </div> </body> </html>
Check it out http://jsfiddle.net/qCwZd/
#box2
which is the title was placed above #box1
, I gave it a float:left;
and #box1
got a float:left;
and a clear:both;
so it can show up on a new line.
I added a span
beside every gray box, the first says People agree to this, the other People disagree to this, they were given a float:left;
to lay beside the gray boxes, and some margin-left
. I removed some height
properties.