Layer Positioning Issues

[nootkan]

;) Well like others in this forum, I too have decided to take the step away from tables and start learning css. I chose a basic 3 column layout from glish.com to use as a learning tool and seem to be grasping some of it (at least I think so). One problem I've run in to is how to keep my layers positioned so they look the same in 800x600;1024x768 and 1280x800 resolutions. I have a 2 layers positioned over a header image in the header, one for my text nav links and the other for the date and time. Here is the code I used:

Css code:
#Layer1 {
position:absolute;
width:200px;
height:38px;
z-index:1;
left: 619px;
top: 97px;
}

#Layer2 {
position:absolute;
width:435px;
height:36px;
z-index:2;
left: 405px;
top: 21px;
font-size:12px;
font-weight:bold;
text-align:center;
}


Xhtml code:
<div id="Layer1"><script language="JavaScript" type="text/javascript">
//<![CDATA[



document.write(doClock("W0",",%20","M0","%20","D1",",%20","Y0"));



//]]>
</script></div>

<div id="Layer2">
<p><a href="#">About Us</a> | <a href="#">Advertising</a> | <a href="#">Archive</a> | <a href="#">Articles</a> | <a href="#">Braggn Board</a> | <a href="#">Contact</a> <br />
<a href="#">Fishy Links</a> | <a href="#">Fun and Games</a> | <a href="#">News</a> | <a href="#">Pros</a> | <a href="#">Q and A</a> | <a href="#">Weather</a> </p>
</div>

The problem is that layers 1 & 2 won't center properly except in 800x600

Can anyone shed some light or point me in the right direction? I've done a search on this forum and others, but the solutions I've come accross don't seem to help me.
Nootkan

[Medyman]

I'm assuming that your header div doesn't have an absolute width. Is that correct?

You're using absolute positioning here. Like the name implies, it's absolute! It will always be positioned at the same spot as the container. Absolute positioning works when you're trying to position something in a defined space.

So, if your header was set to always be at 800pixels, you could use absolute positioning to "center" the divs in that space. But if the header is set to be any flexible width based on viewport, this technique won't work.

In that instance you can use relative positioning or floats. It seems, based on the little code that you provided, that you would need to use some floats here.

Here (http://css.maxdesign.com.au/floatutorial/) is a nice tutorial on floats. If that's not what you're looking for, please post a link to your site, if possible, or more or the code that relates to the entire "header" section.

HTH

[nootkan]

Actually the css template I'm trying to learn from is a static one with width of 800. Here is the css:

/* just some basic formatting, no layout stuff */

body {
text-align:center;
}

#frame {
width:800px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}

#contentleft {
width:175px;
padding:0px;
float:left;
background:#000099;
color:#FFFFFF;
}

#contentcenter {
width:480px;
padding:0px;
float:left;
background:#fff;
}

#contentright {
width:145px;
padding:0px;
float:left;
background:#fff;
}

#contentheader {
background:#fff
}

#contentfooter {
background:#fff
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#contentheader h1 {
font-size:14px;
padding:10px;
margin:0px;
}

#contentfooter h2 {
font-size:10px;
text-align:center;
}

#contentright p { font-size:14px}



Here is the header section (edited of course):

<div id="frame">
<div id="contentheader"><a href="http://www.mynewsite.com"><img src="newheader.jpg" alt="My New Site" width="800" height="113" border="0" longdesc="http://www.mynewsite.com" /></a></div>

I don't want to post a link as the site isn't ready for live viewing yet.

[nootkan]

Okay I think I figured it out. I used

#contentfooter {
position: relative;
width:850px;
margin: 0 auto;
background:#fff;
text-align:center;
}

in my footer and will try the same thing in my header.

[nootkan]

Here's what I did to make it work in case someone else is having the same issue. I made the #contentheader position: relative; in my css file and the #Layer1 position:absolute; in my html file. Then I inserted the proper code into the div tag (nested) inside the layer where my header image lies within my html code.


<div id="contentheader"><img src="changes/newheader.jpg" alt="" width="850" height="113" /><div id="Layer2">| <a href="#">Link1</a> | <a href="#">link2</a> | <a href="#">Link3</a> | <a href="#">Link4</a> | <a href="#">Link5</a> | <a href="#">Link6</a> | <br />
| <a href="#">Link7</a> | <a href="#">Link8</a> | <a href="#">Link9</a> | <a href="#">Link10</a> | <a href="#">Link11</a> | <a href="#">Link12</a> |</div></div>

Works for me.