i've been trying to add star ratings to my product but i keep getting an error. i've called both products and rating data from mysql but it aint working..my code is below pls kindly help me
/*rating.php*/
//this handles the rating input
<?php
include("db.php");
$users_ip = $_SERVER['REMOTE_ADDR'];
if($_REQUEST['value'])
{
$id = $_REQUEST['value'];
$r_id = $_REQUEST['$rid'];
$result = mysql_query("select users_ip from tbl_rating where users_ip='$users_ip'");
$num = mysql_num_rows($result);
if($num==0)
{
$query = "insert into tbl_rating (rating,rate_id,users_ip) values ('$id','$r_id','$users_ip')";
mysql_query( $query);
$result=mysql_query("select sum(rating) as rating from tbl_rating");
$row=mysql_fetch_array($result);
$rating=$row['rating'];
$quer = mysql_query("select rating from tbl_rating");
$all_result = mysql_fetch_assoc($quer);
$rows_num = mysql_num_rows($quer);
if($rows_num > 0){
$get_rating = floor($rating/$rows_num);
$rem = 5 - $get_rating;
}?>
<?php
for($k=1;$k<=$get_rating;$k++){?>
<div class="rating_enb" id="<?php echo $k?>"> </div>
<?php
}?>
<?php
for($i=$rem;$i>=1;$i--){?>
<div class="rating_dis" id="<?php echo $k?>"> </div>
<?php
$k++;
}?>
<div class="rating_value"><?php echo ((#$get_rating) ? #$get_rating : '0')?> /5</div>
<div class="user_message"><?php echo $rows_num?> times rated</div>
<?php
}
else
{
echo '<div class="rating_message">You already did it !</div>';
}
}
if(#$_REQUEST['show']) // show rating again after showing message
{
$result=mysql_query("select sum(rating) as rating from tbl_rating");
$row=mysql_fetch_array($result);
$rating=$row['rating'];
$quer = mysql_query("select rating from tbl_rating");
$all_result = mysql_fetch_assoc($quer);
$rows_num = mysql_num_rows($quer);
if($rows_num > 0){
$get_rating = floor($rating/$rows_num);
$rem = 5 - $get_rating;
}?>
<?php
for($k=1;$k<=$get_rating;$k++){?>
<div class="rating_enb" id="<?php echo $k?>"> </div>
<?php
}?>
<?php
for($i=$rem;$i>=1;$i--){?>
<div class="rating_dis" id="<?php echo $k?>"> </div>
<?php
$k++;
}?>
<div class="rating_value"><?php echo ((#$get_rating) ? #$get_rating : '0')?> / 5</div>
<div class="user_message"><?php echo $rows_num?> times rated</div>
<?php
}?>
/*index.php */
//here i want to echo the star rating with the product along side but its not working
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
$('#loader').hide();
$('#inner').children().click(function(){
var a = $(this).attr("id");
$.post("rating.php?value="+a, {
}, function(response){
$('#inner').fadeOut();
$('#inner').html(unescape(response));
$('#inner').fadeIn();
setTimeout("hideMesg();", 2000);
});
});
});
function hideMesg(){
$('.rating_message').fadeOut();
$.post("rating.php?show=1", {
}, function(response){
$('#inner').html(unescape(response));
$('#inner').fadeIn('slow');
});
}
// ]]>
</script>
<?php
$resultm=mysql_query("select * from ratesummary GROUP BY pd_id");
$resultb=mysql_query("select sum(rating) as rating from ratesummary GROUP BY pd_id");
$rowb=mysql_fetch_array($resultb);
$rating=$rowb['rating'];
$quer = mysql_query("select rating from ratesummary GROUP BY pd_id");
$all_result = mysql_fetch_assoc($quer);
$rows_num = mysql_num_rows($quer);
if($rows_num > 0){
$get_rating = floor($rating/$rows_num);
$rem = 5 - $get_rating;
}
else
{
$rem = 5;
}
while($rowx=mysql_fetch_array($resultm))
{
echo '<div class="ratebox">
<p class=product_name>#'.$rowx['pd_id'].'</p>
<p class=product_name>'.$rowx['pd_name'].'</p> </div>'
;
}
?>
<div id="container">
<div id="outer">
<div id="inner">
<?php
for($k=1;$k<=$get_rating;$k++){?>
<div class="rating_enb" id="<?php echo $k?>"> </div>
<?php
}?>
<?php
for($i=$rem;$i>=1;$i--){?>
<div class="rating_dis" id="<?php echo $k?>"> </div>
<?php
$k++;
}?>
<div class="rating_value"><?php echo ((#$get_rating) ? #$get_rating : '0')?> / 5</div>
<div class="user_message"><?php echo $rows_num?> times rated</div>
</div>
</div>
</div>
css style used
#container{
font-family:Arial, Helvetica, sans-serif;
width:440px;
}
#customForm{
padding: 0 10px 10px;
}
.user_message{ margin-top:12px; color:#006600; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; font-weight:bold;}
#customForm label{
display: block;
color:#000000;
float:left;
width:130px;
font-size:14px;
line-height: 1.4em;
}
#customForm input{
width: 220px;
float:left;
padding: 4px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-size: 11px;
border: 1px solid #CCCCCC;
}
input#button{
width: 244px;
float:left;
padding: 4px;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
font-size: 11px;
border: 1px solid #CCCCCC;
}
#outer{ width:150px; padding:6px;
background:#FFFFFF;
height:18px;
margin-top:12px;
color:#fff;
margin-bottom:5px;
font-weight:bold;
-moz-border-radius: 6px;
font-size:12px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);}
#outer .rating_enb {
width:16px; padding:1px;
height:18px; float:left;
background:#CC0000;
margin-right:4px;
cursor:pointer;
}
#outer .rating_dis {
width:16px; padding:1px;
height:18px; float:left;
cursor:pointer;
background:#CCCCCC;
margin-right:4px;
}
#outer .rating_dis:hover, #outer .rating_enb:hover {background:#009933; }
#outer .rating_value{ color:#003399; padding-top:2px; font-size:14px}
#outer .rating_message{ color:#003399; padding-top:2px; font-size:14px}
database schema
CREATE TABLE `tbl_product` (
`pd_id` int(10) unsigned NOT NULL auto_increment,
`pd_name` varchar(100) NOT NULL default '',
`pd_image` varchar(200) default NULL,
PRIMARY KEY (pd_id),
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1007 ;
CREATE TABLE `tbl_rating` (
`r_id` int(10) unsigned NOT NULL auto_increment,
`pd_id` int(10) unsigned NOT NULL default '0',
`rating` int(11) NOT NULL default '0',
`users_ip` varchar(200) NOT NULL default '0',
PRIMARY KEY (`r_id`),
KEY `pd_id` (`pd_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;
the table ratesummary was created using mysql create view to join the tbl_product with tbl_rating
Please try to change your returns, like these lines
<div class="rating_value"><?php echo ((#$get_rating) ? #$get_rating : '0')?> /5</div>
<div class="user_message"><?php echo $rows_num?> times rated</div>
should look something like this:
echo "<div class='rating_value'>". ((#$get_rating) ? #$get_rating : '0')/5 ."</div>".
"<div class='user_message'>". $rows_num . "times rated</div>";
Related
I have a problem. I created this code that shows products from my database like products:
<?php
include("connect.php");
session_start();
$status="";
if (isset($_POST['id']) && $_POST['id']!="")
{
$Id = $_POST['id'];
$result = mysqli_query($conn,"SELECT * FROM Producten WHERE `Id`='$Id'");
$row = mysqli_fetch_assoc($result);
$naam = $row['Naam'];
$id = $row['Id'];
$prijs = $row['Prijs'];
$foto = $row['Foto'];
$winkelwagen_array = array(
$id=>array(
'id'=>$id,
'naam'=>$naam,
'prijs'=>$prijs,
'hoeveelheid'=>1,
'foto'=>$foto)
);
if(empty($_SESSION["winkelwagen"]))
{
$_SESSION["winkelwagen"] = $winkelwagen_array;
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
else
{
$_SESSION["winkelwagen"] = array_merge($_SESSION["winkelwagen"],$winkelwagen_array);
$status = "<div class='box'>Product toegevoegd aan winkelwagen!</div>";
}
}
?>
<html>
<head>
<link rel='stylesheet' href='css/style.css' type='text/css' media='all' />
</head>
<body>
<div style="width:700px; margin:50 auto;">
<?php
if(!empty($_SESSION["winkelwagen"]))
{
$winkelwagen_hoeveelheid = count(array_keys($_SESSION["winkelwagen"]));
?>
<div class="winkelwagen_div">
<img src="media/winkelwagen_logo.png" /> Winkelwagen<span><?php echo $winkelwagen_hoeveelheid; ?></span>
</div>
<?php
}
$result = mysqli_query($conn,"SELECT * FROM Producten");
while($row = mysqli_fetch_assoc($result))
{
echo "<div class='product_vak'>
<form method='post' actie=''>
<input type='hidden' name='id' value=".$row['Id']." />
<div class='foto'><img src='".$row['Foto']."' /></div>
<div class='naam'>".$row['Naam']."</div>
<div class='prijs'>€".$row['Prijs']."</div>
<button type='submit' class='koop'>Koop nu</button>
</form>
</div>";
}
mysqli_close($conn);
?>
<div style="clear:both;"></div>
<div class="melding_box" style="margin:10px 0px;">
<?php echo $status; ?>
</div>
</div>
</body>
</html>
with this css:
.product_vak {
float:left;
padding: 10px;
text-align: center;
}
.product_vak:hover {
box-shadow: 0 0 0 2px #e5e5e5;
cursor:pointer;
}
.product_vak .naam {
font-weight:bold;
}
.product_vak .koop {
text-transform: uppercase;
background: #F68B1E;
border: 1px solid #F68B1E;
cursor: pointer;
color: #fff;
padding: 8px 40px;
margin-top: 10px;
}
.product_vak .koop:hover {
background: #f17e0a;
border-color: #f17e0a;
}
.melding_box .box{
margin: 10px 0px;
border: 1px solid #2b772e;
text-align: center;
font-weight: bold;
color: #2b772e;
}
.table td {
border-bottom: #F0F0F0 1px solid;
padding: 10px;
}
.winkelwagen_div {
float:right;
font-weight:bold;
position:relative;
}
.winkelwagen_div a {
color:#000;
}
.winkelwagen_div span {
font-size: 12px;
line-height: 14px;
background: #F68B1E;
padding: 2px;
border: 2px solid #fff;
border-radius: 50%;
position: absolute;
top: -1px;
left: 13px;
color: #fff;
width: 14px;
height: 13px;
text-align: center;
}
.winkelwagen .verwijderen {
background: none;
border: none;
color: #0067ab;
cursor: pointer;
padding: 0px;
}
.winkelwagen .verwijderen:hover {
text-decoration:underline;
}
But when I load the page I see 2 products above each other in a very very large size. Now how can I get them to load next to each other and in a smaller size, because now they are filling the whole screen per product!
I already tried giving product_vak a width, but the image doesn't size with that!
How can I fix this?
try like this
.product_vak {
float:left;
padding: 10px;
text-align: center;
width:40%;
my question is that why float left is not working under these codes
when i use them all the result just display on single div and other 7 where showing under that div at same place so please tell me what is the solution of this prob
<div class="tv_l" style="top:1465px;
left:10px;
position:absolute;
width:1690px;
height:10px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;">
<hr>
</div>
<?php
$link = mysqli_connect("localhost" , "***" ,"***" , "***");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
exit();
} else {
echo "";
}
?>
<?php
$result = mysqli_query($link, "SELECT * FROM **** ORDER BY RAND()
LIMIT 8" )
or die(mysqli_error());
while($row = mysqli_fetch_array( $result )){
?>;
<div class="son_s_p" style="top:1957px;
left:12px;
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .25);
position:inherit;
background:white;
width:190px;
height:240px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:center;
float:left;
">
<img src="../lu/music/tumb/<?php echo $row['img']; ?>"style="width:198px; height:148px;" >
<br>
<?php echo $row['name']; ?><br><br>
<div id="son_s_p" style="top:218px;
left:px;
position:absolute;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:justify;">
<?php echo $row['time']; ?> <span class="time&type" style="top;10px;"><?php echo $row['type']; ?></span>
</div>
</div>
<?php
}
?>
with using position
without using position data will go top and top do not work
your wrong is that you put in div "float: left;" and thats wrong.you should put before it style attribute and it is Style="float: left;"
correct code is:
<div class="tv_l" style="top:1465px;
left:10px;
position:absolute;
width:1690px;
height:10px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;">
<hr>
</div>
<?php
$link = mysqli_connect("localhost" , "***" ,"***" , "***");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
exit();
} else {
echo "";
}
?>
<?php
$result = mysqli_query($link, "SELECT * FROM **** ORDER BY RAND()
LIMIT 8" )
or die(mysqli_error());
while($row = mysqli_fetch_array( $result )){
?>;
<div class="son_s_p" style="top:1957px;
left:12px;
-webkit-box-shadow:0 3px 8px rgba(0, 0, 0, .25);
position:inherit;
background:white;
width:190px;
height:240px;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:center;
float:left;
">
<img src="../lu/music/tumb/<?php echo $row['img']; ?>"style="width:198px; height:148px;" >
<br>
<?php echo $row['name']; ?><br><br>
<div id="son_s_p" style="top:218px;
left:px;
position:absolute;
border-radius:3px/3px;
padding-right:10px;
padding-top:px;
border-left:10px;
text-align:justify;">
<?php echo $row['time']; ?> <span class="time&type" style="top;10px;"><?php echo $row['type']; ?></span>
</div>
</div>
<?php
}
?>
Your question was unclear, however I have cleaned up your code so that the div .tv_l is to the left of the div .son_s_p and its content:
.tv_l {
border-radius: 3px/3px;
padding-right: 10px;
border-left: 10px;
border: 1px solid;
float: left;
}
.son_s_p {
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
background: white;
width: 190px;
height: 240px;
border-radius: 3px/3px;
padding-right: 10px;
border-left: 10px;
text-align: center;
float: left;
}
#son_s_p {
border-radius: 3px/3px;
padding-right: 10px;
padding-top: px;
border-left: 10px;
text-align: justify;
}
<div class="tv_l">
<hr>
</div>
<?php
$link = mysqli_connect("localhost" , "***" ,"***" , "***");
if (mysqli_connect_errno()) {
echo mysqli_connect_error();
exit();
}else{
echo "";
}
$result = mysqli_query($link, "SELECT * FROM **** ORDER BY RAND()
LIMIT 8")
or die(mysqli_error());
while($row = mysqli_fetch_array( $result )){
?>
<div class="son_s_p">
<img src="../lu/music/tumb/<?php echo $row['img']; ?>" style="width:198px; height:148px;">
<br>
<?php echo $row['name']; ?>
<br>
<br>
<div id="son_s_p">
<?php echo $row['time']; ?>
<span class="time&type" style="top;10px;"><?php echo $row['type']; ?></span>
</div>
</div>
<?php } ?>
It looks like you are using absolute positioning on your DIVs. Floats cannot work that way. Use this instead:
position: static;
float: left;
If I were you I would first try to get it to work with pure HTML and CSS with some dummy data, before hooking it up to the database.
Here's an example of how you can achieve floating with divs, in contrast to your approach:
https://jsfiddle.net/19zrr99n/
I am currently trying to make my php, on the same page as the form, display the values correctly and calculate the overall passer rating. My calculations follow the formatting this way:
C = ((# completions/#attempts) *100 -30)/20
Y= ((# yards/#attempts) -3)/4
T = ((#touchdowns/#attempts) *20)
I = 2.375 - (#interceptions/#attempts) * 35
Pass Rating = ((C+Y+T+I)/6) *100
The table that holds the values from the form should have a default value of 0 and below it should print the overall rating of Poor, Good and Great depending on the passer rating.
As you see I have a few issues.
My issues are:
The Passing Rating doesn't default to 0.
My Overall Rating doesn't print whether it is Poor, Good, or Great. It only prints Poor
I was hoping someone can explain this. I have been troubleshooting it for hours now. No luck sadly. ps(overall rating printed twice to see which version I want to use)
Also the snippet won't run the php unless you have php on your comp. Need a server to see it even with the snippet I guess
UPDATE: I put 20 instead of 4 to divide in Y value. That fixed my calculations but not the overall rating.
SECOND UPDATE: I added the line:
if(($_POST['First'] != '') && ($_POST['Last'] != ''))
so that I can keep my defaults for the table.
My last issues is now the Overall Rating displaying the correct label of either Poor, Good or Great
<?php
$first = "";
$last = "";
$completions = 0;
$attempts = 0;
$yards = 0;
$touchdowns = 0;
$interceptions = 0;
$TotalScores = 0;
if(isset($_POST['First'])) {
$first = $_POST['First'];
}
if(isset($_POST['Last'])){
$last = $_POST['Last'];
}
if(isset($_POST['completions'])) {
$completions = $_POST['completions'];
}
if(isset($_POST['attempts'])) {
$attempts = $_POST['attempts'];
}
if(isset($_POST['yards'])){
$yards = $_POST['yards'];
}
if(isset($_POST['touchdowns'])) {
$touchdowns = $_POST['touchdowns'];
}
if(isset($_POST['interceptions'])) {
$interceptions = $_POST['interceptions'];
}
function rating ($com, $att, $yards, $touchd, $inter){
//$C = 0;
//$Y = 0;
//$T = 0;
//$I = 0;
$passRating = 0;
$C = ((($com /$att)*100)-30) / 20;
$Y = (($yards/$att)-3)/4;
$T = ($touchd/$att)*20;
$I = 2.375 - (($inter/$att)*35);
$passRating = (($C + $Y + $T + $I)/6)*100;
return $passRating;
}
if(is_numeric($completions) && is_numeric($attempts) && is_numeric($yards)
&& is_numeric($touchdowns) && is_numeric($interceptions)) {
//if(($_POST['completions'] >0) && ($_POST['attempts'] >0) && ($_POST['yards'] >0)
// && ($_POST['touchdowns'] >0) && ($_POST['interceptions'] >0) ){
if(($_POST['First'] != '') && ($_POST['Last'] != '')){
$TotalScore = rating($completions, $attempts, $yards,
$touchdowns, $interceptions);
//echo $TotalScore;
if ($TotalScore < 85 && $TotalScore >0){
$score = "Poor";
}
elseif($TotalScore >=85 && $TotalScore <90){
$score = "Mediocre";
}
elseif ($TotalScore >=90 && $TotalScore <95){
$score = "Good";
}
elseif ($score >= 95){
$score = "Great";
}
}
//}
}
else {
$score = "Invalid Input!";
//echo $TotalScore;
}
?>
.form-container {
padding-right: 20px;
}
fieldset {
width: 200px;
height: 30px;
padding: 5px;
}
input {
padding-bottom: 5px;
}
#text-container {
margin-top: 100px;
width: 1260px;
height: 400px;
background-color: white;
text-align: left;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
#text-container p {
margin-left: 30px;
font-size: 20px;
}
#text-container h1 {
margin-left: 30px;
color: #4EA24E;
padding-top: 10px;
}
#paragraph {
position: absolute;
width: 1350px;
height: 600px;
border: 1px solid black;
margin-left: 500px;
margin-top: 60px;
}
.signup {
float: right;
height: 600px;
width: 500px;
border: 1px solid black;
background-color: blue;
}
#form-box {
margin-top: 10px;
width: 550px;
height:600px;
maring-left: 0;
float: left;
/*background-color: #B2D1F0;*/
/*border-radius: 30px;*/
/*box-shadow: 0 0 10px black;*/
}
#form-box label {
float: left;
width: 200px;
text-align: right;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
font-size: 20px;
margin-bottom: 30px;
margin-left: 20px;
}
#form-box input[type="text"] {
margin-bottom: 30px;
height: 20px;
width: 200px;
font-size: 15px;
margin-left: 10px;
box-shadow: 0 0 5px black;
}
.numInput input[type="text"] {
margin-bottom: 30px;
height: 20px;
width: 50px;
font-size: 15px;
margin-left: 10px;
box-shadow: 0 0 5px black;
}
#form-box button {
margin-bottom: 30px;
height: 35px;
width: 100px;
font-size: 25px;
margin-right: 100px;
float: right;
background-color: #4EA24E;
color: orange;
border-radius: 5px;
text-shadow: 0 0 10px black;
box-shadow: 0 0 10px black;
font-family: Rockwell, 'Courier Bold', serif
}
#form-box button:hover {
color: gold;
}
#form-box h1{
text-align: left;
margin-right: 65px;
color: #4EA24E;
font-size: 35px;
margin-bottom: 0;
text-shadow: 0 0 1px black;
margin-left: 30px;
}
#form-box h2{
text-align: right;
margin-right: 85px;
color: #114611;
}
#calcContainer {
clear: both;
width: 200px;
height: 500px;
float: left;
margin-top: 600px;
border: 1px solid black;
}
.table {
margin-top: 20px;
}
.table td, .table tr {
border: 1px solid black;
width: 150px;
}
.table h3 {
margin-top: 40px;
}
/*table {
margin-top: 200px;
}
td , tr{
border: 1px solid black;
width: 150px;
}
*/
span {
margin-left: 40px;
}
#screen {
}
html {
margin: 0;
padding: 0;
min-width: 960px;
max-width: 1000px;
background: url(bubbles.jpg) no-repeat;
height: 100%;
background-size: 960px 960px;
//margin-bottom: 100px;
}
#footer {
width:100%;
height:100px !important;
border-top:4px solid black;
background-color:orange;
//position: relative;
//bottom: 0;
margin-bottom: 0 auto;
//position: fixed;
z-index: 10;
clear: both;
margin-top: 500px;
margin-left: 30px;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
body {
margin-bottom: 100px;
margin-right: 30px;
padding: 0;
width: 100%;
height: 100%;
}
h1.name{
/*font-family: Lato, 'Courier Bold', sanserif;*/
font-family: 'KOMIKAX_';
src: url(KOMIKAX_.tff);
font-weight: bold;
font-variant: small-caps;
color: "red";
margin-left: 30px;
text-shadow: 0 0 1px black;
}
#header {
margin-left: 30px;
width:100%;
}
#gradient {
height: 65px;
/* IE 10 */
background-image: -ms-linear-gradient(top, black 0%, orange 100%);
/* Firefox */
background-image: -moz-linear-gradient(top, black, orange);
/* Safari & Chrome */
background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0, orange),color-stop(1, black));
box-shadow: inset 0 0 15px black;
}
#nav1 {
list-style: none;
}
#nav2 {
list-style: none;
}
.nav a {
text-decoration: none; /*remove underline*/
text-transform: uppercase;
color: white;
font-family: Rockwell, 'Courier Bold', serif;
font-size: 20px;
padding-bottom: 15px;
}
.nav li {
display: inline;
float: left;
padding: 10px;
}
.nav a:visited {
text-decoration: none;
color: #fff;
}
.nav a:hover {
text-decoration: none;
color: black;
background-color:transparent;
}
.nav a:active {
text-decoration: none;
color: #19A3FF;
}
.container {
margin-left: 30px;
height: 560px;
background-color: black;
width: 1000px;
border-radius: 3px;
float: left;
}
.text-left {
float: left;
padding-left: 30px;
}
.text-right {
float: right;
padding-right: 55px;
}
.text-center {
float: center;
margin: auto 0;
}
.MainImage {
background-image: url(http://cdn2.sportngin.com/attachments/photo/2021/8243/football_large.jpg);
height: 300px;
background-repeat: no-repeat;
width:99.8%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
padding-bottom: 30px;
display: block;
border: 1px solid;
margin-left: 30px;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
h1.title {
color: white;
padding-left: 30px;
padding-top: 10px;
font-size: 60px;
font-family: Rockwell, 'Courier Bold', serif;
font-variant: small-caps;
font-weight: bold;
text-shadow: 0 0 3px black;
margin-bottom: 0;
}
#sub {
color: white;
padding-left: 80px;
font-size: 30px;
font-family: Rockwell, 'Courier Bold', serif;
font-variant: small-caps;
text-shadow: 0 0 8px black;
}
/*.highlight {
/*text-shadow: 0 0 10px #E6FFFF;*/
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;
filter: glow(color=#E6FFFF, strength=3);
color: red;
}*/
#sidebar {
height: 1200px;
width: 400px;
float: left;
background-color: #99CC99;
margin-top: 50px;
font-size: 25px;
margin-right: 0;
}
#main-container {
width: 1260px;
height: 230px;
margin-top: 30px;
postion: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
}
#main-container2 {
width: 1260px;
height: 230px;
postion: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
#columns {
float: left;
width: 370px;
height: 230px;
background-color: #ECF2F8;
text-align: center;
display: inline-block;
vertical-align: top;
margin-left: 20px;
border-radius: 10px;
box-shadow: 0 0 10px black;
padding-left: 10px;
padding-right: 10px;
border: 1px solid black;
}
#columns-image {
foat: left;
width: 390px;
border: 1px solid black;
height: 230px;
display: inline-block;
margin-left: 18px;
border-radius: 5px;
border: 1px solid black;
}
#bar-left {
height: 230px;
width: 30px;
background-color: blue;
float: left;
margin-right: 20px;
margin-top: 30px;
margin-left: 0;
}
#bar-right {
height: 230px;
width: 30px;
background-color: blue;
float: left;
}
#bullet {
list-style-Type: none;
padding: 0 0 4px 23px;
background: ur(http://www.computerhope.com/arrow.gif) no-repeat left top;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<div id = "screen">
<body>
<h1 class = "name"><font color = "orange" font size = "20px"> Passer Ratings | </font><font size = "12" font color = "#4EA24E"> Monitor Your Results to Improve!</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav1" class= "text-left">
<li><strong>Home</li>
<li>About Us</li>
<li>Teach</li>
<li>Score Board</strong></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><strong>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
<div id = "Main">
<div class = "MainImage">
<h1 class = "title"> Knowing your Strengths and Weaknesses..<br></h1>
<p id = "sub"><font color= "#4DFFFF"><strong> Makes</strong>
</font> a great player... </p>
</div><!-- end MainImage-->
<form id ="form-box" action = 'passrating.php' method = 'post'>
<h1>Calculate Passer Rating<br><br>
<h2>Submit to Review the information </h2>
<label>First Name </label>
<input type="text" name = 'First' placeholder='First'/><br/>
<label>Last Name:</label>
<input type="text" name = 'Last' placeholder='Last'/><br/>
<label>Pass Completions</label>
<input type="text" name = 'completions' value = 0 class = 'numInput'><br/>
<label>Pass Attempts:</label>
<input type="text" name = 'attempts' value = 0><br/>
<label>Total Passing Yards:</label>
<input type="text" name = 'yards' value = 0><br/>
<label>Touchdowns:</label>
<input type="text" name = 'touchdowns' value = 0><br/>
<label>Interceptions:</label>
<input type="text" name = 'interceptions' value = 0><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit</button>
</form>
<div class='calcContainer'>
<table class='table' action = 'passrating.php' method = 'post'>
<h3>Totals for Calculations</h3>
<tr> Test Case:<?php echo "\t" .$first. "\t" .$last; ?></tr>
<tr>
<td>Pass Completions </td>
<td width = "20px"><span value = 0><?php echo $completions; ?></td>
</tr>
<tr>
<td>Pass Attempts </td>
<td><span value = 0><?php echo $attempts; ?></td>
</tr>
<tr>
<td>Total Passing Yards </td>
<td><span value = 0><?php echo $yards; ?></td>
</tr>
<tr>
<td>Touchdowns </td>
<td><span value =0><?php echo $touchdowns; ?></td>
</tr>
<tr>
<td>Interceptions: </td>
<td><span value = 0 ><?php echo $interceptions; ?></td>
</tr>
<tr>
<td>Passing Rating: </td>
<td><span value = 0 ><?php echo $TotalScore; ?></td>
</table>
<p value = " ">The Overall Rating is: <?php echo $score; ?></p>
<p value = ""><?php echo "The Overall Rating is: " .$score. "</br>"; ?></p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "stylesheet.css" type = "text/css">
<link rel = "stylesheet" href = "formstylesheet.css" type = "text/css">
<meta http-equiv="X-UA-Compatible" content="IE=80" />
</head>
<div id = "screen">
<body>
<h1 class = "name"><font color = "orange" font size = "20px"> Passer Ratings | </font><font size = "12" font color = "#4EA24E"> Monitor Your Results to Improve!</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav1" class= "text-left">
<li><strong>Home</li>
<li>About Us</li>
<li>Teach</li>
<li>Score Board</strong></li>
</ul>
<ul id = "nav2" class = "text-right">
<li><strong>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
<div id = "Main">
<div class = "MainImage">
<h1 class = "title"> Knowing your Strengths and Weaknesses..<br></h1>
<p id = "sub"><font color= "#4DFFFF"><strong> Makes</strong>
</font> a great player... </p>
</div><!-- end MainImage-->
<form id ="form-box" action = 'passrating.php' method = 'post'>
<h1>Calculate Passer Rating<br><br>
<h2>Submit to Review the information </h2>
<label>First Name </label>
<input type="text" name = 'First' placeholder='First'/><br/>
<label>Last Name:</label>
<input type="text" name = 'Last' placeholder='Last'/><br/>
<label>Pass Completions</label>
<input type="text" name = 'completions' value = 0 class = 'numInput'><br/>
<label>Pass Attempts:</label>
<input type="text" name = 'attempts' value = 0><br/>
<label>Total Passing Yards:</label>
<input type="text" name = 'yards' value = 0><br/>
<label>Touchdowns:</label>
<input type="text" name = 'touchdowns' value = 0><br/>
<label>Interceptions:</label>
<input type="text" name = 'interceptions' value = 0><br/>
<button type="reset" value="Reset">Reset</button>
<button type="submit" value="Submit">Submit</button>
</form>
<div class='calcContainer'>
<table class='table' action = 'passrating.php' method = 'post'>
<h3>Totals for Calculations</h3>
<tr> Test Case:<?php echo "\t" .$first. "\t" .$last; ?></tr>
<tr>
<td>Pass Completions </td>
<td width = "20px"><span value = 0><?php echo $completions; ?></td>
</tr>
<tr>
<td>Pass Attempts </td>
<td><span value = 0><?php echo $attempts; ?></td>
</tr>
<tr>
<td>Total Passing Yards </td>
<td><span value = 0><?php echo $yards; ?></td>
</tr>
<tr>
<td>Touchdowns </td>
<td><span value =0><?php echo $touchdowns; ?></td>
</tr>
<tr>
<td>Interceptions: </td>
<td><span value = 0 ><?php echo $interceptions; ?></td>
</tr>
<tr>
<td>Passing Rating: </td>
<td><span value = 0 ><?php echo $TotalScore; ?></td>
</table>
<p value = " ">The Overall Rating is: <?php echo $score; ?></p>
<p value = ""><?php echo "The Overall Rating is: " .$score. "</br>"; ?></p>
</div>
</div>
</body>
</html>
What I did to fix my issues:
if(is_numeric($completions) && is_numeric($attempts) && is_numeric($yards)
&& is_numeric($touchdowns) && is_numeric($interceptions)) {
//if(($_POST['completions'] >0) && ($_POST['attempts'] >0) && ($_POST['yards'] >0)
// && ($_POST['touchdowns'] >0) && ($_POST['interceptions'] >0) ){
if(($_POST['First'] != '') && ($_POST['Last'] != '')){
// $TotalScore = rating($completions, $attempts, $yards,
// $touchdowns, $interceptions);
if(($_POST['completions'] <0) || ($_POST['attempts'] <0) || ($_POST['yards'] <0)
|| ($_POST['touchdowns'] <0) || ($_POST['interceptions'] <0) ){
$score = "</br></br><strong>Invalid Input!</strong></br>Please Provide non-Negative Numbers.";
}
//echo $TotalScore;
else {
$TotalScore = rating($completions, $attempts, $yards,
$touchdowns, $interceptions);
if($TotalScore < 0) {
$score = "</br></br><strong>Invalid Results</strong></br>Please review over your scores. The Passing Rating shouldn't be negative.";
}
if($TotalScore > 0 && $TotalScore <85){
$score = "Poor";
}
elseif($TotalScore >=85 && $TotalScore <90){
$score = "Mediocre";
}
elseif ($TotalScore >=90 && $TotalScore <95){
$score = "Good";
}
elseif ($TotalScore >= 95){
$score = "Great";
}
}
//}
}
}
You could use my tiny library ValueResolver in this case, for example:
$value = ValueResolver::resolve('', 'default value'); // returns 'default value' because first argument is empty
and don't forget to use namespace use LapaLabs\ValueResolver\Resolver\ValueResolver;
There are also ability to typecasting, for example if your variable's value should be integer, so use this:
$id = ValueResolver::toInteger('6 apples', 1); // returns 6
$id = ValueResolver::toInteger('There are no apples', 1); // returns 1 (used default value)
Check the docs for more examples
i have php program that contain div main_wrapper that div have two sub div resultwrapper and adv_right. I want adv_right div exactly right side of the resultwrapper div.When i'm use float mean that div present outside of the main_wrapper div.
<style>
.resultwrapper{width:990px; margin: 10px auto 10px auto; clear:both; }
.resultitem{ float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;}
.resultleftitem{padding-left:0;margin-left:0px;}
.resultitem img{border:dotted 1px #666; padding:6px;}
.resultitem img:hover{border:solid 1px #F60;}
.resultitem h4{font-size:12px; font-weight:bold; color:#249ce9; margin-top:5px; }
.resultitem a{color:#249ce9;}
.resultitem .caption{color:#9c9c9c; font-size:12px; display:block; margin-top:6px; text-align:justify;}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <a href="viewpropdetails.php?id=<?php echo $id;?>" target="_blank">
<img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" /></a>
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span>
</div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style=" clear:both; width:15%; float:right;height:300px; background-color:#999999;">
</div>
</div>
Please try it,
Remove clear:both; from both div and set width what u want ,,
Please try this code you want like this ??
<style>
.resultwrapper {
margin: 10px auto 10px auto;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:218px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
<div class="main_warpper">
<div class="resultwrapper">
<?php
while($row = mysql_fetch_array($rs)) {
$id=$row['id'];
$type=$row['type'];
$location=$row['location'];
if(file_exists("properties//". $imageloc ."//thumb.jpg") )
{
$thumb_img="properties/". $imageloc ."/thumb.jpg";
} else {
$thumb_img="images/default.jpg";
}
if($cnt==0 || $cnt ==4 ) $newResult=true; else $newResult=false;
?>
<div id="parent" >
<div class="resultitem <?php if($newResult) echo ' resultleftitem'; ?>" id="resultitem"> <img id="parent" src="<?php echo $thumb_img; ?>" alt="<?php $new=strtolower($heading); echo ucwords($new); ?>" title="<?php $new=strtolower($heading); echo ucwords($new); ?>" width="100" height="100" />
<div class="itemdetails">
<h4 id="linkheading"><?php echo $type ." # ".$location; ?></h4>
<span class="box"><?php echo cropStr($desc,$MAX_DESC); ?></span> </div>
</div>
</div>
<?php
$cnt++; } ?>
</div>
<div class="adv_right" style="width:15%; float:right;height:300px; background-color:#999999;">23123 </div>
</div>
add float:left here
<div class="resultwrapper" style="float:left;">
and rempove clear:both and add float:left
<div class="adv_right" style=" clear:both; width:15%; float:left;height:300px;
background-color:#999999;">
see demo here ....http://jsfiddle.net/6e4xN/1/
when you going to use this code it will not work with more than 7-8 elements, to work when you have more elements then use below stylesheet.
<style>
.resultwrapper {
margin: 10px auto 10px auto;
width:80%;
float:left;
}
.resultitem {
float: left;
height: 170px;
margin-bottom: 0px;
margin-left: 10px;
min-height: 130px;
width:150px;
}
.resultleftitem {
padding-left:0;
margin-left:0px;
}
.resultitem img {
border:dotted 1px #666;
padding:6px;
}
.resultitem img:hover {
border:solid 1px #F60;
}
.resultitem h4 {
font-size:12px;
font-weight:bold;
color:#249ce9;
margin-top:5px;
}
.resultitem a {
color:#249ce9;
}
.resultitem .caption {
color:#9c9c9c;
font-size:12px;
display:block;
margin-top:6px;
text-align:justify;
}
</style>
Let me know if it works for you or not.
I guess there is some problem in the code. You CANNOT use the same ID for multiple elements in a page. Secondly when you are using percent width for the adv_right div, why don't you use the same for resultwrapper div with both the resultwrapper & adv_right divs floated left and no clear:both in the css. I feel this should solve your problem.
I've created a blog main page using PHP and have included a sidebar and main area for the posts. When I add any more content to either the sidebar or the main content/posts area the content expands over the main div and the main div doesn't expand. How can I go about creating a div tag that will expand according to the content in the inner two divs.
Main Page:
<html>
<head>
<meta name="keywords" content="Mac user Ultan Casey TheCompuGeeks UltanKC">
<meta name="description" content="The Home of one of Ireland's budding Technology Reviewers Ultan Casey">
<title>Ultan.me - Home of Ultan Casey</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<style>
<!--
a {text-decoration:none}
//-->
</style>
</head>
<div id="main">
<!-- Menu Start -->
<div id="menu">
<ul>
<li>home</li>
<li>about me</li>
<li>archives</li>
<li>contact</li>
<li>gallery</li>
<div id="search">
<input type="text" name="q" value="search" />
<input type="button" name="Submit" value="Submit" />
</div>
</ul>
</div>
<!-- Menu End -->
<img src="images/banner.png" />
<div id="posts">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$blog_postnumber = 5;
if (!isset($_GET['page']) || !is_numeric($_GET['page'])) {
$page = 1;
}
else {
$page = (int)$_GET['page'];
}
$from = (($page * $blog_postnumber) - $blog_postnumber);
$sql = "SELECT * FROM php_blog ORDER BY timestamp DESC LIMIT $from, $blog_postnumber";
$result = mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" . $sql . "<br />" . mysql_error());
while($row = mysql_fetch_array($result)) {
$date = date("l F d Y", $row['timestamp']);
$title = stripslashes($row['title']);
$entry = stripslashes($row['entry']);
$id = $row['id'];
$get_categories = mysql_query("SELECT * FROM php_blog_categories WHERE `category_id` = $row[category]");
$category = mysql_fetch_array($get_categories);
?>
<p><?php echo "<p><strong>" . $title . "</strong></p>"; ?><br /><br />
<?php echo $entry; ?><br /><br />
<p>Posted in <?php echo $category['category_name']; ?> on <?php echo $date; ?></p>
<hr /></p>
<?php
}
?>
<div id="pages">
<?php
$total_results = mysql_fetch_array(mysql_query("SELECT COUNT(*) AS num FROM php_blog"));
$total_pages = ceil($total_results['num'] / $blog_postnumber);
if ($page > 1) {
$prev = ($page - 1);
echo "<< Newer ";
}
for($i = 1; $i <= $total_pages; $i++) {
if ($page == $i) {
echo "$i ";
}
else {
echo "$i ";
}
}
if ($page < $total_pages) {
$next = ($page + 1);
echo "Older >>";
}
?>
</div>
</div>
<!-- Sidebar Start -->
<div class="sidebar">
<!-- Item 1 -->
<div id="side-item">
<h2>
<a href="http://www.dailybooth.com/UltanCasey">
<img src="images/db-icon.jpg">Dailybooth
</a></h2>
<div id="side-item-content">
<center>
<img src="http://dailybooth.com/UltanCasey/latest/medium.jpg" />
</center>
</div>
</div>
<!-- Item 2 -->
<div id="side-item">
<h2><img src="images/connect.jpg" />Connect</h2>
</div>
<div id="side-item-content">
<div class="tweet-title"><p>Latest Tweet:</p></div>
<div id="tweet">
<?php
function getTwitterStatus($userid){
$url = "http://twitter.com/statuses/user_timeline/$userid.xml?count=1";
$xml = simplexml_load_file($url) or die("could not connect");
foreach($xml->status as $status){
$text = $status->text;
}
echo $text;
}
getTwitterStatus("UltanKC");
?>
</div>
<br>
<ul>
<li id="social">YouTube</li>
<li id="social">Twitter</li>
<li id="social">LastFM</li>
<li id="social">Email</li>
</ul>
</div>
<!-- Item 2 End-->
<div id="side-item">
<h2>Archives</h2>
</div>
<div id="side-item-content">
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result = mysql_query("SELECT FROM_UNIXTIME(timestamp, '%Y') AS get_year, COUNT(*) AS entries FROM php_blog GROUP BY get_year");
while ($row = mysql_fetch_array($result)) {
$get_year = $row['get_year'];
$entries = $row['entries'];
echo "Entries from " . $get_year . " (" . $entries . ")<br />";
}
?>
<?php
mysql_connect ('localhost', 'root', 'root') ;
mysql_select_db ('ultankc');
$result1 = mysql_query("SELECT * FROM php_blog_categories ORDER BY category_name ASC");
while($row = mysql_fetch_array($result1)) {
$result2 = mysql_query("SELECT COUNT(`id`) AS entries FROM php_blog WHERE category = $row[category_id]");
$num_entries = mysql_fetch_array($result2);
echo '' . $row['category_name'] . ' (' . $num_entries['entries'] . ')<br />';
}
?>
</div>
</div>
</div>
<!-- Sidebar End -->
</div>
</html>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
height: 100%;
}
#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
}
#main {
width: 860px;
height: 100%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
#menu li {
display: inline;
list-style-type: none;
height: 20px;
margin-top: 10px;
margin-left: 5px;
}
#menu a, menu a:visited{
font-family: arial;
color: #ffffff;
text-decoration: none;
padding: 3px;
}
#menu a:hover{
font-family: arial;
color: #282828;
text-decoration: none;
padding: 3px;
background-color: #ffffff;
}
#search{
float: right;
}
.sidebar {
width: 260px;
height: 100%;
float: right;
margin-right: 4px;
}
#posts {
width: 590px;
height: 100%;
float: left;
}
#side-item h2 {
background-color: #282828;
width: 245px;
height: 30px;
font-size: 25px;
font-family: arial;
color: #ffffff;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
}
#side-item-content{
border:1px solid #dadada;
padding: 5px;
width: 243px;
margin-bottom: 12px;
}
#side-item h2 img {
margin-right: 6px;
float: left;
}
#side-item h2 a:link {
text-decoration: none;
color: #ffffff;
}
#side-item h2 a:hover {
text-decoration: underline;
color: #ffffff;
}
#side-item h2 a:visited {
text-decoration: none;
color: #ffffff;
}
#social {
background-color: #282828;
width: 223px;
height: 20px;
font-size: 20px;
font-family: arial;
color: #ffffff;
display: block;
margin-top: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 10px;
}
/*#social img {
float: left;
padding-top: -12px;
}*/
#social a:link {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
#tweet {
width: 221px;
padding: 10px;
color: #242424;
background-color: #f5f5f5;
border:1px solid #282828;
margin-bottom: -8px;
font-family: arial;
}
#social a:hover{
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: underline;
}
#social a:visited {
font-size: 20px;
font-family: arial;
color: #ffffff;
text-decoration: none;
}
.tweet-title {
background-color: #2dbfe9;
color: #ffffff;
width: 231px;
height: 20px;
border-left:1px solid #282828;
border-right:1px solid #282828;
border-top:1px solid #282828;
font-size: 20px;
padding: 5px;
font-family: arial;
}
.tweet-title a:link, .tweet-title a:visited {
color: #ffffff;
text-decoration: none;
}
.tweet-title a:hover {
color: #2dbfe9;
text-decoration: none;
background-color: #ffffff;
}
#pages {
float: left;
}
Image:
First: Where are your <body> tags?
Ok here is how I made it works. It seems that #pages and #sidebar they should be in separate <div> tag. The code (I deleted PHP from it)
HTML:
<html>
<head>(content)</head>
<body> <!-- never forget about body tags!!!!!!!!!-->
<div id="main">
<!-- Menu Start -->
(...)
<!-- Menu End -->
<div id="content"> <!-- this is new -->
<div id="posts">
(content)
</div>
<div class="sidebar">
(content)
<!-- Sidebar End -->
<div class="clr" /> <this is new>
</div>
</div>
</body>
<
and CSS:
\*{
margin: 0px;
padding: 0px;
}
body{
background-color: #eeeeee;
}
\#menu {
background-color: #282828;
height:20px;
width: 840px;
padding: 10px;
position: relative;
}
\#main {
width: 860px;
margin: 0 auto;
background-color: #ffffff;
-webkit-box-shadow: 2px 0px 5px #bbbbbb,-2px 0 5px #bbbbbb;
-moz-box-shadow: 2px 0px 5px #bbbbbb,-2px 0px 5px #bbbbbb;
}
.clr{
clear: both;
}
\#content{
position: relative;
width: 860px;
}
.sidebar {
position: relative;
width: 260px;
float: right;
margin-right: 4px;
}
\#posts {
width: 590px;
position: relative;
float: left;
}
I believe this should do the work.
PS. Shadow doesn't work in Opera.
Best Regards,
ventus