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 } |