advanced code snippet search

Posted By

wizard04 on 06/26/09


Tagged

css reset classes


Versions (?)


Advertising

Website Promotion DIRECTORY is a crucial factor for all websites that need to gain better organic search engine rankings and increase website traffic.
Submitting your website as part of your Web Promotion strategy to our SEO friendly and high traffic Business Directory for review is an excellent way to gain a valuable backlink and increase your websites visibility online.

Submit Site


Who likes this?

2 people have marked this snippet as a favorite

spazione
aleksanderek


DzR Master Stylesheet (Part II, Classes)

Published in: CSS 

An add-on to my reset stylesheet. Many helpful classes for layout, writing styles, paged media, etc.

For the printHref class, you'll need to replace "example.com" with your own domain.

Part I Part III

Expand | Embed | Plain Text 
  1. /**************************************************************************************************/
  2. /*This stylesheet was created for HTML 4.01 using CSS 3 (and older)
  3. /*Tested on Windows versions of Firefox 1.5-3.0, IE 6-7, Safari 3.2, Opera 9.2-9.6, and K-Meleon 1.5
  4. /*
  5. /*REPLACE "example.com" WITH YOUR OWN DOMAIN in the paged media styles near the bottom! (Search for "TODO".)
  6. /*
  7. /*1.0: Layout
  8. /*2.0: Paragraphs
  9. /*3.0: Lists
  10. /*4.0: Tables
  11. /*5.0: Miscellaneous
  12. /*6.0: Form Errors
  13. /*7.0: Media-Specific
  14. /**************************************************************************************************/
  15.  
  16. /*******************/
  17. /*** 1.0: Layout ***/
  18. /*******************/
  19.  
  20. .break {
  21. 	clear:both;
  22. 	height:0;
  23. 	overflow:hidden;
  24. }
  25. .clear { clear:both; }
  26.  
  27. /*sometimes javascript has trouble setting elem.style.float, so you can set elem.className instead:*/
  28. .floatLeft { float:left !important; }
  29. .floatRight { float:right !important; }
  30. .floatNone { float:none !important; }
  31.  
  32. /*Note: these don't work in IE at all; other browsers may have issues*/
  33. .table		{ display:table; }
  34. .tcaption	{ display:table-caption; }
  35. .tcolgroup	{ display:table-column-group; }
  36. .tcol		{ display:table-column; }
  37. .thead		{ display:table-header-group; }
  38. .tbody		{ display:table-row-group; }
  39. .tfoot		{ display:table-footer-group; }
  40. .tr			{ display:table-row; }
  41. .th, .td	{ display:table-cell; }
  42.  
  43. .centerBlock {
  44. 	display:table;
  45. 	margin-left:auto;
  46. 	margin-right:auto;
  47. }
  48.  
  49. body.fullHeight {
  50. 	height:100%;
  51. 	padding:0;
  52. 	border-top:1px solid transparent; margin-top:-1px;	/*defeat Firefox bug*/
  53. }
  54.  
  55. /***********************/
  56. /*** 2.0: Paragraphs ***/
  57. /***********************/
  58.  
  59. /*indented paragraphs are usually used in books*/
  60. .indent p + p { margin-top:-1em; }	/*no space between the paragraphs*/
  61. .indent p, p.indent { text-indent:1.25em; }
  62. p.noIndent, .indent p:first-child, 
  63. .indent h1 + p, .indent h2 + p, .indent h3 + p, 
  64. .indent h4 + p, .indent h5 + p, .indent h6 + p {
  65. 	text-indent:0;	/*if this is the first paragraph or it immediately follows a header, it shouldn't be indented*/
  66. }
  67. .indent p.indent { text-indent:1.25em; }
  68.  
  69. /*hanging paragraphs/indents are usually used for bibliographies*/
  70. .hang p, p.hang { padding-left:1.25em; text-indent:-1.25em; }
  71. p.noHang { padding-left:0; text-indent:0; }
  72.  
  73. /******************/
  74. /*** 3.0: Lists ***/
  75. /******************/
  76.  
  77. ol.bullets { list-style-type:disc; }
  78. ol.bullets ol { list-style-type:circle; }
  79. ol.bullets ol ol { list-style-type:square; }
  80.  
  81. ul.inside, ol.inside {
  82. 	padding-left:0;
  83. 	list-style-position:inside;
  84. }
  85.  
  86. ul.inline, ol.inline {
  87. 	display:inline;
  88. 	list-style-type:none;
  89. 	padding-left:0;
  90. }
  91. ul.inline>li, ol.inline>li {
  92. 	display:inline;
  93. }
  94.  
  95. /*Adds delimiters for inline lists. For example (if the browser supports this class fully):
  96. /*  <ul class="inline delimit"><li>bread</li><li>milk</li><li>peanut butter</li></ul>
  97. /*becomes:
  98. /*  bread, milk, and peanut butter
  99. /*Note: these don't work in IE nor Opera 9.2; pseudo-element ::after and pseudo-classes :last-child and :nth-last-child()
  100. /*  aren't supported.
  101. /*Note: the "and" ones don't work in Firefox or K-Meleon; pseudo-class :nth-last-child() isn't supported.*/
  102. ul.inline.delimit>li:after, ol.inline.delimit>li:after { content:", "; }
  103. ul.inline.delimit>li::after, ol.inline.delimit>li::after { content:", "; }
  104. ul.inline.delimit>li:nth-last-child(2):after, ol.inline.delimit>li:nth-last-child(2):after { content:", and "; }
  105. ul.inline.delimit>li:nth-last-child(2)::after, ol.inline.delimit>li:nth-last-child(2)::after { content:", and "; }
  106. ul.inline.delimit>li:first-child:nth-last-child(2):after, ol.inline.delimit>li:first-child:nth-last-child(2):after {
  107. 	content:" and ";
  108. }
  109. ul.inline.delimit>li:first-child:nth-last-child(2)::after, ol.inline.delimit>li:first-child:nth-last-child(2)::after {
  110. 	content:" and ";
  111. }
  112. ul.inline.delimit>li:last-child:after, ol.inline.delimit>li:last-child:after { content:""; }
  113. ul.inline.delimit>li:last-child::after, ol.inline.delimit>li:last-child::after { content:""; }
  114.  
  115. ol.code {
  116. 	padding-left:2.75em;	/*allows room for 3 digits (font dependent, of course)*/
  117. 	background-color:#E6E6E6;
  118. }
  119. ol.code>li {
  120. 	font-family:"Envy Code R", "Courier New", Courier, monospace;
  121. 	white-space:pre-wrap;
  122. }
  123.  
  124. /*lines class allows the line numbers to be styled separately by using counters; can't with list-style-type:decimal*/
  125. /*Note: this doesn't work in IE; pseudo-element ::before isn't supported*/
  126. ol.lines {
  127. 	padding-left:2em;
  128. 	counter-reset:codeLine;
  129. 	list-style-type:none;
  130. }
  131. ol.lines>li { position:relative; }
  132. ol.lines>li:before {
  133. 	counter-increment:codeLine;
  134. 	content:counter(codeLine) ". ";
  135. 	white-space:pre;
  136. 	display:inline-block;
  137. 	min-width:2em;
  138. 	margin-left:-2em;
  139. 	text-align:right;	/*note: if content exceeds the min-width, it will appear as if left-aligned*/
  140. }
  141. ol.lines>li::before {
  142. 	counter-increment:codeLine;
  143. 	content:counter(codeLine) ". ";
  144. 	white-space:pre;
  145. 	display:inline-block;
  146. 	min-width:2em;
  147. 	margin-left:-2em;
  148. 	text-align:right;	/*note: if content exceeds the min-width, it will appear as if left-aligned*/
  149. }
  150.  
  151. ol.code.lines {
  152. 	padding-left:2.75em;	/*allows room for 3 digits (font dependent, of course)*/
  153. }
  154. ol.code.lines>li:before {
  155. 	min-width:2.5em;
  156. 	margin-left:-2.5em;
  157. 	font-weight:bold;
  158. }
  159. ol.code.lines>li::before {
  160. 	min-width:2.5em;
  161. 	margin-left:-2.5em;
  162. 	font-weight:bold;
  163. }
  164.  
  165. /*tree class displays the list like a file tree
  166. /*Note: this doesn't work properly in K-Meleon, Firefox 1.5-2.0, and IE 6 (IE 6 is fixed in its stylesheet)
  167. /*Note: IE doesn't support pseudo-class :last-child, so the bottom parts of the borders aren't hidden
  168. /*besides the root `ol`, the `tree` class on elements is only required for IE 6
  169. /*the HTML must be like this:
  170. 	Root
  171. 	<ol class="tree">
  172. 		<li><div class="tree"><span class="tree"></span>Item 1</div>
  173. 			<ol>
  174. 				<li><div class="tree"><span class="tree"></span>Item 1A</div></li>
  175. 				<li><div class="tree"><span class="tree"></span>Item 1B</div></li>
  176. 			</ol></li>
  177. 		<li><div class="tree"><span class="tree"></span>Item 2</div>
  178. 			<ol>
  179. 				<li><div class="tree"><span class="tree"></span>Item 2A</div></li>
  180. 			</ol></li>
  181. 	</ol>*/
  182. ol.tree, ol.tree ol {
  183. 	list-style-type:none;
  184. 	padding:0;
  185. 	margin:0;
  186. 	margin-left:1.5ex;			/*distance between left edge of div and border of sublist items*/
  187. }
  188. ol.tree li {
  189. 	padding-left:1.55ex;		/*= A = width of item "bullet"*/
  190. 	text-indent:-1.55ex;		/*= -A*/
  191. 	border-left:1px solid #BBB;	/*= B = border width*/
  192. }
  193. ol.tree li:last-child {
  194. 	border-left:0;
  195. }
  196. ol.tree li > div:first-child {
  197. 	padding-top:0.2em;			/*= C*/
  198. 	padding-right:0.4ex;
  199. 	padding-bottom:0.2em;
  200. 	padding-left:0;
  201. }
  202. ol.tree li:last-child > div:first-child {
  203. 	margin-left:1px;			/*= B*/
  204. }
  205. ol.tree li > div:first-child > span:first-child {
  206. 	display:inline-block;
  207. 	vertical-align:top;
  208. 	margin-top:-0.2em;			/*= -C*/
  209. 	height:0.825em;				/*= C + (line-height)/2*/
  210. 	border-bottom:1px solid #BBB;
  211. 	width:1.55ex;				/*= A*/
  212. 	border-left:0;
  213. 	margin-right:0.4ex;			/*= D = div content's apparent padding-left*/
  214. }
  215. ol.tree li:last-child > div:first-child > span:first-child {
  216. 	border-left:1px solid #BBB;	/*= B*/
  217. 	margin-left:-1px;			/*= -B*/
  218. }
  219.  
  220. /*******************/
  221. /*** 4.0: Tables ***/
  222. /*******************/
  223.  
  224. table.basic td, table.basic th {
  225. 	padding:0.25em 0.4em;
  226. 	border-width:1px;
  227. }
  228. table.basic th {
  229. 	font-weight:bold;
  230. 	text-align:center;
  231. }
  232.  
  233. /**************************/
  234. /*** 5.0: Miscellaneous ***/
  235. /**************************/
  236.  
  237. pre.code { background-color:#E6E6E6; }
  238.  
  239. .bold { font-weight:bold; }
  240. .italic { font-style:italic; }
  241.  
  242. ins.update {
  243. 	font-style:normal;
  244. 	font-weight:bold;
  245. }
  246.  
  247. abbr.define, acronym.define {
  248. 	border-bottom:1px dotted #000;
  249. 	border-bottom:1px dotted currentColor;
  250. }
  251.  
  252. sup.footnote, sup.math, .math sup, sup.science, .science sup { vertical-align:super; }
  253. sup.ordinal, sup.mark, sup.currency, sup.fraction, sup.abbrev, sup.temperature { vertical-align:text-top; }
  254. sub.fraction, sub.abbrev { vertical-align:baseline; }
  255. sub.math, .math sub, sub.science, .science sub { vertical-align:sub; }
  256.  
  257. /************************/
  258. /*** 6.0: Form Errors ***/
  259. /************************/
  260.  
  261. label.error, .error label { color:#F00; }
  262.  
  263. input[type="text"].error, .error input[type="text"], 
  264. input[type="password"].error, .error input[type="password"], 
  265. textarea.error, .error textarea, 
  266. select.error, .error select {
  267. 	background-color:#FDD;
  268. }
  269.  
  270. /***************************/
  271. /*** 7.0: Media-Specific ***/
  272. /***************************/
  273. /*audio, aural (deprecated), braille, embossed, handheld, print, projection, screen, speech, tty, tv*/
  274.  
  275. @media handheld {
  276.  
  277. .indent p, p.indent { text-indent:1em; }
  278. p.noIndent, .indent p:first-child, 
  279. .indent h1 + p, .indent h2 + p, .indent h3 + p, 
  280. .indent h4 + p, .indent h5 + p, .indent h6 + p {
  281. 	text-indent:0;
  282. }
  283. .indent p.indent { text-indent:1em; }
  284.  
  285. .hang p, p.hang { padding-left:1; text-indent:-1em; }
  286.  
  287. img.decoration, img.ornamental { display:none; }
  288.  
  289. }
  290.  
  291. @media embossed, print, projection, tv {
  292.  
  293. .newPage { page-break-before:always; }
  294.  
  295. }
  296.  
  297. @media embossed, print {
  298.  
  299. .accessLink, .skipLink { display:none; }	/*to hide links like "skip to navigation"*/
  300.  
  301. /*The printHref class adds the href of a link to the printed page.*/
  302. a.printHref:after, 
  303. /*.printHref a:after, /*TODO: uncomment if you want to print all URIs (and relative URLs)*/
  304. .printHref a[href^="http://"]:after, .printHref a[href^="https://"]:after {
  305. /*Note: In general, the value of the href attribute is case-sensitive, so "HTTP://" (for example) may not match
  306.   these selectors. See http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.4 */
  307. 	content:" (" attr(href) ")";
  308. 	color:#888;
  309. 	font-size:0.8em;
  310. }
  311. a.printHref::after, 
  312. /*.printHref a::after, /*TODO: uncomment if you want to print all URIs (and relative URLs)*/
  313. .printHref a[href^="http://"]::after, .printHref a[href^="https://"]::after {
  314. /*Note: In general, the value of the href attribute is case-sensitive, so "HTTP://" (for example) may not match
  315.   these selectors. See http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.4 */
  316. 	content:" (" attr(href) ")";
  317. 	color:#888;
  318. 	font-size:0.8em;
  319. }
  320. a.printHref[href^="/"]:after, .printHref a[href^="/"]:after {
  321. 	content:" (http://example.com" attr(href) ")";	/*TODO: replace example.com with your domain*/
  322. 	color:#888;
  323. 	font-size:0.8em;
  324. }
  325. a.printHref[href^="/"]::after, .printHref a[href^="/"]::after {
  326. 	content:" (http://example.com" attr(href) ")";	/*TODO: replace example.com with your domain*/
  327. 	color:#888;
  328. 	font-size:0.8em;
  329. }
  330. .printHref a[href^="#"]:after, 
  331. .printHref a[href^="#"]::after, 
  332. .printHref a.noPrintHref:after { content:""; }
  333. .printHref a.noPrintHref::after { content:""; }
  334.  
  335. }
  336.  
  337. @media aural, speech {
  338.  
  339. .male { voice-family:male; }
  340. .female { voice-family:female; }
  341. .child { voice-family:child; }
  342.  
  343. }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: wizard04 on September 14, 2009

Add the tree class for ordered lists to display a list like a file tree.

You need to login to post a comment.

Download royalty free graphics