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.