Kompx.com or Compmiscellanea.com

CSS centering <hr />

Windows : Internet Explorer 4.01 and 8.0+, Firefox 1.0+, Google Chrome, Opera 3.5 - 4.0 and 7.0+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 7.0+, SeaMonkey 1.0+ [ 2 ], NetSurf 3.0+, Hv3.

CSS centering <hr />, if its width is less than 100%. Horizontal centering. Example:


HTML / XHTML. Code:

<hr />

CSS. Code:

hr {width: 50%; margin: 0 25% 0 25%;}

/* Extra CSS, just styling the look: */

hr {height: 1px; float: left; border: 0px; color: #f00; background: #f00;}

Note: mostly it works both with float: left and float: none. But float: left makes it for sure.


[ 1 ]

As well as Netscape 4.04+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 4.04+, Mozilla 0.6+.


Aliosque subditos et thema

 

Windows console applications

 

Some time ago text-based applications were the only form of software of average end user computer experience. As well as after the graphical user interface programs started to become widespread, console applications used to retain their strong positions. But gradually GUI software virtually superseded text-based applications in daily use of the average end user. However, even now there are console programs that can more or less compete with software of graphical user interface, be useful for the average user to solve various problems and fulfill numerous tasks on modern computers. Windows console applications. File managers Windows console applications. Multimedia Windows console applications. Web browsers Windows console applications. Text editors Besides file managers, multimedia programs, text editors, web browsers, there are plenty of other text-based programs and utilities for use under Windows: both standalone and those included in MS Windows distributions. For example, ipconfig and netstat for work with network, Windows built-in FTP client useful for some tasks, CommandBurner for command line burning CD / DVD or cdburn with dvdburn from Windows Server 2003 Support Tools for the same, etc.

CSS centering floated elements

 

Centering an inline block containing several inline elements. The block is centered horizontally - [ Open demo page ]. Sometimes there is a need to have a centered group of floated elements, which is to serve as a title or a pagination box. Since this group of floated elements is going to be used as a title for content blocks of various dimensions or pagination box may grow or shrink in its size, then the width of the group of floated elements is to vary unpredictably as well. So a method of centering based on using a certain known width of the box is not going to work. And as an extra to the task there is a desirable condition: the title or pagination box has to be centered once and for all at the time of the box creation, so that this group of floated elements may be reused without any extra work over it: just place the complex where you need it and put the text or / and images you want to inside it - the group is centered anyway. This problem can be solved by several methods using several technologies: CSS, CSS + JavaScript, CSS + HTML (<table></table> tags system). The CSS centering floated elements is the most simple and reliable. So, here a pure CSS centering of floated elements is discussed. CSS centering floated elements: 1. First, a more simple case, css centering of a title box consisting of floated elements: images and text: HTML / XHTML. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CSS centering floated elements: 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="box"> <span class="title-box"> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> <span class="title-text">CSS centering floated elements</span> <img src="snowflake.gif" width="37" height="34" alt="" class="title-imgs" /> </span> </div> </body> </html> CSS.