I got a problem with 2 out of 4 webpages on my WP site.
I got a whitespace below my footer. I've tried with position: fixed; and bottom: 0;.. But its not working.
Im kind of stuck right now.
PHP Code
<?php
/* Template Name: Contact_page */
get_header(); /* HÄMTA HEADER */
?>
<?php
$args = array( 'post_type' => 'employe', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
?>
<section class="contact_section">
<article>
<?php the_content(); ?>
<?php the_post_thumbnail();?>
</article>
</section>
<?php
endwhile;
?>
<?php
get_footer(); /* HÄMTA FOOTER */
?>
Here is the css code for the contact page
.contact_section{
margin: auto;
max-width: 60%;
margin-top: 40px;
}
.contact_section article {
margin-top: 20px;
width: 60%;
margin:auto;
}
.contact_section p {
float: left;
font-size: 1.8em;
}
.contact_section img{
margin-left: 20px;
}
CSS for footer
footer {
clear: both;
text-align: center;
bottom: 0;
background-color: #444444;
height: 200px;
padding-top: 30px;
padding-bottom: 10px;
}
You need to position the footer to absolute and give the body tag a padding of 200px at the bottom, like this:
body {
/* 200px for the footer and 30px for the padding body */
padding-bottom: 230px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 200px;
}
Related
I'm creating a theme for my wordpress. I'm trying to add a top menu, but the h1 is restricting the menu from being on the same line: I want them to be on the same line.
This is the HTML/PHP:
<header>
<h1 class='title'><?php the_title(); ?></h1>
<?php wp_nav_menu(
array(
'theme_location' => 'top-menu',
'menu_class' => 'topmenu'
)
);?>
</header>
And this is the CSS:
.title {
font-size: 1.5em;
font-weight: bold;
margin: 0;
}
header {
width: 100%;
padding: 25px;
padding-left: 20%;
padding-right: 20%;
}
.topmenu {
list-style-type: none;
float: right;
margin: 0;
padding: 0;
}
.topmenu li {
display: inline;
}
Thank you in advance!
Use this in your CSS
h1 {
display: inline-block;
}
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I am converting an HTML to pdf file using dompdf. It is working fine. But the problem is that I need to have page margin for all the pages except the first page. The first page should have an image covering the whole page. But now the margin is coming for all pages including the first one.
I am not able to disable margin for the first page. Any help is greatly appreciated. Thanks in advance.
Below is my css
<style type="text/css">
body { margin: 0px; }
#page { margin: 50px; }
#header {
position: fixed;
left: 0px;
top: -52px;
height: 50px;
border-bottom: 2px solid #797979;
margin: 0;
}
#footer {
position: fixed;
left: 0px;
bottom: -52px;
height: 50px;
border-top: 2px solid #797979;
margin: 0;
}
#footer .page:after { content: counter(page); }
.firstpage {
position: absolute;
page-break-after: always;
top: -50px;
width: 100%;
margin: 0;
}
.otherpages{ margin: 0; }
</style>
And here's my html
<div class="firstpage">
<img src="pdf-bg.jpg" style="width:100%; height:auto;/>
</div>
<div id="header">
<p><?php echo date("F j, Y"); ?></p>
</div>
<div id="footer">
<p class="page">Page <?php $PAGE_NUM ?></p>
</div>
<div class="otherpages">
some content
</div>
Try this,
#page { margin: 50px 0; }
.firstpage {
position: absolute;
page-break-after: always;
top: -50px; // compensating for #page top margin
width: 100%;
margin: 0;
}
.otherpages{ margin: 0 50px; }
I'm trying to make page of posts basing on the example from wordpress codex.
I am using a beautiful WP theme (Radcliffe) and have no success in combining it with mentioned example.
The page I've created works, indeed, but posts are overlapped, one on another. Below it there is a lot of white space and, in the end, the footer at the very bottom of this page.
My page looks like that for now:
<?php get_header(); ?>
<div class="content">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'content', get_post_format() );
wp_reset_postdata();
endwhile;
endif;
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'category_name' => 'testy',
'paged' => $paged
);
$list_of_posts = new WP_Query( $args );
?>
<?php if ( $list_of_posts->have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>
<?php // Display content of posts ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<div class="posts">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$total_post_count = wp_count_posts();
$published_post_count = $total_post_count->publish;
$total_pages = ceil( $published_post_count / $posts_per_page );
if ( "1" < $paged ) : ?>
<div class="page-title section small-padding">
<h4 class="section-inner"><?php printf( __('Page %s of %s', 'radcliffe'), $paged, $wp_query->max_num_pages ); ?></h4>
</div>
<div class="clear"></div>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php get_template_part( 'content', get_post_format() ); ?>
</div>
<?php endwhile; ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<div class="archive-nav">
<?php echo get_next_posts_link( '« ' . __('Older posts', 'radcliffe')); ?>
<?php echo get_previous_posts_link( __('Newer posts', 'radcliffe') . ' »'); ?>
<div class="clear"></div>
</div>
<?php endif; ?>
<?php endif; ?>
</div>
</div>
<?php get_footer(); ?>
could somebody please show me my mistake?
this the css for the page content, maybe someone could take a look?
I still think the problem is somewhere in php code, I haven't touch the css yet since I've installed this theme.
.post { position: relative; }
.posts .post.has-featured-image { min-height: 266px; }
/* featured media */
.featured-media {
position: relative;
display: block;
width: 100%;
max-height: 682px;
}
a.featured-media:hover { opacity: 0.75; }
.featured-media > img {
visibility: hidden;
display: block;
margin: 0 auto;
}
.media-caption-container {
position: absolute;
bottom: 5%;
right: 5%;
left: 5%;
text-align: center;
}
.media-caption {
display: inline-block;
padding: 9px 12px;
border-radius: 3px;
background: #444;
background: rgba(17,17,17,0.5);
font-size: 0.8em;
line-height: 120%;
font-weight: 400;
font-style: italic;
color: #fff;
}
.media-caption:hover { background-color: rgba(17,17,17,0.75); }
/* post header */
.post-header { display: block; }
a.post-header { position: static; }
a.featured-media + a.post-header { position: absolute; }
a.post-header {
background: #BFBFBF;
background: rgba(17,17,17,0.35);
bottom: 0;
left: 0;
right: 0;
color: #FFF;
padding-left: 10px;
padding-right: 10px;
}
a.post-header:hover {
background: #333;
background: rgba(17,17,17,0.75);
color: #FFF;
}
.post.no-featured-image a.post-header { position: static; }
.post.no-featured-image a.post-header:hover { background: #333; }
a.post-header:hover .post-title { color: #CA2017; }
.post-meta-top {
text-transform: uppercase;
color: #FFF;
font-size: 0.9em;
letter-spacing: 1px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
.post-meta-top .sep {
color: #CCC;
margin: 0px 5px;
font-weight: 400;
}
a.post-header .post-meta-top .sep {
color: #fff;
color: rgba(255,255,255,0.5);
text-shadow: none;
}
.sticky .post-meta-top { display: block; }
.post-title {
font-family: 'Abril Fatface', serif;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
a.post-header .post-title {
max-width: 90%;
margin-left: auto;
margin-right: auto;
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
I am having a strange issue with the website I am working on. For some reason, divs are nesting inside of other divs. This messes up my formatting and it driving me nuts. The problem page is here: http://www.thecadencegrp.com/our-books/page/2
If you scroll down to the bottom of the page, you can see the footer is messed up. I cannot seem to fix it!
Here is the code:
<?php
/*
Template Name: Template Page
*/
?>
<?php get_header(); ?>
<style>
.middler_title{
width:1000px;
margin:20px auto 0 auto;
}
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
#footer { width: 960px; margin: 0 auto; display: block; clear: both;}
.middler_title_row {
float:left;
width:780px;
margin-top:20px;
margin-left: 0;
margin-bottom: 40px;
margin-top: 40px;
}
.middler_title_row img{
float:left;
display:inline;
margin-bottom:20px;
margin-right:20px;
padding:0;
margin-left: 0;
}
.middler_title_row h1{
font-size:30px;
}
.middler_title_row h2{
font-size:16px;
margin-top:-38px;
}
.middler_title_row h3{
font-size:20px;
margin-top:0px;
}
.middler_title_row h4{
font-size:20px;
font-weight:normal;
}
.middler_title_row a{
text-decoration:none;
color:#005ECF;
}
h3.author-name
{
padding-top: 0px;
padding-bottom: 20px;
}
#book-navigation
{
width: 240px;
margin: 20px auto;
}
#book-nav-right
{
float: right;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
text-align: left;
}
#book-nav-left
{
float: left;
width: 120px;
margin-top:20px;
margin-bottom:20px;
padding:0;
font-size: 20px;
}
</style>
<?php
global $more;
$more=0;
?>
<div id="main-wrap"> <!-- ######################################## -->
<div id="titles-wrapper"> <!-- ######################################## -->
<div class="middler_title">
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
'cat' => 1,
'paged' => $paged
);
query_posts($args);
query_posts('post_type=books&order=DESC&posts_per_page=10&paged='.$paged);
while (have_posts()) : the_post(); ?>
<div class="middler_title_row">
<?php $bookcover = get_the_post_thumbnail($page->ID, 'bookcover'); ?>
<?php echo $bookcover; ?>
<h1><?php the_title(); ?></h1>
<?php
$meta_values = get_post_meta($post->ID, 'subtitle', true);
?>
<h4><?php echo $meta_values; ?></h4>
<?php
$meta_values2 = get_post_meta($post->ID, 'author', true);
?>
<h3 class="author-name"><?php echo $meta_values2 ; ?></h3>
<?php
$meta_values11 = get_post_meta($post->ID, 'what_cadence_has_done_to_help_this_book', true);
?>
<?php
$meta_values3 = get_post_meta($post->ID, 'overview', true);
?>
<?php
$meta_values4 = get_post_meta($post->ID, 'read-more', true);
if(!$meta_values4){
$strtitle = get_the_title();
$title=explode(' ',$strtitle);
$title=implode('-',$title);
if(count($title)<1){
$title=strtolower($strtitle);
}else{
$title=strtolower($title);
}
$meta_values4 = get_bloginfo('wpurl').'/Books/'.$title;
}
?>
<p><?php echo $meta_values11 ?></p>
<p><?php echo substr($meta_values3,0,340); ?> ...READ MORE</p>
</div>
<?php endwhile; ?>
<div id="book-navigation">
<div id="book-nav-right"><?php next_posts_link('NEXT >>', $the_query->max_num_pages) ?></div>
<div id="book-nav-left"><?php previous_posts_link('<< PREVIOUS') ?></div>
</div>
</div>
</div> <!-- ######################################## -->
</div> <!-- ######################################## -->
<div id="footer">
<?php get_footer(); ?>
</div>
if you watch the source of the html in the page you wrote, you will see that there is a
after you
also each middler_title_row you print has a that is not even open.
just open the page in firefox and press Ctrl+U to see the source and you will see a red line of , this is one of your problems
the other problem is the coming after the
you need to straight up you html to be valid first before you try to solve this in the css
You have 2 divs with the id = footer. I'd say your problem isn't a mysterious div bug or the css. I'd say your mark up needs some review first of all. Try looking into selectors being ok, and then that every div is closed properly. After that, take a look at the footer. If you want the footer to be stuck in place at the bottom of the place, take a look at something called "Sticky footer". You can accomplish this with some css tricks.
<div id="footer">
<div class="clear"></div>
<div id="footer">
<div class="thirdpage">
<br>
<a href="https://www.facebook.com/thecadencegroup">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/fb1-300x82.png" width="90">
</a>
<br>
<a href="https://twitter.com/thecadencegrp">
<img src="http://www.thecadencegrp.com/wp-content/uploads/2013/05/tw1-300x65.png" width="113">
</a>
<br><br>
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;"><iframe name="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" id="easyXDM_IN_Lib_li_gen_1384155259314_0_provider" src="http://platform.linkedin.com/js/xdrpc.html?v=0.0.1196-RC1.31125-1408#xdm_e=http%3A%2F%2Fwww.thecadencegrp.com&xdm_c=li_gen_1384155259314_0&xdm_p=1#target=li_gen_1384155259314_0&width=600&height=400&mode=wrapper" frameborder="0" style="width: 106px; height: 20px; display: inline-block;"></iframe></span></span><script type="IN/FollowCompany+init" data-id="3323727" data-counter="right"></script>
<br><br>
<h5>© The Cadence Group. All Rights Reserved.</h5>
</div>
<div class="thirdpage">
</div>
<div class="thirdpage">
<p>The Cadence Group<br>
212 Marengo Avenue<br>
Suite 2S<br>
Forest Park, IL 60130<br>
708.689.0908<br>
services#thecadencegrp.com
</p></div>
</div><!-- /#footer -->
</div>
your footer div is located in titles-wrapper div by this style:
#titles-wrapper
{
margin-left: 0;
overflow: hidden;
margin-left: 80px;
}
you can put out footer from this or set margin-left: 0px; in #titles-wrapper style.
if all the divs are set and tidy, so the </div> that i marked cause all the problems, just find it and eliminate it! :D
usually after the </html> you shouldn't have any other tag
the other things that you have to check is why your footer is in titles-wrapper, it shouldn't be , because as you can see in the picture </div> <!--/wrapper--> is parent of your footer, so consequently your footer will move ahead like titles-wrapper, just bring your footer out of your titles-wrapper and everything should be okey
I think your HTML have a problem, but you can remove margin-left form #titles-wrapper and set margin-left to .middler_title
here is CSS:
#titles-wrapper {
margin-left: 0;
overflow: hidden;
margin-left: 0; /* removed */
}
.middler_title {
width: 1000px;
margin: 20px auto 0 auto;
margin-left: 80px; /* added */
}
the footer section is in the #titles-wrapper so when you set margin to #titles-wrapper it will move footer to the right. there is another ways but this is the simplest.
image is here