Kompx.com or Compmiscellanea.com

Links


Aliosque subditos et thema

 

JavaScript + CSS centering

 

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.

HTML table borders without CSS

 

Example n.1:   HTML table borders without CSS   cellspacing="2"   bgcolor="#ff6600" HTML / XHTML. Code: <table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#ff6600"> <tr bgcolor="#ffffff"> <td width="33%" height="67">&nbsp;</td> <td width="34%">HTML table borders without CSS</td> <td width="33%">&nbsp;</td> </tr> <tr bgcolor="#ffffff"> <td height="67">cellspacing="2"</td> <td>&nbsp;</td> <td>bgcolor="#ff6600"</td> </tr> </table> Example n.2:   HTML table borders without CSS   cellspacing="8"   bgcolor="#999999" HTML / XHTML. Code: <table width="100%" cellspacing="8" cellpadding="0" border="0" align="center" bgcolor="#999999"> <tr bgcolor="#ffffff"> <td width="33%" height="67">&nbsp;</td> <td width="34%">HTML table borders without CSS</td> <td width="33%">&nbsp;</td> </tr> <tr bgcolor="#ffffff"> <td height="67">cellspacing="8"</td> <td>&nbsp;</td> <td>bgcolor="#999999"</td> </tr> </table> Example n.3 - for Netscape 3.04-6.0, Mozilla 0.6-0.92 and Arachne.