and this is the code in my header
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Emerson Star
* @since EmersonStar 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" />
<title>Emerson Star</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' ); ?>" />
<link rel="icon" type="image/png" href="http://emersonstar.com/wp-content/uploads/2013/07/fav.png">
<link rel="stylesheet" type="text/css" href="http://www.emersonstar.com/lightbox/css/lightbox.css">
<script src="http://www.emersonstar.com/lightbox/js/jquery-1.7.2.min.js"></script>
<script src="http://www.emersonstar.com/lightbox/js/lightbox.js"></script>
<!--[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="box-shadow">
<div id="bgwrap">
<div id="page" class="hfeed">
<div id="headerContainer">
<div id="header">
<h1><a href="http://www.emersonstar.com"><img src="http://www.emersonstar.com/header.jpg" alt="Emerson Star" /></a></h1>
</div>
<div id="socialMedia">
<ul>
<li><a href="http://www.facebook.com/EmersonStar"><img src="http://www.emersonstar.com/social/facebook.png" /></a></li>
<li><a href="http://www.twitter.com/emersonstarband"><img src="http://www.emersonstar.com/social/twitter.png" /></a></li>
<li><a href="http://www.youtube.com/emersonstarband"><img src="http://www.emersonstar.com/social/youtube.png" /></a></li>
<li><a href="http://emersonstar.bandcamp.com/"><img src="http://www.emersonstar.com/social/bandcamp.png" /></a></li>
</ul>
</div>
</div>
<div id="main">
Looks like you have some mark-up errors:
http://validator.w3.org/check?uri=http%3A%2F%2Femersonstar.com%2Fvisual%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Are you aware that your changes to a default theme will be lost when WP is updated? It’s recommended to use a Child Theme for those kinds of changes – http://codex.wordpress.org/Child_Themes
I did copy everything to a child theme, but I coded the website before I moved it to WordPress and tried to fit it into the template (this was my first time using WordPress), thus all the markup errors. And I don’t really know PHP well enough.
Anyway, that’s a fantastic resource. I’m sure fixing all of that will fix my problems. Thanks a lot!
I still have a few errors left, but I don’t think that’s why the header is functioning properly. Would it be easier for me to just build a theme of my own? Maybe that will be my project to learn PHP.
It’s actually that the main section of your page is on top of the header – putting a clear here fixes it:
#main {
box-shadow: 0 0 8px #888888;
clear: both;
height: 100%;
margin-top: -45px;
min-height: 100%;
padding: 0 0 30px;
}
Ahhh, you are correct. I made the code super convoluted in order to try to get a box shadow on there. I have to just take a different approach at getting it because (as you can see), it’s now broken up very strangely. Back to the drawing board.
