SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Questions about DIV for layout...

    Until recently I've used tables for all my layout. I've stumbled across DW Layers or commonly called DIVs for layout. Woohoo...a way out of nested table hell...

    But I have a few questions though:

    1) If I use DW Layers or DIVs for layout is it compatible with most popular browsers? My web metrics tell me that Netscape 6, IE 6 are used by the majority of my visitors.

    2) Is there anything I have to be aware of when using DIVs for formatting?

    3) What are the disadvantages of using DIVs?

    Thanks!

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    1 DW view? use a flow model with floats, not DW's position absolutes, No go by the view of the browser NS 7.2 up OP 7.5 UP IE 5 up Moz 1.7 up FF 1.07 up

    2 No its great funn working with div's h p a tags

    3 No its very nice and ezy to work with

    basic 2 column demo
    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" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#a2a2a2;}
    	
    	div,p{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.wra{
    	margin:0 auto;
    	background:#cccccc url(_bgr/xx.gif) no-repeat 0px 100%;
    	}
    	
    	.mt{margin-top:.5em;}
    	
    	.w{width:64em;}
    	
    	.he{background:#ff8c00;height:8em;}
    	
    	.na{background:#fbfbfb;height:2.5em;}
    	
    	.l{float:left;width:18em;}
    	
    	.ll{float:left;width:46em;background:#d8d8d8 url(_bgr/xx.gif) no-repeat bottom right;}
    	
    	.fo{background:#fbfbfb;margin:0 auto;height:2.5em;}
    	
    	.wra p,.fo p{padding:.3em .5em .2em .5em;}
    	.wra h1{padding:.3em;font-size:1.5em;}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	.wra a{color:#0000ff;text-decoration:underline;}
    	
    	head+body .ll{min-height:30em;}
    	* html .ll{height:30em;}
    	</style>
    </head>
    <body>
    
    <div class="wra w mt">
    
    <div class="he">
    <h1>header</h1>
    <p>Basic 2 column without borders</p>
    <p></p>
    </div>
    
    <div class="na"><p>nav</p></div>
    
    <div class="l"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div>
    
    <div class="ll">
    <p>Content in right box must always be heigher then that of the left colunm</p>
    <p><a href="index.htm">Back</a></p>
    <p><a href="lay1-no.htm">Basic 2 Column</a></p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.8 9</p>
    </div>
    
    </div>
    <div class="fo w"><p>footer</p></div>
    </body>
    </html>
    Last edited by all4nerds; Jan 27, 2006 at 20:06.

  3. #3
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to make sure you get this right. <div> is an html element. DW calls is a layer. Do not call a div a layer, unless it is specifically DW related because you can confuse by switching back and forth between the two terms.

    Disadvantage of divs compared to what, tables for layout? There is no disadvantage and divs are the only proper layout method.

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2005
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the diff between a DIV layout and using DW layers?

    I'm interested in using DW layers. Any drawbacks vs. tables or DIV layouts?

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Nothing. A "DW Layer" is just a fancy name for an absolutely positioned <div>. Absolute-P is just one way of positioning elements on your page. It sounds like you'll need a book on CSS. SitePoint has a couple of decent ones.


Bookmarks

Posting Permissions

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