Kompx.com or Compmiscellanea.com

CSS centering image

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

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

CSS horizontal centering of an image. 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: 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+.


Aliosque subditos et thema

 

Imapsync. IMAP migration

 

Migrating an IMAP account from one IMAP server to another [ 1 ] / Linux, command line: imapsync --host1 imap.this.com --user1 email@example.com --passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.another.com --user2 email@example.com --passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch - There is a web site (example.com) and an email box (email@example.com) hosted at a web hosting company. The IMAP server: imap.this.com. The IMAP server supports SSL. - The example.com web site is to be transfered to another web hosting company. So is the email@example.com box with all its contents and keeping its folders structure. The IMAP server of another web hosting company: imap.another.com. The IMAP server supports SSL. 1. Set up an email box named email@example.com and a password to it on the server of the web hosting company the email@example.com mailbox is to be transfered to - from the previous web hosting company. 2. Create two text files in /home/user/imap/: passwordfile1 with the password for the mailbox on the first IMAP server and passwordfile2 with the password for the mailbox on the second IMAP server. 3. chmod 600 /home/user/imap/passwordfile1 4. chmod 600 /home/user/imap/passwordfile2 5. Install imapsync 6. Run imapsync Imapsync transfers a mailbox - keeping its folders structure - from imap.this.com to imap.another.com. SSL is used to enable encryption and passwords are saved to protected files (chmod 600). Migration between two email service boxes may happen to require to make use of more imapsync options [ 2 ]. Like transfering contents of one Gmail.com box to another demands to have "--port1" and "--port2" specified: imapsync --host1 imap.gmail.com --port1 993 --user1 email1@gmail.com --passfile1 /home/user/imap/passwordfile1 --ssl1 --host2 imap.gmail.com --port2 993 --user2 email2@gmail.com --passfile2 /home/user/imap/passwordfile2 --ssl2 --skipsize --allowsizemismatch [ 1 ] A simple and common case: contents of one email box are transfered to another, empty mailbox. But there can be more complicated ones like: Gmail to Google Apps Email Migration and Moving to Google Apps with imapsync. [ 2 ] For more command options: Migrate mail from one server to another with imapsync and imapsync(1) - Linux man page.

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.