www.webdeveloper.com
Results 1 to 7 of 7

Thread: How difficult will it be to put this Photoshop file into XHTML/CSS?

  1. #1
    Join Date
    Jan 2009
    Posts
    11

    How difficult will it be to put this Photoshop file into XHTML/CSS?

    I am working my way back into web design and I have come up with this template:

    http://encmusic.byethost17.com/design.jpg

    I have the original Photoshop PSD file and I am trying to convert it to XHTML and CSS. However, I am extremely rusty when it comes to this. Does anyone have suggestions on how to go about turning this design into an actual page?

    I know about slicing the Photoshop file, but it seems like it would be harder to do with this file since there are so many things going on in the design. Any help would be appreciated.

  2. #2
    Join Date
    Jun 2004
    Posts
    316
    you could just set the file to be a background of a div using the following CSS attributes:

    background:URL('file.jpg'); width:###px; height:###px;

    and then you could use more div's and the following CSS attributes to place the content in that main div, over the bg in the correct spots:

    position:absolute; top:###px; left:###px; width:###px; height:###px;

    and then all you have to worry about is centering the main div.
    Windows XP Professional
    256MB RDRAM (damn expensive)
    120GB HD, 2.56GHz P4 Processor
    Only 64MB GeForce4 Vid Card /w TV-Out
    Wish I had money to buy more RAM lmao

  3. #3
    Join Date
    Jun 2004
    Posts
    316
    To make the buttons work, you could make a spacer.gif image for multiple <img> tags, size them right, place them over the button locations and turn them into links.
    Windows XP Professional
    256MB RDRAM (damn expensive)
    120GB HD, 2.56GHz P4 Processor
    Only 64MB GeForce4 Vid Card /w TV-Out
    Wish I had money to buy more RAM lmao

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,460
    Hi there inwhiterooms,

    and a warm welcome to these forums.

    Here are our friend TheTeenScripter's suggestions put into an example...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>basic layout</title>
    
    <style type="text/css">
    #container {
        width:800px;
        height:542px;
        padding-top:87px;
        margin:auto;
        background-image:url(http://encmusic.byethost17.com/design.jpg);
        background-repeat:no-repeat;
     }
    #nav {
        width:380px;
        height:32px;
        margin:0 0 131px 362px;
        padding:0;
        list-style-type:none;
     }
    #nav li {
        width:89px;
        padding-right:6px;
        float:left;
     }
    #nav a {
        height:32px;
        display:block;
     }
    #nav a span {
        display:none;
     }
    #left {
        width:209px;
        height:236px;
        margin:23px 0 0 83px;
        float:left;
     }
    #left_top {
       height:109px;
       margin-bottom:18px;
     }
    #left_bot {
       height:109px;
     }
    #left_top ul a,#left_bot ul a {
        color:#000;
     }
    #right {
        width:360px;
        height:242px;
        padding:14px;
        margin:0 0 0 36px;
        float:left;
        overflow:auto
     }
    #right p {
        margin:0;
        padding-bottom:10px;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:0.8em;
        color:#000;
        text-align:justify;
    }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    #left,#right {
        display:inline;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div id="container">
    
    <ul id="nav">
     <li><a href="#"><span>home</span></a></li>
     <li><a href="#"><span>about</span></a></li>
     <li><a href="#"><span>services</span></a></li>
     <li><a href="#"><span>contact</span></a></li>
    </ul>
    
    <div id="left">
     <div id="left_top">
      <ul>
       <li><a href="#">link 1</a></li>
       <li><a href="#">link 2</a></li>
       <li><a href="#">link 3</a></li>
       <li><a href="#">link 4</a></li>
      </ul>
     </div>
    
     <div id="left_bot">
      <ul>
       <li><a href="#">link 1</a></li>
       <li><a href="#">link 2</a></li>
       <li><a href="#">link 3</a></li>
       <li><a href="#">link 4</a></li>
      </ul>
     </div>
    </div>
    
    <div id="right">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. *** sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p
    </div>
    
    </div>
    
    </body>
    </html>
    
    coothead

  5. #5
    Join Date
    Jan 2009
    Posts
    11
    Wow, thanks for all the help! I am still a bit stuck though... What I am trying to do is have the orange background stretch the entire width of the page and then have the green/white part expand as well. I don't want it to be relegated to 800px width.

    How would I go about doing this? I want to have the design stretch to the entire size of the browser's window and not have any white space around it. Am I going to need to split up the PSD file into different slices? I'm not even sure what parts I would need to slice.

    Thanks again for all your help.

  6. #6
    Join Date
    Jan 2009
    Posts
    11
    I was able to get the background to stretch, but I don't know how I am going to get the green/white content section to expand with it. I'm not even sure it will look good. I also changed a couple of things around, namely making one big text box underneath and bumping up the logo. Here is what I have so far:

    http://www.wiredmango.net/testing.html

  7. #7
    Join Date
    Jun 2004
    Posts
    316
    for expansion to the screen, you will have to work with percents instead of pixels. also, i noticed (in firefox) that the clickable buttons on top aren't lining up with the button text.

    If you are trying to get the green/white section to expand with the bg, you can keep them both as one image and expand that image
    Windows XP Professional
    256MB RDRAM (damn expensive)
    120GB HD, 2.56GHz P4 Processor
    Only 64MB GeForce4 Vid Card /w TV-Out
    Wish I had money to buy more RAM lmao

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles