An Example


Figure 9.1, the CSS version of the cover of Stanley Morison's book, was made by individually positioning each word. Here is the source code:

 <body>   <div id=co>    <p>       <span id=fi>First</span>       <span id=pr>Principles</span>       <span id=of>of</span>       <span id=ty>Typo</span><span id=gr>graphy</span>     <p>       <span id=st>Stanley</span>       <span id=mo>Morison</span>     <p>       <span id=ed>New edition</span>   </div> </body> 

As Figure 9.1 shows, this HTML is "clean," in the sense that it is perfectly readable even without a style sheet.

The style sheet is as follows. It expresses the size of the cover (the DIV element) as a certain number of ems and the positions of all elements as percentages of the width and height of the DIV. Thus, the size only depends on the size of the body font and by changing only the body font, the result can be made larger or smaller at will:

 BODY {     font: 30px/1 "Lucida Bright", serif;     background: #FEB;     color: #874 } #co {     position: relative;     width: 9em;     height: 15em;     border: solid 0.1em black } #fi, #pr, #of, #ed {     position: absolute;     text-align: left } #ty, #gr, #st, #mo {     position: absolute;     text-align: right } #fi { top: 12%; left: 11% } #pr { top: 19%; left: 6% } #of { top: 26%; left: 13% } #ty, #gr { font-size: 140% } #st, #mo {     font: italic 90%/1       "Adobe Garamond Pro", "Garamond", serif;     letter-spacing: 0.3em;     color: #C00 } #ty { top: 30%; right: 6% } #gr { top: 42%; right: 10% } #st { top: 37%; right: 6% } #mo { top: 49%; right: 13% } #ed {     top: 88%;     width: 45%;     padding: 0.5em;     background: #CCB;     color: #C00;     text-align: center;     font: bold 50%/1 "Helvetica", sans-serif } 

Absolute positioning is probably the most straightforward way to make this layout, but it isn't the only one. You can also use the MARGIN properties. In that case, to position the name of the author which overlaps the title you need negative margins. Here is another style sheet for the same layout:

 BODY {     font: 30px/1 "Lucida Bright", serif;     background: #FEB; color: #874 } #co {     width: 9em;     height: 15em;     border: solid 0.1em black } #fi, #pr, #of, #ed {     display: block;     text-align: left } #ty, #gr, #st, #mo {     display: block;     text-align: right } #fi { margin: 1.8em 0 0 11% } #pr { margin: 0.1em 0 0 6% } #of { margin: 0.1em 0 0 13% } #ty, #gr { font-size: 140% } #st, #mo {     font: italic 90%/1      "Adobe Garamond Pro", "Garamond", serif;     letter-spacing: 0.3em;     color: #C00 } #ty { margin: -0.3em 6% 0 0 } #gr { margin: 0.3em 10% 0 0 } #st { margin: -3.5em 6% 0 0 } #mo { margin: 1em 13% 0 0 } #ed {     margin: 10em 0 1em 0;     width: 45%;     padding: 0.5em; background: #CCB;     color: #C00;     text-align: center;     font: bold 50%/1 "Helvetica", sans-serif } 



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net