I have a small HTML problem with this code:
<div id="primary">
<div id="content" role="main">
<div class="astro"><img class="astro" src="<?php echo get_template_directory_uri() . '/images/astro.png'; ?>" alt="Astro" />
</div>
<div class="planet"><img class="planet" src="<?php echo get_template_directory_uri() . '/images/planet.png'; ?>" alt="Planet" />
</div>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h1 class="entry-title"><?php echo $page_data->post_title; ?></h1>
<div class="entry-content"><?php echo $page_data->post_excerpt; ?>
Read More...
</div>
</article>
<div id="tour-center">
<h1 class="entry-title">Tour Our Center</h1>
</div>
<div id="news-section-title">
<h1 class="entry-title"><?php echo get_the_title(75); ?></h1>
<div class="hr"></div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
<div class="news">
<div class="rss-news">
<a href="#"><img src="<?php echo get_template_directory_uri() . '/images/rss.png'; ?>" alt="RSS" />
</a>
</div>
</div>
</div><!-- #content -->
</div><!-- #primary -->
I've deleted some PHP code in between the divs so that the HTML is more visible. The problem is that the content div stops right after the news-section-title div and I can't figure it out why. It should extend until the end of the document, where the closing div is. You can view the code live on this website.
just add this style to your content div
#content {
float:left;
}
div's won't wrap floated elements unless you use some kind of clearfix solution. Try adding overflow: hidden to the style of your content div.
Related
I'm using bootstrap 3 modal,the design I have to do is shown below
My code is:
<div class="row fr-flags">
<?php foreach ($language as $lang): ?>
<div class="col-xs-3">
<div class="row fr-flag">
<a class ="close-fr-popup" href="<?php echo $lang['link']; ?>">
<img alt="<?php echo $lang['location']; ?>" src="<?php echo $lang['flag']; ?>">
</a>
</div>
<div class="row fr-text">
<a class="dont close-fr-popup" href="<?php echo $lang['link']; ?>">
<?php echo $lang['location']; ?>
</a>
</div>
</div>
<?php endforeach;?>
</div>
What I get is 4 by 3 columns but not the vertical alignment I'm after,and I get the text not centered below the flag, basically I'm missing some margins but every time I fix something, something else gets broken or on a different screen size.
Im working on a wordpress page, want to display the content of posts in a specific layout, it work well, but when I add another post, the posts "dos" and "tres", appears inside the post "uno", instead of on his real parent the "nested" div. any clues?
<div class="grid">
<div class="post principal">
<!--show data-->
</div>
<div class="nested">
<?php if($count_post>1){?> <!--if there is more post fill div with data-->
<div class="post uno">
<!--show data-->
</div>
<?php }else{?>
<div class="post uno">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<!--show data-->
</div>
<?php }else{?>
<div class="post dos">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<!--show data-->
</div>
<?php }else{?>
<div class="post tres">
<!--dont show anything but keep the div-->
</div>
<?php } ?>
</div> <!--end nested-->
</div> <!--end grid-->
here it is all the code, the wierd thing is that lets say I have two posts in the array and all is correctly displayed, but when I add another the post "dos" and "tres" changes parent
<?php $the_query = new WP_Query( 'posts_per_page=7' );?>
<!--Obtener la cantidad de post-->
<?php $count_post = $the_query->post_count;?>
<div class="grid">
<div class="post principal">
<!--Obtener la id del post-->
<?php $post_id = $the_query->posts[0]->ID;?>
<!--Obtener la id de la imagen-->
<?php $thumbnail_id = get_post_thumbnail_id($post_id);?>
<!--Obtener source de la imagen-->
<?php $img = wp_get_attachment_image_src( $thumbnail_id, 'full');?>
<img id="img_prin" src="<?php echo $img[0] ?>" alt="">
<a href="<?php echo get_permalink($the_query->posts[0]);?>">
<h2>
<?php echo $the_query->posts[0]->post_name;?>
</h2>
</a>
<?php $content = get_post_field('post_content', $post_id);?>
<p>
<?php echo $content;?>
</p>
</div>
<div class="nested">
<?php if($count_post>1){?>
<div class="post uno">
<?php $post_id1 = $the_query->posts[1]->ID;?>
<?php $thumbnail_id1 = get_post_thumbnail_id($post_id1);?>
<div class="img_post">
<?php $img1 = wp_get_attachment_image_src( $thumbnail_id1);?>
<img src="<?php echo $img1[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[1]->post_name;?>
</h5>
<?php $full_post1 = get_post_field('post_content', $post_id1);?>
<?php echo $excerpt1 = substr($full_post1,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post uno"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>2){?>
<div class="post dos">
<?php $post_id2 = $the_query->posts[2]->ID;?>
<?php $thumbnail_id2 = get_post_thumbnail_id($post_id2);?>
<?php $img2 = wp_get_attachment_image_src( $thumbnail_id2); >
<div class="img_post">
<img src="<?php echo $img2[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[2]->post_name;?>
</h5>
<?php $full_post2 = get_post_field('post_content', $post_id2);?>
<?php echo $excerpt2 = substr($full_post2,0,50).'...';?> <!--EXCERPT-->
</div>
</div>
<?php }else{?>
<div class="post dos"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
<?php if($count_post>3){?>
<div class="post tres">
<?php $post_id3 = $the_query->posts[3]->ID;?>
<?php $thumbnail_id3 = get_post_thumbnail_id($post_id3);?>
<?php $img3 = wp_get_attachment_image_src( $thumbnail_id3);>
<div class="img_post">
<img src="<?php echo $img3[0] ?>" alt="">
</div>
<div class="cont">
<h5>
<?php echo $the_query->posts[3]->post_name;?>
</h5>
<?php $full_post3 = get_post_field('post_content', $post_id3);?>
<?php echo $excerpt3 = substr($full_post3,0,50).'...';?>
</div>
</div>
<?php }else{?>
<div class="post tres"><div class="img_post"></div><div class="cont"></div>
</div><?php } ?>
</div>
<?php wp_reset_postdata(); ?>
</div>
I'm trying to build an image gallery but it's showing some weird behavior. In my case the first row is populated by the 3 images but in second row 2 columns are skipped and one is populated by image and same with the 3rd row.
HTML Code :
<div class="container gallery-container">
<p class="page-description text-center">Snaps by attendies</p>
<div class="tz-gallery">
<div class="row">
<?php if($images): ?>
<?php foreach($images as $Image) : ?>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="<?php echo Image['path'];?>">
<img src="<?php echo Image['path'];?>" alt="Benches">
</a>
<p><?php echo Image['description']; ?></p>
</div>
<?php endforeach; ?>
<?php else: ?>
No images yet uploaded!
<?php endif; ?>
</div>
</div>
</div>
If you're using bootstrap try this code:
<div class="container">
<div class="card-columns">
<?php if(isset($images)) { ?>
<?php foreach($images as $Image) { ?>
<div class="card">
<a href="<?php echo $Image['path'];?>">
<img class="card-img-top" src="<?php echo $Image['path']; ?>" alt="Card image cap">
</a>
<div class="card-body">
<h5 class="card-title"><?php echo $Image['description']; ?></h5>
</div>
</div>
<?php } ?>
<?php } else { ?>
No images yet uploaded!
<?php } ?>
</div>
</div>
give height to image
<img class="card-img-top" src="<?php echo $Image['path']; ?>" style="height: 300px;" alt="Card image cap"> </a>
I have problem with container. I have in container news and if one news tile is bigger it going into footer.
Like this:
image here: container not working correctly
I didnt find any working resultion
My code:
<?php
$db = mysqli_query($con, "SELECT * FROM gallery") or trigger_error("Vigane päring: " . mysqli_error($con));
?>
<div class="gallery">
<div class="restaurant-full-width block-events row">
<div class="container-fluid block-events" style="width: 1230px!important;">
<div class="content">
<div class="wrap">
<div id="main" role="main" style="min-height:1200px!important;">
<h1 class="clearfix"><?php echo $lang['koikuudised']; ?></h1>
<ul id="tiles">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<li>
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<div class="brown">
<p><?php echo $gallery['gallery_name']; ?></p>
</div>
</figcaption>
</figure>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
For this you need to add cleafix div before closing the block
<div class="container-fluid block-events" style="width: 1230px!important;">
<div class="content">
<div class="wrap">
<div id="main" role="main" style="min-height:1200px!important;">
<h1 class="clearfix"><?php echo $lang['koikuudised']; ?></h1>
<ul id="tiles">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<li>
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<div class="brown">
<p><?php echo $gallery['gallery_name']; ?></p>
</div>
</figcaption>
</figure>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
Or you can add clear:both css inline
<div class="container-fluid block-events" style="width: 1230px!important;">
<div class="content">
<div class="wrap">
<div id="main" role="main" style="min-height:1200px!important;">
<h1 class="clearfix"><?php echo $lang['koikuudised']; ?></h1>
<ul id="tiles">
<?php while($gallery = mysqli_fetch_array($db)) {
?>
<li>
<figure class="effect-marley">
<a title="<?php echo $gallery['gallery_thumbnail']; ?>" data-lightbox="gallery-popup" href="<?php echo $CONF['installation_path'] . $gallery['gallery_thumbnail']; ?>">
<img src="<?php echo $CONF['installation_path'] . 'system/timthumb.php?src=' . $CONF['installation_path'] . $gallery['gallery_thumbnail'] . '&h=350&zc=1'; ?>" alt="<?php echo $gallery['gallery_name']; ?>" />
</a>
<figcaption>
<div class="brown">
<p><?php echo $gallery['gallery_name']; ?></p>
</div>
</figcaption>
</figure>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
I'm using the col-md-6 class in bootstrap to arrange my content into two 50% columns.
Here is a demonstration of how it looks and how I want it to look. The one on the left is how it looks and the one on the right is how I want it to look:
The titles seem to align fine, but the rest of the content does not.
Also, for some reason, the third title is lagging on the bottom instead of aligning to the fourth title (I have no idea why).
Code:
<div class="container">
<div class="row">
<?php
while ($query->have_posts())
{
$query->the_post();
?>
<div class="col-md-6">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
</a>
<p><br /><?php the_excerpt(); ?><p>
<div class="alert alert-dismissible alert-info">
<h3>Free trial available?</h3>
<p><?php the_field('free'); ?></p>
</div>
</div>
<?php
}
?>
</div>
</div>
<div class="container">
<?php
$i=0;
while ($query->have_posts())
{
if($i%2==0)
echo '<div class="row">';
$query->the_post();
?>
<div class="col-md-6" >
<div style="height:600px">
<h2><?php the_title(); ?></h2>
<a href="<?php the_permalink(); ?>">
<?php
if ( has_post_thumbnail() ) {
echo '<p>';
the_post_thumbnail("small");
echo '</p>';
}
?>
</a>
<p><br /><?php the_excerpt(); ?><p>
</div>
<div class="alert alert-dismissible alert-info">
<h3>Free trial available?</h3>
<p><?php the_field('free'); ?></p>
</div>
</div>
<?php
if($i%2!=0)
echo '</div>';
$i++;
}
?>
</div>
Do it like this:
/* CSS used here will be applied after bootstrap.css */
.content1{
background-color:red;
}
.content2{
background-color:blue;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6 content1">
<h1> CONTENT</h1><h1>
<p>xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div>
<div class="col-md-6 content2">
<h1> CONTENT</h1><h1>
<p>xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxx</p>
</h1></div>
</div>
</div>