css layers

E

enkara

Hi, I'm starting with php and I have a problem with layers. I want my
page to have four different parts: menu, header, tools and content.
I want to use layers, but I can't make them fit the page. In this page
you can see the result:

http://es.geocities.com/deumy/base.html

My question is: Why the layers don't fit the page? they leave blank
spaces! How do I have to do it?

I paste the code:

base.html:

<html>
<head>
<title><?php echo $this->escape($this->title); ?></title>
<link rel="stylesheet" type="text/css" media="screen"
href="site.css" />
</head>

<body>
<div id="Header"></div>
<div id="Menu"></div>
<div id="Tools"></div>
<div id="content"></div>
</body>
</html>


site.css:

#Content {
position:absolute;
width:85%;
height:80%;
z-index:4;
left: 15%;
top: 20%;
}

#Header {
position:absolute;
width:100%;
height:15%;
z-index:1;
left: 0px;
top: 0px;
background-color: #E1FF88;
}
#Menu {
position:absolute;
width:15%;
height:85%;
z-index:3;
top: 15%;
left: 0px;
background-color: #FFB18C;
}
#Tools {
position:absolute;
width:85%;
height:5%;
z-index:2;
left: 15%;
top: 15%;
background-color: #D8AFEB;
}

Thank you very much!!!!!!!!
 
J

Jim Moe

enkara said:
Hi, I'm starting with php and I have a problem with layers. I want my
page to have four different parts: menu, header, tools and content.
I want to use layers, but I can't make them fit the page. In this page
you can see the result:

http://es.geocities.com/deumy/base.html

My question is: Why the layers don't fit the page? they leave blank
spaces! How do I have to do it?
What are CSS "layers"?
What is the DTD (doctype)? It is missing.
What does "don't fit the page" mean? Blank spaces where!?
Why is there PHP code when this is a straight HTML document?

If the blocks of color are what you intend as a layout, there is no need
for any of that absolute positioning. Search for "2 column layout css".
 
E

enkara

What are CSS "layers"?
What is the DTD (doctype)? It is missing.
What does "don't fit the page" mean? Blank spaces where!?
Why is there PHP code when this is a straight HTML document?

If the blocks of color are what you intend as a layout, there is no need
for any of that absolute positioning. Search for "2 column layout css".

Sorry, as you have noticed, my English isn't very good.

A thing I didn't say is that with Firefox works perfectly. It's in IE
that you can see the errors.
The doctype is html and css, I've put it.
I'm sorry, this concrete problem only concerns html, you are right,
but the original page has php code.
And layers... I think is what I'm doing. It's like frames but better I
think.

Sorry for my English. I hope that you can understand me :-S
 
E

enkara

Sorry, as you have noticed, my English isn't very good.

A thing I didn't say is that with Firefox works perfectly. It's in IE
that you can see the errors.
The doctype is html and css, I've put it.
I'm sorry, this concrete problem only concerns html, you are right,
but the original page has php code.
And layers... I think is what I'm doing. It's like frames but better I
think.

Sorry for my English. I hope that you can understand me :-S- Ocultar texto de la cita -

- Mostrar texto de la cita -

I didn't read the last part of your message. I don't want a 2 column
layout (that's the correct word I suppose), if I delete the
positioning, the results aren't what I want

Thank you!
 
B

Bergamot

enkara said:
And layers... I think is what I'm doing. It's like frames but better I
think.

Sorry, but you are misguided. "Layers" are an invention of Dreamweaver,
though based on an old Netscape idea. They don't really exist outside of DW.

Frames do have problems, but emulating them with CSS can be even worse.
You don't need all that positioning, and it will likely just get you
into trouble if you don't completely understand how the box model and
various positioning methods are *supposed* to work.

Even if you do understand them, you have to be careful how you use them
or the layout will still break. For example, in your test page you have
not accounted for any overflow conditions. So what will happen with a
long word in the left column, or in a small window, or with a large text
size? How will your layout adapt so it will still be usable?

What you have is really just a 2 column layout with a header. You might
want to reconsider Mr. Moe's advice about looking for a template.
 
J

Jim Moe

The preferred doctype is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Insert the above before the <html> tag. Using HTML 4.01 Strict offers
the greatest uniformity of presentation across browser implementations.
Validate your code at said:
I didn't read the last part of your message. I don't want a 2 column
layout (that's the correct word I suppose), if I delete the
positioning, the results aren't what I want
A 2 column layout, with a main header area, is exactly what you are
showing. The subheader in the Content block is trivial.
IE6 does not do absolute positioning all that well. I cannot say about IE7.
 
E

enkara

The preferred doctype is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Insert the above before the <html> tag. Using HTML 4.01 Strict offers
the greatest uniformity of presentation across browser implementations.


A 2 column layout, with a main header area, is exactly what you are
showing. The subheader in the Content block is trivial.
IE6 does not do absolute positioning all that well. I cannot say about IE7.

ok, I'll try it. Thank you!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,810
Latest member
Kassie0918

Latest Threads

Top