DIV CSS Layout Positioning Instance Menu navigation detailed

   Why use div CSS can be simply explained as follows:

   The person who created the web also invented the table layout, and when the table layout was flooded, he said, "I created the web and ruined the web,table layout, which brings a lot of meaningless statements to a Web page that is hard to read." Table is for what, table is a table, never used for layout, and now we want to get the table to start again showing its meaning: table data. So the table should not be used on the page layout at all.
    And Css+div has the following characteristics and advantages:

    Advantages: 1, in line with the standard of the consortium. Companies such as Microsoft are supporters of the consortium. This is most important because it guarantees that your site will not be eliminated because of future upgrades to your Web applications.

         4, the adjustment of the style is more convenient. The separation of content and style makes it easier to adjust pages and styles. Now YAHOO,MSN and other international portal sites, NetEase, Sina and other domestic portals, and

            Mainstream WEB2.0 website, all adopt div+css frame mode, more confirm div+css is the general trend.

         5, the great advantage of CSS in the concise code, for a large web site, can save a lot of bandwidth, and it is well known that search engines like clean code. 6, performance and structure separation,

           It is easier to work together in team development and reduce the correlation.

1, the basic framework to build

The basic frame is composed of "head" and "body", "head" is filled with div with class header, "Body" consists of Div with ID toolandcontent.

<div class= "header" ></div>
<div id=toolandcontent></div>

This constitutes a top and bottom structure of the page, "head" and "body" there must be a lot of complex parts, first of the "head" of the basic composition:

<div class= "header" >
	<div class= "Padder" >
		<div class= "nav" >
		<div class= "NAVLAFTBG" ">
		<div class=" NAVRIGHTBG ">
		<!--left menu open-->
		<div id=headtitle>	
		<div style= "Display:none" Id=blk1 class=blk>
		<div class=slist id=close1>
		<UL>							
		<li><a href= "#" onclick= ' Switchrole ("1", "Management subsystem") ' >management subsystem</a> </LI>	

	         <li><a href= "#" onclick= ' Switchrole ("3", "User subsystem") ' >user subsystem</a> </LI>					<li><a href= "#" onclick= ' Switchrole ("8", "Device subsystem") ' >device subsystem</a> </LI>

 <li><a href= "#" onclick= ' Switchrole ' ("A", "Task subsystem") ' >task subsystem</a> </LI> </UL> </DIV> </DIV> <a href= "#" onclick= "Javascript:d ocument.location= ' Jumptomain.do?cmd=selectsystem '; "id=" n-9 ">switch system</a> <a href=" # "id=" N-7 " Onclick= "Dologout ();" > LogOff  </a><!--logoff--> <a href= "#" id= "n-6" onclick= "Dologoff ();" > LogOut </a><!--Safe Exit-->      </div> <div ID=HEDERTIMAG&G T; </div> 

         <div class= "Mainnav" style= "Display:none" ><!--left menu is hidden below, this is the output of the menu at the head--> <a href= "#" Oncli Ck= "Hidetoolbar ()" id= "n-3" >switch system</a> <a href= "#" id= "n-1" onclick= "dologout ();" > LogOff  </a><!--logoff--> <a href= "#" id= "n-2" onclick= "Dologoff ();" > LogOut </a><!--Security Exit--> </div> </div> </div> </div> <div class = "Secondnav" style= "Display:none" > <div id= "subNav1" style= "display:none;padding-left:50px"; > <a href= "javascript:void (0);" onclick= ' javascript:modifypasswd (); ' class= ' actived ' > Change passwo Rd </a> <a href= "javascript:void (0);" onclick= ' Javascript:openwindow ("Personalinfo.do?actionrelatm Enuid=104 ", 680, 450," users "); ' class= ' actived ' > Edit profile </a> </div> <di V id= "subNav-3" style= "display:none;padding-left:300px;" > <a href= "#"Onclick= ' Switchrole" ("1", "Management subsystem") ' class= ' actived ' >management subsystem</a> <a ' # ' Onclick= ' Switchrole ("3", "User subsystem") ' class= "actived" >user subsystem</a> "<a href=" # "onclick=" Swi Tchrole ("8", "Device subsystem") ' class= actived ' >device subsystem</a> <a ' href= ' # ' onclick= ' SwitchRole ' (" ", Task subsystem") ' class= ' actived ">task subsystem</a> <a href=" # "onclick= ' Switchrole" (""), "MSG Su bSYSTEM ") ' class=" actived ">msg subsystem</a> </div> <div id=" SubNav-1 "style=" Display:non e;padding-left:300px; " > <a href= "#" onclick= "Dologout ();" class= "actived" ><!--exit the current user and go to the login page. -->exit the "Current user," and "then" the "id=" of the to login page!</a> </div> <div subNav-2 style= ay:none;padding-left:350px; " > <a href= "#" onclick= "Dologoff ();" class= "actived" ><!--exit the current user and close the page. -->exit the current user, and shut down tHe page!</a> </div> </div> </div> </div> 

"Body" is a left and right structure, the left is the menu, the right-hand side is the content Display page, there is a hidden control tool, code such as:

<div id=toolandcontent onclick= "Switchmenutool (); Event.cancelbubble = true; " > <div id=menutool> <div id=menusystem> </div> <div class= "MainMenu" Id= "M1" onclick= "Showseco" Ndmenu (' M1 ', 2); event.cancelbubble = true; " ><!--level menu--> Personal Settings </div> <div class= "Secmenu" id= "m1-0" ><!--level two menu--> <a href= "#" onclick= ' javascript:modifypasswd (); event.cancelbubble = true; ' > change password</a> </div> <div class= "Secmenu" id= "m1-1" ><!--level two menu--> <a href= "# "Onclick= ' Javascript:openwindow" ("personalinfo.do?actionrelatmenuid=104", 680, 450, "users"); event.cancelbubble = true; ' > edit profile</a> </div> </div> <div id= "Middletool" onclick= "Switchmenutool" (); Event.cancelbubble = true; " >   </div> <div id= "Contentdiv" onclick= "Switchmenutool" (); Event.cancelbubble = true; "
> <iframe id=mainframe name= "MainFrame" src= "http://www.baidu.com" class= "Mainframcssmin" ></iframe> </div> </div>

2. Layout control

According to the above combination, we expect to get a layout of the following diagram

However, when our window size changes, these div is always not so honest to stay in the original position, 挨挤 deformation, there are a lot of information on the web to increase the Float:left attributes, or add no line marking can not actually solve the problem.

How to keep the minimum width of the head, how to let the left menu div hidden and displayed, does not affect the right tool and content div position, the tool div and content div always keep the right level followed the state, the correct approach is to mix use absolute positioning and relative positioning.

First understand the role of absolute positioning and relative positioning:

1.position:relative; If you position an element relative to it, it will first appear in its location. It then moves the element "relative to" its original starting point by setting the vertical or horizontal position.

2.position:absolute; Represents absolute positioning, which is calculated based on 0 points in the upper-left corner of the browser.
Absolute positioning makes an element irrelevant to the flow of the document and therefore does not occupy space. The layout of this element in the normal document stream is the same as when an absolutely positioned element does not exist. It is relative to the nearest positioned ancestor element. If an element does not have a positioned ancestor element, its position is relative to the original containing block. Depending on the user agent, the original containing block may be the canvas thing HTML element. (because absolutely positioned boxes have nothing to do with document flow, they can overwrite other elements on the page and can control the stacking order of these boxes by Z-index.) The higher the value of the Z-index, the higher the box's position in the heap. ）

From this you can see that you want an element to follow the location of an element in a Web page regardless of the resolution the location is always for an element within the page, simply using absolute positioning is not.

The correct solution is to define the element's parent element as position:relative, and to control the position of the div through CSS for the page frame of the preceding structure.

/* LEFT Menu style * * *
#toolAndContent {
	position:absolute;left:1px;top:30px;
	Min-width:730px;min-height:600px;background-color: #F0F9FE;
	Width:expression (Document.body.clientWidth < 1010?) "1010px": "99.5%")/* min width setting */;height:expression (document.body.clientheight-30 + "px");
}
#menuTool {
	float:left;width:240px;margin-right:-2;
}
#middleTool {
	float:left;
	Margin-right:-3;margin-top:150px;cursor:hand;
}
#contentDiv {
	position:absolute;top:0px;height:100%;
	Border-color:blue;background-color: #F0F9FE; cursor:hand;
}
Here the body (toolandcontent) is absolutely positioned to ensure that the body is under the head, the menu bar (menutool) and the toolbar (middletool) all use relative positioning, left to follow the settings. The right side of the content (CONTENTDIV) is used for absolute positioning.

3, Div + iframe + Css control remaining height

We use an IFRAME in the content, to dynamically display the user visited the page, how to make this iframe height and width, can occupy the rest of the head and the left side of the menu space, set width and height for absolute value or percent can not meet the adaptive window size, Without distortion, the correct approach is to use CSS expression expressions to associate CSS properties with JavaScript scripts. The CSS attribute here can be an intrinsic property of an element or a custom attribute. This means that the CSS attribute can be followed by a JavaScript expression, and the value of the CSS property equals the result of the JavaScript expression calculation. You can refer directly to the properties and methods of an element itself in an expression, or you can use a different browser object. The expression is as if it were in a member function of this element.

The following examples combine the above layouts:

. mainframcssmin{
	min-width:730px;height:100%;
	Width:expression (Document.body.clientWidth < 730?) "730px": (document.body.clientwidth-245 + "px"));
	/**width:expression (Document.body.clientWidth < 730?) "730px": "100%") **// 
	* min width setting */;
mainframcssmax{
	min-width:730px;height:100%;
	Width:expression (Document.body.clientWidth < 730?) "730px": (document.body.clientwidth-5 + "px"));
	/**width:expression (Document.body.clientWidth < 730?) "730px": "100%") **// 
	* min Width setting * * *

Through these two CSS switches, to the left menu open and hidden, automatically change the right content size, while using expression expression, combining JavaScript to get the page window size, minus the width of the left div and the height of the head, To achieve the purpose of automatically filling the remaining space of the window.

We also need to integrate the jquery control of the two left menu to the hidden and the right content of the style change,

var ttype = 1;
function Switchmenutool () {	
	if (ttype = = ' 1 ') {
		$ ("#leftBar"). Hide ();
		$ ("#menuTool"). Hide (+);
		$ ("#mainFrame"). attr ("Class", "Mainframcssmax");
		$ ("#rightBar"). Show ();
		Ttype = 2;
	} else{
		$ ("#rightBar"). Hide ();
		$ ("#menuTool"). Show (+);
		$ ("#mainFrame"). attr ("Class", "Mainframcssmin");
		$ ("#leftBar"). Show ();
		Ttype = 1;
	}
}

Full page Effect:



Need the original file, you can go to my repository download: http://download.csdn.net/detail/eagleking012/3627722