help with a php loop and a clear CSS property

co.ador · October 12, 2009

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
#container {
    width:800px;
    padding:10px;
    margin: 0 auto;
}
#header {
    width:100%;
    height: 6em;
}
#info {
    float: right;
}
#header h1 {
    margin-left:100px;
}
#sidebar {
    float:left;
    width:180px;
    background-color:#698559;
    padding:10px;
}
.shoeinfo {
    width:190px;
    float:left;
    margin:0 0 20px 10px;
    display:inline
}
.infohead {
    background-color: orange;
}
.video {
    width:100%;
    height: 150px;
    background-color: green;
    margin-top: 10px;
}
.wrap {
    float:right;
    width:600px;
}
.clearer {
    clear:both
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <div id="info">
            <ul>
                <li>Type: Woman's Shoes</li>
                <li>Rate: Blah Blah Blah</li>
                <li>Country: France</li>
                <li>Designer: Reinaldo Hidalgo</li>
            </ul>
        </div>
        <h1>French Shoes Design</h1>
    </div>
    <div id="sidebar">
        <ul>
            <li>France Boots</li>
            <li>Woman Casual</li>
            <li>Woman High Hills</li>
            <li>Woman Conservative</li>
        </ul>
    </div>
    
   <?php $query = "SELECT caridadkb.shoename, caridadkb.price, caridadkb.moreinfo, caridadkb.airjordan_id 
FROM caridadkb 
WHERE 
airjordan_id= " . (int) $_GET['menu']; 
echo $query; 
$result = mysql_query($query, $connection); 
while ($content = mysql_fetch_array($result)) { 
  echo "<div class="wrap"> 
    <div id=\"shoeinfo1\"> 
        <h2 class=\"infohead\">" . $content['shoename'] . "</h2> 
        <div class=\"video\"><img class=\"line\" src=\"images/videoplayer.jpg\" alt=\"videoplayer\" width=\"100%\" height=\"100%\"></div> 

        <h5> Rate:</h5><h4> 
         
         
        "; 
         
         
        $ratingData = Rating::OutputRating($content['shoename']); 
       
      if (Error::HasErrors()) 
      { 
        echo Error::ShowErrorMessages(); 
        Error::ClearErrors(); 
      } 
      else 
      { 
        echo $ratingData; 
      }   
      echo"</h4> 
        <h3>Prosedimiento:</h3> 
        <p>Womens fashion shoes with higher 
        heels generally have pre-made, thin, 
        flexible, leather or resin rubber fitted 
        soles, made using the bottom pattern 
        created from the last. Two shapes of 
        sole are made this way, one for a Louis 
        heel, and the other for a Knock-on type. </p> 
    </div>
</div>
<div class="clearer"></div>
"; 
    }?> 

</div>

If you notice in the php script above I have placed the

<div class="clearer"></div>

wrapper but it won't work as it is in Paul example... in the php script above placing the

<div class="clearer"></div>

it will clear after each row of one when it should clear after each row of three as shown below...

The whole html and CSS code without a php loop would look like as below.

<!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>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
#container {
    width:800px;
    padding:10px;
    margin: 0 auto;
}
#header {
    width:100%;
    height: 6em;
}
#info {
    float: right;
}
#header h1 {
    margin-left:100px;
}
#sidebar {
    float:left;
    width:180px;
    background-color:#698559;
    padding:10px;
}
.shoeinfo {
    width:190px;
    float:left;
    margin:0 0 20px 10px;
    display:inline
}
.infohead {
    background-color: orange;
}
.video {
    width:100%;
    height: 150px;
    background-color: green;
    margin-top: 10px;
}
.wrap {
    float:right;
    width:600px;
}
.clearer {
    clear:both
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <div id="info">
            <ul>
                <li>Type: Woman's Shoes</li>
                <li>Rate: Blah Blah Blah</li>
                <li>Country: France</li>
                <li>Designer: Reinaldo Hidalgo</li>
            </ul>
        </div>
        <h1>French Shoes Design</h1>
    </div>
    <div id="sidebar">
        <ul>
            <li>France Boots</li>
            <li>Woman Casual</li>
            <li>Woman High Hills</li>
            <li>Woman Conservative</li>
        </ul>
    </div>
    <div class="wrap">
        <div class="shoeinfo">
            <h2 class="infohead">French Sole Visa</h2>
            <div class="video"><img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="190" /></div>
            <h5> Rate:</h5>
            <h3>Prosedimiento</h3>
            <p>Women's fashion shoes with higher 
                heels generally have pre-made, thin,
                flexible, leather or resin rubber fitted
                soles, made using the bottom pattern
                created from the last. Two shapes of
                sole are made this way, one for a Louis
                heel, and the other for a Knock-on type. </p>
            <p><a href="#">More</a></p>
        </div>
        <div class="shoeinfo">
            <h2 class="infohead">French Sole Visa</h2>
            <div class="video"><img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="190" /></div>
            <h5> Rate:</h5>
            <h3>Prosedimiento</h3>
            <p>Women's fashion shoes with higher 
                heels generally have pre-made, thin,
                flexible, leather or resin rubber fitted
                soles, made using the bottom pattern
                created from the last. Two shapes of
                sole are made this way, one for a Louis
                heel, and the other for a Knock-on type. </p>
            <p><a href="#">More</a></p>
        </div>
        <div class="shoeinfo">
            <h2 class="infohead">French Sole Visa</h2>
            <div class="video"><img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="190" /></div>
            <h5> Rate:</h5>
            <h3>Prosedimiento</h3>
            <p>Women's fashion shoes with higher 
                heels generally have pre-made, thin,
                flexible, leather or resin rubber fitted
                soles, made using the bottom pattern
                created from the last. Two shapes of
                sole are made this way, one for a Louis
                heel, and the other for a Knock-on type. </p>
            <p><a href="#">More</a></p>
        </div>
        <div class="clearer"></div>
        <div class="shoeinfo">
            <h2 class="infohead">French Sole Visa</h2>
            <div class="video"><img class="line" src="images/videoplayer.jpg" alt="videoplayer" width="190" /></div>
            <h5> Rate:</h5>
            <h3>Prosedimiento</h3>
            <p>Women's fashion shoes with higher 
                heels generally have pre-made, thin,
                flexible, leather or resin rubber fitted
                soles, made using the bottom pattern
                created from the last. Two shapes of
                sole are made this way, one for a Louis
                heel, and the other for a Knock-on type. </p>
            <p><a href="#">More</a></p>
        </div>
    </div>
</div>
</body>
</html>

lordrt · October 12, 2009

seems you missed a semi-colon after clear:both

yours:

.clearer {

clear:both

}

correct:

.clearer {

clear:both;

}

co.ador · October 12, 2009

Still the problem remains...

Sign In

help with a php loop and a clear CSS property

Recommended Posts

co.ador

Link to comment

Share on other sites

lordrt

Link to comment

Share on other sites

co.ador

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information