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

 

Windows console applications. Multimedia

 

MPlayer : FFmpeg Media players appeared long ago, but their heyday began with the mass spread of personal computers powerful enough to play video files. This coincided with the mass spread of operating systems and other software with graphical user interface. However, a program with a graphical user interface is dualistic in its nature: there is a code responsible for graphical user interface, for the appearance and there is a code - for performing the task the given application has been created for in the first place. Both code complexes consume system resources, their response time to user actions makes up certain amount of waiting time. And in cases or concepts when appearance is taken as less important - less important to the point of sparing or almost sparing to employ it - console applications, among others, appear. Moreover, the segmentation of the GUI and of the engine makes it easier to change the graphical user interface or perform complex automated operations. The scheme is implemented for media players for Windows as well. MPlayer, for instance, in its usual form is a console application, starting up quickly, having fast response to user actions, consuming system resources almost entirely for its immediate task. And on this basis if desired, one or another graphical interface may be added for creating, all in all, a new application. MPlayer - / home page / Console media player for Windows. Basis for SMPlayer and UMPlayer. There are versions for Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, some other *nix system, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Supported video, audio formats, static images, subtitles, etc. ( List and More extensive list of video and audio codecs ). MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman's Contract" MPlayer: "Balzaminov's Marriage" FFmpeg - / home page / Pack of utilities and libraries for work with video and audio files. Created in and for Linux, but there is a Windows variant. Source code may be compiled for some other operating systems. Supported file formats and codecs: ( List ). Also, VLC media player can be run in text mode, ncurses using.

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.