Grow your CSS skills. Land your dream job.

PSD to XHTML – layout idea for busy site

  • # May 26, 2008 at 1:41 am

    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: http://laithsinawi.com/mockups/eShop.jpg

    I’d appreciate any layout tips here.

    Thanks,
    Laith

    # May 26, 2008 at 7:28 pm

    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.

    # May 26, 2008 at 7:29 pm

    I think header, main content + sidebar and footer is also the best way to build this up. Good luck!

    # May 27, 2008 at 3:40 am

    Take a look at this list… so many and so extreme cheap. Sometimes it can make me feel a little discouraged, because it’s almost impossible to do the same job for so less money. I am glad that my skills are far beyond only xhtml+css and that I can php and mysql too, because I think a normal xhtml-css job will dissapear very fast with so many services like these.

    # May 27, 2008 at 7:27 am

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

    # May 30, 2008 at 5:48 pm
    "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.

    Mockup: http://laithsinawi.com/mockups/eShop.jpg
    Webpage: http://laithsinawi.com/eshop/
    CSS: http://laithsinawi.com/eshop/css/style.css

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

    Laith

    PS:
    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 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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