HTML - CSS not being applied to id
Question
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 but I am getting
. 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;">© 2017 by Technohub
</div>
</div>
<!--Main Container ends here-->
</body>
</html>
Please explain in detail as I'm a newbie
2 answers
solution1
2 ACCPTED 2017-04-04 17:25:26
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>
solution2
1 2017-04-05 08:49:35
For future reference:
- As @dippas stated, IDs must be unique.
- Now you just need to clear cache and cookies and it will work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS class/id style not being applied to <nav>, <footer> and <header> descendants included using PHP
CSS rules not being applied to dynamically generated elements
PHP Include without Parent CSS Being Applied
css sytelsheet not being applied to php code
PHP loop not being applied on a specific HTML element
xampp wordpress virtual hosts - css errors, css not being applied
any changes added to my CSS are no longer being applied in my PHP
How to prevent css loaded with query being applied to whole page?
PHP to DOC - CSS and images not being applied in doc file
A problem in CSS where css is not applied properly to the html code
Related Tags