CSS defaults, html page layout, lorem ipsum.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis ligula at sem porta imperdiet. Morbi accumsan, quam vel porta imperdiet, sem odio ultricies diam, vel consectetur nibh tortor sit amet tellus. Ut sodales velit a nulla pretium vulputate. In a purus sed velit interdum molestie. Phasellus quis mauris a turpis venenatis convallis sed in neque. Duis eu nulla tellus, id euismod neque. Sed a felis libero, elementum venenatis elit.
Curabitur nulla diam, mollis non malesuada id, gravida nec nibh. Nulla eu mi sed neque pulvinar rutrum eu at eros. Suspendisse tempus luctus dolor vitae facilisis. Nam id fringilla diam. Phasellus posuere suscipit sapien vitae varius. Donec vulputate orci eget sem ultrices id viverra velit posuere. Aliquam tristique, est non consequat iaculis, velit mi ultricies lorem, eget condimentum neque mauris quis nulla. In augue justo, blandit ut feugiat in, pretium posuere velit.
Ut vitae tempus turpis.
Maecenas eleifend, nisi vitae fringilla sagittis, tellus nisl viverra odio, bibendum consectetur enim lorem id leo. Aenean turpis metus, ultricies eu scelerisque rutrum, interdum ut tortor. Ut facilisis lacinia placerat. Ut non turpis turpis. Suspendisse potenti. Sed rhoncus, risus id adipiscing luctus, mauris orci rutrum ante, sed placerat augue turpis eu urna. Duis pellentesque neque nec turpis semper ultricies. Duis ut ipsum neque, a tincidunt metus. Proin viverra nisi mauris, sed aliquam mi. Morbi congue magna urna, non tincidunt lacus. Sed sed turpis sed metus sodales eleifend sit amet vitae lectus. Integer auctor tincidunt purus, ut vehicula tortor sollicitudin et. Aliquam erat volutpat. Cras mollis tellus nec mauris dictum porta
Donec ut justo felis.
Mauris quis magna libero.
Nunc neque ante, malesuada quis condimentum vulputate, vehicula facilisis arcu. Curabitur molestie, sem in iaculis varius, orci eros ullamcorper eros, eget ornare libero sapien sed urna. Donec magna nisl, fringilla at adipiscing sed, volutpat et turpis. Nunc non urna id sapien euismod pulvinar vitae vel arcu. Cras laoreet placerat magna. Suspendisse potenti. Curabitur eget orci dolor. Aenean sodales hendrerit sem id porta. Cras pretium magna elit, eu sagittis dui. Fusce a ante dolor. Nulla egestas elit ut diam elementum sagittis. Mauris sed ante cursus ipsum pulvinar mollis at sit amet lorem. Suspendisse urna sem, imperdiet vitae dictum eget, varius eget sem. Praesent sapien lectus, dignissim ac consectetur nec, pretium commodo felis
Quisque vitae dolor neque.
Curabitur posuere, metus sit amet egestas congue, justo tortor fringilla est, et fringilla augue dolor a massa. Fusce eget velit orci, at vulputate leo. Fusce consequat pellentesque lacus a facilisis. Nam congue interdum ullamcorper. Cras imperdiet ullamcorper mollis. Nullam at sapien posuere dui dictum pretium vitae ac lectus. Quisque eget mattis quam. Etiam sodales gravida lectus id tempus. Donec elementum fringilla venenatis. Morbi laoreet mi sed tellus vestibulum sed auctor urna tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus placerat, nisl a lobortis tincidunt, mauris eros aliquam dolor, a tempus odio orci id risus. Donec pharetra, augue id dapibus rhoncus, nunc ante facilisis magna, eu aliquam libero odio in sapien. Nam consequat elit sit amet eros ultricies sed sollicitudin mauris rhoncus.
Nam sit amet imperdiet sed
Sed at orci sapien, in fringilla elit.
Sed pulvinar ullamcorper varius. Praesent vehicula commodo lorem, ut sollicitudin tortor tincidunt sed. Maecenas placerat, orci in varius sollicitudin, elit purus dignissim lectus, sed egestas nunc diam pellentesque lacus. Maecenas blandit ornare quam quis scelerisque. Sed magna nunc, tincidunt ut porttitor nec, suscipit ut ante. Maecenas tincidunt hendrerit ante quis mattis. Maecenas fermentum dignissim sem sit amet lobortis. Suspendisse nunc augue, consequat ac consectetur ut, sagittis ac tortor. Aenean in justo ut erat feugiat laoreet vel ac lacus. Vestibulum in adipiscing justo. Praesent quis sapien non lectus imperdiet fringilla. Phasellus at lorem ut enim tincidunt ultrices. Nunc at neque a turpis consequat volutpat a sit amet risus. Nulla facilisi.
Unordered list
- Sed at orci sapien, in fringilla elit.
- Aenean tempus dui semper lacus gravida a vehicula nisi lacinia.
Ordered list and an unordered list nested.
- In nec velit quis lacus tristique ornare.
-
Pellentesque quis libero vel nulla tempor ultrices.
- Ut ac ante sit amet eros viverra dapibus.
- Integer vitae magna a tellus imperdiet scelerisque id vitae nisi.
- Integer auctor nisl eget orci tempus posuere. Nullam sed arcu neque. Proin velit dolor, lobortis ut lacinia in, laoreet sit amet est. Etiam fringilla massa nec magna auctor sit amet ultricies nisi rhoncus. Suspendisse nibh diam, auctor vel gravida vitae, molestie ut nulla. Nunc dapibus, turpis in vehicula vestibulum, quam dolor varius dolor, at convallis arcu justo in felis. Fusce leo enim, porttitor ut tempor id, blandit sit amet ante.
- Ut vel diam pulvinar leo euismod blandit sed laoreet magna.
- Fusce eu nibh elit, ac pellentesque massa.
- Suspendisse pretium nisl a libero hendrerit tincidunt at id nunc.
- Quisque in tortor at erat eleifend egestas et vel sapien.
- Phasellus interdum lobortis dui, id rhoncus mi sagittis eu.
- Aenean posuere odio a ligula elementum non ornare est pulvinar.
Definition list
- Aenean eu urna lacus
- Nec scelerisque lectus
- Praesent quis risus
- Diam cursus posuere
Table
Table 1.
| Fermentum | Ultricies est tempus | |
|---|---|---|
| Cras ut purus felis | Scelerisque | Condimentum leo |
| Quisque fermentum | Porta dolor | Tempus mattis |
About this template
Rationale
This template gives a basic CSS and layout elements for a web page. The main feature of this template is that distances between elements are calculated to maintain a vertical rhythm and the same line height throuhout the page.
All smaller bits like form elements, column layouts, sliding menus, magic backgrounds etc. that can have infinite constructions multiplied to infinite stylings multiplied to infinite purposes, are left out from this template. An universal remedy that treats all diseases is nonsense. What about those CSS frameworks?
CSS Defaults
Different browsers have got differnt defaults. To get pages look alike across various browsers, we first reset some CSS defaults and then set our own defaults.
Margin vs padding
Margin collapsing is a good idea in principle. Unfortunately IE and others collapse margins differently and HR tag behaves funny. However, with well chosen margins and line-heights IE6 and any latest Firefox will display the content exactly the same. Another way is to switch partly over to paddings. Paddings behave stabile across browsers. Both ways have their pros and contras.
Rhythm
Vertical spacing on page follows a rhythm, it's like writing on a lined paper. The line height can be 1.2em or 1.3em, here 1.5em is used.
Rhythm. H1 does not need to attend in the rhythm as it's reserved to carry the name of site (SEO) and is often designed as a logo and is different thing from the content and usually separated from the content with nav bar and stuff. H2 is page title and also stays quite apart from the content. The real rhythm players are the mebers of content below H2.
To check out the flow, body background is used - body{background:url(underline.gif);}.
Sources
The idea to align the text by a vertical rhythm came from: http://24ways.org/2006/compose-to-a-vertical-rhythm
Lorem ipsum generator: http://www.lipsum.com/
Document terminology: http://docutils.sourceforge.net/docs/ref/doctree.html#section et al.
Calculating the vertical distances, line height
A browser considers a "normal" line height to be usually 1.2 times of the font size. Or 1.3 times.
A character has to have at least some 3px space below it, if less, the link's underline is cut off.
Formula: some-line-height = some-margin-top = some-margin-bottom = 1.5 / some-font-size. Formula is in em units. Asymmetrical top and bottom margins have to retain same total height.
If any borders used, we have to calculate respective margins and line heights that are less by the thickness of the border. If the basic (body) font-size is 14px, then 1px equals 1 / 14 = 0.071em, and say, table border-top will equal: 1.5em - ( 1 / 14px ) = 1.429em.
Line heights. 12px x 1.5em = 18px. 13px x 1.5em = 19.5px, so actual line height will wary on different browsers. 14px x 1.5em = 21px. 15px x 1.5em = 22.5px. 16px x 1.5em = 24px. The even font sizes - 12, 14 and 16 will display exactly the same in every browser.
If a font size exceeds 1.5em, the line height must be 1em or more. Because of the cross browser issues. Sample, font-size is 4.786em, closest exceeding line height that is 1.5 multiple, is 6; 6 / 4.786 = 1.254em
Line width
This line is 74 characters wide that is being considered easy for reading.
The rule-of-thumb is that the line width shouldn't exceed 70 characters (including spaces and punctuation), and if the text is left-aligned, a suitable line height for optimal readability on the web could be 1.5. Of course, this is quite dependent on the font face we use.
What fonts to use - cross platform fonts.
Sample: line width 500px, Georgia, font-size:15px, line-height:1.5em.
HTML units
EM vs PX. PX vs EM. WAI recommends em units. Text resizing is more easily solved with em units. However, browsers have got their built in resizers too... Pixel sizes are simpler to handle. What's fixed is fixed. Sometimes you have got to adjust character placement by half-pixels, sometimes it really doesn't matter how the text flows. Compare browser default, em, and pixel based flows under different browsers - font sizes compared. HTML units em, px and % all are got their own specific role in an mark up.
Mark up of a HTML template
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Template</title> <meta http-equiv="description" name="description" content="" /> <meta http-equiv="keywords" name="keywords" content="" /> <link href="../../common/style-all.css" rel="stylesheet" type="text/css" /> <link href="../../common/style-print.css" media="print" rel="stylesheet" type="text/css" /> <link href="../../favicon.ico" rel="shortcut icon" type="image/ico" /> <link href="../../favicon.ico" rel="icon" type="image/ico" /> <script type="text/javascript"> //<![CDATA[ function(); //]]> </script> </head> <body> <div class="page"> <div class="header"> <h1>site title</h1> </div> <div class="nav"> main navigation bar </div> <div class="body"> <div class="aside"> side menu, ads, function boxes... </div> <div class="main"> <h2>page title</h2> <p>content</p> </div> </div> <div class="footer"> <p>footer</p> </div> </div> </body>
CSS template with paddings
/*DEFAULT STYLE*/
*{
margin:0;
padding:0;
}
img{
border:none;
vertical-align:middle;
}
body{
background:url(underline-12.gif);
color:#444;
font:12px/1.5em 'arial unicode ms',arial,sans-serif;/*font sizes on the page are set here*/
padding-left:1%;
padding-right:1%;
}
a:link,
a:visited{
}
a:hover,
a:active{
outline:none;/*FireFox tabindex gets disabled as well*/
}
h1{/*site, domain name, logo*/
font:normal 3em/1em georgia,serif;
padding-bottom:0.5em;
padding-top:0.5em;
}
h2{/*page title*/
font:normal 2em/0.75em georgia,serif;
padding-bottom:0.75em;
}
h3{/*sections of content*/
font:normal 1.5em/1em georgia,serif;
padding-bottom:1em;
padding-top:1em;
}
h4{/*sub sections of content*/
font-size:1.2em;
line-height:1.25em;
padding-bottom:1.25em;
}
h5{
font-size:1em;
line-height:1.5em;
}
p{
font-size:1em;
line-height:1.5em;
padding-bottom:1.5em;
}
li{
font-size:1em;
line-height:1.5em;
}
ol{
padding-bottom:1.5em;
padding-left:2.5em;
*padding-left:3em;
}
ul{
padding-bottom:1.5em;
padding-left:2.5em;
}
dl{
padding-bottom:1.5em;
}
dt{
font-size:1em;
line-height:1.5em;
}
dd{
font-size:1em;
line-height:1.5em;
padding-left:2.5em;
}
table{
border-collapse:collapse;
margin-bottom:1.417em;
}
th,td{
border:1px solid #999;
line-height:1.417em;/* less by table border-top: 1.5em - ( 1 / 14px ) = 1.429em; 12px > 1.417em */
padding-left:0.5em;
padding-right:0.5em;
}
hr{
background:#aaa;
border:none 0;
color:#aaa;
display:block;
height:1px;
margin-bottom:17px/*font-size:12px > margin:bottom:17px; font-size:14px > margin:bottom:20px; margin:bottom = 1.5em - 1px*/
*margin-bottom:10px;/*font-size:12px > margin:bottom:10px; font-size:14px > margin:bottom:13px;*/
*margin-top:-7px;/*constant*/
}
/*end DEFAULT STYLE*/
/*MAIN PARTS OF THE PAGE*/
.page{/*screen-wide page*/
overflow:hidden;
padding-bottom:3em;
width:100%;
}
.page{/*fix-width page centered*/
margin:0 auto;
overflow:hidden;
padding-bottom:3em;
width:965px;/*fits nicely in 1024 screen*/
}
.header{
float:left;
width:100%;
}
.nav{
float:left;
width:100%;
}
.body{
float:left;
width:100%;
}
.aside{
float:right;
margin-top:4.43em;
width:160px;
}
.main{
margin-right:180px;
width:auto;
}
.section{/*for holding any layouted sections*/
float:left;
width:100%;
}
.footer{
float:left;
width:100%;
}
/*end MAIN PARTS OF THT PAGE*/
Some CSS for printing media
body{
background:none;
padding:0;
}
.main a:link:after,
.main a:visited:after{
content:" (" attr(href) ")";
}
a{
border:none 0;
color:#000;
text-decoration:none;
}
.noPrint{
display:none;
}
Sample of CSS using margins for vertical spacing
/*DEFAULT STYLE*/
*{
margin:0;
padding:0;
}
img{
border:none 0;
vertical-align:middle;
}
body{
color:#444;
font:14px/1.5em 'arial unicode ms',sans-serif;/*all font sizes on the page are set here*/
padding-left:1%;
padding-right:1%;
}
a:link,
a:visited{
outline:none;/*FireFox tabindex gets disabled as well*/
}
a:hover,
a:active{
outline:none;/*FireFox tabindex gets disabled as well*/
}
h1{/*domain name, site, logo*/
font:normal 3em/1em georgia,serif;
margin:0.5em 2% 0.5em 2%;
}
h2{/*page title*/
font:normal 2em/0.75em georgia,serif;
margin:0.75em 2% 0.75em 2%;
}
h2{/*page title with an underline*/
font:normal 2em/0.75em georgia,serif;
border-bottom:1px solid #666;
margin:0.75em 2% 0.537em 2%;
padding-bottom:0.142em;
}
h3{/*sections of content*/
font:normal 1.5em/1em georgia,serif;
margin:1em 2% 1em 2%;
}
h4{/*sub sections of content*/
font-size:1.2em;
line-height:1.25em;
margin:1.25em 2% 1.25em 2%;
}
h5{/*lead of paragraph*/
font-size:1em;
line-height:1.5em;
margin:1.5em 2% -1.5em 2%;
}
p{
font-size:1em;
line-height:1.5em;
margin:1.5em 2% 1.5em 2%;
}
li{
font-size:1em;
line-height:1.5em;
}
ol{
margin:1.5em 2%;
padding-left:2.5em;
*padding-left:3em;
}
ul{
margin:1.5em 2%;
padding-left:2.5em;
}
dl{
margin:1.5em 2%;
}
dt{
font-size:1em;
line-height:1.5em;
}
dd{
font-size:1em;
line-height:1.5em;
padding-left:2.5em;
}
table{
border-collapse:collapse;
margin:1.5em 2% -0.071em 2%;
*margin-bottom:1.429em;
}
th,td{
border:1px solid #999;
line-height:1.429em;/* less by table border-top: 1.5em - ( 1 / 14px ) = 1.429em */
padding-left:0.5em;
padding-right:0.5em;
}
hr{
background:#aaa;
border:none 0;
color:#aaa;
display:block;
height:1px;
margin:1.5em 2% -1px 2%;
*margin-bottom:-8px;
*margin-top:-7px;
}
/*end DEFAULT STYLE*/
