Kompx.com or Compmiscellanea.com

Контакт


Aliosque subditos et thema

 

CSS horizontal and vertical centering - 1

 

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+.

ELinks. Use

 

Jump to: ELinks - Text-based or console web browser. Description: features, screenshots, download links. ELinks. Configuration - How to configure ELinks. Once started, ELinks allows a user to do almost all it is capable of by means of its menu. So it is only how to start ELinks and how to do several other things as an example that is explained here. 1 ) Starting ELinks - ELinks may be run under a GUI environment (X Windows, MS Windows, etc) or some command-line interface. In the first case a terminal emulator / console must be opened before ELinks is to be started: xterm, rxvt, Win32 console and others: ELinks ( Linux ) - To start ELinks, enter command: elinks - To start ELinks opening a web document from Internet: elinks Web address of a web document - To start ELinks accessing hard disk to browse local folders: elinks file:/// or: elinks / - To start ELinks opening a local folder: elinks file:///home/user1/ or: elinks /home/user1/ - To start ELinks opening a local file: elinks file:///home/user1/document1.htm or: elinks /home/user1/document1.htm ELinks ( Windows ) - To start ELinks, enter command: elinks - To start ELinks opening a web document from Internet: elinks Web address of a web document - To start ELinks accessing hard disk to browse local folders: elinks file:/// - To start ELinks opening a local folder: elinks file://c/home/user1/ - To start ELinks opening a local file: elinks file://c/home/user1/document1.htm 2 ) To access the menu of ELinks: Press Esc on keyboard 3 ) Opening a web document in ELinks already running: Press g on keyboard or Esc --> File --> Go to URL --> [ Enter a web address ] --> Enter 4 ) Going back: Left arrow of Arrow keys on keyboard or Esc --> File --> Go back 5 ) Opening a link in a new tab in background: Shift - t or Esc --> Link --> Open in new tab in background 6 ) Going to the next tab: Shift - > or Esc --> View --> Next tab 7 ) Closing a tab: Press c on keyboard or Esc --> View --> Close tab 8 ) Passing a URI to an external application when running ELinks in a terminal emulator. There are many applications it is possible to pass a URI to, here it is about passing a URI to clipboard.