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

 

HTTP to HTTPS redirect in .htaccess

 

Redirecting from HTTP to HTTPS, when the web server serving the pages is behind a load balancer or reverse proxy. Server configuration: Apache + nginx; SSL is enabled; SSL-certificate is purchased, approved and installed. That is, everything is up and running. So it is just the HTTP to HTTPS redirection that is left to get ready and start up. Directives for .htaccess file: RewriteEngine On RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] RewriteCond %{HTTP:X_FORWARDED_PROTO} !https [NC] RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] HTTP to HTTPS redirect -- Enable runtime rewriting engine: RewriteEngine On -- If domain name has no www: RewriteCond %{HTTP_HOST} !^www\. [NC] -- Then replace it with domain with www: RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] -- If HTTPS is not present: RewriteCond %{HTTP:X_FORWARDED_PROTO} !https [NC] -- Then replace domain without HTTPS with domain with HTTPS: RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] Notes 1. X_FORWARDED_PROTO may instead be called X-Forwarded-Proto or even else. The point is to obtain the information from a load balancer or reverse proxy on the original request it gets. Load balancers or reverse proxies may provide the web server with this info and a header named X_FORWARDED_PROTO or X-Forwarded-Proto or else may be sent, holding the protocol string. It is most often so, but not always. So it should probably be determined by practice how to get the protocol string in a particular case. 2. The other way is just to set the environment variable (if it is suitable for the given web server): SetEnvIf X_FORWARDED_PROTO https HTTPS=on Then directives for .htaccess file are to be like this: RewriteEngine On SetEnvIf X_FORWARDED_PROTO https HTTPS=on RewriteCond %{HTTP_HOST} !^www\. [NC] RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] RewriteCond %{HTTP:HTTPS} !on [NV] RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L] 3. Apache Module mod_rewrite docs: http://httpd.apache.org/docs/current/mod/mod_rewrite.html

CSS. Target Firefox only

 

CSS targeting Firefox web browser only: This text is red in Firefox HTML / XHTML. Code: <p>This text is red in Firefox</p> CSS. Code: @-moz-document url-prefix() {p {color: #f00;}} Unlike the method of styling elements for Opera browser only, it is essentially a hack - since the rule originally is intended for a different purpose. But lack of support in browsers other than Firefox allows to isolate code for use by Firefox web browser only. [ 1 ] Other browsers with Gecko web browser engine, like SeaMonkey 1.0+ or older Netscape 9.0, also support the hack. [ 2 ] Various versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they are meant to - these browsers ignore the whole code of the Firefox specific hack. [ 3 ] There is also one more browser where text gets red - ELinks, an advanced text-based web browser with some support for CSS.