I’m stuck at the moment where i would like to display contents from mysql database in divs with sequential manner. I got the query successful but i got the result in the div in a list manner. Can any one suggest me how it display in a sequential manner. The code is
$sql="select * from admn_pckge"; $result=mysql_query($sql); <?php if(mysql_num_rows($result)>0) { while($row=mysql_fetch_array($result)) { ?> <div class="pricing-container"> <div class="header"> Premium </div> <div class="price"> <span> <sup class="currency"></sup><span class="figure"><?php echo $row['admn_pckge_price']; ?></span> <sup class="cent"> Rs</sup> <sup class="frequency">Event</sup> </span> <div class='details'>based on 1 yr</div> </div> <div class="itemsWrapper"> <ul class="items"> <div class="item"> <?php echo $row['admn_pckge_itm1']; ?> <?php echo $row['admn_pckge_itm1_qty']; ?> </div><hr/> <div class="item"> <?php echo $row['admn_pckge_itm2']; ?> <?php echo $row['admn_pckge_itm2_qty']; ?> </div><hr/> <div class="item"> <?php echo $row['admn_pckge_itm3']; ?> <?php echo $row['admn_pckge_itm3_qty']; ?> </div><hr/> <div class="item"> <?php echo $row['admn_pckge_itm4']; ?> <?php echo $row['admn_pckge_itm4_qty']; ?> </div><hr/> <div class="item"> <?php echo $row['admn_pckge_itm5']; ?> <?php echo $row['admn_pckge_itm5_qty']; ?> </div><hr/> <div class="item"> <?php echo $row['admn_pckge_itm6']; ?> <?php echo $row['admn_pckge_itm6_qty']; ?> </div><hr/> <div class="item"> <?php echo $row['admn_pckge_itm7']; ?> <?php echo $row['admn_pckge_itm7_qty']; ?> </div><hr/> </ul> </div> </div> <?php } } ?> <style> .pricing-container { width: 300px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; } .pricing-container .header { background: #2F2F2F; color: white; padding: 25px; font-size: 2.5em; font-weight: 300; border-radius: 5px 5px 0 0; } .pricing-container .price { background: #66D2AC; background: linear-gradient(10deg, #93da9f 30%, #66d2ac 80%); color: white; padding: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); font-size: 1.3em; } .pricing-container .price .figure { font-weight: 800; font-size: 1.2em; margin: 0 2px; } .pricing-container .price .cent { text-decoration: underline; } .pricing-container .price .frequency { color: #2F757F; text-shadow: none; } .pricing-container .price:hover .details { height: 20px; } .pricing-container .price .details { color: #2F757F; font-size: .6em; display: block; height: 0; overflow: hidden; transition: all 400ms ease; } .pricing-container .itemsWrapper { border: 2px solid #E6E6E6; border-top: none; border-radius: 0 0 2px 2px; background: white; box-shadow: inset 14px 0 white, inset 15px 0 #f2f2f2, inset -14px 0 white, inset -15px 0 #f2f2f2; } .pricing-container .itemsWrapper .items { list-style: none; padding: 15px; margin: 0; } .pricing-container .itemsWrapper .item { padding: 10px; text-transform: capitalize; font-size:20px; font-style:oblique; } </style>
Advertisement
Answer
Try moving your CSS
above your other code… it really should be inside your <head></head>
tags.
Then you have two choices…
If you want all divs to be inside one list item, this is the code sample
-
If you want each div to be a list item of its own, this is the code sample…
<ul class="items"> <li> <div class="item"> <?php echo $row['admn_pckge_itm1']; ?> <?php echo $row['admn_pckge_itm1_qty']; ?> </div><hr/> </li> <li> <div class="item"> <?php echo $row['admn_pckge_itm2']; ?> <?php echo $row['admn_pckge_itm2_qty']; ?> </div><hr/> </li> <li> <div class="item"> <?php echo $row['admn_pckge_itm3']; ?> <?php echo $row['admn_pckge_itm3_qty']; ?> </div><hr/> </li> </ul> </div> </div> <?php } } ?>