I have this code to show my images from a folder, but the problem is that it shows the images vertically (there are 9000 images) so the scrolling is ending.
I would like to know if it's possible to make the images horizontally?
The code I use:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<title>Show images in folder</title>
<style type="text/css">
body {
margin: 0 auto 20px;
padding: 0;
background: #acacac;
text-align: center;
}
td {
padding: 0 0 50px;
text-align: center;
font: 9px sans-serif;
}
table {
width: 100%;
}
img {
display: block;
margin: 20px auto 10px;
max-width: 900px;
outline: none;
}
img:active {
max-width: 100%;
}
a:focus {
outline: none;
}
</style>
</head>
<body>
<?php
$folder = 'album1584/';
$filetype = '*.*';
$files = glob($folder.$filetype);
$count = count($files);
$sortedArray = array();
for ($i=0; $i<count($files); $i++) {
$sortedArray[date ('YmdHis', filemtime($files[$i]))] = $files[$i];
}
krsort($sortedArray);
echo '<table>';
foreach ($sortedArray as &$filename) {
#echo '<br>' . $filename;
echo '<tr><td>';
echo '<a name="'.$filename.'" href="#'.$filename.'"><img src="'.$filename.'" /></a>';
echo substr($filename,strlen($folder),strpos($filename, '.')-strlen($folder));
echo '</td></tr>';
}
echo '</table>';
?>
</body>
</html>
Images are listed vertically because they are contained in individual rows of the table. Also, in your CSS you set them to display as a block.
Remove display: block for images and don't put them in a table.
Also, don't display 9000 images at once. Use pagination.
try changing display: block; to display: inline-block; by styles for img tag.
EDIT:
Ok i think I know where the problem may be. You put each image in a separate table row so try to put more in one row or do not use table for that but simple container with the css change I gave you.
Related
I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
I noticed that float not working in mpdf.
In pure html, code below work fine,
Help be appreciate,
Thanks
<?php
$html = '
<html>
<head>
<style>
.section_left {
float : left;
width: 40%;
}
.section_right {
float : right;
width: 40%;
}
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: '.$font_taille_corps.'pt;
border-collapse:collapse;
border: 2px solid grey;
}
#customers tr {
background-color: #d7dce1;
border-top: 1px solid #fff;
height:30px;
}
</style> </head>
<body>';
$section_left = "<table id='customers' style='page-break-inside: avoid; ' class='section_left' ><tr><td>Hello world</td></tr></table>" ;
$section_right = "<table id='customers' style='page-break-inside: avoid; ' class='section_right' ><tr><td>Some others word</td></tr></table>" ;
//I don't want to put table in div, because MPDF slip data in 2 pages
$html.= $section_left.$section_right;
define('_MPDF_PATH','mpdf/');
include("mpdf/mpdf.php");
$mpdf=new mPDF('c','A4','','',20,15,50,25,10,5);
$mpdf->WriteHTML($html);
$mpdf->Output("test.pdf", "I");
exit;
[enter image description here]
When printing, this is result, not I whant
1
Floating for tables is not supported in mPDF.
For mPDF, I'd recommend using a single table with the two "subtables" as its cells (either as child table elements or as plain row/column combinations).
See https://mpdf.github.io/css-stylesheets/supported-css.html in mPDF documentation.
Good Day,
I am working on a table that will display data from MySQL using PHP which is pretty much working. My goal is to display this as a simple Identification Card using the data I have from MySQL.
I would consider myself a rookie when it comes to CSS and I need to understand why my display is not going as I wanted.
I did some research online and found this
http://jsfiddle.net/gajjuthechamp/cbEDJ/1/
It is working and I got the display that I wanted but for some reason the first column is shrinking. I tried changing the row width to 50% unfortunately it is doing the same thing. Kindly see image and my code below.
CSS Display Table Row Side by Side
<style>
table {
width: 100%;
}
table tr {
display: inline
}
table tr:nth-child(odd) {
position: relative;
}
table tr:nth-child(odd) td {
position: absolute;
top: 100%;
left: 0;
}
table tr:nth-child(even) {
display: block;
width: 50%;
margin-left: 50%;
}
</style>
I also tried changing the values from top, left, margin-left, and width but first still shrinks. Could no wrap also cause this issue? Any info or suggestion is highly appreciated.
#EdCottrell
I finally got it working thanks a lot for the advised. I use div and it automatically work as I wanted it to be.
CSS for div
<style>
body {
margin: 0;
}
div#card:nth-child(odd) {
width: 50%;
background: lightblue;
display: inline-block;
}
div#card:nth-child(even) {
width: 50%;
background: orange;
display: inline-block;
float: left;
}
.parent {
font-size: 0;
margin: 0;
}
.font {
font-size: 16px;
}
</style>
HTML for div
<div id="card">
<center><b>EMPLOYEE INFORMATION CARD</b></center>
<br><b>Name: <?php echo $row ['EMPLOYEE_NAME']; ?></b>
<br><b>Address:</b> <?php echo $row ['EMPLOYEE_ADDRESS']; ?>
<br><b>Date of Birth:</b> <?php echo $row ['BIRTHDATE']; ?>
<br><b>Polling Place:</b> <?php echo $row ['POLLING_PLACE']; ?>
<br><b>Precint No:</b> <?php echo $row ['PRECINT_NUMBER']; ?>
<br><b>Cluster No:</b> <?php echo $row ['CLUSTER_NUMBER']; ?>
</div>
I created a custom attribute with 10 options ( mix10, mix20 .... mix100). What I am trying to do is when I select mix10, to get "mix10" as a custom sticker on product thumbnail image. I have no clue how to add this custom attribute as a small CSS on the thumbnail image of products.
First of all your going to have to look at z-index the styling property and then you're going to need to get the attribute in relation to the image.
Create a simple div over your product image
<div id="mix-sticker" class="mix-sticker_<?php echo $_product->getAttributecode()?>">
<img YOUR PRODUCT IMAGE/>
</div>
Then for your CSS styling you'd need to do something similar to
#mix-sticker {
z-index:500;
width: 400px;
height: 400px;
}
.mix-sticker_1 {
background:url(../images/mix1.png) top left no-repeat;
}
Let's assume you want to put this sticker on the thumbnails in your category listing. Open up /app/design/frontend/[YOURPACKAGE]/[YOURTHEME]/template/catalog/product/list.phtml and find the section that outputs your thumbnail images. It will likely look something like:
<li>
<a>
<img />
<a>
...
</li>
What you will need to do is insert some code right inside the <a> link:
<?php $_product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
<div class="sticker">
<?php if($_product->getData('mix')=='mix10'){echo '<span class="mix10">'.$this->__('Mix10').'</span>'; }
elseif($_product->getData('mix')=='mix20'){echo '<span class="mix20">'.$this->__('Mix20').'</span>'; }
elseif ...
?>
</div>
Added all your options as elseif statements.
Then, in your CSS file, add styling for those stickers. That file will likely be located at /skin/frontend/[YOURPACKAGE]/[YOURTHEME]/css/styles.css:
.sticker {
position: absolute;
left: -5px;
top: -5px;
}
.sticker > span {
font-size: 0;
text-indent: -77777px;
width: 75px; /*image size*/
height: 75px; /*image size*/
background: url(../images/mix10.png) no-repeat left top; /*image location*/
display: block;
}
.sticker > span.mix20 {background: url(../images/mix20.png) no-repeat left top; margin: 1px 0 0 1px}
...
Add styles for all the sticker options you used in your PHTML file and then make sure your images are loaded to the server.
I am having a hard time applying CSS to some pagination links. I would like the links to show horizontally at the bottom of the page, centered:
1 2 3 > >>
Right now with the CSS, they show vertically, centered, and near the top of the page:
1
2
3
>
>>
What sort of CSS can I apply to the "pages" class in order to get these links displayed as I would like?
Thanks in advance,
John
if ($currentpage > 1) {
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=1&find={$_SESSION['find']}' class='links'><<</a></div> ";
$prevpage = $currentpage - 1;
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage&find={$_SESSION['find']}' class='links'><</a></div> ";
} // end if
for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) {
if (($x > 0) && ($x <= $totalpages)) {
if ($x == $currentpage) {
echo " <div class='pages'>[<b>$x</b>] </div>";
} else {
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$x&find={$_SESSION['find']}' class='links'>$x</a></div> ";
} // end else
} // end if
} // end for
if ($currentpage != $totalpages) {
$nextpage = $currentpage + 1;
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage&find={$_SESSION['find']}' class='links'>></a></div> ";
echo " <div class='pages'><a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages&find={$_SESSION['find']}' class='links'>>></a></div> ";
} // end if
The CSS:
.pages
{
text-align: center;
margin-top: 10px;
margin-bottom:0px;
padding:0px;
font-family: Arial, Helvetica, sans-serif ;
}
a.links:link {
color: #000000; text-decoration: none;
text-align:center;
margin-left:8px;
margin-bottom:0px;
padding:2px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
}
Two things:
You need to put an entity reference in for the anchor text. That means > instead of >; and
You can put the links in a row in multiple ways, including making them display: inline or if you want more control over margins use float: left although this will have other affects on your layout.
For example, this is the sort of navigation you should be aiming for:
<div id="nav">
1
2
3
>
>>
</div>
with:
#nav { overflow: hidden; }
#nav a { display: block; float: left; margin: 4px 8px; }
#nav a:hover { background: #CCC; color: white; }
The HTML is minimal and to the point. Prefer making anchors (<a>) display: block instead of putting them in a <div> because this way they will be clickable anywhere within the box, not just on the number/symbol text. Larger target areas are better.