Kompx.com or Compmiscellanea.com

CSS centering

1 ) CSS horizontal and vertical centering - 1

Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More for modern web browsers : [ More ] : [ Open demo page ]

2 ) CSS horizontal and vertical centering - 2

Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More conservative, than the previous method. Suitable not only for modern web browsers, but for older ones as well - like Internet Explorer 6 or earlier Maxthon. A shortcoming - it takes more efforts to maintain the CSS code compared to [ CSS horizontal and vertical centering - 1 ] method : [ More ] : [ Open demo page ]

3 ) CSS centering floated elements

Floated elements of unknown width are CSS centered horizontally : [ More ] : [ Open demo page ]

4 ) CSS centering absolutely positioned elements

CSS horizontal centering of an absolutely positioned element : [ More ]

5 ) CSS centering image

CSS horizontal centering of an image : [ More ]

6 ) CSS vertical alignment

CSS vertical alignment of a block element containing text and images. The method works for various combinations of inline and block elements : [ More ]

7 ) 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 : [ More ] : 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 ]


Aliosque subditos et thema

 

CSS vertical alignment

 

CSS vertical alignment of a block element containing text and images. It works for various combinations of inline and block elements. Example: CSS vertical alignment CSS vertical alignment HTML / XHTML. Code: <div class="parent"> <div class="child"> <div class="childcontent">CSS vertical alignment</div> <div class="childcontent"><img src="image.jpg" width="68" height="68" alt="Image" /></div> <div class="childcontent">CSS vertical alignment</div> </div> </div> CSS. Code: .parent {position: relative; left: 0px; top: 0px; height: 200px; display: table;} .child {position: relative; left: 0px; top: 0px; display: table-cell; vertical-align: middle;} .childcontent {position: relative; left: 0px; top: 0px;} Note: .parent and .childcontent may be floated left ("float: left;") or not, but .child must be without "float: left;" for this method of CSS vertical alignment to work. [ 1 ] As well as Netscape 6.01+, Mozilla 0.6+. [ 2 ] As well as Netscape 6.01+, Mozilla 0.6+.

JavaScript form submit

 

Submitting a form using JavaScript. A dropdown list (form + select + multiple options) is processed without any submit button. Example: --- Select a page --- Linux Windows DOS HTML / XHTML. Code: <form action="action.php" method="post"> <select name="page" required="required" onchange="this.form.submit()"> <option value="" selected="selected" disabled="disabled"> --- Select a page --- </option> <option value="http://www.kompx.com/en/os/linux-1.htm">Linux</option> <option value="http://www.kompx.com/en/os/windows-1.htm">Windows</option> <option value="http://www.kompx.com/en/os/dos-1.htm">DOS</option> </select> <noscript><input type="submit" value="Submit" /></noscript> </form> When an option has been chosen from the dropdown list, the form's state is changed. So the onchange event occurs and JavaScript code in onchange is executed: the process of the form submission in started by the script, not by clicking submit button which is absent. Some server-side script [ 3 ] is meant then to handle the form action. The script is supposed to get what the form sends and have it processed. A PHP script in action.php is used in the example: <?php if (isset($_POST["page"])) {     header("Location: $_POST[page]");     exit; } else {     echo "No options selected"; } $_POST is an array of variables passed to the current script via the HTTP POST method. So $_POST[page] contains the content of the value attribute in a select option. That is, a URL. It is passed from form to PHP script and the script redirects browser to the URL / page selected. HTML code of <noscript><input type="submit" value="Submit" /></noscript> is present in the form as a fallback in case JavaScript happens to be turned off. Then there is a submit button to appear and the form is usable anyway. [ 1 ] As well as Netscape 3.04+, Mozilla 0.6+. [ 2 ] As well as Netscape 3.04+, Mozilla 0.6+. [ 3 ] If a CMS is used, form action may be handled by some of its inbuilt means.