HTML and CSS Reference
In-Depth Information
Implementing a layout using regions, grouping, and
nesting
Regions is a new CSS3 construct that allows you to have content flow through various regions
in a webpage. This could provide some very interesting scenarios. To get started, you will
need an HTML page with regions defined in it. The following HTML provides the starting
point for establishing regions.
<body>
<div class="regionLayout">
<div id="region1"></div>c
<div id="region2"></div>
<div id="region3"></div>
<div id="region-n"></div>
</div>
</body>
NOTE BROWSER SUPPORT FOR REGIONS
Regions are currently in the experimental and development phase. There is limited browser
support at this time. This section highlights only the key design goals of this feature.
Layout of a webpage using regions requires two things: a content source and the regions
that will be the content destination. The HTML above outlines the regions. The content can
come from another page via an iframe or another element on the page itself (though this
currently does not work in any browser). By adding an iframe to the page, you can set the
iframe src to the content that will be rendered in the regions:
<iframe src="content_source.html"/>
With the content source established in the HTML, there are now only two things that
need to occur. CSS is used to control the functionality of the content from the source to the
destination. The new CSS properties called flow-into and flow-from, are used to assign the role
of the HTML elements in the region layout. The flow-into property is assigned a value to hold
the content. This value can be anything such as in this example:
.content_source{
flow-into: myflow;
}
Then the destination of the content is defined in a class like this:
.content_regions{
flow-from: myflow;
}
As long as the same name is used in the flow-into and the flow-from, , they will work
together. This is called a named flow. . All the elements forming the regions to display the
 
 
Search WWH ::




Custom Search