Kompx.com or Compmiscellanea.com

Pure CSS responsive square

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 ], NetSurf 3.0+, Hv3.

Responsive CSS square. No JavaScript / jQuery. Example:

 

HTML / XHTML. Code:

<div class="square">&nbsp;</div>

CSS. Code:

.square {width: 10%; height: 0; padding-bottom: 10%;}

/* Extra CSS, just styling the look: */

.square {background: #fd0;}

Width: 10% makes the .square div to be 10% of the parent element's width. Height: 0 eliminates any height the element may have, letting padding-bottom: 10% to make it exactly equal to the width. So each time the width of the parent container is changed, the element's size gets recalculated.

Based on the concept - CSS grid with responsive square cells:

Square cell 1
Square cell 2
Square cell 3
Square cell 4
Square cell 5
Square cell 6
Square cell 7
Square cell 8

[ 1 ]

As well as Netscape 6.01+, Mozilla 0.6+.

[ 2 ]

As well as Netscape 6.01+, Mozilla 0.6+.


Aliosque subditos et thema

 

ELinks. Configuration

 

Jump to: ELinks - Text-based or console web browser. Description: features, screenshots, download links. ELinks. Use - How to use ELinks. What ELinks can and what can not, i.e. what may be configured depends on several things. The most common are capability of the console it is run on and support of what was chosen during the compilation process of an ELinks browser source code. Under certain operating systems (Windows for instance) it is easier and more reliable to omit some possible features. The configuration of ELinks 0.12pre2 from Package Database of Zenwalk Linux (originally based on Slackware, still keeping compatibility with its binary packages) is discussed here. It is quite representative in its qualities among other Linux ELinks browser versions for desktop PC computers. User interface of Windows ELinks and that of Linux / some other *nix systems ELinks of comparable versions are the same. If an ELinks package has been compiled without some feature or the console is not capable of something then it just will not be possible to choose the feature in the configuration process; or possible, but it will not work. For example, if this ELinks is compiled without support of 256 colors or your console is not capable of displaying them, then it just will only be possible to choose 16 or "No colors (mono)" in the menu. And the ELinks will work as much well in the rest. The whole configuration of ELinks may be done through the menu of the browser - there is no need to edit config files. Even if some fine-tuning may require editing of elinks.conf or even source code files - but that is not the issue for average use. The menu of ELinks is hidden when it is displaying a web page: To access the menu, press Esc on the keyboard: Configuration options are in "Setup" group: 1 ) "Language" - set a language of ELinks user interface. It is possible to set it to the system language or to several others. System and terminal emulator / console have to be prepared for this change - corresponding localization / internationalization files installed and configured. Choose a language (English in this example): To keep it, press Esc again, then Setup, then Save options, then confirm by clicking OK.

Float bottom

 

There is no "float: bottom" in CSS, but there is a way to achieve it by some other means. Example: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Link 1 Link 2 Link 3 Float bottom HTML / XHTML. Code: <div class="box1"> <div class="content1"> <div class="left1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <div class="menu1"> <p><a href="#">Link 1</a></p> <p><a href="#">Link 2</a></p> <p><a href="#">Link 3</a></p> </div> </div> <div class="bottom1">Float bottom</div> </div> CSS. Code: .box1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .content1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%;} .left1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 64%;} .menu1 {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 36%;} .bottom1 {position: absolute; bottom: 0px; right: 0px;} /* Extra CSS, just styling the look */ .box1 {color: #ddd; text-align: center;} .content1 {background: #bbb;} .left1 {min-height: 100px; padding: 2%; text-align: justify; background: #006; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 {padding: 2%; float: right; background: #060; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .menu1 p {position: relative; top: 0px; left: 0px; float: left; height: auto; width: 100%; padding: 0px; margin: 0px;} .menu1 a {color: #ddd; text-decoration: none;} .menu1 a:hover {text-decoration: underline;} .bottom1 {padding: 2%; color: #eee; background: #600;} There is a web page with a div box, containing its content - box1. There are two div boxes inside it: 1. "content1" with the content proper on the left and menu on the right. 2. "bottom1" after the content1.