Grow your CSS skills. Land your dream job.

Newbie needs help taking photoshop to wordpress

  • # August 13, 2009 at 9:38 pm

    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

    Quote:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head profile="http://gmpg.org/xfn/11"&gt;

    </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

    Quote:
    /*
    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!

    # August 13, 2009 at 10:37 pm

    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.

    # August 14, 2009 at 1:02 am

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

    Code:

    should be

    Code:

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

    # August 14, 2009 at 7:06 am

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

    # August 14, 2009 at 7:45 am

    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

    Quote:
    /*
    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

    Quote:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    </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>

    # August 14, 2009 at 7:47 am

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

    # August 14, 2009 at 8:43 am

    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. ;)

    # August 14, 2009 at 9:50 am

    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!

    # August 14, 2009 at 11:02 am

    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.

    # August 14, 2009 at 9:36 pm

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

    Code:
    url(style/images/header.png) alt=”Napleon Veterinary Clinic”

    Should be:

    Code:
    background: url(style/images/header.png);
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".