drafts: changeset 6481:2982b7c71c57

     1.1 --- a/css3-overflow/Overview.html	Mon Aug 06 19:44:01 2012 -0700
     1.2 +++ b/css3-overflow/Overview.html	Mon Aug 06 19:58:48 2012 -0700
     1.3 @@ -14,6 +14,7 @@
     1.4  		table.source-demo-pair {
     1.5  			width: 100%;
     1.6  		}
     1.7 +
     1.8  		.in-cards-demo {
     1.9  			width: 13em;
    1.10  			height: 8em;
    1.11 @@ -25,6 +26,7 @@
    1.12  			font: medium/1.3 Times New Roman, Times, serif;
    1.13  			white-space: nowrap;
    1.14  		}
    1.15 +
    1.16  		.bouncy-columns-demo {
    1.17  			width: 6em;
    1.18  			height: 10em;
    1.19 @@ -58,6 +60,33 @@
    1.20  			margin-right: 2em;
    1.21  		}
    1.22  
    1.23 +		.dark-columns-demo {
    1.24 +			width: 6em;
    1.25 +			height: 10em;
    1.26 +			float: left;
    1.27 +			margin-right: 1em;
    1.28 +			font: medium/1.25 Times New Roman, Times, serif;
    1.29 +			white-space: nowrap;
    1.30 +		}
    1.31 +		.dark-columns-demo.one {
    1.32 +			background: aqua; color: black;
    1.33 +		}
    1.34 +		.dark-columns-demo.one :link {
    1.35 +			color: blue;
    1.36 +		}
    1.37 +		.dark-columns-demo.one :visited {
    1.38 +			color: purple;
    1.39 +		}
    1.40 +		.dark-columns-demo.two {
    1.41 +			background: navy; color: white;
    1.42 +		}
    1.43 +		.dark-columns-demo.two :link {
    1.44 +			color: aqua;
    1.45 +		}
    1.46 +		.dark-columns-demo.two :visited {
    1.47 +			color: fuchsia;
    1.48 +		}
    1.49 +
    1.50  		.article-max-lines-demo {
    1.51  			font: 1em/1.25 Times New Roman, Times, serif;
    1.52  			white-space: nowrap;
    1.53 @@ -626,7 +655,64 @@
    1.54      to, and whose index matches the pseudo-element.
    1.55    </ol>
    1.56  
    1.57 -  <p class=issue> TODO: ADD EXAMPLE HERE.
    1.58 +  <div class=example>
    1.59 +   <table class=source-demo-pair>
    1.60 +    <tbody>
    1.61 +     <tr>
    1.62 +      <td>
    1.63 +       <pre>&lt;!DOCTYPE HTML&gt;
    1.64 +&lt;style&gt;
    1.65 +  .dark-columns {
    1.66 +    overflow: regions;
    1.67 +    width: 6em;
    1.68 +    height: 10em;
    1.69 +    float: left;
    1.70 +    margin-right: 1em;
    1.71 +    font: medium/1.25 Times New
    1.72 +      Roman, Times, serif;
    1.73 +  }
    1.74 +  .dark-columns::nth-region(1) {
    1.75 +    background: aqua; color: black;
    1.76 +  }
    1.77 +  .dark-columns::nth-region(1) :link {
    1.78 +    color: blue;
    1.79 +  }
    1.80 +  .dark-columns::nth-region(1) :visited {
    1.81 +    color: purple;
    1.82 +  }
    1.83 +  .dark-columns::nth-region(2) {
    1.84 +    background: navy; color: white;
    1.85 +  }
    1.86 +  .dark-columns::nth-region(2) :link {
    1.87 +    color: aqua;
    1.88 +  }
    1.89 +  .dark-columns::nth-region(2) :visited {
    1.90 +    color: fuchsia;
    1.91 +  }
    1.92 +&lt;/style&gt;
    1.93 +&lt;div class="dark-columns"&gt;
    1.94 +  <i>...</i>
    1.95 +&lt;/div&gt;</pre>
    1.96 +
    1.97 +      <td>
    1.98 +       <div class="dark-columns-demo one">In this<br>
    1.99 +        <a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>
   1.100 +        text flows<br>
   1.101 +        from one<br>
   1.102 +        light-colored<br>
   1.103 +        region into<br>
   1.104 +        another<br>
   1.105 +        dark-colored</div>
   1.106 +
   1.107 +       <div class="dark-columns-demo two">region. We<br>
   1.108 +        therefore want<br>
   1.109 +        different styles<br>
   1.110 +        for <a
   1.111 +        href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>
   1.112 +        in the different<br>
   1.113 +        regions.</div>
   1.114 +   </table>
   1.115 +  </div>
   1.116  
   1.117    <h3 id=max-lines><span class=secno>3.2. </span>The ‘<a
   1.118     href="#max-lines0"><code class=property>max-lines</code></a>’ property</h3>

     2.1 --- a/css3-overflow/Overview.src.html	Mon Aug 06 19:44:01 2012 -0700
     2.2 +++ b/css3-overflow/Overview.src.html	Mon Aug 06 19:58:48 2012 -0700
     2.3 @@ -12,6 +12,7 @@
     2.4  		table.source-demo-pair {
     2.5  			width: 100%;
     2.6  		}
     2.7 +
     2.8  		.in-cards-demo {
     2.9  			width: 13em;
    2.10  			height: 8em;
    2.11 @@ -23,6 +24,7 @@
    2.12  			font: medium/1.3 Times New Roman, Times, serif;
    2.13  			white-space: nowrap;
    2.14  		}
    2.15 +
    2.16  		.bouncy-columns-demo {
    2.17  			width: 6em;
    2.18  			height: 10em;
    2.19 @@ -56,6 +58,33 @@
    2.20  			margin-right: 2em;
    2.21  		}
    2.22  
    2.23 +		.dark-columns-demo {
    2.24 +			width: 6em;
    2.25 +			height: 10em;
    2.26 +			float: left;
    2.27 +			margin-right: 1em;
    2.28 +			font: medium/1.25 Times New Roman, Times, serif;
    2.29 +			white-space: nowrap;
    2.30 +		}
    2.31 +		.dark-columns-demo.one {
    2.32 +			background: aqua; color: black;
    2.33 +		}
    2.34 +		.dark-columns-demo.one :link {
    2.35 +			color: blue;
    2.36 +		}
    2.37 +		.dark-columns-demo.one :visited {
    2.38 +			color: purple;
    2.39 +		}
    2.40 +		.dark-columns-demo.two {
    2.41 +			background: navy; color: white;
    2.42 +		}
    2.43 +		.dark-columns-demo.two :link {
    2.44 +			color: aqua;
    2.45 +		}
    2.46 +		.dark-columns-demo.two :visited {
    2.47 +			color: fuchsia;
    2.48 +		}
    2.49 +
    2.50  		.article-max-lines-demo {
    2.51  			font: 1em/1.25 Times New Roman, Times, serif;
    2.52  			white-space: nowrap;
    2.53 @@ -511,9 +540,45 @@
    2.54  		</li>
    2.55  	</ol>
    2.56  
    2.57 -	<p class="issue">
    2.58 -		TODO: ADD EXAMPLE HERE.
    2.59 -	</p>
    2.60 +	<div class="example">
    2.61 +		<table class="source-demo-pair"><tr><td><pre>&lt;!DOCTYPE HTML&gt;
    2.62 +&lt;style&gt;
    2.63 +  .dark-columns {
    2.64 +    overflow: regions;
    2.65 +    width: 6em;
    2.66 +    height: 10em;
    2.67 +    float: left;
    2.68 +    margin-right: 1em;
    2.69 +    font: medium/1.25 Times New
    2.70 +      Roman, Times, serif;
    2.71 +  }
    2.72 +  .dark-columns::nth-region(1) {
    2.73 +    background: aqua; color: black;
    2.74 +  }
    2.75 +  .dark-columns::nth-region(1) :link {
    2.76 +    color: blue;
    2.77 +  }
    2.78 +  .dark-columns::nth-region(1) :visited {
    2.79 +    color: purple;
    2.80 +  }
    2.81 +  .dark-columns::nth-region(2) {
    2.82 +    background: navy; color: white;
    2.83 +  }
    2.84 +  .dark-columns::nth-region(2) :link {
    2.85 +    color: aqua;
    2.86 +  }
    2.87 +  .dark-columns::nth-region(2) :visited {
    2.88 +    color: fuchsia;
    2.89 +  }
    2.90 +&lt;/style&gt;
    2.91 +&lt;div class="dark-columns"&gt;
    2.92 +  <i>...</i>
    2.93 +&lt;/div&gt;</pre></td><td>
    2.94 +			<div class="dark-columns-demo one">In this<br><a href="http://en.wiktionary.org/wiki/example">example</a>, the<br>text flows<br>from one<br>light-colored<br>region into<br>another<br>dark-colored</div>
    2.95 +			<div class="dark-columns-demo two">region.  We<br>therefore want<br>different styles<br>for <a href="http://www.w3.org/Provider/Style/IntoContext.html">hyperlinks</a><br>in the different<br>regions.</div>
    2.96 +		</td></tr></table>
    2.97 +	</div>
    2.98 +
    2.99  
   2.100  <h3 id="max-lines">The 'max-lines' property</h3>
   2.101

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

Mercurial > drafts / changeset

changeset

Add example for styling in regions.