View Full Version : Using Layers "HTML"

04-05-2009, 07:54 PM
I have been trying to design a new webpage incorporating "Layers" but failing miserably. Could someone please tell me if it is possible to put a box 300x100 for example through boxes 1, 3, 4. and 5. You can view the webpage i have been using here: HERE! (http://www.iambonkers.webs.com/table.html)Big thanks

04-05-2009, 08:05 PM
Hello cadfan,
I'm not sure what you mean by through...
could you explain a little more?

You do need a DocType though, have a look at the link in my sig about DocTypes. Also, while you're there, have a look at the link about tables.

Have a look at this for doing it with no tables -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: bold 14px "Comic Sans MS";
background: #FC6;
text-align: center;
color: #00F;
text-decoration: underline;
* {
margin: 0;
padding: 0;
border: none;
#container {
width: 604px;
margin: 30px auto;
position: relative;
background: #999;
overflow: auto;
#first, #second, #third, #fourth, #fifth, #sixth {
width: 300px;
border: 1px double #999;
#left {
float: left;
#first {
height: 102px;
background: #d5e9d7;
#fourth {
height: 200px;
background: #fff5e8;
#right {
float: right;
#second {
height: 50px;
background: #fac6aa;
#third {
height: 50px;
background: #d7d7d7;
#fifth {
height: 200px;
background: #f0f8ff;
#sixth {
height: 100px;
background: #39C;
position: absolute;
top: 75px;
left: 150px;

<div id="container">
<div id="left">
<div id="first">First Cell</div>
<div id="fourth">Fourth Cell</div>
<!--end left--></div>
<div id="right">
<div id="second">Second Cell</div>
<div id="third">Third Cell</div>
<div id="fifth">Fifth Cell</div>
<!--end right--></div>
<div id="sixth">Sixth Cell</div>
<!--end container--></div>

04-05-2009, 08:58 PM
Hiya Excavator
Needless to say that is spot on! I only used a table because a friend has used one on which he also used layers. Very big thank you for taking the time out to help.

04-06-2009, 05:11 AM
There is no such thing as "layers" in HTML or CSS. You need to find the correct term for what you are talking about since <layer> was a html element from a time long forgotten, sometimes z-index'd elements are "layered" but that's confusing, and sometimes we think you are referring to chickens.