advanced code snippet search

Posted By

Jdub7 on 02/25/09


Tagged

css test page layout sample


Versions (?)

Who likes this?

20 people have marked this snippet as a favorite

jfherring
Hirmine
jitendraweb
Keef
GaGa
vali29
esritter
jmiller
Pixxell
cesgra
bigevilbrain
unibox
ljayz
Jdub7
heretoburma
wearefreya
dajocko
banjomamo
wirenaught
EkTrOn


CSS Test Page

 / Published in: XHTML
 

Use this to test your CSS markup.

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <!-- BEGIN HEAD -->
  5. <head>
  6. 	<title>Sample Page</title>
  7. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. 	<link rel="Shortcut Icon" href="./favicon.ico" type="image/x-icon" />
  9.  
  10. 	<link rel="stylesheet" href="./css/style.css" type="text/css" media="screen,handheld" />
  11. <!--[if IE]><link rel="stylesheet" href="./css/ie.css" type="text/css" media="all" /><![endif]-->
  12. <!--[if IE 6]><link rel="stylesheet" href="./css/ie6.css" type="text/css" media="all" /><![endif]-->
  13. 	<script type="text/javascript" src="./libs/js/jquery-1.3.1.min.js"></script>
  14. </head>
  15. <body id="index">
  16. <div id="container">
  17. 	<div id="header">
  18. 		<h1>Sample page</h1>
  19. 		<h2>Test Your CSS</h2>
  20. 	</div>
  21. 	<div id="navigation">
  22. 		<ul>
  23. 			<li>
  24. 				<a href="#" title="" class="active">Link</a>
  25. 			</li>
  26. 			<li>
  27. 				<a href="#" title="">Link</a>
  28. 			</li>
  29. 			<li>
  30. 				<a href="#" title="">Link</a>
  31. 			</li>
  32. 			<li>
  33. 				<a href="#" title="">Link</a>
  34. 			</li>
  35. 			<li id="logout">
  36. 				<a href="./logout" title="">Logout</a>
  37. 			</li>
  38. 		</ul>
  39. 	</div>
  40. 	<div id="main">
  41. 		<div id="messages">
  42. 			<p class="notice">This is a notice message</p>
  43. 			<p class="warning">This is a warning message</p>
  44. 			<p class="error">This is an error message</p>
  45. 		</div>
  46. 		<div id="content">
  47. 			<div id="sample-page">
  48. 				<div id="anchor-samples">
  49. 					<ul>
  50. 						<li><a href="#headers-samples">Headers</a></li>
  51. 						<li><a href="#text-samples">Text</a></li>
  52. 						<li><a href="#list-samples">List</a></li>
  53. 						<li><a href="#table-samples">Table</a></li>
  54. 						<li><a href="#form-samples">Form</a></li>
  55. 					</ul>
  56. 				</div>
  57. 				<div id="headers-samples">
  58. 					<h1>Header 1</h1>
  59. 					<p>This is a paragraph after a Level 1 Header.</p>
  60. 					<h2>Header 2</h2>
  61. 					<p>This is a paragraph after a Level 2 Header.</p>
  62. 					<h3>Header 3</h3>
  63. 					<p>This is a paragraph after a Level 3 Header.</p>
  64. 					<h4>Header 4</h4>
  65. 					<p>This is a paragraph after a Level 4 Header.</p>
  66. 					<h5>Header 5</h5>
  67. 					<p>This is a paragraph after a Level 5 Header.</p>
  68. 					<h6>Header 6</h6>
  69. 					<p>This is a paragraph after a Level 6 Header.</p>
  70. 				</div>
  71. 				<hr />
  72. 				<div id="text-samples">
  73. 					<p>This is just really long paragraph with some Lorem Ipsum Text.Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus. Quisque justo. Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Etiam viverra augue non enim.</p> 
  74. 					<blockquote><p>This is a paragraph inside of a blockquote</p></blockquote>
  75. 					<address>Address: 1 Simple Way</address>
  76. 					<p>This paragraph uses <span>valid</span> <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>. <strong>Strong markup</strong> is used along with <em>Emphasis on this text</em></p>
  77. 					<pre>Preformatted markup                can have a lot of spaces!</pre>
  78. 				</div>
  79. 				<hr />
  80. 				<div id="list-samples">
  81. 					<ul>
  82. 						<li>Unordered list 01</li>
  83. 						<li>Unordered list 02</li>
  84. 						<li>Unordered list 03
  85. 							<ul>
  86. 								<li>Unordered list inside list level 2</li>
  87. 								<li>Unordered list inside list level 2
  88. 									<ul>
  89. 										<li>Unordered list inside list level 3</li>
  90. 										<li>Unordered list inside list level 3</li>
  91. 									</ul>
  92. 								</li>
  93. 							</ul>
  94. 						</li>
  95. 					</ul>
  96. 					<ol>
  97. 						<li>Ordered list 01</li>
  98. 						<li>Ordered list 02</li>
  99. 						<li>Ordered list 03
  100. 							<ol>
  101. 								<li>Ordered list inside list level 2</li>
  102. 								<li>Ordered list inside list level 2
  103. 									<ol>
  104. 										<li>Ordered list inside list level 3</li>
  105. 										<li>Ordered list inside list level 3</li>
  106. 									</ol>
  107. 								</li>
  108. 							</ol>
  109. 						</li>
  110. 					</ol>
  111. 					<dl>
  112. 						<dt>Description list title 01</dt>
  113. 						<dd>Description list description 01</dd>
  114. 						<dt>Description list title 02</dt>
  115. 						<dd>Description list description 02</dd>
  116. 						<dd>Description list description 03</dd>
  117. 					</dl>
  118. 				</div>
  119. 				<hr />
  120. 				<div id="table-samples">
  121. 					<table summary="This is a sample table">
  122. 						<caption>Sample Table</caption>
  123. 						<colgroup>
  124. 							<col class="this" />
  125. 							<col class="that" />
  126. 							<col class="this" />
  127. 							<col class="that" />
  128. 							<col class="this" />
  129. 							<col class="that" />
  130. 						</colgroup>
  131. 						<thead>
  132. 							<tr>
  133. 								<th>First</th>
  134. 								<th>Second</th>
  135. 								<th>Third</th>
  136. 								<th>Fourth</th>
  137. 								<th>Fifth</th>
  138. 								<th>Sixth</th>
  139. 							</tr>
  140. 						</thead>
  141. 						<tfoot>
  142. 							<tr>
  143. 								<th>First</th>
  144. 								<th>Second</th>
  145. 								<th>Third</th>
  146. 								<th>Fourth</th>
  147. 								<th>Fifth</th>
  148. 								<th>Sixth</th>
  149. 							</tr>
  150. 						</tfoot>
  151. 						<tbody>
  152. 							<tr class="odd">
  153. 								<td>Row 1 Column 1</td>
  154. 								<td>Row 1 Column 2</td>
  155. 								<td>Row 1 Column 3</td>
  156. 								<td>Row 1 Column 4</td>
  157. 								<td>Row 1 Column 5</td>
  158. 								<td>Row 1 Column 6</td>
  159. 							</tr>
  160. 							<tr class="even">
  161. 								<td>Row 2 Column 1</td>
  162. 								<td>Row 2 Column 2</td>
  163. 								<td>Row 2 Column 3</td>
  164. 								<td>Row 2 Column 4</td>
  165. 								<td>Row 2 Column 5</td>
  166. 								<td>Row 2 Column 6</td>
  167. 							</tr>
  168. 							<tr class="odd">
  169. 								<td>Row 3 Column 1</td>
  170. 								<td>Row 3 Column 2</td>
  171. 								<td>Row 3 Column 3</td>
  172. 								<td>Row 3 Column 4</td>
  173. 								<td>Row 3 Column 5</td>
  174. 								<td>Row 3 Column 6</td>
  175. 							</tr>
  176. 							<tr class="even">
  177. 								<td>Row 4 Column 1</td>
  178. 								<td>Row 4 Column 2</td>
  179. 								<td>Row 4 Column 3</td>
  180. 								<td>Row 4 Column 4</td>
  181. 								<td>Row 4 Column 5</td>
  182. 								<td>Row 4 Column 6</td>
  183. 							</tr>
  184. 							<tr class="odd">
  185. 								<td>Row 5 Column 1</td>
  186. 								<td>Row 5 Column 2</td>
  187. 								<td>Row 5 Column 3</td>
  188. 								<td>Row 5 Column 4</td>
  189. 								<td>Row 5 Column 5</td>
  190. 								<td>Row 5 Column 6</td>
  191. 							</tr>
  192. 							<tr class="even">
  193. 								<td>Row 6 Column 1</td>
  194. 								<td>Row 6 Column 2</td>
  195. 								<td>Row 6 Column 3</td>
  196. 								<td>Row 6 Column 4</td>
  197. 								<td>Row 6 Column 5</td>
  198. 								<td>Row 6 Column 6</td>
  199. 							</tr>
  200. 						</tbody>
  201. 					</table>
  202. 				</div>
  203. 				<hr />
  204. 				<div id="form-samples">
  205. 					<form method="post" action="./">
  206. 						<fieldset>
  207. 							<legend>Legend</legend>
  208. 							<p>
  209. 								<label for="text-input">Text Input</label>
  210. 								<input id="text-input" name="text-input" type="text" value="Text Input" />
  211. 							</p>
  212. 							<p>
  213. 								<label for="password-input">Password Input</label>
  214. 								<input id="password-input" name="password-input" type="password" value="Password Input" />
  215. 							</p>
  216. 							<p>
  217. 								<label for="radio1-input">Radio 1 Input</label>
  218. 								<input id="radio1-input" name="radio-input" type="radio" value="1" />
  219. 								<label for="radio2-input">Radio 2 Input</label>
  220. 								<input id="radio2-input" name="radio-input" type="radio" value="2" />
  221. 							</p>
  222. 							<p>
  223. 								<label for="checkbox1-input">checkbox 1 Input</label>
  224. 								<input id="checkbox1-input" name="checkbox1-input" type="checkbox" value="1" />
  225. 								<label for="checkbox2-input">checkbox 2 Input</label>
  226. 								<input id="checkbox2-input" name="checkbox2-input" type="checkbox" value="2" />
  227. 							</p>
  228. 							<p>
  229. 								<label for="select-input">Select Box</label>
  230. 								<select id="select-input" name="select-input">
  231. 									<optgroup label="1 thru 3">
  232. 										<option value="1">Option 1</option>
  233. 										<option value="2">Option 2</option>
  234. 										<option value="3">Option 3</option>
  235. 									</optgroup>
  236. 									<option value="4">Option 4</option>
  237. 									<option value="5">Option 5</option>
  238. 									<option value="6">Option 6</option>
  239. 								</select>
  240. 							</p>
  241. 							<p>
  242. 								<label for="textarea-input">Textarea Input</label>
  243. 								<textarea id="textarea-input" name="textarea-input" rows="20" cols="40">This is a textarea.</textarea>
  244. 							</p>
  245. 							<input type="submit" />
  246. 							<input type="reset" />
  247. 						</fieldset>
  248. 					</form>
  249. 				</div>
  250. 			</div>
  251. 		</div>
  252. 	</div>
  253. 	<div id="footer">
  254. 		<p>Copyright &copy; 2001-2009 One Good Company</p>
  255. 	</div>
  256. </div>
  257. </body>
  258. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Jdub7 on August 2, 2009

Updated: Corrected some XHTML strict validation bugs.

Posted By: cesgra on October 26, 2009

Line 50 has no closing tag for

  • .

    • You need to login to post a comment.