dongtong848825
2017-04-04 17:22
浏览 36
已采纳

HTML - CSS未应用于id

I'm newbie and trying to make a E-commerce website using Xampp. I'm unable to get the items in content area in a ordered way (see images). What I want is something like this but I am getting content area like this. The code for content area in index.php is:

         <!--content area in pink color-->
               <div id="content_area">
                  <div id="products_box">   
                   <?php getPro(); ?>
                  </div>
              </div>

getPro() function in functions.php is:

$con = mysqli_connect("localhost","root","","ecommerce");
//get the products
function getPro () {

     global $con;

     $get_pro = "select * from products order by RAND() LIMIT 0,6";
     $run_pro = mysqli_query($con, $get_pro);
     while($row_pro=mysqli_fetch_array($run_pro)){

         $pro_id = $row_pro['product_id'];
         $pro_cat = $row_pro['product_cat'];
         $pro_brand = $row_pro['product_brand'];
         $pro_title = $row_pro['product_title'];
         $pro_price = $row_pro['product_price'];
         $pro_image = $row_pro['product_image'];

         echo "
             <div id='single_product'>

             <h3>$pro_title</h3>
             <img src='admin_area/product_images/$pro_image' width='180' height='180' />
             <p><b>₹ $pro_price</b></p>

             </div>
         ";
     }
}

CSS code in style.css is:

#products_box { 
    width:780px;
    text-align:center;
    margin-left:30px;
    margin-bottom:10px;
}

#single_product{
    float:left; 
    margin-left:20px; 
    padding:10px;
}

generated HTML is:

<!DOCTYPE>
<html>
   <head>

        <title>My online shop</title>
        <link rel="stylesheet" href="styles/style.css" media="all" />   

   </head>

<body>
   <!--Main Container starts here-->
   <div class="main_wrapper">
         <!--header starts here-->
         <div class="header_wrapper">

              <img id="logo" src="images/logo.gif" />
              <img id="banner" src="images/ad_banner.gif" />

         </div>
         <!--header ends here-->

         <!--Navigation bar starts here-->
         <div class="menubar">
                <ul id="menu">

                     <li><a href="#">Home</a></li>
                     <li><a href="#">All Products</a></li>
                     <li><a href="#">My Account</a></li>
                     <li><a href="#">Sign Up</a></li>
                     <li><a href="#">Shopping Cart</a></li>
                     <li><a href="#">Contact Us</a></li>

                </ul>
                <div id="form">
                  <form method="get" action="results.php" enctype="multipart/form-data">

                       <input type="text" name="user_query" placeholder="search a product" />
                       <input type="submit" name="search" value="search" />

                   </form>
                </div>
         </div>
         <!--Navigation bar ends here-->


         <!--Content wrapper starts here-->
         <div class="content_wrapper">

             <div id="sidebar">

                    <!--categories-->
                   <div id="sidebar_title">Categories</div>

                   <ul id="cats"> 

                    <li><a href='#'>Laptops</a></li><li><a href='#'>Cameras</a></li><li><a href='#'>Mobiles</a></li><li><a href='#'>Tablets</a></li><li><a href='#'>media players</a></li><li><a href='#'>Ebook readers</a></li><li><a href='#'>Graphic tablets</a></li>   

                   </ul>

                   <!--Brands-->
                   <div id="sidebar_title">Brands</div>

                   <ul id="cats"> 
                       <li><a href='#'>HP</a></li><li><a href='#'>DELL</a></li><li><a href='#'>LG</a></li><li><a href='#'>Samsung</a></li><li><a href='#'>Apple</a></li><li><a href='#'>Motorola</a></li><li><a href='#'>Xiamoi</a></li><li><a href='#'>Huawei</a></li><li><a href='#'>Blackberry</a></li><li><a href='#'>HTC</a></li>                 </ul>
             </div>

                  <!--content area in pink color-->
                  <div id="content_area">
                      <div id="products_box">   

             <div class='single_product'>

             <h3>Moto G5 Plus (Lunar Grey, 32 GB)</h3>
             <img src='admin_area/product_images/motorola-moto-g5-plus-1.jpg' width='180' height='180' />
             <p><b>₹ 15999</b></p>

             </div>

             <div class='single_product'>

             <h3>xiamoi redmi note 3</h3>
             <img src='admin_area/product_images/Redmi-Note3-32GB-SDL881680011-2-1b99d.jpg' width='180' height='180' />
             <p><b>₹ 9999</b></p>

             </div>

             <div class='single_product'>

             <h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
             <img src='admin_area/product_images/Dell Vostro 15 3558 15.6-inch Laptop.jpg' width='180' height='180' />
             <p><b>₹ 28000</b></p>

             </div>

             <div class='single_product'>

             <h3>Iphone 6 (32 GB)</h3>
             <img src='admin_area/product_images/SP705-iphone_6-mul.png' width='180' height='180' />
             <p><b>₹ 30000</b></p>

             </div>
                          </div>



             </div>

         </div>

         <!--Content wrapper ends here-->
         <div id="footer">
         <h2 style="text-align:center; padding-top:30px;">&copy; 2017 by Technohub

         </div>  

   </div>
<!--Main Container ends here-->
</body>
</html> 

Please explain in detail as I'm a newbie

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • douhandie6615 2017-04-04 17:25
    已采纳

    you are using the same ID multiple times,

    IDs must be unique,

    So use a class instead

    instead of <div id='single_product'> use something like <div class='single_product'>

    then in CSS

    .single_product{
        float:left; 
        margin-left:20px; 
        padding:10px;
    }
    

    Answer after question edited

    • Here is your code improved using flexbox

    #products_box {
      display: flex;
      flex-wrap: wrap;
      max-width: 780px;
      justify-content: center;
      text-align:center;
      /*demo*/
      background: pink
    }
    
    .single_product {
      padding: 10px;
    }
    <!--content area in pink color-->
    <div id="content_area">
      <div id="products_box">
        <div class='single_product'>
          <h3>Moto G5 Pluspl (Lunar Grey, 32 GB)</h3>
          <img src='//placehold.it/180' />
          <p><strong>₹ 15999</strong></p>
        </div>
        <div class='single_product'>
          <h3>xiamoi redmi note 3</h3>
          <img src='//placehold.it/180' />
          <p><strong>₹ 9999</strong></p>
        </div>
        <div class='single_product'>
          <h3>Dell Vostro 15 3558 15.6-inch Laptop</h3>
          <img src='//placehold.it/180' />
          <p><strong>₹ 28000</strong></p>
        </div>
        <div class='single_product'>
          <h3>Iphone 6 (32 GB)</h3>
          <img src='//placehold.it/180' />
          <p><strong>₹ 30000</strong></p>
        </div>
      </div>
    </div>

    </div>
    
    点赞 评论
  • duanjiao3686 2017-04-05 08:49

    For future reference:

    1. As @dippas stated, IDs must be unique.
    2. Now you just need to clear cache and cookies and it will work.
    点赞 评论

相关推荐 更多相似问题