Forums

buckeyegirl

I have been trying to follow the tutorial videos on this site, but I keep getting problems. I had the background image working, but now that I tried to get the header image into the code, everything is gone.

As the title says, I'm pretty new to using CSS like this. I am much more of a graphic designer than coder, thus I designed the mockup in photoshop (one for the home page and one for content pages) and now I am trying to get them onto my wordpress site. I have the Starkers template as my shell and am doing this all on a host sever. Everytime I think I have it, something goes wrong.

Here is my index.php code

<!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 profile="http://gmpg.org/xfn/11">

</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<title>Napoleon Veterinary Clinic</title>
<link rel="stylesheet" typle="text/css" href="style.css" />
</head>

<body>

<div id="header"
</div>

<div id="page-wrap">

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Our Staff</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<p>Main content</p>

<div id="sidebar">
</div>

</div>

<div id="footer">
</div>

</body>
</html>

And here is the style.css cosde

/*
Author: Cassie Jo Arend
*/

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html {overflow-y: scroll; }
body {font: 63.5% Arial, sans-serif;
background: url(style/images/background.jpg) top left repeat;}

ul { list-style: none inside; }
p {font-size: 1.2em; line-height: 1.2em; margin-bottom:1.2em; }
a {outline:none; }
a img { border: none; }
/* END RESET */

/*TOOLBOX*/
.floatleft { float: left }
.floatright { float: right }
.clear { clear: both }
/* END TOOLBOX */

/* STUCTURE AND STUFF */
#page-wrap
width: 730px;
margin: 0 auto;
}

ul#nav {

}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
width: 731px;
height: 36;
text-indent: -9999px;
}

#header {
background: url (style/images/Header.png) alt="Napleon Veterinary Clinic"
}

I really hope that someone can point me in the right direction here. Thank you!

apostrophe

A link would be much more helpful.

The most obvious mistakes I see in your code are that background images do not have alt text and each of the nav links is 731px wide.

bangbang

when something disappear, sometimes its just a not closed div, and u have a good example here

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

should be

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

that is something u have to check, and it can get worst when u add php lol

MesmerLab

You have 2 closing </head> tags.
And yes, not closing a DIV like that will cause all sorts of crazy layout problems. ;)

buckeyegirl

Thank you everyone for point out what I missed. I guess that's what happens when you don't know what to look for... so I've closed all my backets and divs so it atleast looks like it wants to put the images there, but they are still just red Xs. Could it be because I'm working on a bluehost server? What can I do to make it pull the actual image files? Also, I had the background image showing at one time, but now it's not there. Any help here?

i would share the site if it was live, but I'm not sure about security and sharing the site that is on a temporary server through my host. So here's the code again. Thank you so much everyone!

CSS

/*
Author: ME
*/

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html {overflow-y: scroll; }
body {font: 63.5% Arial, sans-serif;
background: url(images/background.jpg) top left repeat;}

ul { list-style: none inside; }
p {font-size: 1.2em; line-height: 1.2em; margin-bottom:1.2em; }
a {outline:none; }
a img { border: none; }
/* END RESET */

/*TOOLBOX*/
.floatleft { float: left }
.floatright { float: right }
.clear { clear: both }
/* END TOOLBOX */

/* STUCTURE AND STUFF */
#page-wrap
width: 751px;
margin: 0 auto;
background: url(images/content.png) repeat-y;
}

ul#nav {

}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
width: 731px;
height: 36;
text-indent: -9999px;
url(images/navigation.png)

}

#header {
width: 731px;
height: 82px;
url(style/images/header.png) alt="Napleon Veterinary Clinic"
}

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>Napoleon Veterinary Clinic</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="page-wrap">

<div id="header">
<img src="style/images/Header.png" alt="header">
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Our Staff</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div id="main-content">

<div id="article-area">
<h1>title</h1>
<p>Main content</p>

</div>

<div id="sidebar">
<img src="images/sidebar.png" alt="sidebar">
</div>

</div>

<div id="footer">
<img src="images/footer.png" alt="footer">
</div>

</body>
</html>

buckeyegirl

how wide should it be? I designed it at 730, so that's why I put that.

MesmerLab

I believe the consensus is now 960 px wide.

Here's a tutorial on how to create a newspaper theme in Wordpress using the 960 grid framework. You should be able to apply the tutorial to your design.
http://net.tutsplus.com/working-with-cm ... framework/

And for future reference, here's the 960 grid framework.
http://960.gs/

As for your images, open Firebug and get on the Net tab. Refresh your page. You should be seeing a lot of lines of red code. That would be your missing images. Now, hover over each line and you'll see where your page is looking for your image. Reconcile that with where the image is actually located. Either change the code or move the image. ;)

buckeyegirl

So, will I need to move my photoshop design to this 960 grid and go from there? Or can I just get it running from what I'm doing now?

I'm doing this for my sister's vet clinic and we would like to get it up asap, so the less time, the better. Sorry for all the questions, but thank you for the help! keep it coming, b/c I can definitely use it!

apostrophe

If you are happy with 730px leave it at that. If you are changing to 960 it will probably be easier in the long run to go back into photoshop and start again.
But I find it hard to believe that you want each navigation link to be the full width of the page.

dloewen

A few places in your css you don't have the background image attribute right:

url(style/images/header.png) alt=\"Napleon Veterinary Clinic\"

Should be:

background: url(style/images/header.png);

treehouse : what would you like to learn today?

Forums

Newbie needs help taking photoshop to wordpress