I have a site with a sticky footer, which is not so sticky and I am having a hard time figuring it out.
This is the html part: html.tpl.php
<?php
?>
<!DOCTYPE html>
<head>
<?php $head; ?>
<title><?php print $head_title='Vit | Kringvarp Føroya'; ?></title>
<?php if ($default_mobile_metatags): ?>
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<?php print $styles; ?>
<?php print $scripts; ?>
<?php if ($add_html5_shim and !$add_respond_js): ?>
<?php elseif ($add_html5_shim and $add_respond_js): ?>
<?php elseif ($add_respond_js): ?>
<?php endif; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div class="container">
<?php if ($skip_link_text && $skip_link_anchor): ?>
<p id="skip-link">
<a href="#<?php print $skip_link_anchor; ?>" class="element-invisible
element-focusable"><?php print $skip_link_text; ?></a>
</p>
<?php endif; ?>
<?php print $page; ?>
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
</html>
And page.tpl.php part
<div id="navigation">
<?php print render($page['navigation']); ?>
</div>
<header class="header" id="header" role="banner">
<?php $front_page='http://kvf.fo/vit';
if ($logo): ?>
<a href="<?php print $front_page; ?>" title="<?php print
t('Heim'); ?>"
rel="home" class="header__logo" id="logo"><img src="<?php print
$logo; ?
>" alt="<?php print t('Heim'); ?>" class="header__logo-image" />
</a>
<?php endif; ?>
<?php if ($site_name || $site_slogan): ?>
<div class="header__name-and-slogan" id="name-and-slogan">
<?php if ($site_name): ?>
<h1 class="header__site-name" id="site-name">
<a href="<?php print $front_page; ?>" title="<?php print t('Heim');
?>" class="header__site-link" rel="home"><span><?php print
$site_name; ?></span></a>
</h1>
<?php endif; ?>
<?php if ($site_slogan): ?>
<div class="header__site-slogan" id="site-slogan"><?php print
$site_slogan; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php print render($page['header']); ?>
</header>
<div id="main">
<?php print render($page['content']); ?>
</div>
<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>
The css part.
html {
position: relative;
min-height: 100%;
}
body {
height: 100%;
}
.container {
margin: 0 0 125px;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
The page adress is www.kvf.fo/vit , and it seems to be working ok, but on an Ipad, the footer "sinks" halfway under the bottom of the screen, which is a bummer because the main users to the site, are Ipad users :/
Any help is much obliged!
If you want your footer to be sticky so add this property in its css
footer {
position: fixed;
}
It seems you're closing the body tag to early:
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
Related
I cannot for the life of me
figure out why my footer is showing up in the middle of my webpage. I have my #content div set to have a height of 100% and have given it a relative position; and I even added an absolute position to my footer with bottom: 0;. What am I missing? I can't figure out what is causing it to not follow the normal flow of elements in the page!
I've checked several posts with this same problem, but the suggestion is almost always what I've tried above. I did try getting rid of the position for #content and the footer and instead setting display: inline-block; for both (was suggested in another post), and that didn't do anything.
Link to my in-progress page: http://freshcardsite.thewelllovedlife.com/home-use/
HTML for the Page (starting below the header):
<div class="site-content-contain">
<div id="content" class="site-content">
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main consumer-page" role="main">
<?php
// vars
$topsection = get_field('consumer_top_image_section');
if( $topsection ): ?>
<div class="top-image" style="background-image: url(<?php echo $topsection['consumer_background_image']; ?>); background-size: cover; background-repeat: no-repeat; background-position: bottom center;">
<div class="top-section">
<div class="top-text">
<h1>Fresh Card</h1>
<p><?php echo $topsection['consumer_top_content']; ?></p>
<img src="<?php echo $topsection['consumer_top_icon']; ?>" />
</div>
</div>
</div>
<?php endif; ?>
<?php
// vars
$aboutsection = get_field('consumer_about_section');
if( $aboutsection ): ?>
<div class="about-section">
<div class="about-content">
<h2><?php echo $aboutsection['consumer_about_section_title']; ?></h2>
<p><?php echo $aboutsection['consumer_about_section_main_content']; ?></p>
</div>
<?php if($aboutsection['consumer_uses_section'] ): ?>
<div id="tabs">
<ul class="tabs">
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<li><h3><?php echo $use['consumer_use_name']; ?></h3><img src="<?php echo $use['consumer_use_icon']; ?>" /></li>
<?php endforeach; ?>
</ul>
<?php foreach($aboutsection['consumer_uses_section'] as $use): ?>
<div id="<?php echo $use['consumer_use_number']; ?>">
<p> <?php echo $use['consumer_use_information']; ?> </p>
<p> <?php echo $use['consumer_use_video']; ?</p>
<p> <?php echo
$use['consumer_second_use_video']; ?> </p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<div class="contact-section">
<div class="contact-content">
<h2>Contact Us</h2>
<?php the_field('consumer_contact_section'); ?>
</div>
</div>
<?php if (have_posts() ) : ?>
<div class="news-section">
<div class="news-content">
<h2>Awards & News</h2>
<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?>
</a></li>
<li><?php the_excerpt(__('(more…)')); ?></li>
<?php endwhile; wp_reset_postdata(); ?>
</ul>
</div>
</div>
<?php else : ?>
<?php endif; ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="
<?php esc_attr_e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
And here's my relevant CSS
html, body {
height: 100%;
}
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: absolute;
left: 0;
top: 0;
}
#content {
position: relative;
height: 100%;
min-height: 100%;
}
footer#colophon {
position: absolute;
bottom: 0;
}
Your main problem is that .consumer-page is getting a position:absolute and its messing with your elements heights
Lets try the next classes:
.consumer-page {
min-width: 100%;
margin: 0 auto;
position: initial;
left: 0;
top: 0;
}
.wrap {
padding: 0;
width: 100vw;
max-width: 100vw;
margin: 0;
}
#content {
padding: 0;
}
footer#colophon {
position: initial;
bottom: 0;
}
Hope this helps. If you run into problems, pliss coment on this answer and will happily edit
So I want to show my content showing over my image, but only slightly. So in a sense the image would look like it was partly the background of the page. I do not want my content box to stretch over the full width of the page like the image currently does however.
This is the page I am working on; http://outside.hobhob.uk/test/?portfolio=mind-the-gap-2
This is what I am aiming to have it look similar to (focusing just on how the content text box is slightly over the image): https://s32.postimg.org/ytavty67p/13340631_10154339496581336_223276410_o.jpg
Is there a way I can achieve this with maybe changing the css of the content box slightly? Maybe changing the position or z-index?
The code of the page is currently working in a typical way, I am also using Visual Composer to lay out the content in the page, so this may help me achieve this in a easier way?
<div class="pagewidth">
<div class="content single single-portfolio">
<div class="post-content">
<article id="post-<?php the_ID(); ?>" <?php post_class("post post-content-full"); ?>>
<div class="portfolio-attachment">
<?php
$pi_data = get_port_item_content(get_the_ID());
$n = 0;
the_post_thumbnail();
if ($pi_data) {
foreach ($pi_data as $content_info) {
switch ($content_info->type) {
case "image":
?>
<div class="item image"><img
src="<?php echo $content_info->url?>"/></div>
<?php
break;
case "youtube":
//check to see if the video has any options, the ? sign
$has = strstr($content_info->url, "?");
if (!$has) {
$embed = explode('"', $content_info->url);
// insert enablejsapi option
$embed[5] .= "?wmode=transparent";
$embed = implode('"', $embed);
} else {
// insert enablejsapi option
$embed = str_ireplace("&", "&", $content_info->url);
$embed = str_ireplace("?", "?wmode=transparent&", $embed);
}
// get original dimensions
$pattern = "/height=\"[0-9]*\"/";
preg_match($pattern, $embed, $matches);
$origHeight = preg_replace("/[^0-9]/", '', $matches[0]);
// compute new height
//$newHeight = $origHeight + 25;
$newHeight = $origHeight;
// adjust embed code
$pattern = "/height=\"[0-9]*\"/";
$embed = preg_replace($pattern, "height='" . $newHeight . "'", $embed);
// insert an id for the iframe
$id = '<iframe id="ytplayer' . $n . '" ';
$embed = str_ireplace("<iframe ", $id, $embed);
?>
<div class="item youtube fitvid"><?php echo $embed?></div>
<?php
break;
case "vimeo":
$embed = $content_info->url;
?>
<div class="item vimeo fitvid"><?php echo $embed?></div>
<?php
break;
}
//end switch
$n++;
} //end for each
}//end if
?>
</div>
</div></div></div>
<div class="pagewidth-single">
<div class="content single single-portfolio">
<div class="post-content">
<header class="content-headarea">
<div class="content-headarea-title">
<h1 class="post-title"><?php the_title(); ?></h1>
<ul class="portfolio-meta">
<?php $client = get_post_meta(get_the_ID(), 'client', true); ?>
<?php if (!empty($client)) : ?>
<li class="client">
<span class="portfolio-meta-heading"><?php _e('Client: ', 'framework'); ?></span>
<span><?php echo $client ?></span>
</li>
<?php endif; ?>
<?php $date = get_post_meta(get_the_ID(), 'date', true); ?>
<?php if (!empty($date)) : ?>
<li class="date">
<span class="portfolio-meta-heading"><?php _e('Date: ', 'framework'); ?></span>
<span><?php echo $date ?> </span>
</li>
<?php endif; ?>
<?php $lproj = get_post_meta(get_the_ID(), 'url', true);
if (!empty($lproj)) :
?>
<li class="launch">
<span class="portfolio-meta-heading"><?php _e('url', 'framework'); ?></span>
<a href="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>"
class="superlink"
title="<?php echo get_post_meta(get_the_ID(), 'url', true); ?>">
<?php echo get_post_meta(get_the_ID(), 'url', true); ?>
</a>
</li>
<?php endif; ?>
</ul>
</div>
</header>
<div class="blog-post">
<div class="full-post">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else:?>
<?php endif; ?>
</div>
</div>
<?php get_template_part( '/includes/share'); ?>
<?php comments_template(); ?>
<nav id="post-nav">
<div class="post-nav-inner">
<div class="nav-previous"><?php next_post_link( '%link', __( 'Next Post →', 'framework' ) ); ?></div>
<div class="nav-next"><?php previous_post_link( '%link', __( '← Previous Post', 'framework' ) ); ?></div>
<div class="clearfix"></div>
</div>
</nav>
</article>
</div>
</div>
</div>
So I am looking to start the overlay on the <header> section, from the page title onwards, while keeping the featured image as the full width background'ish half section. I want to avoid having the image basically cover the screen and so you can begin to see the content starting without needing to scroll down.
Is there a way I can achieve this with maybe changing the css of the
content box slightly? Maybe changing the position or z-index?
Yes, you can change the position pretty easily with position: relative and top: {n}px. Try adding this CSS:
div.pagewidth-single div.post-content {
position: relative;
top: -150px;
}
I have 9 posts showing up on a page. I'm only showing the featured images from the post and the images are set to a background image. I want to be able to click the images and have the image show up in a new window. I'm having a little trouble figuring this out. I want to wrap the div in an link.
This is the code I have:
<article <?php post_class('col-md-4 site-content'); ?>>
<?php if (has_post_thumbnail( $post->ID ) ): ?>
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id(
$post->ID ), 'large' );
$image = $image[0]; ?>
<?php endif; ?>
<div class="coupons-post" style="background-image: url('<?php echo
$image; ?>')">
<?php /*?><div class="entry-thumbnail">
<a href="<?php the_permalink(); ?>"><?php
the_post_thumbnail('large' , array( 'class' => 'img-responsive') ); ?></a>
</div><?php */?>
<!-- <div class="post-content">
<div class="entry-meta">
<p class="date">News / <?php the_time('n.j.Y') ?></p>
</div>
<h2 class="entry-title">
<?php the_title(); ?>
</h2>
<div class="entry-summary">
<p></p><p><?php $excerpt = get_the_excerpt(); ?>
<?php echo substr($excerpt, 0, 100); ?>...</p>
<p></p>
<a class="read-more" href="<?php the_permalink(); ?>">Read More</a>
</div>
</div>-->
</div>
</article>
I want to wrap the div "coupons-post" with the link.
Like this?
<article <?php post_class('col-md-4 site-content'); ?>>
<?php
if (has_post_thumbnail( $post->ID ) ) {
<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
$image = $image[0];
}
?>
<a href="<?= $image; ?>" target="_blank">
<div class="coupons-post" style="background-image: url('<?php echo $image; ?>')">
</div>
</a>
</article>
I added the text "MENY" next to toggle (nav-trigger). However I don't like the positioning of >MENY<, formatting/style is alright but the text needs to be more in the middle in relation to the toggle icon. They're stuck together as it is now. How do I separate them so I can adjust (raise(lower)) the text "MENY"? I keep messing it up so any guidance is much appreciated!!
How it is now (image):
How I'd like it (image):
My header php
<html <?php language_attributes(); ?> <?php thb_html_class(); ?>>
<head>
<?php thb_head_meta(); ?>
<title><?php thb_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php thb_body_start(); ?>
<div id="page">
<?php thb_header_before(); ?>
<header id="header">
<?php thb_header_start(); ?>
<div class="header-container">
<div class="wrapper">
<?php
$logo = thb_get_option('main_logo');
$logo_2x = thb_get_option('main_logo_retina');
if( !empty($logo['id']) && !empty($logo_2x['id']) ) : ?>
<?php $logo_metadata = wp_get_attachment_metadata($logo['id']); ?>
<style>
#media all and (-webkit-min-device-pixel-ratio: 1.5) {
#logo {
background-image: url('<?php echo thb_image_get_size($logo_2x['id'], 'full'); ?>');
background-size: <?php echo $logo_metadata['width']; ?>px, <?php echo $logo_metadata['height']; ?>px;
}
#logo img { visibility: hidden; }
}
</style>
<?php endif;
?>
<h1 id="logo">
<a href="<?php echo home_url(); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
<?php if( isset($logo['id']) && $logo['id'] != '' ) : ?>
<img src="<?php echo thb_image_get_size($logo['id'], 'full'); ?>" alt="">
<?php else : ?>
<?php bloginfo( 'name' ); ?>
<?php endif; ?>
</a>
</h1>
<?php thb_nav_before(); ?>
<a href="#" id="nav-trigger">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
<div class="nav-wrapper">
<nav id="main-nav" class="main-navigation primary">
<?php thb_nav_start(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<?php thb_nav_end(); ?>
</nav>
<nav id="mobile-nav" class="main-navigation primary">
<?php thb_nav_start(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
<?php thb_nav_end(); ?>
</nav>
</div>
<?php thb_nav_after(); ?>
</div>
</div>
<div class="wrapper">
HTML Code:
<a href="#" id="nav-trigger" class="thb-loaded" style="margin-top: 30.5px;">
<span style="font-family: Source Sans Pro; font-size: 16px; line-height: 1; margin-left: 5px; font-weight: 700;">MENY</span> m
</a>
Try using a negative margin-top value on the span containing the text.
First of all, my question may be unclear. I will try to explain it.
this is my html
<div class="left"><?php print $search_box; ?><?php if (!empty($logo)): ?><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" /><?php endif; ?><?php if (!empty($site_name)): ?><div id='site-name'><strong><?php print $site_name; ?></strong></div><?php endif; ?><?php if (!empty($site_slogan)): ?><div id='site-slogan'><?php print $site_slogan; ?></div><?php endif; ?></div>
looks ugly and difficult to debug, right?
so i try to indent and add newline. However, it will fails on some browser, may be IE6. The result is changed. So, What should i go, should i use another doctype?
Currently, i am using
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
You can write it this way too:
<div class="left">
<?php print $search_box; ?>
<?php if (!empty($logo)) { ?>
<a href="<?php print $base_path; ?>" title="<?php print t('Home'); ?>" rel="home">
<img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" id="logo" width="243" height="62" />
</a>
<?php } ?>
<?php if (!empty($site_name)) { ?>
<div id='site-name'>
<strong>
<?php print $site_name; ?>
</strong>
</div>
<?php } ?>
<?php if (!empty($site_slogan)) { ?>
<div id='site-slogan'><?php print $site_slogan; ?></div>
<?php } ?>
</div>
This should work in most cases, or you can use the php heredoc syntax to echo out the html stuff normally.