Sometimes I get carried away with the “design” of a site before I think about how difficult it will be to code. Luckily this is my jewelry site so I have to make all sorts of mistakes and hopefully learn from them. I am using Skeleton as the framework as I am used to using it. I don’t like that it is by default only 960px wide. I need this to be 1200px wide so will work that out. The 1st problem I think I will face will be placing the logo on the left with the nav background and the content background placed where they are. Any ideas on the best way to handle this would be greatly appreciated. Thanks.
Each element can have its own background image, so that’s not a problem. Thinking in terms of “1200px wide” is a bit of an old way to think of web design, though. Is a layout like this really practical when viewed on small screens? Is a fancy layout like this really needed? (That is, does it really help the content, and help the user to find that content?)
My other question would be why you are using a framework. Right out of the blocks you are finding you have to change things. Why not start with a clean slate that you can build upon as needed?
Just thinking out loud here.
I always appreciate your thoughts, Ralph.
Even though everyone is now designing for various devices, it may be in my best interest with this site to just stick to PC monitors and laptops.
You know I love fancy layouts. I have never been a fan of plain, boring, lifeless sites. This site is for selling my handmade jewelry. I want it fancy.
I will scratch Skeleton and proceed with a clean slate so I am not confined to Skeleton’s layout.
So I will have a header, left nav, content, footer.
Now to get the logo sitting part way down the background of the left nav area and the content area. I will have to think about handling this one.
There’s usually a logical and straightforward way to do these things. Now is certainly the time to be asking this question, rather than later. How you place it depends on how you want to break up the content. You could just leave a space for it and position it absolutely, but I tend to avoid that if possible. I would start with a container for the page that is centered and has the main background pattern. Then two column divs, left and right. The first element in the left column will be the logo. You might need to give that a negative right margin to pull it right a bit.
Ok so instead of using the flowery background as the body background, make it container for the page and use that as the background. Then skip the header and go straight to left column and right column. Is that correct? Then I would have a footer that spans both left and right columns.
I did add a header only to move the left and right columns backgrounds down the page a bit. Now working on getting the logo to sit a little on top of the left and right column backgrounds.