My URL: illandeistudio
If you scroll halfway down you will see a list of categories (Accessories, dinning, lighting...)
They are currently vertical. How can I get these to display horizontally? Optimally they would be 4 per line. Below is the PHP code which places all the "categories" into a div "nelson"
Thanks! This has been hell!
.nelson {
float: left;
padding: 0 3px;
}
Then just style the padding from there. You can replace padding: 0 3px; with width: 80px; and adjust it from there if you want the columns to be even (might look better).
If you want it to be centered with 4 columns (you have 7 items so it would be 4 columns, 2 rows, and the last column would only have 1 row).... not sure why you would want it like that but its possible. You would create a around the code you wrote, create a width, and add the attribute:
style="margin: 0 auto; width: 916px;"
Then you would adjust the width of that to be the product of 7 * the width of .nelson
I'd recommend just adjusting padding though and leave the menu going horizontally. all the way across for all 7 items.
use like :
<?php if (count($this->document->shoppica_categories_arr) > 0) : ?>
<ul id="categories">
<?php $i = 0; ?>
<?php foreach ($this->document->shoppica_categories_arr as $category): ?>
<?php $i++ ?>
<li <?php if ($i % 4 == 0) : ?> class="ln"<?php endif ?>><?php echo $category->getName() ?></li>
<?php endforeach ?>
</ul>
<?php endif ?>
css file :
ul#categories li {
float: left;
}
ul#categories li.ln {
clear: left;
}
What Tallboy said. :) You may also need to set a width for the .nelson divs to get them floating correctly and lining up.
Related
I want this type of appearance enter image description here
But am getting below result
enter image description here
I want different color for each div...by using while loop am getting those four divs..Here am writing css properties for one div those are reflecting for four divs
Declare an array for the four different colos (CSS classes for the colors), e.g.
$colors = array('green', 'blue', 'red', 'yellow');
Then declare the four classes in CSS, e.g.,
.green { background-color: green; /* and other styles etc */ }
.red { background-color: red; /* and other styles etc */ }
.blue { background-color: blue; /* and other styles etc */ }
.yellow { background-color: yellow; /* and other styles etc */ }
Then in you PHP script, use some loop counter like $i to pick a color from the array:
$i=0;
foreach($testimonials as $testimonial)
{
echo '<div class="' . $colors[$i++] . '">other content</div>';
}
I hope it helps!
Set four classes And before while loop set variable $i=1;
Now
<?php echo '
<style>
.div-1{background:#186aa9;}/*blue*/
.div-2{background:#e1404f;}/*red*/
.div-3{background:#f8bc34;}/*yellow*/
.div-4{background:#9cc03c;}/*green*/
</style>';
$i=1;
while($row = mysqli_fetch_assoc($result)){echo '
<div class="col-md-6 div-'.$i.'">
<div class=" kwikmint-message">
<p class="kwikmint-message-p">"'.$row['Message'].'"</p>
</div>
<div class="mint-testi-h5">
<h5>'.$row['Name'].'<br><span class="specialization">'.$row['Specilisation'].'</span></h5>
</div>
</div>';
$i++;
}?>
I have two arrays which I use implode() on to convert into strings which are then echoed out.
Ideally i'd like the 1 value from the one string to be next to the other value in the other string, prefably nested inside a
<p></p>
Here's the code I'm using to issue a line break after every value, wrap it in a div, and float it.
<?php
echo '<div class="wrapper"><div style="text-align:left; float:left;"
class="glue">';
echo implode('<br>',$test);
echo '</div>';
echo '<div style="text-align:right; float:right;" class="glue">';
echo implode('<br>',$_POST);
echo '</div></div>';
?>
This works well for now as both divs sit next to each other within my container but it would be easier if the values were inside P tags instead so I could easily put an image in-between them.
I've added some images below to better demonstrate what I'm going for.
The first one is what I've tried and the second one is what I would like.
Is it what you want?
<style type="text/css">
p{
overflow: hidden;
}
span.left{
float: left;
}
span.right{
float: right;
}
</style>
<?php
foreach($test as $k=>$v){
echo '<p><span class="left">'.$test[$k].'</span><span class="right">'.$_POST[$k].'</span></p>';
}
That is not possible until you split the paragraph tag into 2 halves.
Try this,
.div1 {
float: left;
}
.div2 {
float:right;
}
.div2 {
float:right;
text-align: right;
}
<p>
<div class="div1">Left Text</div>
<div class="div2">Right Text</div>
</p>
if both arrays have the same length the most simple example woud look like this:
<?php
$test[0] = "a";
$test[1] = "b";
$test[2] = "c";
$test[3] = "d";
$test2[0] = 1;
$test2[1] = 2;
$test2[2] = 3;
$test2[3] = 4;
for($i=0;$i<count($test);$i++)
{
echo "<p><nobr>".$test[$i] . "</nobr> <nobr style='float:right;'>" . $test2[$i] . "</nobr></p>";
}
if you wanna test to see if it fits just paste the code here
I scan trough a folder for images by using php,
i put them in a div with the ID of images.
I want that div to scroll on the x-axis and hide everything that overflows on the y-axis.
So here's my code.
HTML and PHP:
<div id="images">
<?php
//Displaying images
$imgID = 0;
foreach($images as $image) {
echo "<img id='img".$imgID."' onClick='displayImg(".$imgID.");' src='".$image."' height='".$imgHeight."' width='".$imgWidth."' />";
$imgID++;
}
echo "<script>var maxImages = ".$imgID.";</script>";
?>
CSS:
#images {
overflow-y:hidden;
overflow-x:scroll;
height:<?php echo $imgHeight; ?>px;
border:solid 1px #c4c4c4;
align-content:flex-start;
}
#images img {
padding:5px;
cursor:pointer;
float:left;
}
I've experimented a bit, But nothing i've tried seems to work.
Your question is slightly out of context but how about something like:
http://jsfiddle.net/bassmanpaul/u9Xx6/
This goes on the assumption that you have the image widths available in php ($imgWidth) which can allow you to create a large inner container.
Failing that you may need to give us a JSFiddle to demonstrate your issue in greater detail...
Can get something working with css3 for safari and firefox but ie won't have a piece of it. I'm outputting a list of shopping categorys and sub categorys with a seperate for each list.
This is what I've got (not working so far).. Any help would be most welcomed.
<div style="float:left; width: 232px;">
<?
$rowcount = 1;
$strSql = "SELECT * FROM Category ORDER BY CategoryName ASC";
$r = $db->select($strSql);
while ($row=$db->get_row($r, 'MYSQL_ASSOC')) {
$CategoryID = $row['CategoryID'];
$CategoryName = $row['CategoryName'];
?>
<div style="width: 232px; background-color:#f2f2f2; padding: 5px; margin-top: 5px; -webkit-border-radius: 4px; border-radius: 4px; overflow:hidden; padding-left: 5px;">
<h1><a href="/<?=$colour?>/<?=$CategoryURL?>/" ><?=$CategoryName?></a></h1>
<ul>
<?
$strSql2 = "SELECT
SubCategory.SubCategoryID,
SubCategory.SubCategoryName,
SubCategory.SubCategoryURL,
SubCategory.CategoryID
FROM
SubCategory
WHERE
CategoryID = $CategoryID
ORDER BY
SubCategoryName";
// echo "<pre>$strSql</pre>";
$r2 = $db->select($strSql2);
while ($row2=$db->get_row($r2, 'MYSQL_ASSOC')) {
$SubCategoryID = $row2['SubCategoryID'];
$SubCategoryName = $row2['SubCategoryName'];
$SubCategoryURL = $row2['SubCategoryURL'];
?>
<li><?=$SubCategoryName?> (<?=$rowcount?>)</li>
<?
$rowcount++;
if ($rowcount == 35) { echo"</ul></div><div style=\"float:left; width: 232px;\"><ul>"; $rowcount = 0;}
} // end get SubCategory
?>
<? if ($rowcount == 0) { echo""; } else {echo"</ul>";} ?>
</div>
<? } // end get category list
?>
</ul> <!-- END CATEGORY UL -->
</div>
</div>
An alternative would be to use a table-based layout, which in this case I don't think would be that bad. Tables are for tabular data and catalog categories would fit well. Edit: But you'd still have to figure out your PHP logic to get this working. Derp on my part.
Alternatively, there is the Columnizer jQuery plugin to do the trick automagically but I'm not fond of having to rely on a javascript-driven solution for layout elements. Although you could trigger it for only the browsers that don't support your CSS3 method via Modernizr. Still not a huge fan of this.
Can you post the CSS3 you used that is working in other browsers? Perhaps there is an available workaround that would do the trick. I'm still a bit fuzzy on the details for your end result. I'm focusing on the CSS aspect of your issue and less on the PHP. Finding a working CSS-driven solution is obviously far easier than trying to figure out the logic to divide your categories into columns accordingly.
i am working on one project, where i need to display products from mysql table using php.
My design is like that, 5 products display in one row and so on.
So if there is 7 products in table, it should be 2 rows.
first row 5 products
second row 2 products
I am using <UL> and <LI> to display product and row like
<UL>
<li>first</li>
<li>2nd</li>
<li>3rd</li>
<li>4th</li>
<li>5th</li>
</ul>
<UL>
<li>6th</li>
<li>7th</li>
</ul>
I am wondering how to use foreach loop to get code like above.
If i use forloop with 5 increment i am unable to get products from table and display their name.
Thanks
echo '<ul>';
foreach ($yourResultSet as $index=>$data) {
echo '<li>' . YourOutput . '</li>';
if ($index % 5 == 0) {
echo "</ul><ul>";
}
}
echo '</ul>';
<ul>
<?php $i = 0; ?>
<?php while($row = mysql_fetch_array($result)): /* Used to loop through a resultset*/ ?>
echo "<li>".$row['data'].</li>";
<?php
$i++; // Increment by one every loop
if($i == 5){ // We've hit the fifth iteration
echo '</ul><ul>'; // Close the UL and open a new UL
$i = 0; // Set $i back to 0 and continue looping
}
endwhile;
?>
</ul>
Try that.
your best way of achieving this is to have your <li>'s have a specific width so that five of them fit in the parent container and that the following two or however many you have will drop to the next line.
<style>
#container {
width: 350px;
background: red;
padding:0;
margin: 0;
}
#list li
{
display: inline-block;
width: 50px;
height: 50px;
list-style-type: none;
background:blue;
margin: 2px;
padding: 0;
}
</style>
<div id="container">
<ul id="list">
<?php
while($row = mysql_fetch_array($result))
{
echo '<li>' . $row['data'] . '</li>';
}
?>
</ul>
</div>
You'll need to play with the sizes a bit but everything should work, and it you have 11 products this should do 2 rows of 5 and a third row of 1 product.