Thu, 2010-07-22 02:25
Hello, this is my website. This is the design I'm going for (very quickly done mock-up in Photoshop!). I've managed to get the footer blue color done pretty easily so let's ignore that unless someone asks.
Now for the header, here is the CSS for the dark blue stripe:
#headerbluebar { background:#003466; }
and here is the header.php code (notice the #headerbluebar is right under the body tag and closes right before the page div at the bottom):
<!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() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="icon" href="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/favicon.ico" /> <link rel="shortcut icon" href="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/favicon.ico" /> <?php wp_head(); ?> </head> <body> <div id="headerbluebar"> <div id="head" class="clearfloat"> <div class="clearfloat"> <div id="logo" class="left"> <a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/logo.png" width="960px" height="75px" alt="" /></a> <div id="tagline"><?php bloginfo('description'); ?></div> </div> <!-- Comment out right side banner <div class="right"> <img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/banners/wide.jpg" alt="" width="468px" height="60px" /> </div> ---> </div> <div id="navbar" class="clearfloat"> <ul id="page-bar" class="left clearfloat"> <li><a href="<?php echo get_option('home'); ?>/">Home</a></li> <?php wp_list_pages('sort_column=menu_order&title_li='); ?> </ul> <!-- Original location of the search form at the end of the navigation bar <?php include (TEMPLATEPATH . '/searchform.php'); ?> --> </div> </div> <!-- headerbluebar --> </div> <div id="page" class="clearfloat">
I need to add in the golden and white "stripes" but can't figure out where they go. The opening body tag is in the header.php with the closing body tag in the footer.php, so I can't figure out how to make just a "container" and have it contain the entire website so I can then just add the bars completely outside of the header and footer mess.
Any ideas?
Thank you!
Thu, 2010-07-22 20:49
#1
Just add the container inside
Just add the container inside the body tags.
<body> <div id="container"> ... </div> </body>
Thu, 2010-07-22 22:29
#2
I can get a bright red (my
I can get a bright red (my favorite choice of "did this change anything?") container to show up when I put the container immediately after the body tag. Then when I try to put another container inside that, say a div id called "green," nothing shows up.