Kompx.com or Compmiscellanea.com

Контакт


Aliosque subditos et thema

 

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 ]

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.