Kompx.com or Compmiscellanea.com

JavaScript + CSS centering

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

Linux : Firefox 1.0+, Chromium, Opera 9.0+ [ 2 ], SeaMonkey 1.0+.

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. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

3. External JavaScript file ( JavaScript code with commentary and explanations ) is prepared for user's web browser and display device capabilities detection, for the necessary manipulations to achieve the horizontal and vertical centering of element A under the specified condition (screen resolution equal to or greater than 1024x768). Link to this external JavaScript file is placed between the <head></head> tags of the XHTML / HTML file. [ 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 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="3.css" />

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">&nbsp;</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

The JavaScript + CSS horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

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. Aggregate result</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="javascript-css-vyravnivanie.css" />

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="javascript-css-centering.htm" class="titlelink">JavaScript + CSS centering</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #fff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #fff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

.sitecontent {position: relative; top: 0px; left: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; text-align: left;}

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A=window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

window.onload=centering;

JavaScript and CSS horizontal and vertical centering. The second 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 second 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 second 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. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

3. External JavaScript file ( JavaScript code with commentary and explanations ) is prepared for user's web browser and display device capabilities detection, for the necessary manipulations to achieve the horizontal and vertical centering of element A under the specified condition (screen resolution equal to or greater than 1024x768) + for the specified action (moving mouse cursor over a link in element A). Link to this external JavaScript file is placed between the <head></head> tags of the XHTML / HTML file. A link with onMouseOver event handler and with appropriate script is created in the element A. [ 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 second case. Step 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="3.css" />

<script type="text/javascript" src="3.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<a href="javascript-css-centering.htm" class="link" onmouseover="centering();"> JavaScript + CSS centering </a>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999; text-align: center;}

a.link:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #cc0000; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

a.link:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 33px; color: #fff; font-weight: normal; text-decoration: none; position: relative; top: 44%;}

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A=window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

The JavaScript + CSS horizontal and vertical centering, sample page, aggregate result [ Open demo page ] [ Download archive file ].

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 second case. Aggregate result</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="javascript-css-vyravnivanie.css" />

<script type="text/javascript" src="javascript-css-vyravnivanie.js"></script>

</head>

<body>

<div class="element_A" id="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="javascript-css-centering.htm" class="titlelink" onmouseover="centering();" >JavaScript + CSS centering</a></span></span></h1>

</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #fff; margin: 0px; height: 100%;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; background-color: #999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 25px; color: #fff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #fff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

.sitecontent {position: relative; top: 0px; left: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; text-align: left;}

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #fff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

JavaScript. Code:

var wresolution=screen.width;

var hresolution=screen.height;

function centering(){

if(wresolution>=1024 && hresolution>=768){

if(window.getComputedStyle){

var h=document.documentElement.clientHeight;

var w=document.documentElement.clientWidth;

var element_A = window.getComputedStyle(document.getElementById('element_A'), '');

var element_A_width=parseInt(element_A.getPropertyValue('width'));

var element_A_height=parseInt(element_A.getPropertyValue('height'));

document.getElementById('element_A').style.left=(w-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h-element_A_height)/2+'px';

}

else{

var h2=document.documentElement.clientHeight;

var w2=document.documentElement.clientWidth;

var element_A=document.getElementById('element_A');

var element_A_width=parseInt(element_A.currentStyle.width);

var element_A_height=parseInt(element_A.currentStyle.height);

document.getElementById('element_A').style.left=(w2-element_A_width)/2+'px';

document.getElementById('element_A').style.top=(h2-element_A_height)/2+'px';

};

window.onresize=centering;

};

};

JavaScript + CSS horizontal and vertical centering

There is no point in using this method in easy cases, when just an element's static positioning is necessary. It can be done, but it is easier and more reliable to achieve it by CSS centering. But when horizontal and vertical centering is required to start working only under some conditions or after some actions, then the horizontal and vertical centering by means of JavaScript and CSS becomes essential. VBscript or Java can be used instead of JavaScript, but JavaScript and its variation, JScript, work across a wider range of platforms and software, than VBscript; and simpler to implement than a method with Java.

There may be a variety of reasons and methods in using of JavaScript + CSS horizontal and vertical centering, but their essence all comes down to finding conditions, user's web browser and display device capabilities, running of scripts based on information obtained, if a specified condition is detected or a specified action is performed. A script can work directly with an element's CSS properties or to command what external style sheets file is to be used, which will assign new CSS properties for the element. Since case when a horizontal and vertical centering script selects which external style sheets file to use requires certain extra HTML and CSS preparations, it is not discussed here - as a less pure and apparent example of using JavaScript for objects positioning handling by direct CSS properties manipulation.

The simplest case is considered, to demonstrate the very possibility and its principle - dynamic change of an element's position in a browser's viewable area.

The first case

Condition: if screen resolution is equal to or greater than 1024 by 768 pixels, then center the page content horizontally and vertically:

An element A with dimensions declared explicitly is created. A screen resolution is specified - its arbitrary value will be the condition under which a script is to be run, for instance - 1024x768. In case the script finds screen resolution to be equal to or greater than 1024 by 768 pixels, then the rest of the function in the script is started, it determines the measurements (CSS properties assigned in external style sheets) of element A, the width and height of the browser viewable area. Using the numbers obtained, the distance between the left and top edge of the web browser viewable area and the left and top edge of the element A required for centering is calculated. In terms of CSS, it is when the CSS property "left" of the element A is equal to half difference between the width of the web browser viewable area and the width of the element A, and the CSS property "top" of the element A is equal to half difference between the height of the web browser viewable area and the height of the element A.

Since user can resize the web browser window after the page is loaded, the web browser window size is monitored. Each time it is changed, the function centering element A horizontally and vertically is run anew and element A is centered horizontally and vertically again, at the new dimensions of the web browser viewable area.

The second case

Condition: if screen resolution is equal to or greater than 1024 by 768 pixels and if mouse cursor is moved over a link in element A, then center the page content horizontally and vertically:

An element A with dimensions declared explicitly is created. A link with onMouseOver event handler and with appropriate script is created in the element A. Screen resolution is detected - a specified value of it will be the condition under which the script is to be triggered, for instance - 1024x768. When mouse cursor is moved over the link, if screen resolution is equal to or greater than 1024 by 768 pixels, the script is run to determine the measurements (CSS properties assigned in external style sheets) of element A, the width and height of the web browser viewable area. Using the numbers obtained, the distance between the left and top edge of the web browser viewable area and the left and top edge of the element A required for centering is calculated. In terms of CSS, it is when the CSS property "left" of the element A is equal to half difference between the width of the web browser viewable area and the width of the element A, and the CSS property "top" of the element A is equal to half difference between the height of the web browser viewable area and the height of the element A.

Since user can resize the web browser window after the page is loaded, the web browser window size is monitored. Each time it is changed, the function centering element A horizontally and vertically is run anew and element A is centered horizontally and vertically again, at the new dimensions of the web browser viewable area.


[ 1 ]

All in all, it works starting Opera 7.5 as well, but with a shift by a number of pixels.

[ 2 ]

All in all, it works starting Opera 7.5 as well, but with a shift by a number of pixels.


Aliosque subditos et thema

 

Lynx. Web data extraction

 

Aside from browsing / displaying web pages, Lynx can dump the formatted text of the content of a web document or its HTML source to standard output. And that then may be processed by means of some tools present in Linux, like gawk, Perl, sed, grep, etc. Some examples: Dealing with external links Count number of external links Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http:", sends the result further again to grep that picks lines not starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (external links of the web page) out of it, wc counts the number of links extracted and displays it: lynx -dump -listonly "elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | wc -l Find external links and save them to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http:", sends the result further again to grep that picks lines not starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (external links of the web page) out of it and saves them to a file: lynx -dump -listonly "elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" > file.txt Find external links, omit duplicate entries and save the output to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http:", sends the result further again to grep that picks lines not starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (external links of the web page) out of it, sort sorts them and uniq deletes duplicate entries. The output is saved to a file: lynx -dump -listonly "elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | sort | uniq > file.txt Dealing with internal links Count number of internal links Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (internal links), wc counts the number of links extracted and displays it: lynx -dump -listonly "elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | wc -l Find internal links and save them to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (internal links) and saves them to a file: lynx -dump -listonly "elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" > file.txt Find internal links, omit duplicate entries and save the output to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (internal links), sort sorts them and uniq deletes duplicate entries. The output is saved to a file: lynx -dump -listonly "elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | sort | uniq > file.txt The reason behind using "lynx -dump -listonly" instead of just "lynx -dump" is that there may be web pages with plain text strings looking like links (containing "http://" for instance) in the text of the content, as it is the case with http://www.kompx.com/en/elinks.htm page.

Non-breaking space ( &nbsp; ) in :before and :after content

 

Non-breaking space ( &nbsp; ) in :before and :after pseudo-elements. Hex code ( \00a0 ) is used in the content property instead of the named character entity ( &nbsp; ). Example: ABC HTML / XHTML. Code: <div>ABC</div> CSS. Code: div:before {content:"\00a0";} div:after {content:"\00a0";} /* Extra CSS to make non-breaking spaces more obvious here: */ div:before {height: 1em; width: 1em; display: inline-block; background: #f00;} div:after {height: 1em; width: 1em; display: inline-block; background: #00f;} [ 1 ] As well as Netscape 6.01+, Mozilla 0.6+. [ 2 ] As well as Netscape 6.01+, Mozilla 0.6+.