I have this Jsfiddle:
http://jsfiddle.net/JohnnyDevv/XQ5Xd/2/
I'm trying to get zero distance between 2 html5 navs
PHP Example:
<nav>
<?php foreach($nav_list as $id => $nav_item): ?>
<?php echo anchor(strtolower($id), $nav_item, array('class' => ($nav == $nav_item ? 'active' : ''))) ?>
</li>
<?php endforeach ?>
</nav>
<img src="<?php echo site_url('_inc/img/divider.png') ?>" width="960" height="4" alt="Divisão de Menu">
<nav>
<?php foreach($subnav_list as $ids => $subnav_item): ?>
<?php echo anchor(strtolower($ids), $subnav_item, array('class' => ($subnav == $subnav_item ? 'active' : ''))) ?>
</li>
<?php endforeach ?>
</nav>
Here's an example image of what I'm trying to accomplish:
You simply need to add display: block; to the image tag you are using to separate the nav elements. By default, images use display: inline-block; which was adding that unnecessary white space above the image.
#wrapper img {
margin: 0;
padding: 0;
display: block;
}
Hope this solves your issues! Let me know if you have any questions.
Related
On this screenshot, if you look in the North East corner, you'll find a 20% of the Ajax Load More button.
I have called it using the do_shortcode method in my template file right after I closed the loop to fetch the posts of this category.
<?php if ( have_posts() ) :
if ( is_home() && ! is_front_page() ) : ?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
$my_query = new WP_Query('cat=2,3&showposts=9');
while ( $my_query->have_posts() ) : $my_query->the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;
the_posts_navigation();
else :
get_template_part( 'template-parts/content', 'none' );
endif; ?>
<?php echo do_shortcode('[ajax_load_more container_type="div" post_type="post" offset="9" images_loaded="true"]'); ?>
How would I go about placing it in a new line?
Live demonstration at -> http://www.technobyte.org/interesting-facts/
Here is how I would mark something like that up. https://jsfiddle.net/sheriffderek/wcoyc0hf
I see that you are using PHP - but the same idea applies since PHP creates HTML.
"Put a border around it" - is the magic way to see that your floating and other styles are breaking the flow of things - and need to be addressed with clearfixes - in the case of floats / or generally just make sure things maintain their shape and that the parents of lists are expanding to hold them properly.
markup
<section class='stuff'>
<ul class='thing-list'>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
<li class='thing'>
<a href="#" class='image-wrapper link'>
<img src="https://placehold.it/800" alt="thumbnail">
</a>
</li>
</ul>
<div class='get-more'>
<button>more...</button>
</div>
</section>
styles
ul {
list-style: none;
margin: 0;
padding: 0;
}
.image-wrapper img {
display: block;
width: 100%;
height: auto;
}
.thing .link {
display: block; /* link needs to be a block here to have shape */
border: 1px solid red;
}
.thing-list {
overflow: hidden; /* should be a clearfix or use flexbox */
}
.thing-list .thing {
float: left;
max-width: 33%;
}
.get-more {
border: 1px solid blue;
text-align: center;
}
.get-more button {
display: inline-block;
}
Following is the code for displaying 4 posts in one row
<?php
$new_loop = new WP_Query( array(
'post_type' => 'article-form',
'posts_per_page' => 4 // put number of posts that you'd like to display
) );
<?php if ( $new_loop->have_posts() ) : ?>
<?php while ( $new_loop->have_posts() ) : $new_loop- >the_post(); ?>
<div class="col span_1_of_4 " id="recent">
<a href="<?php the_permalink();?>"><?php if ( has_post_thumbnail()) {
the_post_thumbnail('small-image',array('class' => 'img-responsive')); }?>
<span class="title-caption"><?php the_title(); ?></span></a>
</div>
<?php endwhile;?>
<?php else: ?>
<?php endif; ?>
<?php wp_reset_query(); ?>
i want an image slider when the screen is 480px and these 4 image post can be displayed in that slider.
This is more an HTML/JS question than a Wordpress question.
Try doing something like this:
.slider { // Create wrapper for slider
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
.slider-item img {
// Styling for when viewport is smaller than 480px;
}
#media(min-width: 480px) {
.slider-item img {
// Styling for when viewport is bigger than 480px;
}
}
<div class="slider">
// Start loop
<div class="slider-item">
// Load induvidial image here
</div>
</div>
You can add some JS later to let it all scroll and stuff.
So I am trying to understand why my divs are not floating when requested. I am wrapping the loop of the post in a div that floats but they are just stacking as they normally would when you add a new post.
My theme is totally blank btw so there is no conflict in css.
/* My Code */
body{
background-color: #fafafa;
font-family: 'Open Sans', sans-serif;
}
#container{
margin: 0 auto;
width: 1000px;
max-width: 90%;
background-color: #ffffff;
overflow:auto;
height:auto;
}
.blogPost{
float:left;
background-color: #D9E8EC;
display:inline-block;
width: 300px;
}
this is from my index page where the posts are listing.
<div class="blogPost">
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
</div>
I'm a bit confused by this, do you just want to do a loop displaying posts next to each other? If so the code would be:
<?php
if( have_posts() ) :
while( have_posts() ) : the_post();
?>
<div class="blogPost">
<?php
get_template_part( 'entry' );
comments_template();
?>
</div>
<?php
endwhile;
endif;
?>
I am doing a lot of modifications on a wordpress theme for a friend. I have having a lot of issues with the footer staying at the bottom of the page, instead of keeps on moving up and leaving whitespace.
URL:
http://design.jarethmusic.com/about/
HTML (footer.php)
<?php global $woo_options; ?>
<?php
$total = 4;
if ( isset( $woo_options['woo_footer_sidebars'] ) ) { $total = $woo_options['woo_footer_sidebars']; }
if ( ( woo_active_sidebar( 'footer-1' ) ||
woo_active_sidebar( 'footer-2' ) ||
woo_active_sidebar( 'footer-3' ) ||
woo_active_sidebar( 'footer-4' ) ) && $total > 0 ) {
?>
<div id="footer-widgets">
<div class="col-full col-<?php echo $total; ?>">
<?php $i = 0; while ( $i < $total ) { $i++; ?>
<?php if ( woo_active_sidebar( 'footer-' . $i ) ) { ?>
<div class="block footer-widget-<?php echo $i; ?>">
<?php woo_sidebar( 'footer-' . $i ); ?>
</div>
<?php } ?>
<?php } ?>
<div class="fix"></div>
</div>
</div><!-- /#footer-widgets -->
<?php } ?>
<div class="push"></div>
<div id="footer">
<div class="col-full">
<div id="copyright" class="col-left">
<?php if( isset( $woo_options['woo_footer_left'] ) && $woo_options['woo_footer_left'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_left_text'] );
} else { ?>
<p><?php bloginfo(); ?> © <?php echo date( 'Y' ); ?>. <?php _e( 'All Rights Reserved.', 'woothemes' ); ?></p>
<?php } ?>
</div>
<div id="credit" class="col-right">
<?php if( isset( $woo_options['woo_footer_right'] ) && $woo_options['woo_footer_right'] == 'true' ) {
echo stripslashes( $woo_options['woo_footer_right_text'] );
} else { ?>
<p><?php _e( 'Powered by' ); ?> WordPress and WooThemes. <?php _e( 'Designed and edited by' ); ?> John Brown.</p>
<?php } ?>
</div></div>
</div><!-- /#footer -->
</div><!-- /#wrapper -->
<?php wp_footer(); ?>
<?php woo_foot(); ?>
</body>
</html>
CSS
#footer{padding: 30px 0 20px; background: url(images/bg-ripple-footer.png) repeat top left; color:#999;}
#footer p {}
#footer a { color: #ffffff; }
#footer #credit img{vertical-align:middle;}
#footer #credit span{display:none;}
#footer-widgets { margin-bottom: -5px; background: url(images/bg-ripple-footer-widgets.png) repeat top left; padding:10px 0; height:60px; }
#footer-widgets .block { padding:20px 10px 0 10px; float:left; }
#footer-widgets .col-1 .block { width:100%; padding-left:0; }
#footer-widgets .col-2 .block { width:420px; padding-left: 20px; }
#footer-widgets .col-3 .block { width:270px; padding-left: 16px; }
#footer-widgets .col-4 .block { width:200px; padding-left: 10px; }
I hope I can get to the bottom of this with your help.
John
No add this in your CSS:
#content {
min-height: 700px;
}
You need a minimum height of your content area to "push" the footer down to the bottom of the page. If the content area is a small portion inside of the wrapper, the footer will not be at the bottom of the page.
Side note: A very useful tool is using the Chrome browser. It has a built-in firebug-like extension that lets you inspect elements of a webpage while updating it at the same time.
Managed to fix my issue by following this small tutorial:
http://mystrd.at/modern-clean-css-sticky-footer/
Credits to mfreitas for the link.
Also, regards to everyone else who helped me in this. Thanks
John
Use position: fixed;
Update your code with this CSS:
#footer {position: fixed;}
Use position: absolute; in your css for the footer
I am working on simplifying the design of my WordPress log. All I want for the metadata that appears above a post or a post's title is it to appear in a single, fairly nondescript line.
The pseudo-code would look like this:
$date $category $edit
What it actually looks like is here: http://johnlaudun.org/20120828-isaac-at-9pm/
The CSS for this line is:
.entry-meta {
font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
font-size: .75em;
text-transform: uppercase;
}
.entry-meta p {
white-space: nowrap;
}
.entry-meta a {text-decoration: none;}
.entry-meta .date {color: #000;}
.cat-links a {color: #436EEE;}
.edit-link a {color: orange;}
And the PHP is:
<div class="entry-meta">
<p>
<?php if ( ! is_page() ) : ?>
<a href="<?php the_permalink(); ?>">
<?php the_time( 'Y M d' ); ?></a>
<?php endif; ?>
<span class="cat-links">
<?php the_category( ', ' ); ?></span>
<span class="edit-link">
<?php edit_post_link( __( 'Edit', 'chunk' ) ); ?></span>
</p>
</div>
It generates the following output to a browser:
<div class="entry-meta">
<p>
<a href="http://johnlaudun.org/20120828-isaac-at-9pm/">
2012 Aug 28</a>
<span class="cat-links">
status</span>
<span class="edit-link">
<a class="post-edit-link" href="http://johnlaudun.org/wordpress/wp-admin/post.php?post=5052&action=edit" title="Edit Post">Edit</a></span>
</p>
</div>
What am I missing that is inserting some sort of line break into what should be, from my point of view, a fairly simply output?
Take a look at style.css, line 191 :
.cat-links, .tag-links {
display: block;
}
Try with : display: inline;