drafts: changeset 6475:4454a4d747b2

     1.1 --- a/css3-overflow/Overview.html	Mon Aug 06 17:08:38 2012 -0700
     1.2 +++ b/css3-overflow/Overview.html	Mon Aug 06 17:42:01 2012 -0700
     1.3 @@ -10,6 +10,20 @@
     1.4    <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
     1.5    type="text/css">
     1.6  
     1.7 +  <style>
     1.8 +		.in-cards-demo {
     1.9 +			width: 13em;
    1.10 +			height: 8em;
    1.11 +
    1.12 +			padding: 4px;
    1.13 +			border: medium solid blue;
    1.14 +			margin: 6px;
    1.15 +
    1.16 +			font: medium/1.3 Times New Roman, Times, serif;
    1.17 +			white-space: nowrap;
    1.18 +		}
    1.19 +	</style>
    1.20 +
    1.21   <body>
    1.22    <div class=head> <!--begin-logo-->
    1.23     <p><a href="http://www.w3.org/"><img alt=W3C height=48
    1.24 @@ -287,6 +301,56 @@
    1.25     a constrained height), or should it work automatically for all elements
    1.26     even if they don't have ‘<code class=css>overflow: regions</code>’?
    1.27  
    1.28 +  <div class=example>
    1.29 +   <table style="width: 100%">
    1.30 +    <tbody>
    1.31 +     <tr>
    1.32 +      <td>
    1.33 +       <pre>
    1.34 +&lt;!DOCTYPE HTML&gt;
    1.35 +&lt;title&gt;Breaking content into
    1.36 +  equal-sized cards&lt;/title&gt;
    1.37 +&lt;style&gt;
    1.38 +  .in-cards {
    1.39 +    overflow: regions;
    1.40 +
    1.41 +    width: 13em;
    1.42 +    height: 8em;
    1.43 +
    1.44 +    padding: 4px;
    1.45 +    border: medium solid blue;
    1.46 +    margin: 6px;
    1.47 +
    1.48 +    font: medium/1.3 Times New
    1.49 +      Roman, Times, serif;
    1.50 +  }
    1.51 +&lt;/style&gt;
    1.52 +&lt;div class="in-cards"&gt;
    1.53 +  In this example, the text in the div
    1.54 +  is broken into a series of cards.
    1.55 +  These cards all have the same style.
    1.56 +  The presence of enough content to
    1.57 +  overflow one of the cards causes
    1.58 +  another one to be created.  The second
    1.59 +  card is created just like it's the
    1.60 +  next sibling of the first.
    1.61 +&lt;/div&gt;
    1.62 +		</pre>
    1.63 +
    1.64 +      <td>
    1.65 +       <div class=in-cards-demo>In this example, the text in the<br>
    1.66 +        div is broken into a series of<br>
    1.67 +        cards. These cards all have the<br>
    1.68 +        same style. The presence of<br>
    1.69 +        enough content to overflow<br>
    1.70 +        one of the cards causes another</div>
    1.71 +
    1.72 +       <div class=in-cards-demo>one to be created. The second<br>
    1.73 +        card is created just like it's the<br>
    1.74 +        next sibling of the first.</div>
    1.75 +   </table>
    1.76 +  </div>
    1.77 +
    1.78    <h3 id=region-styling><span class=secno>3.1. </span>Region styling</h3>
    1.79  
    1.80    <h4 id=region-pseudo-element><span class=secno>3.1.1. </span>The

     2.1 --- a/css3-overflow/Overview.src.html	Mon Aug 06 17:08:38 2012 -0700
     2.2 +++ b/css3-overflow/Overview.src.html	Mon Aug 06 17:42:01 2012 -0700
     2.3 @@ -8,6 +8,19 @@
     2.4    <link rel="stylesheet" type="text/css" href="../default.css">
     2.5    <link rel="stylesheet" type="text/css"
     2.6          href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
     2.7 +	<style>
     2.8 +		.in-cards-demo {
     2.9 +			width: 13em;
    2.10 +			height: 8em;
    2.11 +
    2.12 +			padding: 4px;
    2.13 +			border: medium solid blue;
    2.14 +			margin: 6px;
    2.15 +
    2.16 +			font: medium/1.3 Times New Roman, Times, serif;
    2.17 +			white-space: nowrap;
    2.18 +		}
    2.19 +	</style>
    2.20  </head>
    2.21  
    2.22  <div class="head">
    2.23 @@ -195,6 +208,42 @@
    2.24  		even if they don't have ''overflow: regions''?
    2.25  	</p>
    2.26  
    2.27 +	<div class="example">
    2.28 +		<table style="width: 100%"><tr><td><pre>
    2.29 +&lt;!DOCTYPE HTML&gt;
    2.30 +&lt;title&gt;Breaking content into
    2.31 +  equal-sized cards&lt;/title&gt;
    2.32 +&lt;style&gt;
    2.33 +  .in-cards {
    2.34 +    overflow: regions;
    2.35 +
    2.36 +    width: 13em;
    2.37 +    height: 8em;
    2.38 +
    2.39 +    padding: 4px;
    2.40 +    border: medium solid blue;
    2.41 +    margin: 6px;
    2.42 +
    2.43 +    font: medium/1.3 Times New
    2.44 +      Roman, Times, serif;
    2.45 +  }
    2.46 +&lt;/style&gt;
    2.47 +&lt;div class="in-cards"&gt;
    2.48 +  In this example, the text in the div
    2.49 +  is broken into a series of cards.
    2.50 +  These cards all have the same style.
    2.51 +  The presence of enough content to
    2.52 +  overflow one of the cards causes
    2.53 +  another one to be created.  The second
    2.54 +  card is created just like it's the
    2.55 +  next sibling of the first.
    2.56 +&lt;/div&gt;
    2.57 +		</pre></td><td>
    2.58 +			<div class="in-cards-demo">In this example, the text in the<br>div is broken into a series of<br>cards.  These cards all have the<br>same style. The presence of<br>enough content to overflow<br>one of the cards causes another</div>
    2.59 +			<div class="in-cards-demo">one to be created.  The second<br>card is created just like it's the<br>next sibling of the first.</div>
    2.60 +		</td></tr></table>
    2.61 +	</div>
    2.62 +
    2.63  <h3 id="region-styling">Region styling</h3>
    2.64  
    2.65  <h4 id="region-pseudo-element">The ::nth-region() pseudo-element</h4>

css3-overflow/Overview.html		file \| annotate \| diff \| comparison \| revisions
css3-overflow/Overview.src.html		file \| annotate \| diff \| comparison \| revisions

Mercurial > drafts / changeset

changeset

Add one example.