NAVIGATION
Differences
This shows you the differences between two versions of the page.
|
deutsch:andere-erweiterungen:jquery:container-zentrieren [2009/12/12 10:56] Knut Heermann (flip-flop) |
deutsch:andere-erweiterungen:jquery:container-zentrieren [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| ====== Container zentrieren ====== | ====== Container zentrieren ====== | ||
| - | **Vertikal zentrieren im Browserfenster ganz einfach** | + | **Vertikal/horizontal zentrieren im Browserfenster ganz einfach** |
| Aus dem [[http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/|sternpunkt blog]] | Aus dem [[http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/|sternpunkt blog]] | ||
| Line 10: | Line 10: | ||
| Ab und zu braucht es eine schnelle Lösung für ein Problem oder Wunsch. Dieser Zentrierer ist so eine Lösung. | Ab und zu braucht es eine schnelle Lösung für ein Problem oder Wunsch. Dieser Zentrierer ist so eine Lösung. | ||
| + | |||
| + | Die horizontale Zentrierung einer Seite im Browserfenster ist noch recht einfach über CSS machbar, die vertikale Zentrierung dagegen ist mit wesentlich mehr Aufwand verbunden. Deshalb diese Variante per JS. | ||
| \\ | \\ | ||
| Line 70: | Line 72: | ||
| In der Datei ##template/lib/jquery/plugin/jquery.centercontainer.js## ablegen. | In der Datei ##template/lib/jquery/plugin/jquery.centercontainer.js## ablegen. | ||
| + | |||
| + | **Trage Sie Ihre ID/Klasse in das Skript ein, etwa in Zeile 19 und 27.** | ||
| <code js|h jquery.centercontainer.js|h> | <code js|h jquery.centercontainer.js|h> | ||
| Line 81: | Line 85: | ||
| * Aendern des Selektors: | * Aendern des Selektors: | ||
| * --------------------- | * --------------------- | ||
| - | * Einsetzen der gewuenschten ID in den Zeilen 17 und 25 | + | * Einsetzen der gewuenschten ID in den Zeilen 19 und 27 |
| * | * | ||
| **************************************************************/ | **************************************************************/ | ||
| Line 90: | Line 94: | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| $(document).ready(function(){ | $(document).ready(function(){ | ||
| - | setCenter('#container01'); //ID oder Klasse des Containers | + | setCenter('#container01'); //Deine ID oder Klasse des Containers |
| }); | }); | ||
| Line 98: | Line 102: | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| $(window).bind('resize', function(event) { | $(window).bind('resize', function(event) { | ||
| - | setCenter('#container01'); //ID oder Klasse des Containers | + | setCenter('#container01'); //Deine ID oder Klasse des Containers |
| }); | }); | ||
