Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Newbie needs help taking photoshop to wordpress

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 13, 2009 at 9:38 pm #25759
    buckeyegirl
    Member

    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 14, 2009 at 1:02 am #62207
    bangbang
    Participant

    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 #62221
    MesmerLab
    Member

    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 #62226
    buckeyegirl
    Member

    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 #62227
    buckeyegirl
    Member

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

    August 14, 2009 at 8:43 am #62230
    MesmerLab
    Member

    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 #62232
    buckeyegirl
    Member

    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 9:36 pm #62252
    dloewen
    Member

    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);
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.