layer positioning...

liunx

Guest
Hi There.

I have an image and on to of the imge I added lyaer with some text in it.

The problem is whenever I'm resizing the size of the page the table stay on the same spot and the image below moving to the left (or right). I want it to make sure they stick togeather.

how can I do it?


<style type="text/css">
.TopMenu {
position: absolute;
left: 202px;
top: 0px;
z-index: 1
}
</style>

<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">

<center>

<img border="0" height="93" width="600" src=http://www.webdeveloper.com/forum/archive/index.php/"up.jpg">

<div class="TopMenu">
<table border="0" cellpadding="0" cellspacing="0" width="184" height="15" bgcolor="#FED762">
<tr align="center">
<td width="60">bla</td>
<td width="60">bla</td>
<td width="60">bla</td>
</tr>
</table>
</div>


Thanks a lot!You should:


Use valid HTML.
Use CSS for layout.
Use the image as a background imageIf you are tellimg me that I need to use Valid HTML you need to tell me where's my mistake as well. otherwise I would use valid HTML.

What do you mean by Using CSS for layout?

ThanksI mean this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin: 0;
color: #000;
background: transparent;
}

#TopMenu {
background: #FED762 url(up.jpg) no-repeat top center;
color: inherit;
}

.hold {
width: 100%;
background: #FED762;
color: inherit;
float: left;
}

.hold p {
width: 30%;
float: left;
margin: auto;
padding: 6px;
}
</style>
</head>
<body>
<div id="topMenu">
<div class="hold">
<p>Blah</p>
<p>Blah</p>
<p>Blah</p>
</div>
</div>
</body>
</html>Thanks manMy pleasure.
 
Back
Top