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

 

CSS for a range of elements

 

Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.

Arachne web browser. Installing and setting up for internet connection via Ethernet

 

A : Installing Arachne web browser on a disk created in RAM - Arachne runs the fastest this way. RAM size should allow for a RAM disk of 6 MB or more. In order to install and set up Arachne web browser for internet connection via Ethernet, there have to be several programs at hand: 1. Arachne web browser [ Download ] 2. If Arachne web browser is to be used for surfing web pages with character encoding other than Latin for West European languages, visit www.glennmcc.org/apm/ to find available character set packages and download the necessary one. 3. Mouse driver, mouse.com for instance [ Download ] 4. Packet driver for Ethernet network card: http://www.crynwr.com/drivers/ http://www.georgpotthast.de/sioux/packet.htm 5. Microsoft Network Client 3.0 [ Download ] 6. NDIS 2.0 driver for Ethernet network card. For example: Realtek RTL8029AS [ Download ]. Drivers for other network cards may be found, for instance, on web sites of Ethernet cards manufacturers. 7. Archivers. For example, PKZIP [ Download ] and PKUNZIP [ Download ] 8. If it is not MS-DOS 6.0+ to be used, QEMM97 [ Download ] 9. If it is not MS-DOS 6.0+ to be used, TDSK [ Download ] Installing and setting up Arachne web browser, step by step: 1. Create a RAM disk. Which drive letter will be assigned to it comes from the assumption that A: and B: go to floppy drives (even if there is only one, both letters will be reserved anyway), C: goes to the first active primary MS-DOS partition on the first physical hard disk. If there are more disks, then there will be as many letters used consecutively as to name them all. Unless there are no devices installed using DRIVER.SYS or similar drivers, the next drive letter will be assigned to the RAM disk. In order to be sure, after having the relevant string for making RAM disk added to CONFIG.SYS (See below), computer could be restarted and what letter is assigned to the RAM disk checked by experiment. In this case, it is E: Depending on RAM size it needs to be decided how many megabytes can be reserved for RAM disk. Basically, the more the better. Since, for instance, web browser cache is going to swell during prolonged and intensive use within a session. In this example the RAM disk is 12 000 KB. The maximum size for RAMDRIVE.SYS MS-DOS driver is 32 767 KB, the one of TDSK - 64 MB. In order to create such a disk, the string has to be added somewhere in the middle of CONFIG.SYS as follows: DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Create a folder, for example C:\DRIVERS\. Put there: a mouse driver, for instance mouse.com, a packet driver for Ethernet network card and a NDIS 2.0 driver for Ethernet network card. 3. Add a string starting mouse driver to AUTOEXEC.BAT. Specify there the full path to the driver, may be any: LH C:\DRIVERS\MOUSE.COM 4. Prepare installation floppies of Microsoft Network Client 3.0: DSK3-1.EXE -d A: DSK3-2.EXE -d A: 5. Start setup.exe from the first floppy and begin Microsoft Network Client 3.0 installation. Installation is starting. Press Enter to continue Select folder for Microsoft Network Client 3.0 to be installed to. It may be any or the suggestion of the installer may be left as it is - in the case discussed it is left as it is.