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

 

Internet Explorer 3

 

Features : Screenshots : Download links World Wide Web service with its online experience like hypertext links, surfing, web pages as a combination of text and images / multimedia brought Internet to general public. As to general public, it all very much revolves around the web browser. The first web browser ever, WorldWideWeb (later renamed Nexus) had many of the features later to be considered as standard for web browsers, but it was an experiment, accessible and known to very few. The rest of users might expect more likely only a text-mode interface experience through a text-based web browsers like Line Mode Browser. The turning point for the World Wide Web and all Internet was the advent of Mosaic, a graphical web browser, in 1993. First for Unix and then for Apple Macintosh and Microsoft Windows. Mosaic was not the first web browser for Windows though and it could not supersede Cello, the first and initially the only web browser for Windows. Microsoft Windows was the fastest growing major platform for PC in the first half of 1990s. But Microsoft did not seem to recognize the importance of the web browser then. So the main competition under Windows at that time was among several versions of Mosaic and Cello. This competition gave birth to Netscape web browser, which became the dominant software of its kind for several years. This success and great public attention attracted by World Wide Web by 1995 made Microsoft to join in the efforts. Internet Explorer 1 was just a first experiment. Internet Explorer 2 was intended to push the Internet Explorer case - it was made available to all Windows users for free, even commercial companies. But Netscape positions were not much undermined, Internet Explorer 2 being distinctly weaker in many features is among the reasons for that. Only after the release of Internet Explorer 3.0 Microsoft browsers began to close Netscape in qualities. Internet Explorer 3 was not the first Microsoft attempt to find technical and marketing model like were Internet Explorers of 1 and 2. And it was not the first Microsoft modern web browser, the first for Microsoft to beat and surpass Netscape and all other web browser competitors like Internet Explorer 4 was. But Internet Explorer 3 still was the first in some things: the first commercial browser with Cascading Style Sheets / CSS support, the first Microsoft web browser without Spyglass source code and the first Microsoft web browser to gain a significant user share, 20-39% by the end of 1997 [ 1 ]. Still, Internet Explorer 3 was a transitional, intermediate piece of software between the early browsers and the modern ones. As to its modern state, there is an interesting detail: Internet Explorer 3 can run under 32-bit Windows 7, unlike generally the 4.0-6.0 Explorers. Features HTML (with tables and frames) support is quite strong ( More ), Internet Explorer 3 lets some HTML tricks to be used without extra strain, like "HTML table borders without CSS". CSS support in Internet Explorer 3 is weak ( More 1 ) ( More 2 ). Internet Explorer 3 also supports VBScript, ActiveX (more than 1,000 Controls), Java applets, inline multimedia, VRML and a Microsoft's reverse-engineered version of JavaScript named JScript. All of the versions and capabilities corresponding to the level of the times. Internet Explorer 3 was released for several platforms: x86(16/32 bit), 68k, PPC, MIPS, Alpha AXP. And several operating systems: Windows 3.1, Windows 95, Windows NT, System 7 / Mac OS 7, Mac OS 8.

Mobile-friendly HTML table

 

If an HTML table is too wide, having too much data, it may not shrink anymore, it gets wider than the available space and breaks page layout. An horizontal scroll added to the table fixes it up. Example: 12345678910 Table_data_1 Table_data_2 Table_data_3 Table_data_4 Table_data_5 Table_data_6 Table_data_7 Table_data_8 Table_data_9 Table_data_10 HTML / XHTML. Code: <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> </tr> <tr> <td>Table_data_1</td> <td>Table_data_2</td> <td>Table_data_3</td> <td>Table_data_4</td> <td>Table_data_5</td> <td>Table_data_6</td> <td>Table_data_7</td> <td>Table_data_8</td> <td>Table_data_9</td> <td>Table_data_10</td> </tr> </table> CSS. Code: table {display: block; overflow-x: auto;} /* Extra CSS, just styling the look: */ table {border-collapse: collapse;} table td,th {padding: 10px; border: 1px #000 solid;} Note: the CSS property of display: block makes the table to occupy only as much space horizontally as it is needed to contain the data without shrinking. Not more, not making itself to stretch from the leftmost to the rightmost sides of the available space - even if width: 100% is added to CSS. Example: 123 Table_data_1 Table_data_2 Table_data_3 [ 1 ] As well as Netscape 9.0. [ 2 ] As well as Netscape 9.0.