images order vertically, I want to display horizontally one row.I use fancybox3 and boostrap4
this is my code
<?php
$sayfa = 'Ürünler';
include('inc/vt.php');
include('inc/head.php');
include('inc/nav.php');
$sorgu = $baglanti->prepare("SELECT * FROM urunler where aktif=1 order by sira");
$sorgu->execute();
$yon = 'sag';
while ($sonuc = $sorgu->fetch()) {
?>
<section class="imglist">
<a href="img/<?= $sonuc['foto'] ?>" data-fancybox data-caption="This image has a caption">
<img src="img/<?= $sonuc['foto'] ?>" style='height: 50%; width: 100%; object-fit: contain;display:
block;margin: auto auto' />
</a>
</div>
<?php
if ($yon == 'sag') $yon = 'sol';
else $yon = 'sag';
} //while end
include('inc/footer.php');
?>
I am on mobile so please excuse grammar/formatting.
Change your display attribute to:
display: inline-block;
and LMK if that fixes it.
Related
How to order divs side by side and centered when get datas from database in php and css ?
php and html codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
</head>
<body>
<?php include ("connect.php");
$data = $db->query("select * from videos order by id desc");
$data ->execute();
while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
<div class="cards">
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><?php echo $row['v_models'];?></p>
</div>
</div>
</div>
<?php }?>
</body>
</html>
css style codes
body {
background-color:#282828;
}
a{
text-decoration: none;
}
.cards{
text-align: center;
font-size: 0;
}
.card{
margin: 0 10px;
width: 250px;
text-align: left;
display: inline-block;
font-size: medium;
}
.card-img{
width: 250px;
margin-bottom: -5px;
}
.card-title{
background-color: #FFFCF5;
width: 240px;
padding:5px;
margin-bottom: 15px;
color: #282828;
}
.card-title>p>a{
color: #00BFA5;
}
my page looks like this:
but I want to those pictures order side by side
I couldn't that. How could I do?
Thank you
You got .cards inside you while loop, take it out:
<body>
<div class="cards">
<?php include ("connect.php");
$data = $db->query("select * from videos order by id desc");
$data ->execute();
while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><?php echo $row['v_models'];?></p>
</div>
</div>
<?php }?>
</div>
</body>
The reason your code doesnt work, is because .card is inline-block which will place multiple card nexto eachother, but because you look the .cards (note the S) as well, you wrap each item in a div. A div is a block element, which means it'll take up one whole row, the next element will fall below it.
For each row from database you parse, you will have this following output:
`
<div class="cards">
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><?php echo $row['v_models'];?></p>
</div>
</div>
</div>
`
So, all you have to do is to have the cotainer outside the while loop, like this:
`
<div class="cards">
<?php include ("connect.php");
$data = $db->query("select * from videos order by id desc");
$data ->execute();
while ($row=$data->fetch(PDO::FETCH_ASSOC)) {?>
<div class="card">
<img src="<?php echo $row['thumbnail'];?>" class="card-img" />
<div class="card-title">
<h3><?php echo $row['v_name'];?></h3>
<p><?php echo $row['v_models'];?></p>
</div>
</div>
<?php }?>
</div>
`
I know it's not exactly what you want, but try :
cards { display : flex ; flex-direction : row ; justify-content : space-between }
/ ! \ Doesn't work on IE8 and previous
I have two flags in header ( im using customizr theme ), but in Chrome I see only 1 flag and in firefox 2 flags.
In Google Chrome:
and in Mozille Firefox:
My Question is, why I see only 1 flag in chrome ?
My code for this :
<header class="<?php echo implode( " ", apply_filters('tc_header_classes', array('tc-header' ,'clearfix', 'row-fluid') ) ) ?>" role="banner">
<div style = 'position: absolute; top: 10px; right: 20px;'>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
<div style = 'position: absolute; right: 100px; top: 10px; z-index: 201'>
<?php wp_loginout(); ?>
</div>
<div style = 'position: relative; right: 80px;'>
<?php
// The '__header' hook is used with the following callback functions (ordered by priorities) :
//TC_header_main::$instance->tc_logo_title_display(), TC_header_main::$instance->tc_tagline_display(), TC_header_main::$instance->tc_navbar_display()
do_action( '__header' );
?>
</div>
</header>
I already tried to move flags right position to 40,100, ... But nothing.
Can somebody help me or give some clue :) Thanks !
Try to remove the position styles from flags div because of this one flags not appear properly. Just empty for now and than check where flags displayed.
<div style = ''>
<a href = 'http://localhost/wordpress/wordpress/et/'><img src = 'http://www.wizards.com/events/images/flag_Estonia.jpg' /></a>
<a href = 'http://localhost/wordpress/wordpress/en/'><img src = 'http://www.hans-pedersen.com/en/img/icon-english.gif' /></a>
</div>
I have the following code :
<div class="wrap">
<div class="next">
<?php next_post('%', 'Next post', 'no'); ?>
</div>
<div class="prev">
<?php previous_post('%', 'Previous post', 'no'); ?>
</div>
</div>
and after hours of trying i am not able to add an image (small arrow image in png format) instead of "next post" and "previous post"
I tried (in the CSS) background-image: url(../img/arrow-left.png); amongst other things.
It does seem to work however when i create href tags
but the problem is that I cannot embed <?php next_post(); ?> in the href can I ?
like so : " class="next">
which did not work for me..
If you need any more information, please let me know and I will provide it.
Wordpress function next_post has been deprecated. Better to use the next_post_link function.
http://codex.wordpress.org/Function_Reference/next_post_link
You can change the output format including the images like this :
<div class="wrap">
<div class="next">
<?php $next_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-right.png'/>"?>
<?php next_post_link('%link', $next_dir . '<span>Next Post</span>', TRUE); ?>
</div>
<div class="prev">
<?php $prev_dir = "<img src='" . get_bloginfo('template_directory') . "/img/arrow-left.png'/>"?>
<?php previous_post_link('%link', '<span>Previous Post</span>' . $prev_dir, TRUE); ?>
</div>
</div>
UPDATE 1
With the provided solution you have also to modify your css file to your needs. Another way to do this (which is better imo) is without changing any php code is to do something like this :
.next a{
width: 25px;
height: 25px;
background: url(/img/arrow-right.png) no-repeat 0 0;
text-indent: -9999px;
}
.prev a{
width: 25px;
height: 25px;
background: url(/img/arrow-left.png) no-repeat 0 0;
text-indent: -9999px;
}
The html code rendered by wordpress is a links like .
You should also change the width and height to the dimensions of your images.
I'm trying to style a page generated with App Gini. I've been able to edit most everything so far, however I can't seem to get inline-block to work, float:left will work. However I've tried many methods and can't get float to center and I much prefer using inline-block. I have no background in PHP coding mostly just CSS and HTML.I'm trying to style PHP elements and I don't believe they're the cause.
The PHP generate links to tables within a database and it changes based on user access. Right now it returns about 8 links and as I said float allows me to format them to display horizontally without centering however when I use inline-block it displays them vertically with centering. What I'm trying to accomplish is a horizontal centered menu that is adaptive to screen size. If there is any information I am lacking in this post please let me know.
The CSS:
#headingstyles{font-family: "Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:5px;margin-bottom:0px;}
body{font-family:"Ubuntu","Segoe UI","Segoe WP","Helvetica Neue",'RobotoRegular',sans-serif;font-size:20px}
h1,h2,h3,h4,h5,h6{font-family:"Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:0px;margin-bottom:0px;}
.content a:link {color:#DDD; text-decoration:none;}
.content a:visited {color:#DDD;text-decoration:none;}
.content a:hover {color:#FFF;text-decoration:none;}
.content a:active {color:#FFF;text-decoration:none;}
.content {
position:absolute;
width:99%;
min-height: 20%;
padding-top:6%;
padding: auto;
background-color: #1569C7;
color: #FFF;
text-align: center;
border-bottom: #111 1px solid;
margin:0 auto;
}
.content a:link {
padding: 15px;
/*display: inline-block;*//*doesn't work*/
float:left;/*works*/
}
.content a:hover {
background-color: #479BF9;
}
The HTML/PHP:
<div class="content">
<?php
if(is_array($arrTables)){
$i=0;
foreach($arrTables as $tn=>$tc){
$tChk=array_search($tn, array());
$searchFirst = (($tChk!==false && $tChk!==null) ? '?Filter_x=1' : '');
?>
<div onclick="window.location='<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>';" id="<?php echo $tn; ?>">
<a title="<?php echo htmlspecialchars($tc[1]); ?>" href="<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>">
<?php echo (!$i ? "<h2>{$tc[0]}</h2>" : "<h2>{$tc[0]}</h2>"); ?>
<?php echo $tc[1]; ?>
</a>
</div>
<?php
$i++;
}
// custom home links, as defined in "hooks/links-home.php"
if(is_array($homeLinks)){
$memberInfo = getMemberInfo();
foreach($homeLinks as $link){
if(!isset($link['url']) || !isset($link['title'])) continue;
if($memberInfo['admin'] || #in_array($memberInfo['group'], $link['groups']) || #in_array('*', $link['groups'])){
?>
<div onclick="window.location='<?php echo $link['url']; ?>';">
<a title="<?php echo htmlspecialchars($link['description']); ?>" href="<?php echo $link['url']; ?>">
<h1><?php echo $link['title']; ?></h1>
<?php echo $link['description']; ?>
</a>
</div>
<?php
}
}
}
if(getLoggedAdmin()){
?><div onclick="window.location='admin/';"><h2><?php echo $Translation['admin area']; ?></h2></div><?php
}
}else{
?><div id="error-no-access"><?php echo $Translation['no table access']; ?><script language="javaScript">setInterval("window.location='index.php?signOut=1'", 2000);</script></div><?php
}
?>
</div>
The Generated HTML:
<div class="content">
<div onclick="window.location='t1.php';">
<a title="" href="t1.php">
<h2>t1</h2> </a>
</div>
<div onclick="window.location='t2.php';">
<a title="" href="t2.php">
<h2>t2</h2> </a>
</div>
<div onclick="window.location='t3.php';">
<a title="" href="t3.php">
<h2>t3</h2> </a>
</div>
<div onclick="window.location='t4.php';">
<a title="" href="t4.php">
<h2>t4</h2> </a>
</div>
<div onclick="window.location='t5.php';">
<a title="" href="t5.php">
<h2>t5</h2> </a>
</div>
<div onclick="window.location='t6.php';">
<a title="" href="t6.php">
<h2>t6</h2> </a>
</div>
<div onclick="window.location='t7.php';">
<a title="" href="t7.php">
<h2>t7</h2> </a>
</div>
<div onclick="window.location='t8.php';">
<a title="" href="t8.php">
<h2>t8</h2> </a>
</div>
<div onclick="window.location='admin/';"><h2>Admin Area</h2></div>
</div>
Instead of putting inline-block on the links, put it on their containing divs instead:
.content div{
padding: 15px;
display: inline-block;
}
In your code above, the containing divs are blocks so setting their links to inline-block doesn't have an effect.
I have the code below to split my for each statement into two separate divs:
<?php
$previousLetter = false;
?>
<?php
$i=1; // have a counter variable
foreach($this->clubs as $clubs) : ?>
<?php
$firstLetter = substr($clubs->club_name, 0, 1);
if ($firstLetter != $previousLetter) {
if($i==1){
echo "<div class="left_class">"; // open left div
}
?>
<h3 id="club-link-header"><u><?php echo $firstLetter; ?></u></h3>
<?php } ?>
<a id="club-link" href="<?php echo $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $clubs->id));?>"><br />
<?php echo $this->escape($clubs->club_name);?></a>
<?php $previousLetter = $firstLetter; ?>
<?php
if($i==25){
echo "</div>"; //close left div
echo "<div class="right_class">"; // open right div
}
if($i==50){
echo "</div>"; //close right div
}
$i++; // increment the counter variable for each loop
endforeach;
?>
The HTML:
<body>
<div id="top">
<a id="admin-link" href="/MN/public/index.php/admin/index/id/1"></a>
<div id="logged-in-as">
Hello! ric89. Logout </div>
</div>
<div id="header">
<div id="header-wrapper">
<div id="social">
<a id="fb" href="#"><img src="/MN/public/images/fb.png" /></a>
<a id="twitter" href="#"><img src="/MN/public/images/twitter.png" /></a>
</div>
<div id="nav">
<div id="nav-left">
Home
</div>
<div id="nav-middle">
<a id="clubs-link" href="/MN/public/index.php/clubs/index/id/1">Clubs</a>
</div>
<div id="nav-right">
<a id="admin-link" href="/MN/public/index.php/admin/index/id/1">Admin</a>
</div>
</div>
<div id="logo">
</div>
</div>
</div>
<div id="content">
<h1>Clubs</h1>
//database content is echo'd here, 50 items like this:
<h3 id="club-link-header"><u>5</u></h3>
<a id="club-link" href="/MN/public/index.php/club-description/index/id/1/club_id/1"><br />
5th Avenue</a>
</div>
<div id="footer">
<p id="footer-text">created & designed by Richard Knight-Gregson</p>
</div>
</body>
The CSS:
/*Content styles */
.clubs-left {
width: 450px;
}
.clubs-right {
float: right;
margin-left: 450px;
position: absolute;
width: 450px;
}
.right_class {
float: right;
width: 450px;
}
.left_class {
position: absolute;
width: 450px;
}
.clear {
clear: both;
}
Here is an image of the problem -> http://imageshack.us/photo/my-images/84/screenshot20120426at211.png/ The footer should be 100% width.
The issue is I can't float the div right without breaking the layout as the right div needs to be on top of the left in the code but doing so will break the PHP.
Any suggestions?
Thanks
Since the problem that you are describing seams to be purely cosmetic, I believe that you need to clear the float to allow the document to continue its normal rendering:
After your <div class="right_class">...</div>:
HTML
<div class="clear"></div>
CSS
.clear {clear: both;}
wouldn't something like this be more efficient?
Break up your list by alphabet to start...
var glossary=array();
var $half=(int)count($this=>clubs);
var $count=0;
foreach ($this->clubs as $clubs){
$glossary[substr($clubs->club_name, 0, 1)][] = $clubs;
}
# Start a definition list. (http://www.w3schools.com/tags/tag_dl.asp)
echo'<dl>';
foreach ($glossary as $letter => $clubs){
$count++;
$class=($count>=$half)?'float_left':'float_right';
# list all the clbs broken down by letter
echo"<dt class='$class'>$letter</dt>";
foreach ($clubs as $club)
{
echo"<dd class='$class'>
<a id='club-link' href='" . $this->url(array('controller' => 'club-description', 'action' => 'index', 'club_id' => $club->id)) . "'>
" . $this->escape($clubs->club_name) .
"</a>
</dd>";
}
}
echo '</dl>';
and the css:
dl{
width:100%;
}
.float_left{
width:49%;
float:left;
clear:left;
}
.float_right{
width:49%;
float:right;
clear:right;
}
this way after you hit the halfway point in clubs, the dt and dd elements stack on the right side, and the list will automatically balance, no matter how many clubs you have.
It turns out the footer was inside the content div and I hadn't closed the content div properly one more extra before the footer starts was all it needed! Sorry to waste your time..