Kompx.com or Compmiscellanea.com

CSS centering absolutely positioned elements

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

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

CSS horizontal centering of an absolutely positioned element. Example:

Image

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+.


Aliosque subditos et thema

 

Windows console applications. File managers

 

FAR Manager : DOS Navigator : File Commander The concept and requirements to file manager had formed itself back in the DOS epoch. With the spread of operating systems with graphical user interface, other applications facilitating files handling emerged. But for many tasks and for many users orthodox file managers remain the most convenient option. There are file managers with graphical user interface here for a long time already, however console file managers still hold on not only their proper niche, but as well a part of the space belonging in theory to file managers with a GUI. Nowadays file managers can, all in all, the same and in general the same way, but text-based file managers are more responsive to user actions. Also, even if it is not topical enough now, console file managers require less system resources, than GUI file managers of comparable functionality. FAR Manager - / home page / Console file manager for Windows. Among the built-in functions: FTP, Windows network, extensible archive files support, print manager, text editor. Other plugins are available: SFTP/SCP, image viewer, hex editor, syntax highlighting and auto-completion for text editor, some others. FAR Manager 2.0: Console file manager FAR Manager 2.0: FTP, downloading files FAR Manager 2.0: A submenu FAR Manager 2.0: System settings FAR Manager 2.0: Text editor FAR Manager 2.0: MPlayer, playing .mp3 DOS Navigator - / open source project / Console file manager for Windows. A variation of the DOS file manager. There is also a version for OS/2. Archive files support, text editor with syntax highlighting, disk editor, spreadsheet, calculator, calendar, etc.

CSS rollover. Changing background image position

 

CSS rollover. Changing background image position. Example: CSS rollover. Changing background image position HTML / XHTML. Code: <div class="example"> <a href="css-rollover-changing-background-image-position.htm">CSS rollover. Changing background image position</a> </div> CSS. Code: .example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;} .example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;} .example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;} Background image: CSS rollover Changing background image position The concept : 1. A link with width and height declared explicitly (here it is 100% and 35px), plus display: block - this makes a 100% by 35px rectangle, the whole area of which is a hyperlink. Line-height is declared explicitly as well, equal to the rectangle's height (35px here) - it helps to have the same vertical alignment of the link text across various web browsers. Text-align: right is added to move the link text to the right in the the link block. (The link block area is highlighted in green to make it more obvious) CSS rollover. Changing background image position 2. An image for the link block area background with height equal to two heights of the link block area is created. The image has two parts, the upper one and the lower one, each of height equal to the height of the link block area; here it is 35px. 3. The background image URL is added to the background CSS property of the link. The CSS background property values of no-repeat and left position the background image to the left of the link block area. The CSS background property value of top places the upper part of the background image on the same level as the link text. 4. The background image URL is added to background CSS property of the link's :hover pseudo-class. The CSS background property values of no-repeat and left of the link's :hover pseudo-class position the background image to the left of the link block area. The CSS background property value of bottom of the link's :hover pseudo-class places the lower part of the background image on the same level as the link text, when a user moves the mouse pointer over the link block area. So, when there is no mouse pointer over the link block area, the upper part of the background image is placed on the same level as the link text. When there is a mouse pointer moved over the link block area, the lower part of the background image gets on the same level as the link text. Mouse out - the upper part is displayed, mouse over - the lower part shows up. And no need to preload any additional images. CSS rollover.