I'm trying to display my database items in rows and i can't go forward on with my project.I suppose it's from my stylesheet,but i don't seem to get what's my error.
I have uploaded some pics for a better understanding of my problem.
http://imgur.com/v256LlC,ILUyBXe,fUthSOn#0
CSS:
#item {
text-align:center;
border: 5px solid #D9D9D9;
height:10px;
list-style: none;
margin-left: 1.5em;
margin-right: 30px;
margin-bottom: 40px;
margin-top: 40px;
width: 140px;
border-radius: 5px;
-moz-border-radius: 10px; /* firefox rounded corners */
-webkit-border-radius: 10px; /* Safari rounded corners */
min-height: 200px;
}
#item li h1 {
text-align:center;
}
#item li#white{
min-height: 10px;
}
Echoing the products via Model:
<?php
include '../controller/produse.php';
$products=Produse::SelectProducts();
for ($key_Number = 0; $key_Number < count($products); $key_Number+=2) {
echo "<div id= 'item'>" .
"<p><img src=../".$products[$key_Number]." height=\"125\"width=\"110\" ></p>";
echo $products[$key_Number+1];
"</div>";
}
?>
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">first cell</div></div>
<div style="display:table-row">
<div style="display:table-cell">second cell</div></div>
<div style="display:table-row">
<div style="display:table-cell">third cell</div></div>
<div style="display:table-row">
<div style="display:table-cell">fourth cell</div></div>
</div>
Related
The first two elements inside my flexbox container containing my posts from wordpress float around 10px higher than the rest. They all have the same css. I'm using PHP to get the posts from wordpress. Its only on the top row that it does this. As you can see from the photo the same template and post format is used lower on the page and it does not have this issue. Please help.
I have already tried commenting parts of the code like the read more button or the icons to see if maybe margins or padding inside the post container is doing it but its not. I've tried setting a height on the flexbox container to 930px the exact height to stop it floating - that hasnt worked. This is after setting no margins on the posts but that still hasn't worked - they were previously 5px.
This is the html template for each post inside the post loop that has the standard post format. Each post: standard and image follow the css with the 'standard' in the class names and the quote and video post format follow the classes with 'quote' in them.
<article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">
<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>
<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>
<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>
<div class=" grid-button" id="video-button">
<button><?php _e('Read More');?></button>
</div>
</div>
</header>
</article>
HERE IS THE POST FORMAT TEMPLATE FOR THE VIDEO AND QUOTE POSTS:
<article id="grid-post-<?php the_ID(); ?> " <?php post_class(); ?>>
<header class="grid-quote-entry-header">
<div class=" grid-quote-post-container">
<div class="grid-quote-icon-container">
<i class="fas fa-video"></i>
</div>
<div class="grid-standard-title-container">
<h2 class="grid-standard-title"><?php the_title(); ?></h2>
</div>
<div class="grid-standard-date-container">
<h5 class="grid-standard-date"><?php the_time('d/m/y'); ?></h5>
</div>
<div class=" grid-button" id="video-button">
<button><?php _e('Read More');?></button>
</div>
</div>
</header>
</article>
HERE IS INDEX PAGE
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<div class="grid-post-loop-container exhale-posts-container">
<div class="grid-whole-container">
<?php
if(have_posts() ):
echo '<div class="page-limit" data-page="/'. exhale_check_paged()
.'">';
while( have_posts() ): the_post();
get_template_part('template-parts/gridcontent', get_post_format()
);
endwhile;
echo '</div>';
endif;
?>
</div>
</div>
</main>
</div>
HERE IS THE CSS:
.grid-whole-container{
display: inline;
flex-wrap: wrap;
flex-direction: row;
width: 100%;
}
.grid-standard-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
}
.grid-standard-post-container:hover {
}
.grid-standard-title-container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
.grid-standard-title {
font-family: coolvetica;
text-transform: uppercase;
color: white;
text-align: center;
letter-spacing: 3px;
text-shadow: 2.5px 3px black;
font-size: 27px;
position: relative;
top: 80px;
}
.grid-standard-date-container {
width: 30%;
margin-left: auto;
margin-right: auto;
}
.grid-standard-date {
letter-spacing: 6px;
color: black;
font-family: coolvetica;
font-size: 13px;
text-align: center;
position: relative;
top: 60px;
}
.grid-button button {
width: 50%;
margin-left: 25%;
margin-right: 25%;
position: relative;
top: 90px;
background: transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
font-family: coolvetica;
text-transform: uppercase;
color: white;
letter-spacing: 7px;
}
.grid-load-more {
margin-top: 100px;
}
/* INDEX GRID LAYOUT - QUOTE ======================================================================== ============================= */
.grid-quote-post-container {
width: 32%;
flex: 100%;
height: 300px;
-webkit-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
box-shadow: 10px 10px 19px -5px rgba(0,0,0,0.75);
float: left;
background-color: #aecfd7;
}
.grid-quote-icon-container {
color: white;
font-size: 60px;
text-align: center;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: -70px;
}
Expected that these divs would all act the same as they all have the same css but top row floats up. Please help.
This is what it looks like.The first two should not float up like that
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I am fetching data images from database and wish to place maximum 3 images in a single row and these images also have hover effect on them which is working fine
problem that i am facing is that if i am using this code to display static images then it is working fine but if i fetch the data from database then it is not displaying properly. i want to display images in this form
1st_image 2nd_image 3rd_image
4th_image 5th_image 6th_image
7th_image .. and so on
but i am getting images in this form
1st_image
2nd_image
3rd_image
4th_image
5th_image
6th_image
The code that i have is
code of my front page is
<?php
$sql = "SELECT * FROM category";
$result = mysqli_query($con, $sql);
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$catname=$row["catname"];
$catdesc=$row["catdesc"];
$catpic=$row["catpic"];
$id=$row["id"];
?>
<div id="effect-2" class="effects clearfix">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay">
content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
<?}
}?>
code on css page is
nav ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
text-align: center;
}
nav ul li {
display: inline-block;
margin-bottom: 4px;
}
nav ul li a {
display: block;
padding: 5px 20px;
color: #fff;
background-color: #32c896;
}
nav ul li a:hover {
color: #fff;
background-color: #238b68;
}
nav ul li a.active {
color: #fff;
background-color: #238b68;
}
.effects {
padding-left: 15px;
}
.effects .img {
position: relative;
float: left;
margin-bottom: 5px;
width: 25%;
overflow: hidden;
}
.effects .img:nth-child(n) {
margin-right: 5px;
}
.effects .img:first-child {
margin-left: -15px;
}
.effects .img:last-child {
margin-right: 0;
}
.effects .img img {
display: block;
margin: 0;
padding: 0;
max-width: 100%;
height: auto;
}
.overlay {
display: block;
position: absolute;
z-index: 20;
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
a.close-overlay {
display: block;
position: absolute;
top: 0;
right: 0;
z-index: 100;
width: 45px;
height: 45px;
font-size: 20px;
font-weight: 700;
color: #fff;
line-height: 45px;
text-align: center;
background-color: #000;
cursor: pointer;
}
a.close-overlay.hidden {
display: none;
}
a.expand {
display: block;
position: absolute;
z-index: 100;
width: 60px;
height: 60px;
border: solid 5px #fff;
text-align: center;
color: #fff;
line-height: 50px;
font-weight: 700;
font-size: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
}
#effect-2 .overlay {
top: 0;
left: 0;
right: 0;
width: 100%;
height: 0;
}
#effect-2 .overlay a.expand {
left: 0;
right: 0;
top: 50%;
margin: -30px auto 0 auto;
}
#effect-2 .img.hover .overlay {
height: 100%;
}
can anyone tell me how to do so
You should use unique ids in your html. I recommend to always use classes instead of id. You can do something like this in your CSS
div[id^="tocolor-"] {
/* some css rules */
}
div[id^="tocolor-"] .overlay {
/* some css rules */
}
And in your html you can add an id using database table id like this
<div id="effect-<?php echo $id; ?>" class="effects clearfix">
Why not use bootstrap and use col-xs-4 class...which will make sure you always have 3 columns
<div id="effect-2" class="col-xs-4">
<div class="img">
<img src="<? echo $catpic; ?>" alt="">
<div class="overlay"> content
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>
I've a issue in displaying products in Grid type. Instead of Grid type, all the products are arranged in left side in top-to-bottom format.
I've a div called content which displays list of products in left side and cart items on right side. The code for to display products:
<div id="content">
<h2>Spices</h2>
<?php
$query="SELECT * FROM products";
$result= mysqli_query($db,$query);
while($row=mysqli_fetch_array($result))
{
$productname=$row['name'];
$price=$row['price'];
?>
<div class="product1">
<h3><?php echo $productname; ?></h3>
<img src="images/bp.png" width="170" height="140">
<p>Starting from <span> Rs. <?php echo $price; ?> </span></p>
<div id="imgad">
<img src="images/add-to-cart.png">
</div>
<?php } ?>
</div>
</div>
<?php require_once("sidebar.php");
CSS
#content
{
width: 700px;
height: 1200px;
padding: 5px;
float: left;
border: 1px solid #987a7a;
}
#sidebar
{
width: 250px;
height: 500px;
padding: 5px;
float: right;
border: 1px solid #987a7a;
}
.product1
{
width: 210px;
height: 300px;
border: 1px solid #c9c5c5;
text-align: center;
float: left;
display: block;
}
The current issue (all are aligned left from top-to-bottom)
Expected result:
.product1
{
width: 210px;
height: 300px;
border: 1px solid #c9c5c5;
text-align: center;
display: inline-block;
}
display:inline-block show content in line
update:
after watch the demo pageDEMO i can say that the problem is your divs are not closing properly
Use display: inline-block, like this:
.product1
{
width: 210px;
height: 300px;
border: 1px solid #c9c5c5;
text-align: center;
display: inline-block;
margin: 5px;
}
Like this jsfiddle.
I am trying to show a lot of results at once (like 25) but my program cut the results around the 5th record having area space still available, the results are in a table
created dynamically but seems that the area doesn't expand accordingly.
<div id="contenido" class="contenido">
<div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
<a>Últimas alertas</a> </li>
<li id="li_tab2" onclick="tab('tab2')"> <a>otras</a> </li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p class="notas">Showing last alerts</p>
<table>
<tr>
<td style="color:blue">Alert</td>
<td style="color:blue">User</td>
</tr>
<?php
while ( $row = $result->fetch_array() ){
echo "<tr><td>".$row['DESCRIPTION']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['SUB_SECCION']."</td></tr>";
}
}
else
echo "error on query: ".$conx->error;
}//else
?>
</table>
</div>
<div id="tab2" style="display: none;">
<!-- We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should
be Tab 1 until the visitor clicks on Tab 2. -->
<p>This is the text for tab 2.</p>
</div>
</div> <!-- End of Content_Area Div -->
</div> <!-- End of Tabs Div -->
</div>
CSS creates tabs, but for the moment only the first has the table the other just one line of text, but the table is inside this tab div
archivo css
.contenido {
color: black;/*#333*/
background-color: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
border: 1px solid #ccc;
width: 75%;/*678px;*/
height: 480px;
float: right;
display: inline;
}
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
/* make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#Tabs ul li a:hover {
text-decoration: underline;
color:red;
}
#Tabs #Content_Area {
/* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
The problem is inside your CSS.
height: 150px; and overflow: hidden; in #Tabs #Content_Area could be factor.
Since you have overflow: hidden; set to "hidden", it could be a factor.
Try changing it to overflow:scroll; or overflow:visible; to see if that works, and/or changing the heights to a higher number for those IDs.
Try different variations.
I see a two possible causes:
The database query only returns 5 results
the DIV is not large enough, and even though the table ends up in,
say, 25 records, the first 5 are only displayed and the rest are
hidden by the boundaries of DIV.
It would help if you put some more PHP code or even the CSS of the #area.