?
Solved

Is it possible to set a fixed header and menu in twenty eleven child theme?

Posted on 2014-03-21
25
Medium Priority
?
718 Views
Last Modified: 2014-03-24
I have a twenty eleven child theme and want to make the header and menu bar static.  Is it possible?  Here is code to header.php and style.css

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.myzooanimalhospital.com/favicon.ico" />
<meta name="google-site-verification" content="1Tlou_jJ_bo5fkAZnLRMiwV5OgDFK5-KQEs60oOdVGA" />

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

<div id="page-background"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg" class="stretch"></div>

<div id="page" class="hfeed">	
        <div id="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.jpg"></a>
        </div>
        
        <div id="animals"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/animals.jpg"></div>
        
        <div id="heading-right">
        
            <div id="mynav">
                <ul>
                    <li><a href="http://www.myzooanimalhospital.com/blog/">Blog</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="https://www.facebook.com/pages/My-Zoo-Animal-Hospital-in-Columbia-MO/191168317592066" target="_blank">Facebook</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="http://www.myzooanimalhospital.com/contact/">Contact</a></li>
                </ul>
            </div>
            
            <div id="phone">573-875-3647</div>	
            
        </div>		

        <nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>

            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #access -->

	<div id="main">
	</div>

Open in new window


@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
	min-width:1048px;
}

#page {
	background-color:transparent;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding:0;
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
}

#animals {
	position:absolute;
	top:0; left:0;
	margin-left:173px;
	margin-top: 3px;
}

#heading-right {
	float:right;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
	background: transparent; 
	box-shadow: none;	
	margin: 0 auto;
	margin-top: -7px;
	/*border: 1px solid #fff;*/
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#page-banner {
	margin: 10px auto 10px;
}

#wrapper {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #2c3539;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    width: 80%;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 10px;
}

Open in new window

0
Comment
Question by:leachj
  • 11
  • 8
  • 6
25 Comments
 
LVL 7

Expert Comment

by:rgranlund
ID: 39945983
Yes but you will need to set an header attribute within the CSS.  Can you please supply a url?
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 39945999
So, you want the header and menu to always be at the top of the page, even though you have scrolled down?  The page scrolls up under the header?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:leachj
ID: 39946003
That is correct.  At this point the home page as you can see would not benefit.  However the blog page for instance would.
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 39946028
Place all of the elements of the header and the nav into a new and unique dive.  Give it an id of = "static-header" or something.  In your css file place:
#static-header {
position:fixed;
z-index:1000;
}

Then let me know if that works.
0
 

Author Comment

by:leachj
ID: 39946047
Do this in the header.php?
0
 
LVL 14

Assisted Solution

by:Dzynit
Dzynit earned 1000 total points
ID: 39946190
Make a backup copy of your header.php and your stylesheet that you posted in your question first. Then try this for the header.php code:

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.myzooanimalhospital.com/favicon.ico" />
<meta name="google-site-verification" content="1Tlou_jJ_bo5fkAZnLRMiwV5OgDFK5-KQEs60oOdVGA" />

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

<div id="page-background"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg" class="stretch"></div>

<div id="page" class="hfeed">	
<div id="header">
        <div id="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.jpg"></a>
        </div>
        
        <div id="animals"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/animals.jpg"></div>
        
        <div id="heading-right">
        
            <div id="mynav">
                <ul>
                    <li><a href="http://www.myzooanimalhospital.com/blog/">Blog</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="https://www.facebook.com/pages/My-Zoo-Animal-Hospital-in-Columbia-MO/191168317592066" target="_blank">Facebook</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="http://www.myzooanimalhospital.com/contact/">Contact</a></li>
                </ul>
            </div>
            
            <div id="phone">573-875-3647</div>	
            
        </div>		

        <nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>

            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #access -->
</div>
	<div id="main">
	</div>
                                  

Open in new window


This in place of your stylesheet code:

@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
	min-width:1048px;
}

#page {
	background-color:transparent;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding:0;
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
}

#animals {
	position:absolute;
	top:0; left:0;
	margin-left:173px;
	margin-top: 3px;
}

#heading-right {
	float:right;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
	background: transparent; 
	box-shadow: none;	
	margin: 0 auto;
	margin-top: -7px;
	/*border: 1px solid #fff;*/
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#page-banner {
	margin: 10px auto 10px;
}

#wrapper {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #2c3539;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    width: 80%;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 10px;
}
                                  
#header {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
   }                                  

Open in new window


I copied and edit both your codes and pasted them here.
0
 

Author Comment

by:leachj
ID: 39946232
That put the top on the bottom.  I left it in place so you can have a looksee.
seen better on blog page.  www.myzooanimalhospital.com/blog
0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946241
I'm sorry, in the stylesheet change that at the very end from:
#header {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
   }        

Open in new window


to:

#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
   }        

Open in new window

0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946247
You should add that z-index that rgrandlund showed also.

#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
   }       

Open in new window

0
 

Author Comment

by:leachj
ID: 39946250
Closer but not quite..   Have a look.
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 39946264
You did not place the nave inside of the div.  Also, you have the sidebar in the div also.
0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946267
I think this might do it:
#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
    background-color: #ffffff;
   } 

Open in new window

0
 

Author Comment

by:leachj
ID: 39946283
Nope....that whited out the menu bar.   I changed it back.

rgranlund,
can you elaborate?
0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946310
The div is correct - it has the wp_nav inside it and the sidebar is not inside that. Let's try setting some more z-index:

#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
    background-color: #ffffff;  
   }
#access { z-index: 1001; }
#main { z-index: 1; }

Open in new window

0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946313
It's giving me a little trouble on live edit testing because when I open my css editor, the nav menu comes to the front correctly. Not sure why that is, but that makes it more difficult to get it right first try.
0
 
LVL 7

Accepted Solution

by:
rgranlund earned 1000 total points
ID: 39946319
#header css, add background-color:#ffffff;

Line 540 in css:
#access {
    background: linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)!important;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
position:relative;
}

Try that and let me know
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 39946331
Also, do what Dzynit suggested with the CSS.
0
 

Author Comment

by:leachj
ID: 39946334
dzynit,
whited out menu bar again.  I changed it.  Got it centered again by using auto for left.

#header {
    position: fixed; 
    top: 0;
    left: auto;
    z-index:100000;
}

Open in new window

0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946341
This also needs added to bump the main content section on initial page load, but you might need to fuss with the number to get it where you want:

#main { margin-top: 190px; }
0
 
LVL 14

Expert Comment

by:Dzynit
ID: 39946354
Did you edit the #access line 540 that rgranlund suggested? Do that and also put back the white background on the #header, but leave it for a bit for us to look at.
0
 

Author Comment

by:leachj
ID: 39946366
Here is what is in place right now for style.css  .....

@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
	min-width:1048px;
}

#page {
	background-color:transparent;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding:0;
	margin-top: 200px;
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
}

#animals {
	position:absolute;
	top:0; left:0;
	margin-left:173px;
	margin-top: 3px;
}

#heading-right {
	float:right;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
    background: linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)!important;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
position:relative;
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#page-banner {
	margin: 10px auto 10px;
}

#wrapper {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #2c3539;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    width: 80%;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 10px;
}
                                  
#header {
    position: fixed; 
    top: 0;
    left: auto;
    background-color: #ffffff;
    z-index:1000;
}

Open in new window

0
 

Author Comment

by:leachj
ID: 39950172
Ok...  worked on this over the week end.  First off, thanks to both of you for your help.  You got me pointed down the path.  I will split points.  Got it working, pretty much.  I would like to figure out how to keep the background static, but a single image wasn't used for it.  That will be the topic of another post though.  Here is what it looks like now.  

www.myzooanimalhospital.com  and  www.myzooanimalhospital.com/blog

I used a plugin to float the sidebar widgets up and down the page after getting everything to scroll ok.  Here are the changes to style.css and header.php.  added some divs in the appropriate pages also.

style.css changes only

#page {
	background-color: #fff;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding_top: 0px;
	
}

#animals {
	position:absolute;
	background-color: #fff;
	top:0; left:0;
	margin-left:164px;
	margin-top: 0px;
	width: 835px;
	height: 163px;
}

#heading-right {
	margin-right: 10px;
	position:relative;
}

#access {
   background: transparent; 
	background: url("images/footer-bg.jpg") repeat-x scroll 0 0 #040404;
	color: #ffffff;
	box-shadow: none;
	margin: 0 auto;
	margin-top: -7px;
	/* border: 1px solid #fff; */
}

#page-banner {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
	
}

#wrapper {
	border: 7px solid #2c3539;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	margin-top: 0px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
	padding-top: 40px;
}

.single #primary,
.blog #primary,
.archive #primary {
    height: auto;
    width: 80%;
    padding-top: 40px;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 195px;
    padding-top: 0px;
    
}
                                  
#header {
    z-index:1000;
    
   }
   
#wrappera {
    position:fixed;
    width: 1000px;
    z-index:1000;
   }

#wrapper-lower {
    padding-top: 138px;
   
   }

#primary {
	padding-top: 180px;
}

#sbwrapper {  
    width: 140px; 
    padding-left: 40px;
    margin-left: 818px; 
    display:block;  
}
   

Open in new window


header.php changes only

<div id="wrappera" class="hfeed">
    <div id="header"> 

       


</div><!-- #wrappera -->

Open in new window

0
 

Author Comment

by:leachj
ID: 39950177
Here is entire files...

style.css

@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
	
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
		
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
    min-width:1048px; 
 
}

#page {
	background-color: #fff;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding_top: 0px;
	
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
		
}

#animals {
	position:absolute;
	background-color: #fff;
	top:0; left:0;
	margin-left:164px;
	margin-top: 0px;
	width: 835px;
	height: 163px;
}

#heading-right {
	margin-right: 10px;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
   background: transparent; 
	background: url("images/footer-bg.jpg") repeat-x scroll 0 0 #040404;
	color: #ffffff;
	box-shadow: none;
	margin: 0 auto;
	margin-top: -7px;
	/* border: 1px solid #fff; */
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
	
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
	
}

#page-banner {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
	
}

#wrapper {
	border: 7px solid #2c3539;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	margin-top: 0px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
	padding-top: 40px;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #A0A3A8;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    height: auto;
    width: 80%;
    padding-top: 40px;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 195px;
    padding-top: 0px;
    
}
                                  
#header {
    z-index:1000;
    
   }

#wrappera {
    position:fixed;
    width: 1000px;
    z-index:1000;
   }

#wrapper-lower {
    padding-top: 138px;
   
   }

#primary {
	padding-top: 180px;
}

#sbwrapper {  
    width: 140px; 
    padding-left: 40px;
    margin-left: 818px; 
    display:block;  
}  

Open in new window


header.php

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.myzooanimalhospital.com/favicon.ico" />
<meta name="google-site-verification" content="1Tlou_jJ_bo5fkAZnLRMiwV5OgDFK5-KQEs60oOdVGA" />

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

<div id="page-background"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg" class="stretch"></div>

<div id="page" class="hfeed">	

<div id="wrappera" class="hfeed">
    <div id="header"> 

        <div id="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.jpg"></a>
        </div>
        
        <div id="animals"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/animals.jpg"></div>
        
        <div id="heading-right">
       
            <div id="mynav">
                <ul>
                    <li><a href="http://www.myzooanimalhospital.com/blog/">Blog</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="https://www.facebook.com/pages/My-Zoo-Animal-Hospital-in-Columbia-MO/191168317592066" target="_blank">Facebook</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="http://www.myzooanimalhospital.com/contact/">Contact</a></li>
                </ul>
            </div>
            
            <div id="phone">573-875-3647</div>	
            
        </div>		


        <nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>

            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #access -->

</div><!-- #header -->

</div><!-- #wrappera -->

	<div id="main">
	</div>

Open in new window

#page {
	background-color: #fff;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding_top: 0px;
	
}

#animals {
	position:absolute;
	background-color: #fff;
	top:0; left:0;
	margin-left:164px;
	margin-top: 0px;
	width: 835px;
	height: 163px;
}

#heading-right {
	margin-right: 10px;
	position:relative;
}

#access {
   background: transparent; 
	background: url("images/footer-bg.jpg") repeat-x scroll 0 0 #040404;
	color: #ffffff;
	box-shadow: none;
	margin: 0 auto;
	margin-top: -7px;
	/* border: 1px solid #fff; */
}

#page-banner {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
	
}

#wrapper {
	border: 7px solid #2c3539;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	margin-top: 0px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
	padding-top: 40px;
}

.single #primary,
.blog #primary,
.archive #primary {
    height: auto;
    width: 80%;
    padding-top: 40px;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 195px;
    padding-top: 0px;
    
}
                                  
#header {
    z-index:1000;
    
   }
   
#wrappera {
    position:fixed;
    width: 1000px;
    z-index:1000;
   }

#wrapper-lower {
    padding-top: 138px;
   
   }

#primary {
	padding-top: 180px;
}

#sbwrapper {  
    width: 140px; 
    padding-left: 40px;
    margin-left: 818px; 
    display:block;  
}
   

Open in new window

<div id="wrappera" class="hfeed">
    <div id="header"> 

       


</div><!-- #wrappera -->

Open in new window

0
 

Author Closing Comment

by:leachj
ID: 39950189
Although neither was the exact solution, it forced me to closely scrutinize how the elements function together.  I was able to produce working pages that I envisioned.

Thanks!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

While Plesk offers many potential benefits to website administrators, including compatibility with Windows Server and other leading technologies, the company has also been working to differentiate it from other control panels for content management…
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question