Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Div is acting weird.

    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"

    Code:
    <!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:

    Code:
    @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.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    Last edited by abduraooft; 06-30-2010 at 09:23 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Location
    Sutton-in-ashfield, Notts
    Posts
    117
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Half of the crap dont make sense you need to recode from scratch tbh.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •