I am using codeingiter and have soms results that i am showing from a database. The results are shown using PHP as follows:
<?php
if(isset($foo)){
foreach($foo as $bar){ ?>
<ol><li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li></ol>
<?php
}
}
?>
I've also tried adding the class 'results' to the ol li.results and no luck. Have added a border and the border wraps around each result so i know my tags are in the right place.
CSS:
ol li {
border:1px solid red;
list-style-type: decimal;
}
In the reset.css i had this:
loads...of...elements including ul, ol and li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
I removed the ol, li from this and i got the numbers working but all have 1. for each result rather than 1, 2 3
These are shown as a list of addresses and i would like to have them numbered so the first one would have 1.RESULT 1, 2.RESULT 2 and so on... I've tried to use the ordered list tag and nothing seems to show up regarding numbers. i have checked in firebug and the tag is firing out for each one. Is this a css issue or the way PHP is showing the results?
Any help would be much appreciated.
You forgot the <li> tags inside the <ol> tag
<?php
if(isset($foo)){
echo '<ol>';
foreach($foo as $bar){ ?>
<li>
<div class="results">
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
</div>
</li>
<?php
}
echo '</ol>';
}
?>
Try the following
<?php if(isset($foo)): ?>
<ol>
<?php foreach($foo as $bar): ?>
<li class='results'>
<p class="name"><?php echo $bar['name']; ?></p>
<p class="address"><?php echo $bar['address']; ?></p>
<p class="address"><?php echo $bar['postcode']; ?></p>
<span><?php number_format($bar['miles'],3) ?></span> miles
<li>
<?php endforeach; ?>
</ol>
<?php endif; ?>
It's a CSS issue if the numbers are not showing. Common issue with reset stylesheets. Try adding:
list-style-type: decimal;
to your list style.
If I got it right, your <OL> and </OL> tags should stay outside the for cicle, while you should wrap your output between <LI> and </LI> inside the cicle.
Also, it's not a good practice to put DIVs inside LI elements, avoid it if you can by changing your styles.
Related
This question already has answers here:
Grid of responsive squares
(5 answers)
Closed 3 years ago.
I'm making a theme for my Omeka site in which I am calling an item and its various components using PHP. Each item is in its own div, and I have attempted to create a tile-like grid with Bootstrap. However, the divs only line up in a single vertical column. How do I make all divs line up in a row of three or four? I'm completely stumped. It works fine without the PHP (with multiple rows and manually added content) but won't work otherwise. This is what it looks like right now. And this is what I want the divs to look like:
Here is the html/php:
<?php foreach (loop('items') as $item): ?>
<div class="container">
<div class="item">
<div class="row">
<!-- attempt at square grid -->
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<div class="dummy"></div>
<div class="thumbnail purple">
Image: <?php $image = $item->Files; ?>
<?php if ($image) {
echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
} else {
echo link_to_item('<div style="background-image: url(' . img('defaultImage#2x.jpg') . ');" class="img"></div>');
}
?>
Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
<br>
</div>
</div>
</div>
</div><!-- end grid -->
And the CSS:
.dummy {
margin-top: 100%;
}
.thumbnail {
position: absolute;
top: 15px;
bottom: 0;
left: 15px;
right: 0;
text-align:center;
padding-top:calc(50% - 30px);
}
.item-item {
border: solid black 5px;
}
I'll give you a pseudo method of achieving this, harnessing array_chunk().
$chunks = array_chunk($array, 4);
foreach($chunks as $group): ?>
<div class="row">
<?php foreach($group as $element): ?>
<div class="col-md-3 col-sm-4 col-xs-6 item-item">
<?php // do your php stuff...?>
</div>
<?php endforeach; ?>
</div>
<?php endforeach; ?>
Example
I have an array of elements. I need to display all the elements on the page, grouped by two in one 'div'
like this:
<div class='row'>
<article id='1'>item 1 row 1</article>
<article id='2'>item 2 row 1</article>
</div>
<div class='row'>
<article id='3'>item 1 row 2</article>
<article id='4'>item 2 row 2</article>
</div>
This my current php and html code:
<?php if ($arg['teasers']) foreach ($arg['teasers'] as $id => $article)
{ ?>
<div class="shops_<?php echo ($article['show'])?'fair':'draft'; ?> more">
<div class="shops_title">
<?php echo $article['title']; ?>
</div>
<div class="shops_teaser" onclick="window.location='<?php echo $arg['linkbase'].'/?id='.$id ?>'">
<?php echo $article['teaser']; ?>
</div>
<?php show_button_detail(array('uri'=>$arg['linkbase'].'/?id='.$id)); ?>
</div>
<?php
} ?>
Perfect example: http://tympanus.net/codrops/category/tutorials/
Maybe you could try something like this:
/* div.more */
div.row {
display: table-row;
width: 100%; /* your parent element should specify a width for this to work */
}
/* div.more > div[class^="shops_"] */
div.row > article {
display: table-cell;
width: 50%;
}
I'm using Drupal 7 and Field Slideshow plugin. I published my slide and working. It's have a pager and that's name 'Prev' and 'Next'
I don't want text, must image. How can i do it?
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<?php print t('Prev'); ?>
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
<?php print t('Next'); ?>
</div>
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
</div>
And styles like this:
.prev {
display:inline-block;
width:20px;
height:20px;
background: transparent url('path/to/prev/image.png') no-repeat center center;
}
.next {
display:inline-block;
width:20px;
height:20px;
background: transparent url('path/to/next/image.png') no-repeat center center;
}
Or you can have something like this:
<div id="field-slideshow-<?php print $slideshow_id; ?>-controls" class="field-slideshow-controls">
<img scr="path/to/prev/image.png" alt="<?php print t('Prev'); ?>" />
<?php if (!empty($controls_pause)) : ?>
<?php print t('Play'); ?>
<?php print t('Pause'); ?>
<?php endif; ?>
<img scr="path/to/next/image.png" alt="<?php print t('Next'); ?>" />
</div>
I'm not quite sure how to go about styling this particular bit of php:
<div id="twitter-feed">
<span style="font-weight:bold;">#frshstudio</span>
<?php
include_once(ABSPATH . WPINC . '/feed.php');
$rss = fetch_feed('https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=frshstudio');
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'>
<?php echo $item->get_title(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div><!-- end twitter-feed -->
Ideally, I'd like to replace the 'FRSHStudio' before each tweet with a bullet point. Also, maybe some padding between each tweet so the feed isn't as cluttered.
Live site.
Any and all help is greatly appreciated.
To remove the FRSHStudio in each item, you could use this code :
<?php echo str_replace('FRSHStudio: ', '', $item->get_title()); ?>
Then, in css, to add bullets and some padding on each item of the list, use this :
#twitter-feed ul li {
list-style: disc;
padding-bottom: 4px;
padding-left: 10px
}
This is what I am using:
<div class="banner">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<?php else : ?>
<?php the_title(); ?>
<?php endif; ?>
<div>`
and..
#banner {
clear:both;
width:980px;
overflow: hidden;
background: #F4F5F6;
padding:12px 0;
margin: 0 0 15px 0;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
border-radius: 15px; /* future proofing */
-khtml-border-radius:15px; /* for old Konqueror browsers */
}
#banner img {display: block; margin:0 auto;}
I don't want a title displayed so that if/else is not necessary.
If there is no img / the custom field is not being used, can the div just not show? Right now if the custom field is not being used it is still showing an empty div.
SOLVED IT!!! Sorry for even posting here. Though it's not pretty, it works.
<div id="bannerHolder">
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div id="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
</div><!--banner-->
<?php else : ?>
<?php endif; ?>
</div><!--bannerholder-->
Put the if clause around the div, not inside:
<?php
if ($banner = get_post_meta($post->ID, 'banner', true))
{
echo '<div class="banner">', $banner, '</div>';
}
?>
Put the if clause encapsulating the div element and remove the else part of the php sentence.
Example:
<?php if(get_post_meta($post->ID, 'banner', true)) : ?>
<div class="banner">
<img src="<?php echo get_post_meta($post->ID, 'banner', true); ?>" />
<div>
<?php endif; ?>