Kompx.com or Compmiscellanea.com

Extract tar.bz2

Operating systems : Linux

Extracting tar.bz2 files in Linux, command line:

tar jxvf file.tar.bz2

- j : filter the archive through bzip2 [ 1 ]

- x : extract files from an archive

- v : list the files processed

- f : use archive file

The command extracts the contents of a bzip2 compressed archive to the current directory.

Tar creates an archive of one or several files. Then bzip2 is used to compress it. Or both processes are made at once by tar only, with corresponding options employed. The duality of nature - archived and then compressed - is reflected in the extension of the file ("tar.bz2") and requires two procedures to be performed while extracting: decompressing and unpacking. Hence both j (decompress it) and x (unpack it) in the command.


[ 1 ]

Sources for the option letters description: tar(1) - Linux man page and LinuxCommand.org


Aliosque subditos et thema

 

JavaScript + CSS centering

 

Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically. Two cases: 1. A block is centered, if screen resolution is equal to or greater than 1024x768 - [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content - [ Open demo page ] JavaScript and CSS horizontal and vertical centering. The first case. Step by step. 1. A web page, the part of which is going to be the element the JavaScript + CSS horizontal and vertical centering is to be applied to: 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>JavaScript + CSS horizontal and vertical centering. The first case. Step 1</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="1.css" /> </head> <body>   </body> </html> CSS. Code: html {height: 100%; margin: 0px;} body {background-color: #fff; margin: 0px; height: 100%;} 2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. [ Open demo page ] 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>JavaScript + CSS horizontal and vertical centering. The first case. Step 2</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" /> <link rel="stylesheet" type="text/css" href="2.css" /> </head> <body> <div class="element_A">&nbsp;</div> </body> </html> CSS.

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.