May 26th, 2005 
[Article] XHTML/CSS Reference
A standard reference for commonly used code in stuff.
HTML Doctypes
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML Doctypes
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Basic template for valid XHTML document - stripped down.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML 1.1</title>
<meta http-equiv="Content-Type" content="text/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
</head>
<body>
<div></div>
</body>
</html>
Note that the Content-Type meta tag is irrelevant, but necessary to validate using the validator. The <div>s can be any block-level element AFAIK but you cannot just type text in between the <body> tags.
CSS Hacks
Tantek Box Model Hack
Code:#content {
/* IE 5.x width */
width: <content width + paddings + borders>;
voice-family: "\"}\"";
voice-family:inherit;
/* IE 6, and all other browser width */
width: <content width>;
}
Other Less Messier BMH
Code:#content {
width: <content width + paddings + borders>;
width/* */:/**/<content width>;
width: /**/<content width>;/* other declarations may appear anywhere in this rule */
}
Source: Alternate Box Model Hacks
Barebones Layout Example
Basic CSS-style fixed(not fluid) layout with a header, small right column, large left (content) column, and footer (floats)
index.html
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>XHTML 1.1</title>
<meta http-equiv="Content-Type" content="text/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css" media="screen">@import "screen.css";</style>
<style type="text/css" media="projection">@import "projection.css";</style>
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
</head>
<body>
<div id="container">
<div id="header">
<a href="#"><span>XHTML 1.1</span></a>
</div>
<div id="left">NICe NaVIGATION</div>
<div id="right">SupeRb ConTENT</div>
<div id="footer">© OMGHAX Ltd. 2005</div>
</div>
</body>
</html>
screen.css
Code:@import "all.css"; /* just some basic formatting, no layout stuff */
body {
margin: 0;
padding: 25px;
}
#container {
width: 600px;
margin: 0 auto;
background: #fff url(hax.jpg) repeat-y;
/* background gives appearance of maximum height
of #left and #right */
}#header {
width: 600px;
height: 100px;
background: #efefef url(bg.jpg) no-repeat top left;
}
#header a {
display: block;
width: 600px;
height: 100px;
}
#header a span {
display: none;
}#left {
float: left;
width: 200px; /* IE 5.x width */
padding: 10px;
background: #fff;
/* Tantek Box Model Hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 180px; /* IE 6 and other browsers width */
}#right {
float: left;
width: 400px;
padding: 10px;
background: #ddd;
/* Tantek Box Model Hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 380px;
}
#footer {
clear: both;
background: #eee;
width: 600px;
padding: 5px;
/* Tantek Box Model Hack */
voice-family: "\"}\"";
voice-family:inherit;
width: 590px;
}
all.css
Code:body {
font: .9em/1.3em Arial, Helvetica, sans-serif;
color: #666;
}#footer {
font-size: .7em;
}/* other nice stuff, etc */
projection.css
Code:@import "screen.css";
* {
font: 1.2em/1.7em bold Arial, Helvetica, sans-serif}
} /* zomg easy to read from afar */
print.css
Code:* {
background: #fff;
font: 12pt/17pt Georgia, "Times New Roman", Times, serif;
}#right {
text-align: justify;
}#footer {
font-size: 9pt;
}#left {
display: none;
}
Suggestions welcome.
___________________
irc.efnet.net #neverside
Neverside merchandise!
Last edited by James, May 26th, 2005 06:29 PM (Edited 2 times)
