Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Open Points: 250 Time: 17:20 - Sep 21, 2011

refae

Need Help with CSS Page Layout

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)
www.yusifmusic.com/NEWSITE/bio.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.

Thanks in advance!!

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t...
<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: absolute;
width: 798px;
height: 99px;
top: 16px;
background-color: yellow;
background-image: url("images/Header.jpg");
background-repeat:no-repeat;
background-color: black;
color: black;

}

#Content
{
position: absolute;
width: 818px;
height: 554px;
top: 115px;
background-image: url("images/Content.jpg");
background-repeat:no-repeat;
overflow: auto;
background-color: black;
color: black;

}

#Footer
{
position: absolute;
width: 798px;
height: 147px;
top: 668px;
background-color: yellow;
background-image: url("images/BioFooter.jpg");
background-repeat:no-repeat;
background-color: black;
color: black;
}

#Copyright
{
position: absolute;
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 />
</center>
</div>

<div id = "Copyright">
<center>© 2011 Yusif!</center>
</div>

<div id = "Footer">
</div>
</body>
</html>

Categories:

Websites CSS
HTML code
browsers images

Answer Discussion

Tutorials

This question has not yet been answered.

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

Tutorials cannot be submitted until the Answer Discussion is complete.

Submit answers in the Answer Discussion area

Questions
whats the best food to eat during midnight?
How to identify the tiffany jewelry? www.tffanycheapmall.com.
Send an email alert to each user of the php application based on criteria
How I Increased My AdSense Earnings?
how to choose the lady dress ?
How can I fulfill the minimum requirement to make your computer support 3D?