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

Home Forums Other PSD to XHTML – layout idea for busy site

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #22702

    Hi Everyone,

    I’m new here and this is an awesome place. I watched all the videos and checked out the examples. Good stuff, thanks!

    Your typical CSS layout for a website is fairly simple with columns, header, footer, etc. However, some business websites tend to get very busy with elements scattered all over the page. In the past, I’ve been able to code these using nested tables. I’ve moved away from tables to CSS designs (tabless). I have a PSD of a mockup I downloaded from the Internet, and I want to code it (xhtml and css). I just wanted to get ideas of what type of layout to use. To me, it looks header, 2 column, and footer. But I’m not sure the best way to layout all the content stuff. I guess you could float the images to the left and have the text wrap on the right. Hmm… but in the 2 col, there are 2 images (tv and monitor). I’m not sure how to position those (absolute positioning maybe).

    Mockup to code:

    I’d appreciate any layout tips here.



    It’s kind of scary, indeed. Thanks to competition, you can now get it down to ~$60 for a PSD-to-XHTML (follow the link Edwin posted).

    "chriscoyier" wrote:
    This layout is very do-able and perfect for CSS and it sounds like you are on the right track. It’s a two-column layout, and the images (tv, etc.) are floated to the left within those columns. Once you get a start coding it, feel free to come back and post a link to the progress and make we can help with any specific problems you run in to.

    Thanks Chris! It’s an honor to get your advice. I watched all your videos and learned a lot. Well done!

    I’ve coded the mockup, and the only trouble I’m having is how to create the lines that separate the sidebar (vertical line) and products (horizontal line). I tried using the border property, but the lines can’t go all the way to the edges of the defined areas (mainContent, p, etc.). I thought about using background-image in mainContent and p tags, but I’m already using background-image in the p tags for the tv and monitor images (I don’t think you can declare twice within same tag). If I usage background-image in mainContent, then when I add more text, the line won’t expand.

    I tried floating images to the left for products (as suggested), but the text wrapped all the way around to the bottom of the images, so I used background-image instead.

    Hmm… for the products, I guess I could define a "line" class that I can use as a div between the products.

    The mockup link shows what I’m starting with, and the webpage link shows what I have so far.


    Thanks for your help. This site is an invaluable resource. I’ll be happy to answer questions whenever I can. :)


    Oh, just realized this is now posted in the wrong section. I’m not sure if there’s any way to move this to "CSS Help & Troubleshooting"

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.