Hi! I need your help. Trying to redesign my band's website and I am a relative rookie at web design.
You can see the concept I am going for here:
(Basic template for the site)
So what I initially tried to do was use the image as a background image but that was very difficult.
So I ended up splitting the image into 3 sections in photoshop-- header, content, & footer-- and put them in 3 divs that are stacked on each other, and made the middle one (content) overflow. This is very functional and accomplishes what I wanted the page to do.
I noticed that because I am using absolute pixel values there are a ton of problems rendering the page across platforms (iPhone for example, smaller laptops).
I want to make the CSS layout based on percentages so that it will render the same on all screens. However, whenever I try to use percentages (for the width, for example) and test my layout by dragging the browser window larger or smaller, there is a problem. The divs are resizing in relation to the browser window, however, the text within them (the word "Bio" or the list in the middle, for example) are not fixed within the div and start to slide around horizontally in relation to the div.
I think there is a smarter way to do this.
What is the solution? Should I use absolute pixel values but just make the 3 images (and divs) smaller? If it's impossible to use percentages for this task, then what is the best pixel size to design for?
Is there a better way to accomplish this layout without splitting the image up into 3 pieces?
Ideally the background image would take up the whole screen, there would be no black margin/background, and all the scrollable content would be in the middle (yellow section) of the image.
Thanks in advance!!
Here is the code:
© 2011 Yusif!