Kompx.com or Compmiscellanea.com

CSS horizontal and vertical centering - 1

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

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, 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 - 1</title>

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

</head>

<body>

<div class="all">

<div class="wrapper">

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

</div>

</div>

</body>

</html>

CSS. Code:

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

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

.all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;}

.wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;}

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

The .pagecontent box is for the page content. It may be of height assigned explicitly or just "height: auto". Unlike CSS horizontal and vertical centering - 2, here percents may also be used as CSS units; not just px's or em's. 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".

.All with its CSS properties makes the whole web browser viewable area into a CSS table.

CSS properties makes .wrapper into the cell of this CSS table. The content of this CSS table cell - the .pagecontent box with everything inside it - is vertically centered in the viewable area of a browser by "vertical-align: middle".


[ 1 ]

As well as Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

As well as Netscape 7.2+, Mozilla 1.5+.


Aliosque subditos et thema

 

Internet Explorer 3. Screenshots 1

 

Internet Explorer 3 running under Windows 7 (32-bit). Screenshots 1. Internet Explorer 3: windows.microsoft.com/en-US/windows/upgrade-your-browser Internet Explorer 3: w3schools.com/browsers/browsers_stats.asp Internet Explorer 3: en.wikipedia.org/wiki/Internet_Explorer_3 Internet Explorer 3: ebay.com Internet Explorer 3: kompx.com/en/netscape-3-screenshots-1.htm Internet Explorer 3: twitter.com Download Internet Explorer 3: a pack, containing 3.0, 4.01, 5.01, 5.5, 6.0 versions of Internet Explorer. During installation process it is possible to select which one version only to install or install several or install all. It is very much probable that all versions, except Internet Explorer 3, will not work even under 32-bit Windows 7. So if you would like to try all older Internet Explorers you should have Windows XP or earlier installed. Internet Explorer 3 functions under 32-bit Windows 7 pretty well though.

JavaScript rollover. Image swap

 

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a> CSS. Code: .image {border: 0px;} JavaScript. Code: imageout=new Image(); imageout.src="out.gif"; imageover=new Image(); imageover.src="over.gif"; function image_out(){ document.images['imageout'].src='out.gif'; }; function image_over(){ document.images['imageout'].src='over.gif'; }; Swap image 1 ( out.gif ): Swap image 2 ( over.gif ): Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript rollover. Image swap"></a> JavaScript.