I’m in the process of converting an HTML/CSS theme I made into Wordpress. This is my first time converting to Wordpress, I’m just trying to do something basic.
I noticed in Chrome, after I put in a PHP command, the header seems to have been pushed down on the page. But when I look in Firefox and IE it looks fine.
And here it is live: www.seelooh.com
Looking to see if anyone can possibly see the problem, here is the CSS and HTML:
index.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<LINK href="<?php bloginfo('stylesheet_url'); ?>"/style.css" rel="stylesheet" type="text/css">
<?php wp_head(); ?>
</head>
<body>
<div id="header"> <!-- Begin Page Header OUTSIDE of the Wrapper Div -->
<center><h1>Seelooh Designs</h1></center>
<center><h2><?php bloginfo('description'); ?></h2></center>
<ul id="nav">
<?php wp_list_pages('title_li='); ?>
</ul>
</div> <!-- End Header Div Outside of wrapper Div -->
<div id="wrapper"> <!-- Begin Wrapper Div to hold content -->
<div id="mainContent">
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div id="postclass">
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
<p class="authordate">posted by <?php the_author();?> on <?php the_date(); ?></p>
<img src="<?php echo bloginfo('template_directory') . '/images/postimage.jpg'; ?>"
<p><?php the_content('read more...'); ?></p>
<div id="split"></div> <!-- Content Divider -->
</div> <!-- End Post class-->
<br/>
<?php endwhile; ?>
<?php else : ?>
<p>I'm not sure what your looking for</p>
<?php endif; ?>
<h2> </h2>
</div> <!-- End Main Content -->
<div id="sideBar">
<h2>Advertisements</h2>
<img src="<?php echo bloginfo('template_directory') . '/images/ad.jpg'; ?>"
<img src="http://www.sitepoint.com/forums/images/ad.jpg" />
<img src="http://www.sitepoint.com/forums/images/ad.jpg" />
<img src="http://www.sitepoint.com/forums/images/ad.jpg" />
<div id="split2"></div> <!-- Side Bar Divider -->
<h2>Follow me</h2>
<b>Do you social media? Follow me on Twitter!</b>
<p>@cluongoatl</p>
</div> <!-- End Sidebar -->
</div> <!-- End Wrapper Div For Content Holder -->
</body>
</html>
CSS
/*
Theme Name: Greenblog
Theme URI: http://seelooh.com
Author: Christopher Luongo
Author URI: http://seelooh.com
Description: Greenblog is a custom HTML/CSS theme by Chris Luongo, converted to Wordpress for his joy, not yours!
License: Private
License URI: license.txt
Tags: personal, theme
*/
/*
-------------------------------------------------------------- */
* {
margin: 0;
padding: 0;
}
body {
background-color: #f6f4de;
color: #1B1C1E;
font-family: Verdana, Geneva, sans-serif
}
#header {
background-image: url('images/header.jpg');
height: 200px;
}
#wrapper {
width: 960px;
height: auto;
margin-right: auto;
margin-left: auto;
padding-top: 5px;
}
#mainContent {
float: left;
width: 625px;
height: 100%;
background-color: #9d9c8a;
margin-right: 5px;
padding: 0 5px 0 5px;
}
#sideBar {
float: right;
width: 310px;
height: 100%;
background-color: #9d9c8a;
text-align: center;
padding: 0 5px 0 5px;
}
p {
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
color: #1B1C1E;
text-indent: 25px;
}
p.authordate {
font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 2em;
text-indent: 5px;
}
h1 {
color: #596365;
font-size: 44px;
}
a {
color: #596365;
font-size: 14px;
text-decoration: none;
}
a:hover {
color: #fff;
}
h3 {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
color: #000;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
margin-top: 80px;
}
#nav li {
display: inline;
padding-right: 30px;
}
#nav a {
text-decoration: none;
font-family: Cambria, serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.3em;
color: #596365;
}
#nav a:hover {
text-decoration: none;
font-family: Cambria, serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.3em;
color: #000;
border-bottom: 1px dotted rgb(102,102,102);
}
#split {
background-image: url(images/split.jpg);
height: 1px;
width: 500px;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
margin-top: 3px;
}
#split2 {
background-image: url(images/split.jpg);
height: 1px;
width: 300px;
margin-left: auto;
margin-right: auto;
padding-top: 3px;
margin-top: 3px;
}
#footer {
width: 100%;
height: 100px;
background-color: #fff;
}