I am trying to display a 'meet the team' page in a 2x5 table, working with code written by the previous web designer in Wordpress.
This is the page I am looking at - http://www.stirling-house.com/about-us/meet-the-team As I say, I want to display the pictures in a table, so it looks neater.
The code I have is -
<div id="maintext">
<h1>MEET THE TEAM</h1>
<h3>THE STIRLING HOUSE ADMINISTRATION TEAM</h3>
<?php $members =get_posts('numberposts=99&cat=4&order=ASC'); //print_r($members);
foreach ($members as $post) {
setup_postdata($post);?>
<div class="member-box">
<img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
<h3><?php echo $post->post_title;?></h3>
<h4><?php echo get('member_designation');?></h4>
Can anyone help?!
One way of doing it is by adding a counter before the foreach (for example, $n), initialize it to zero and increment it every time the loop finishes. Then, make all the odd divs float to the left and the even ones float to the right.
This is how the code would look like (more or less):
<?
$n = 0; // Counter
foreach($members as $post){
if($n % 2) $style="float:left";
else $style="float:right";
<img src="<?php echo get('member_photo');?>" alt="" style="margin:5px 7px 0 0;" />
<h3><?php echo $post->post_title;?></h3>
<h4><?php echo get('member_designation');?></h4>
If that does not work, you can try using a table layout and placing a <tr> tag after $n rows (resetting the counter every time you add a <tr>).
It is the opinion of most web designers (post-2005 or so) that <table> elements should not be used for layout/design. If you add the following CSS rule to your sites, stylesheet:
.member-box { display: inline-block; }
You will get something that looks like this: http://imgur.com/DzEkLAU
Sorry to answer indirectly, but I think this is the answer you're really looking for... ;)
Related
I have a structure of divs that are generated based on php code. Each row has 3 divs. It is generated like this:
Defining columns:
<?php
$numOfCols = 3;
$rowCount = 0;
$bootstrapColWidth = 12 / $numOfCols;
?>
First row, starting the loop and defining width:
<div class="row">
#foreach($datas as $data)
<div class="col-md-<?php echo $bootstrapColWidth; ?>">
Then there's a bunch of content.
Then, in the end, each loop adds one to rowcount, and checks if the row has ended, so we can add a new one:
<?php
$rowCount++;
if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
?>
#endforeach
Now, it all works great, the problem is that as I add different amounts of content on each div, the heights become different and ends up becoming quite ugly.
What I'm trying to do: I'm trying to check in each row which div has the biggest height, so I can apply the same height to the other two.
-I've thought of adding a id to each div that increments, problem is I don't know how many divs there will be, so I can't prepare for each outcome.
-I've tried selecting each row with $('row div'), problem is then all divs will become the same size as the biggest of all. And I want to check by row.
Sorry for the long question, and thanks for any input!
Bootstrap 4 has flexbox classes that allow you to do this with just css. Take a look at this example: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item</div>
<div class="align-self-stretch mr-3" style="background-color:lightblue">Aligned flex item<br />With<br />More<br />Lines</div>
<div class="align-self-stretch" style="background-color:lightblue">Aligned flex item</div>
</div>
I think flex-box is your solution : all into flex container will have the same height.
<div style="display:flex">
<div>
... some content
</div>
<div>
... some content
</div>
</div>
You can use .row-eq-height in Bootstrap 4
This is semi related to my last question but i have set up a filemaker foreach loop to output a group of images to accompany there names and ids, along with a checkbox.
Once checked the relating images go to another page to print, No matter how much i try i cant get the elements to fit to one page ?
I have used inline styling, a Print css stylesheet, all possible combinations with chromes inspector.
I can make it fit, once the image name is taken away, but i need this included.
include('head.php');
if (isset($_POST['img'])) {
$img = $_POST['img'];
} else {
$img = '';
echo 'error';
}
?>
<div class="container">
<div class="row" >
<?
foreach ($img as $image){
//echo '<div class="col-md-5">';
echo '<img class="" style="margin:20px 10px 10px 0px; width:45%;" src="Invoices/Photos/RC_Data_FMS/Invoices_db/Photos/'.$image.'">';
echo '<p class="centered" style="width:45%;">'.$image.'</p>';
//echo '</div>';
}
?>
</div>
</div>
Basically i'm trying to achieve an A4 portrait, with a grid of 6 images, with a margin between and the label underneath.
I tried pushing everything into a col-md-6 div, taking the <p> tags away but this didn't help.
I also tried using px opposed to %, just cant figure this one out.
The code from the previous page;
echo '<input type="checkbox" class="form-control check" id="img" name="img[]" value="'.$pic.'">';
With the $pic variable being the image name.
I think you can achieve what you want by tweaking the img height in #media print, like so:
#media print{
img{max-height:280px} //tweak this until you're happy
}
Also, don't forget the img-responsive bootstrap class - it works wonders:)
<div class="col-xs-6"> <!-- this will limit img width if img-responsive used too-->
<img class="img-responsive" src="image.jpg">
<p>Filename 1</p>
</div>
You can probably also forgo most of your inline styling and stick with bootstrap's defaults at first, then tweak later if you really need to.
http://www.bootply.com/YZkHOq0C1i
I have this loop which basically displays a block on the page with an image in it, the class gallerypic has a margin of 20px on the right, it also has the rule float:left;, the issue is every time the third div is created it starts on a new line, because the margin is pushing it there. So Ideally every third post I would like no margin, and to apply a div gallerypicright or something.
Im wondering does someone have a solution to this? Possibly an easier one that simply stops the margin from happening when its the third one? I need the margin on the other two as it creates a neat gap between the posts.
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$archive_query = new WP_Query('cat=14&showposts=14&paged=' . $paged);
$id = get_the_ID();
while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<div class="events">
<div class="gallerypic"><div class="limerickguideblockheader"><p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
</div>
<div class="gallerypiccontainer"><a href="<?php the_permalink(); ?>" >
<?php echo get_the_post_thumbnail( $id, 'gallery-thumb', $attr ); ?> </a></div>
</div>
</div>
<?php endwhile; ?>
edit: a picture paints a 1000 words, here is the link so far, with three posts...
http://limerickfc.hailstormcommerce.com/cms/?page_id=2466
A method via CSS would be even better if possible.
Cheers
Adrian
Try the below code.
<style>
.gallerypicright {
margin: 0;
}
</style>
...
<?php
$count = 0;
while ($archive_query->have_posts()) : $archive_query->the_post();
$count++;
$third_div = ($count%3 == 0) ? 'gallerypicright' : '';
?>
...
<div class="gallerypic <?php echo $third_div; ?>">
If you want a pure CSS solution, you could try using
.gallerypic:nth-child(3n + 1) {
margin:0;
}
n is a counter that goes up for every element. The counter (n) starts at 0 but the elements on the page start at 1, so the 3n + 1 means for every 3 * n + 1 elements, e.g.:
element 1 (3 * 0 + 1), 4 (3 * 1 + 1), 7 (3 * 2 + 1) etc.
This solution is only available in CSS3, so older browsers won't have it. (see: http://caniuse.com/#search=nth-child).
Note that :nth-child counts all children, so you should group the events in a div:
<div class="container">
<div class="gallerypic">...</div>
<div class="gallerypic">...</div>
<div class="gallerypic">...</div>
</div>
you have to count your post after that in loop you have to module by 3 to total no of post & apply the right class in given post such as
if ($cnt%3 == 0){ $class = 'right'}
You might try the trick of adding a balancing negative right margin on your container, so in your case, perhaps
div.events { margin-right: -20px; }
Or, if you can cope with the slightly patchy browser support (IE9+ only, better in other browsers, I think) perhaps style using nth-child:
.gallerypic:nth-child(3n+3) { margin-right: 0px; }
I have this little select code which should provide a 'zebra' even/odd rows. I don't understand how to change the css for that:
1, every other that will be listed (and not every second) should have .even css
2, if one of them clicked should be bold as well
(I could not figure out, how to merge these two issue)
Any help would be appreciated, from a beginner.
<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
?>
<ul>
<?php foreach ($query as $i => $row) { ?>
<li>
<?php if ($i)?>
<input name="checkbox_add[]" id="test_<?php echo $i ?>" type="checkbox" value="<? echo $row['id']; ?>"/>
<label for="test_<?php echo $i ?>"><?php echo $row['name']; ?></label>
</li>
<?php } ?>
</ul>
</div>
You should define a class odd or even (depends on which one you would like to have in alternating color) in your CSS.
Let's say you chose 'odd'. Then define a counter in your PHP code and check whether the remainder modulo 2 is equal to 1 -> if so add class 'odd' to the <li>.
<div id="left">
<?php
$query = $pdo->prepare('SELECT id, name FROM test1 ORDER BY name ASC');
$query->execute();
$idx = 0;
?>
<?php if ($idx % 2 == 0): ?>
<li>
<?php else: ?>
<li class="odd">
<?php endif; ?>
<?php
$idx++;
if ($i): ?>
...your <input> and <label>...
However, bolding the corresponding row on clicking it is something that you would preferrably do in Javascript, as it is a client-side event, the code responding to that belongs on the client side, too. Here is a crude solution, just to show what I mean, but it is not recommended with respect to clean separation of concerns and "unobtrusive" Javascript. Ideally you would put this in a separate Javascript file that attaches the event handler form within Javascript, this doesn't belong in the HTML if you want to keep it clean.
<input type="checkbox" onclick="this.parentNode.className='bold'" ...>
It would be easier to do it with jquery or prototype or something similar. I would do it with prototype, something like this:
$$('ul li:nth-child(odd)').invoke('addClassName', 'alt-row');
// Add class "alt-row" to even table rows
So, select all odd numbered li items, and apply proper css for it (invoke). You do the same thing with the odd list items, just apply other css
And for the bold part, simply add onClick event for every li item, and set style that will bold it, something like this:
<li onClick="this.className='bold'">Something</li>
This is an extension of a question I had yesterday.
I am trying to make a little php calculator that will show how much people can save on their phone bills if they switch to VoIP, and how much they can save with each service.
I have a form that will spit out the right amount for a monthly bill here:
http://www.nextadvisor.com/voip_services/voip_calculator.php?monthlybill=50&Submit=Submit
But now I need to integrate that with some other data and put in a table. The prices for each of the different services are in another file called "values.php". The values are:
$offer1calcsavings="24.99";
$offer2calcsavings="20.00";
$offer3calcsavings="21.95";
$offer4calcsavings="23.95";
$offer5calcsavings="19.95";
$offer6calcsavings="23.97";
$offer7calcsavings="24.99";
I want each of the seven rows of the table to have one of the offercalcsavings values subtracted from the monthlybill value.
The php code currently looks like this:
<?php $monthlybill = $_GET['monthlybill']; ?>
Your monthly bill was <?php echo "$monthlybill"; ?>
<?php
$monthybill="monthlybill";
$re=1;
$offer ='offer'.$re.'name';
$offername= ${$offer};
while($offername!=""){
$offerlo ='offer'.$re.'logo';
$offerlogo=${$offerlo};
$offerli ='offer'.$re.'link';
$offerlink=${$offerli};
$offeran ='offer'.$re.'anchor';
$offeranchor=${$offeran};
$offerst ='offer'.$re.'star1';
$offerstar=${$offerst};
$offerbot='offer'.$re.'bottomline';
$offerbottomline=${$offerbot};
$offerca ='offer'.$re.'calcsavings';
$offercalcsavings=${$offerca};
echo '<tr >
<td >
<a href="'.$offerlink.'" target="blank">
<img src="http://www.nextadvisor.com'.$offerlogo.'" alt="'.$offername.'" />
</a>
</td>
<td ><span class="rating_text">Rating:</span>
<span class="star_rating1">
<img src="http://www.nextadvisor.com'.$offerstar.'" alt="" />
</span><br />
<div style="margin-top:5px; color:#0000FF;">
Go to Site
<span style="margin:0px 7px 0px 7px;">|</span>
Review
</div> </td>
<td >'.$offercalcsavings.'</td>
</tr>';
$re=$re+1;
$offer ='offer'.$re.'name';
$offername= ${$offer};
}
?>
I want each of the seven rows of the
table to have one of the
offercalcsavings values subtracted
from the monthlybill value.
You need to do the math somewhere. Presumably you would do this before the echo statement where you output your row.
$offerwithsavings = $monthlybill - $offercalcsavings
Then just be sure to include it in your table somewhere.
<td >'.$offerwithsavings.'</td>
The real prescription for this code is an array and foreach() loop, but I thought I'd keep my answer simple for now. Arrays and foreach() loops are very powerful and relatively quick and easy to learn. You would do well to give them some in depth study.
You can include the values.php file like this:
include 'path/to/values.php';
If you put the values in values.php in an array you can easily loop through them using a foreach loop:
in values.php;
$values['1calsavings'] = 24.99;
$values['2calsavings'] = 20.00;
etc;
Then in the other file:
include 'path/to/values.php';
foreach($values as $name => $amount){
echo '<some_markup>';
echo "$name $amount";
echo '</some_markup>';
}
Egads.
Use arrays!
So:
$offercalcsavings[0] = "24.99";
$offercalcsavings[1] = "20.00";
etc. etc.
Then, you're looping the output really:
for($i = 0; $i < CONSTANT_THAT_EQUALS_7; $i++) {
echo "<html bits>";
echo $offercalcsavings[$i];
echo $offerlink[$i];
etc. etc.
}