Forums

Alexâ„¢

aaaaargh I'm really annoyed...
I just started work on my wordpress blog (finally) and no sooner had I inserted the header I was having to troubleshoot. It seems when I end my header div like so: <div id="header"></div> the header won't show up, at all. if i end the div tag like this though ><div/> its shows up, but when I validated it it failed, so i changed the div tag end to the correct and it validated fine but didn't show my header... bummer :shock:

Below is the code:
HTML

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" <?php language_attributes(); ?>>

<head profile=\"http://gmpg.org/xfn/11\">

	<meta http-equiv=\"Content-Type\" content=\"<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>\" />
	<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
	<meta name=\"generator\" content=\"WordPress <?php bloginfo('version'); ?>\" /> <!-- leave this for stats -->
	<meta name=\"description\" content=\"Welcome to Alex Rogahn's personal blog where he will share web design and development tips he knows and learns with the world, and will soon be taking freelance work\"/>
	<meta name=\"author\" content=\"Alex Rogahn\"/>
	<meta name=\"keywords\" content=\"alex, rogahn, freelance, web, design, development, blog, tutorials, mac, book, apple, tech, purple, dark, geek\"/>
	<link rel=\"stylesheet\" href=\"<?php bloginfo('stylesheet_url'); ?>\" type=\"text/css\" media=\"screen\" />
	<link rel=\"alternate\" type=\"application/rss+xml\" title=\"<?php bloginfo('name'); ?> RSS Feed\" href=\"<?php bloginfo('rss2_url'); ?>\" />
	<link rel=\"pingback\" href=\"<?php bloginfo('pingback_url'); ?>\" />
	<?php wp_head(); ?>
	
</head>

<body>

<div id=\"header\"></div> and <div id=\"header\"><div/>

CSS

/*  
Theme Name: Alex Rogahn
Theme URI: http://alexrogahn.com/
Description: Theme of Alex Rogahn's personal blog
Version: 1.0
Author: Alex Rogahn
Author URI: http://alexrogahn.com/
*/

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100% }
q:before, q:after { content:''}
a { text-decoration:none }

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
* a { position:relative } /* Gets links displaying over a PNG background */
a img { border:none } /* Gets rid of IE's blue borders */

body {
background: #232323;
font-family: Arial, Helvetica, sans-serif;
font-size: 62.5%;
}

#header {
background: url(images/header.png) repeat-x;
}

I'd really appreciate it if some one would help me out :P

cybershot

a div tag by itself is empty. Even if you give it a background color. You have to give it a width and height for it to show up. Even if you put a background image in it won't show up without a width and height

so you should only have

<div id="header"></div>

this is wrong <div />

so ad width:300px; height: 300px; to your header style. Where 300px is the width and height of your header.png

#header { background: url(images/header.png) repeat-x; width: 300px; height: 300px; }

Alexâ„¢

omg I cant believe I missed that I really should brush up on my css :lol: ...

treehouse : what would you like to learn today?

Forums

>:( styling problem