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 for a range of elements


Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.

Split video file. FFmpeg


Split video file by ffmpeg: There are two ways how to split video files by ffmpeg. The first one is good in itself, more than that - it is faster, but sometimes creates output files with certain flaws. So for those cases there is the second way of splitting video files: it is considerably slower, the output files are bigger, but it seems they are always of the same quality level as input files used. Way : 1 ffmpeg -ss <start> -t <duration> -i in1.avi -vcodec copy -acodec copy out1.avi Way : 2 ffmpeg -ss <start> -t <duration> -i in1.avi -sameq out1.avi - <start> - the beginning of the part of a video ffmpeg is to cut out. Format: 00:00:00 - hours:minutes:seconds - hh:mm:ss - <duration> - the duration of the part of a video ffmpeg is to cut out. Format: 00:00:00 - hours:minutes:seconds - hh:mm:ss Examples ffmpeg -ss 01:19:00 -t 00:05:00 -i in1.avi -vcodec copy -acodec copy out1.avi ffmpeg -ss 01:19:00 -t 00:05:00 -i in1.avi -sameq out1.avi - ffmpeg cuts out a part of the video file starting from 1 hour 19 minutes 0 seconds. The duration of the video sequence cut out is 5 minutes 0 seconds. About ffmpeg: ( Home page ) ( List of supported file formats and codecs )