Kompx.com or Compmiscellanea.com

CSS horizontal and vertical centering - 2

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

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

Centering the content of a web page in the viewable area of a browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically: [ Open demo page ]

HTML / XHTML. Code:

<!DOCTYPE html>

<html>

<head>

<title>CSS horizontal and vertical centering - 2</title>

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

</head>

<body>

<div class="spacer">&nbsp;</div>

<div class="wrapper">

<div class="pagecontent">&nbsp;</div>

</div>

</body>

</html>

CSS. Code:

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

body height: 100%; margin: 0px;}

.spacer {position: relative; top: 0px; left: 0px; height: 50%; width: 100px; float: left; margin: 0px 0px -250px 0px; background: #999;}

.wrapper {position: relative; top: 0px; left: 0px; height: 500px; width: 100%; clear: both; background: #a3ddc4;}

.pagecontent {position: relative; top: 0px; left: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;}

The .pagecontent box is for the page content. It must be of a fixed height and width in units like px's or em's - not in percents. Height and width may be larger than web browser viewable area, but here the more practical case is discussed - when the height and width of .pagecontent are smaller than those of the web browser viewable area.

The .pagecontent box is horizontally centered by its "margin: 0 auto".

.Wrapper creates a space where .pagecontent is centered horizontally. .Wrapper's width is 100% for centering at various web browser viewable area sizes. The height has to be equal to the one of .pagecontent.

.Spacer centers .wrapper with .pagecontent in it vertically inside browser viewable area. Its width may be any. The height is 50% - that places the top edge of .pagecontent vertically in the middle of the browser viewable area. The bottom margin of .spacer equal to half the .pagecontent height centers .pagecontent and its contents vertically in the web browser viewable area of a current height.

This method is reliable in all major modern web browsers. It also works in older browsers like Internet Explorer 6 or earlier versions of Maxthon. But the height of box for page content has to be assigned explicitly and if it is changed - the size of .spacer bottom margin must be changed accordingly as well. There is another way of CSS horizontal and vertical centering, with CSS code easier to maintain, even if not suitable for older web browsers: CSS horizontal and vertical centering - 1.


[ 1 ]

As well as Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

As well as Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

CSS horizontal and vertical centering - 2

 

Centering the content of a web page in the viewable area of a browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically: [ Open demo page ] HTML / XHTML. Code: <!DOCTYPE html> <html> <head> <title>CSS horizontal and vertical centering - 2</title> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <div class="spacer">&nbsp;</div> <div class="wrapper"> <div class="pagecontent">&nbsp;</div> </div> </body> </html> CSS. Code: html {height: 100%; margin: 0px;} body height: 100%; margin: 0px;} .spacer {position: relative; top: 0px; left: 0px; height: 50%; width: 100px; float: left; margin: 0px 0px -250px 0px; background: #999;} .wrapper {position: relative; top: 0px; left: 0px; height: 500px; width: 100%; clear: both; background: #a3ddc4;} .pagecontent {position: relative; top: 0px; left: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;} The .pagecontent box is for the page content. It must be of a fixed height and width in units like px's or em's - not in percents. Height and width may be larger than web browser viewable area, but here the more practical case is discussed - when the height and width of .pagecontent are smaller than those of the web browser viewable area. The .pagecontent box is horizontally centered by its "margin: 0 auto". .Wrapper creates a space where .pagecontent is centered horizontally. .Wrapper's width is 100% for centering at various web browser viewable area sizes. The height has to be equal to the one of .pagecontent. .Spacer centers .wrapper with .pagecontent in it vertically inside browser viewable area. Its width may be any. The height is 50% - that places the top edge of .pagecontent vertically in the middle of the browser viewable area. The bottom margin of .spacer equal to half the .pagecontent height centers .pagecontent and its contents vertically in the web browser viewable area of a current height. This method is reliable in all major modern web browsers. It also works in older browsers like Internet Explorer 6 or earlier versions of Maxthon. But the height of box for page content has to be assigned explicitly and if it is changed - the size of .spacer bottom margin must be changed accordingly as well. There is another way of CSS horizontal and vertical centering, with CSS code easier to maintain, even if not suitable for older web browsers: CSS horizontal and vertical centering - 1. [ 1 ] As well as Netscape 7.2+, Mozilla 1.5+. [ 2 ] As well as Netscape 7.2+, Mozilla 1.5+.

ELinks

 

Features : Configuration : Use : Screenshots : Download links ELinks is an effort to create an advanced text-based web browser. It started as a fork based on the code of Links browser. Aiming first to try and realize several features more or less weak / absent in Links. Hence "E" in "ELinks" - "Experimental" [Links]. The success of the effort made it to be understood as "Extended" or "Enhanced". There was a crossroad at the point when Links browser achieved certain level of completeness, surpassing in some areas then the most advanced text mode web browser, Lynx: to move forward into displaying graphics and further beyond pure text or to enhance text-based web surfing experience beyond boundaries reached first by Lynx and then Links browsers - but still keeping it in text mode. The first course resulted into a Links version capable of displaying graphic content of web pages - Links2. The second one is ELinks web browser. Lynx was and is a very mature software in its kind. Its authors conceived and realized a quite elaborate concept of web surfing in text mode with specific abstractions and conventions, which aided to overcome many restrictions and shortages of text-based surfing and created an experience, a world so definitely different from rapidly expanding graphical web. But with the time HTML and hardware moved forward, spread of scripting languages took place, the whole world of presenting, finding and consuming information advanced. New possibilities appeared. Many of them were realized in Links web browser, but then next shift in information visual presentation in web documents - from more of HTML to more of CSS - made new roads open; even still keeping it to be in text mode. And that is where ELinks tries to come: colors in enabled consoles, some CSS positioning and even beginning of JavaScript / ECMAScript support. Technical part of networking (like SSL support) and various text encodings support were pretty strong in Links browser already, but ELinks enhanced some features and made others to be more worked out. ELinks moved forward the concept of text mode web browser, making ELinks the most advanced example of it. Although Lynx still keeps positions pretty strongly. Its concept of text mode web surfing even if being simplifying, bringing different approach to information presentation and handling rather than trying to be resembling to graphical web browsers environment - works quite well. Web documents become more and more complicated in realization and (while having all the inevitable restrictions of text mode web browsing) to follow a different way of handling it is quite competitive to trying to be like mainstream, graphic full featured web browsers of desktop computers. It is like this dilemma for smaller screen mobile devices browsers: to try and imitate full sized display computers or to transform web document and make it corresponding to the characteristics of the environment. Text-based web browsers are used mostly on computers with more or less large displays, so there are less of dimensional restrictions and more temptations: Lynx - to stay restrained, ELinks - to extend it. Features Text-based web browser. Versions for Linux, other *nix systems, Windows, DOS, OS/2, BeOS and some others. HTML ( tables and frames including ). Meagre support for CSS and JavaScript ( More ). Support for 16, 88 or 256 colors palette in capable terminal emulators / consoles. Tabbed browsing, background download with queuing. Mouse support. Editing of text boxes / forms in web pages in external text editor. Shortcuts for URLs. Scripting in Perl, Lua, Guile, Ruby. Passing URI of a web page in ELinks or URI of a link in a web page in ELinks to external applications: from clipboard app (to copy URI and paste it some place else) to other web browser, etc. Control over how HTML of the surfed web pages is rendered: like display frames or not. Bookmarks. And More. HTTP and Proxy authentication. Persistent HTTP cookies. SSL. http, https, ftp, fsp, IPv4, IPv6 and experimentally BitTorrent, gopher, nntp protocols. Configuration Go to "ELinks.