Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using Layers "HTML"

    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!Big thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
     <!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">
    <head>
    <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;
    }
    	
    </style>
    </head>
    <body>
        <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>
    </body>
    </html>
    Last edited by Excavator; 04-05-2009 at 07:29 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Cheers!

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •