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 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"
You must be logged in to reply to this topic.