Web Analytics Made Easy -
StatCounter Using Layers "HTML" - CodingForum

Announcement

Collapse
No announcement yet.

Using Layers "HTML"

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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; Apr 5, 2009, 02:29 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      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!

      Comment


      • #4
        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.
        Is IE9 a modern browser?
        IE9 is at least 2 years behind the modern web.

        Comment

        Working...
        X