Jump to content

help with a php loop and a clear CSS property

co.ador

By co.ador
in PHP Coding Help

Recommended Posts

co.ador Advanced Member

co.ador

Posted
Posted 

<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...

 

shoestoreversion4.gif

 

 

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>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.