15. April 2012
You can define CSS declarations only for Mozilla Firefox by using the following scheme:
<style type="text/css"> @-moz-document url-prefix() { html { background: url('https://developer.mozilla.org/@api/deki/files/274/=Moz_ffx_openStandards_1680x1050.jpg') no-repeat; } } </style>
14. April 2012
To center an image properly in a HTML page you have to make it a block element. This can be done with CSS like this:
HTML:
<img id="logo" src="images/timer.png" />
CSS:
#logo{ display: block; margin: 0 auto; }
13. März 2012
#header { width: 100%; height: 142px; background-image: url('./images/header.png'); background-repeat: no-repeat; background-position: 50% 100%; }
21. Februar 2012
Here you can see how to mirror a background image with some cool new CSS3 attributes:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #background { background-image: url('./images/myBackground.png'); width: 1024px; height: 768px; /* Mirror the background image */ -webkit-transform: scaleX(-1); -khtml-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } |
27. Januar 2012
Ein Code sagt mehr als tausend Worte:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Centering a Div horizontally and vertically</title> <style type="text/css"> html { background-color: black; } body { width: 100%; height: 100%; position: static; /* don't make it relative! */ } #centered { position: absolute; height: 396px; width: 400px; margin: -198px 0px 0px -200px; /* 50% height, 0px, 0px, 50% width */ top: 50%; left: 50%; background-color: violet; border: 1px solid white; } </style> </head> <body> <div id="centered"></div> </body> </html> |
7. November 2011
Oft wünscht man sich in einem CSS-Layout einen Div-Container, welcher als Wrapper fungiert und 100 Prozent der im Browser zur Verfügung stehenden Höhe einnimmt. Möchte man dieses Verhalten browserkompatibel gestalten, ist das die Möglichkeit:
HTML
1 2 3 | <body> <div id="wrapper"></div> </body> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | html, body { height: 100%; } div#wrapper { min-height: 100%; height: auto !important; height: 100%; background-color: seagreen; width: 300px; } |
0