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:
JavaScript
x
147
147
1
<!DOCTYPE html>2
<head>3
<title>Sample Polling System</title>4
<script type="text/javascript" src="jquery.js"></script>5
<script type="text/javascript">6
$(function() {7
$(".vote").click(function() 8
{9
var id = $(this).attr("id");10
var name = $(this).attr("name");11
var dataString = 'id='+ id ;12
var parent = $(this);13
if(name=='up')14
{15
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');16
$.ajax({17
type: "POST",18
url: "up_vote.php",19
data: dataString,20
cache: false,21
success: function(html)22
{23
parent.html(html);24
} 25
}); 26
}27
else28
{29
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');30
$.ajax({31
type: "POST",32
url: "down_vote.php",33
data: dataString,34
cache: false,35
success: function(html)36
{37
parent.html(html);38
}39
});40
}41
return false;42
});43
});44
</script>45
46
<style type="text/css">47
body48
{49
font-family:'Georgia', Times New Roman, Times, serif;50
}51
#main52
{53
height:100px; 54
width:800px;55
}56
a57
{58
color:#DF3D82;59
text-decoration:none;60
61
}62
a:hover63
{64
color:#DF3D82;65
text-decoration:underline;66
67
}68
.up69
{70
height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px;71
-moz-border-radius: 6px;-webkit-border-radius: 6px;72
}73
.up a74
{75
color:#FFFFFF;76
text-decoration:none;77
78
}79
.up a:hover80
{81
color:#FFFFFF;82
text-decoration:none;83
84
}85
.down86
{87
height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px;88
-moz-border-radius: 6px;-webkit-border-radius: 6px;89
}90
91
.down a92
{93
color:#FFFFFF;94
text-decoration:none;95
96
}97
.down a:hover98
{99
color:#FFFFFF;100
text-decoration:none;101
102
}103
.box1104
{105
float:left; height:80px; width:50px;106
}107
.box2108
{109
float:left; width:440px; text-align:left;110
margin-left:10px;height:60px;margin-top:10px;111
font-size:18px;112
}113
img114
{115
border:none;116
padding-top:7px;117
}118
</style>119
</head>120
<body>121
<div align="center">122
<h3>Sample Polling System</h3><hr>123
<?php124
include('config.php');125
$sql=mysql_query("SELECT * FROM Messages LIMIT 9");126
while($row=mysql_fetch_array($sql))127
{128
$msg=$row['msg'];129
$mes_id=$row['mes_id'];130
$up=$row['up'];131
$down=$row['down'];132
?>133
<div id="main">134
<div class="box1">135
<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>136
<div class='down'><a href="" class="vote" id="<?php echo $mes_id; ?>" name="down"><?php echo $down; ?></a></div>137
</div><!-- tried to put this box below box2 but still didn't work -->138
<div class='box2' ><?php echo $msg; ?></div>139
</div><!-- tried atleast 10 permutations and combinations, couldn't get it work-->140
<hr>141
<?php142
}143
?>144
</div>145
</body>146
</html>147
Please help me get the effect I want to achieve.
Thank You
Advertisement
Answer
I fixed your code:
JavaScript
1
147
147
1
<!DOCTYPE html>2
<head>3
<title>Sample Polling System</title>4
<script type="text/javascript" src="jquery.js"></script>5
<script type="text/javascript">6
$(function() {7
$(".vote").click(function() 8
{9
var id = $(this).attr("id");10
var name = $(this).attr("name");11
var dataString = 'id='+ id ;12
var parent = $(this);13
if(name=='up')14
{15
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');16
$.ajax({17
type: "POST",18
url: "up_vote.php",19
data: dataString,20
cache: false,21
success: function(html)22
{23
parent.html(html);24
} 25
}); 26
}27
else28
{29
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');30
$.ajax({31
type: "POST",32
url: "down_vote.php",33
data: dataString,34
cache: false,35
success: function(html)36
{37
parent.html(html);38
}39
});40
}41
return false;42
});43
});44
</script>45
46
<style type="text/css">47
body48
{49
font-family:'Georgia', Times New Roman, Times, serif;50
}51
#main52
{53
width:800px;54
overflow:hidden;55
}56
a57
{58
color:#DF3D82;59
text-decoration:none;60
61
}62
a:hover63
{64
color:#DF3D82;65
text-decoration:underline;66
67
}68
.up69
{70
height:40px; font-size:24px; text-align:center; background-color:gray; margin-bottom:2px;71
-moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; width:40px; 72
}73
.up a74
{75
color:#FFFFFF;76
text-decoration:none;77
78
}79
.up a:hover80
{81
color:#FFFFFF;82
text-decoration:none;83
84
}85
.down86
{87
height:40px; font-size:24px; text-align:center; background-color:gray; margin-top:2px;88
-moz-border-radius: 6px;-webkit-border-radius: 6px; float:left; margin-left:40px; width:40px; 89
}90
91
.down a92
{93
color:#FFFFFF;94
text-decoration:none;95
96
}97
.down a:hover98
{99
color:#FFFFFF;100
text-decoration:none;101
102
}103
.box1104
{105
float:left; clear:both;106
}107
.box2108
{109
float:left; width:440px; text-align:left;110
font-size:18px; 111
}112
img113
{114
border:none;115
padding-top:7px;116
}117
</style>118
</head>119
<body>120
<div align="center">121
<h3>Sample Polling System</h3><hr>122
<?php123
include('config.php');124
$sql=mysql_query("SELECT * FROM Messages LIMIT 9");125
while($row=mysql_fetch_array($sql))126
{127
$msg=$row['msg'];128
$mes_id=$row['mes_id'];129
$up=$row['up'];130
$down=$row['down'];131
?>132
<div id="main">133
<div class='box2' ><?php echo $msg; ?></div>134
<div class="box1">135
<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>136
<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>137
</div><!-- tried to put this box below box2 but still didn't work -->138
139
</div><!-- tried atleast 10 permutations and combinations, couldn't get it work-->140
<hr>141
<?php142
}143
?>144
</div>145
</body>146
</html>147
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.