Kompx.com or Compmiscellanea.com

Bold numbers in ordered lists

Windows : Internet Explorer 8.0+, Firefox 1.5+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.5+, Google Chrome / Chromium, Opera 5.0+, SeaMonkey 1.0+ [ 2 ], Hv3.

Numbers in an ordered list made bold without having any extra HTML tags added:

  1. List item
  2. List item
  3. List item

HTML / XHTML. Code:

<ol>

<li>List item</li>

<li>List item</li>

<li>List item</li>

</ol>

CSS. Code:

ol {counter-reset: item;}

ol li {display: block;}

ol li:before {content: counter(item) ". "; counter-increment: item; font-weight: bold;}

There is no obvious way at the moment to style only numbers marking ordered list items. A workaround is to use a CSS counter instead of the default automatic numbering of ordered lists. The way a CSS counter is started allows to style specifically the marking numbers. Like in the example, where numbers in an ordered list are styled bold.

This method also lets to use other characters after the numbers - besides dots. Like a parenthesis / round bracket instead of a dot. Or handling of space between the number, punctuation mark and the content proper of list item.


[ 1 ]

As well as Netscape 9.0+.

[ 2 ]

As well as Netscape 9.0+.


Aliosque subditos et thema

 

CSS centering absolutely positioned elements

 

CSS horizontal centering of an absolutely positioned element. Example: HTML / XHTML. Code: <div class="example"> <img src="image.jpg" alt="Image" /> </div> CSS. Code: .example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;} An absolutely positioned img is centered in the example. But this method of horizontal centering also works with other both inline and block absolutely positioned elements. The width of an absolutely positioned element may also be in percent or other units. CSS properties of a container (here it is .example), holding an element to be centered, may vary. The element's centering is achieved by styles applied to the element itself: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}. [ 1 ] As well as Netscape 8.01+, Mozilla 1.5+. [ 2 ] As well as Netscape 8.01+, Mozilla 1.5+.

CSS centering image

 

CSS horizontal centering of an image. Example: HTML / XHTML. Code: <div class="example"> <img src="image.jpg" alt="Image" /> </div> CSS. Code: .example {position: relative; left: 0px; top: 0px; height: auto; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa;} .example img {display: block; margin: 0 auto;} CSS properties of a container (here it is example) may vary, image centering is achieved by styles applied to the image itself: .example img {display: block; margin: 0 auto;}. [ 1 ] As well as Opera 4.0+, if shorthand CSS is not used in styles. That is, if it is .example img {display: block; margin-left: auto; margin-right: auto;}. [ 2 ] As well as Netscape 6.01+, Mozilla 0.6+. [ 3 ] As well as Netscape 6.01+, Mozilla 0.6+.