OK guys, 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 formatting/template for the site)
www.yusifmusic.com/NEWSITE/bio.html
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Yusif!</title>
<style>
body
{
background-color:black;
margin-left: 15%;
margin-right: 15%;
}
#Header
{
position: fixed;
width: 798px;
height: 99px;
top: 16px;
background-color: yellow;
background-image: url("http://www.webdesignforum.com/images/Header.jpg");
background-repeat:no-repeat;
background-color: black;
color: black;
}
#Content
{
position: fixed;
width: 818px;
height: 554px;
top: 115px;
background-image: url("http://www.webdesignforum.com/images/Content.jpg");
background-repeat:no-repeat;
overflow: auto;
background-color: black;
color: black;
}
#Footer
{
position: fixed;
width: 798px;
height: 147px;
top: 668px;
background-color: yellow;
background-image: url("http://www.webdesignforum.com/images/BioFooter.jpg");
background-repeat:no-repeat;
background-color: black;
color: black;
}
#Copyright
{
position: fixed;
width: 799px;
height: 21px;
top: 818px;
background-color: black;
color:#c8bf27;
}
</style>
</head>
<body>
<div id = "Header">
<center>
<br />
<br />
<font size = 14>
<u>BIO</u>
</font>
</center>
</div>
<div id = "Content">
<center>
CONTENT
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
A1<br />
A2<br />
A3<br />
A4<br />
A5<br />
A6<br />
A7<br />
A8<br />
A9<br />
A10<br />
A11<br />
A12<br />
A13<br />
A14<br />
A15<br />
A16<br />
A17<br />
A18<br />
A19<br />
A20<br />
</center>
</div>
<div id = "Footer">
</div>
<div id = "Copyright">
<center>© 2011 Yusif!</center>
</div>
</body>
</html>
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.
HOWEVER
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.
I'm a bit of a newb and any help and advice would be very much appreciated. I feel like this is a very basic thing I'm trying to do and feel super foolish for not being able to get it to work!!
I just realized that you will probably not be able to look at my style sheets.
I am at work now but will try to post the code later this afternoon when I have access to it at home.
Thanks in advance!!
You can see the concept I am going for here:
(Basic formatting/template for the site)
www.yusifmusic.com/NEWSITE/bio.html
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Yusif!</title>
<style>
body
{
background-color:black;
margin-left: 15%;
margin-right: 15%;
}
#Header
{
position: fixed;
width: 798px;
height: 99px;
top: 16px;
background-color: yellow;
background-image: url("http://www.webdesignforum.com/images/Header.jpg");
background-repeat:no-repeat;
background-color: black;
color: black;
}
#Content
{
position: fixed;
width: 818px;
height: 554px;
top: 115px;
background-image: url("http://www.webdesignforum.com/images/Content.jpg");
background-repeat:no-repeat;
overflow: auto;
background-color: black;
color: black;
}
#Footer
{
position: fixed;
width: 798px;
height: 147px;
top: 668px;
background-color: yellow;
background-image: url("http://www.webdesignforum.com/images/BioFooter.jpg");
background-repeat:no-repeat;
background-color: black;
color: black;
}
#Copyright
{
position: fixed;
width: 799px;
height: 21px;
top: 818px;
background-color: black;
color:#c8bf27;
}
</style>
</head>
<body>
<div id = "Header">
<center>
<br />
<br />
<font size = 14>
<u>BIO</u>
</font>
</center>
</div>
<div id = "Content">
<center>
CONTENT
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
A1<br />
A2<br />
A3<br />
A4<br />
A5<br />
A6<br />
A7<br />
A8<br />
A9<br />
A10<br />
A11<br />
A12<br />
A13<br />
A14<br />
A15<br />
A16<br />
A17<br />
A18<br />
A19<br />
A20<br />
</center>
</div>
<div id = "Footer">
</div>
<div id = "Copyright">
<center>© 2011 Yusif!</center>
</div>
</body>
</html>
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.
HOWEVER
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.
I'm a bit of a newb and any help and advice would be very much appreciated. I feel like this is a very basic thing I'm trying to do and feel super foolish for not being able to get it to work!!
I just realized that you will probably not be able to look at my style sheets.
I am at work now but will try to post the code later this afternoon when I have access to it at home.
Thanks in advance!!
Last edited:
