...

View Full Version : Div is acting weird.



russ86
06-29-2010, 03:16 AM
Ok, so im not exactly what I would call well versed in CSS... but I've picked up on it kind of by experimenting, never took any formal education.

Basically I have a layout that was coded in tables, so I started from scratch and tried to code using DIVs...

I was somewhat successful, but my one of my divs which is set as the same class as some of my other divs is behaving funny.. for some reason I have to set a ridiculous padding of like 150px just to get the text to appear correctly and also the width spreads past where the other divs do, leaving the text slightly it off the page.

Here is the code, is this just completely wrong the way I did this, or is there just something I'm missing? thanks, and the div that's behaving funny is the one with the class of "reviewdiv1"


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Best Cellulite Cream and Treatments Review</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="content">
<div id="logo">
<img src="images/logo.gif" style="margin:0px" />
</div>
<div id="topnav">

<span class="navspace">Home</span><span class="navspace">Reviews</span><span class="navspace">Articles</span><span class="navspace">About Us</span>

</div>

<div id="headerimg">
<img src="images/header1.jpg" /><img src="images/header2.jpg" /><img src="images/header3.jpg" />
</div>
<div id="contentbg">
<div id="sidebar">
<img src="images/product-reviews.gif" style="margin-left:24px" /><br /><br />
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
</ul>
<p><img src="images/articles.gif" style="margin-left:24px" /></p>
<ul>
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ul>
</div>

<div class="headline"><h1 style="padding:0px; margin:0px">Headline goes here</h1><p>headline text </p>
</div>

<div class="reviewdiv1">
<img style="float:left; margin-top:15px; margin-right:15px;" src="images/cellulitecream1.gif" />
<h2 style="margin:0; padding-top:150px">Headline goes here</h2>

<div class="ratingdiv"><div class="ratingheader">Ratings</div>
<div style="padding:2px">
<div style="width:175px; padding:2.5px"><span style="float:left">Effectiveness:</span><span class="ratingvalue">100/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Speed:</span><span class="ratingvalue">98/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Affordability:</span><span class="ratingvalue">99/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Overall Rating:</span><span class="ratingvalue">99/100</span></div><br />
</div>
</div>

<p>Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. </p>


<img style="margin-left:30px; margin-right:15px;" src="images/visit-site.gif" /><img src="images/full-review.gif" />
</div>


<hr style="width:658px" /><br />
<div class="reviewdiv">
<img style="float:left; margin:5px; margin-right:15px;" src="images/cellulitecream2.gif" /><h2 style="margin:0; padding-top:15px">Headline goes here</h2>

<div class="ratingdiv"><div class="ratingheader">Ratings</div>
<div style="padding:2px">
<div style="width:175px; padding:2.5px"><span style="float:left">Effectiveness:</span><span class="ratingvalue">100/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Speed:</span><span class="ratingvalue">98/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Affordability:</span><span class="ratingvalue">99/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Overall Rating:</span><span class="ratingvalue">99/100</span></div><br />
</div>
</div>

<p>Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information.</p>


<img style="margin-left:30px; margin-right:15px;" src="images/visit-site.gif" /><img src="images/full-review.gif" />

</div><hr style="width:658px" /><br />
<div class="reviewdiv">
<img style="float:left; margin:5px; margin-right:15px;" src="images/cellulitecream1.gif" /><h2 style="margin:0; padding-top:15px">Headline goes here</h2>

<div class="ratingdiv"><div class="ratingheader">Ratings</div>
<div style="padding:2px">
<div style="width:175px; padding:2.5px"><span style="float:left">Effectiveness:</span><span class="ratingvalue">100/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Speed:</span><span class="ratingvalue">98/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Affordability:</span><span class="ratingvalue">99/100</span></div><br />
<div style="width:175px; padding:2.5px"><span style="float:left">Overall Rating:</span><span class="ratingvalue">99/100</span></div><br />
</div>
</div>
<p>Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information. Review information.</p>


<img style="margin-left:15px; margin-right:15px;" src="images/visit-site.gif" /><img src="images/full-review.gif" />

</div>

</div>
</div>
</div>
</body>
</html>



and here is the css:


@charset "utf-8";

body{
font:Arial, Helvetica, sans-serif;
background-image: url(images/background.gif);
background-repeat: repeat-x;
margin:0px;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

body h1{
font-size:18px;
}

#container {

}
#content{
width:993px;
padding:0px;
margin-left:auto;
margin-right:auto;
}

#logo {
height:73px;
float:left;
margin:0px;
}

#topnav{
height:73px;
width:730px;
font-size:18px;
font-weight:bold;
color:#666;
margin:0px;
line-height:73px;
}
#headerimg{
padding:0px;
margin:0px;
}
.navspace{
margin-left:25px;
}
#sidebar{
width:251px;
background-image: url(images/sidebarbg.gif);
background-repeat: repeat-y;
background-position: left top;
padding-left: 0px;
height:1000px;
float:left;
}

#sidebar li{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #def2ff;
margin-right: 35px;
padding-bottom: 8px;
margin-bottom: 8px;
margin-left: 0px;
}
#sidebar ul{
list-style-type: square;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 60px;
}
#contentbg{
background-image: url(images/content-bg.gif);
background-repeat: repeat-y;
background-position: left top;
}


.headline{
background-image: url(images/headline.gif);
background-repeat: no-repeat;
background-position: left top;
height: 104px;
width: 658px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-left: 26px;
padding-right: 58px;
padding-top: 20px;
float:right;
}
.reviewdiv{
width:93%;
height:350px;
}
.reviewdiv1{
width:100%;
height:454px;
}

.reviewdiv1 h2{
color: #0097dd;
font-size: 18px;
line-height: 1.5em;
}
.reviewdiv h2{
color: #0097dd;
font-size: 18px;
line-height: 1.5em;
}

.ratingdiv{
float:left;
border: solid #999;
border-width: 0px;
width:185px;
margin-bottom:10px;
margin-top:15px;
margin-right:15px;
background-color:#EEE
}
.ratingheader{
background-color:#666;
font-size:14px;
font-weight:bold;
color:#FFF;
padding:2px;
border:solid #666;
border-width:0px 0px 1px 0px;
}

.ratingvalue{
float:right;
font-weight:bold;
color:333;
}


am I doing something stupid here? If someone could help I would appreciate it.

abduraooft
06-29-2010, 06:07 AM
If someone could help I would appreciate it. I don't understand the issue from the code posted above (might be due to the missing images). Could you please post a link to your page ?

PS: Excessive use of inline style is a bad practice.

Idfk
06-30-2010, 09:16 AM
Half of the crap dont make sense you need to recode from scratch tbh.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum