kaiser1313
New Member
I have made a sample voting system here: Sample Voting SystemHowever 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="http://stackoverflow.com/questions/14535168/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="http://stackoverflow.com/questions/14535168/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="http://stackoverflow.com/questions/14535168/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><?phpinclude('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