This shows you the differences between two versions of the page.
Next revision | Previous revisionNext revisionBoth sides next revision | ||
spec:css3-regions:sequestering-regions [2012/11/15 17:42] – created astearns | spec:css3-regions:sequestering-regions [2012/11/16 07:51] – astearns | ||
---|---|---|---|
Line 3: | Line 3: | ||
One way to use an external file for presentational purposes is being defined by the [[http:// | One way to use an external file for presentational purposes is being defined by the [[http:// | ||
- | Let's take a very simple example of regions use, so that the different versions are more easily compared. This simple example just has two regions, the first being 60% if the height of the viewport. The named flow is then interrupted by an image, and resumes afterwards in a second region. You can take this basic structure and scale it up to a more complex layout such as the one found in [[http:// | + | Let's take a very simple example of regions use, so that the different versions are more easily compared. This simple example just has two regions, the first being 60% of the height of the viewport. The named flow is then interrupted by an image, and resumes afterwards in a second region. You can take this basic structure and scale it up to a more complex layout such as the one found in [[http:// |
Here's the starting point with empty presentational elements in the content markup: | Here's the starting point with empty presentational elements in the content markup: | ||
Line 33: | Line 33: | ||
</ | </ | ||
- | Using custom elements, you could put the presentational elements in a separate HTML file: | + | Using custom elements, you could put the presentational elements in a separate HTML file. I have extended the img element here, but you could instead extend the body element. |
<code html content.html> | <code html content.html> | ||
Line 71: | Line 71: | ||
</ | </ | ||
- | Or you could use decorators: | + | Or you could use decorators. Again, I chose to add a class to the img element, but you could decorate the body element if that's your preference. |
<code html contents.html> | <code html contents.html> |