Weil Twitter in China blockiert ist. Daher hat diese Codezeile sehr lange zum Laden gebraucht. http://platform.twitter.com/widgets.js Kann externes JavaScript dynamisch geladen optimiert werden?
Verzeihen Sie meine Unwissenheit, aber warum hat der CSS zwei identische ID-Selektoren? Die zweite Zeile hat #page{…} und die letzte Zeile hat sie wieder (obwohl sie unterschiedliche Dinge beeinflusst).
Warum nicht kombinieren? Oder gibt es dafür einen Grund, den ich nicht verstehe?
Gleiche Frage, aber ich vermute, es dient nur der Organisation des Codes. Aber ich würde wirklich gerne wissen, ob es dafür einen spezifischen Grund gab.
Das funktioniert wunderbar, danke fürs Teilen. Ich bekomme immer noch Magenschmerzen, wenn ich IE-Hacks berücksichtigen muss, aber so ist das Leben.
@Brian, ich habe versucht, das CSS für die 2 #page-Selektoren zu kombinieren, und sah keine Änderung im Rendering unter Firefox. Ich vermute, es gibt einen sehr spezifischen Grund, warum es getrennt wurde (vielleicht eine Art Voraussicht für die Verwendung in einem größeren Design?), aber für dieses einfache Beispiel spielt es keine Rolle.
— Jesse
PS: Zum Zeitpunkt der Veröffentlichung ist meine Portfolio-Website noch sehr roh; richtet kein Urteil, bitte.
Sie haben nicht wirklich einen "*" Selektor verwendet, um diese Ränder und Abstände zurückzusetzen, oder? Ja, haben Sie.
Das ist nicht gerade das, was ich als "smarte Idee" bezeichnen würde, wenn Sie eines Tages Inhalte zwischen diesen Tags einfügen möchten. Schließlich bedeutet "*" "alles".
Meine Güte, und das von jemandem, von dem ich dachte, er wäre klüger, als so etwas an die breite Öffentlichkeit von Noobs und Geeks zu verbreiten. Tsss…
CSS: kopieren/einfügen und Quellformatierung anwenden (oder es so belassen…)
html,body{height:100%}*{margin:0;padding:0}#content{border:1px solid #666;padding:10px}#content_container{display:table-cell;padding:10px;vertical-align:middle}#page{display:table;height:100%;margin:0 auto;overflow:hidden;width:465px}:first-child+html #page,* html #page{position:relative}:first-child+html #content_container,* html #content_container{position:absolute;top:50%}:first-child+html #content,* html #content{position:relative;top:-50%}
HTML
verwenden Sie die obige im Artikel bereitgestellte
__ – __
Ein Element horizontal und vertikal ohne JavaScript zentriert! Reine CSS-Technik ermöglicht ein Element mit dynamischer Höhe, horizontaler und vertikaler Zentrierung. Getestet mit: Win: ie6, ie7, ie8, Chrome 2, Firefox 2 Mac: Safari 3, Safari 4 (beta), Firefox 3, Opera 9 Ungelöstes Problem: IE6 und IE7 – etwas mit der Scrollleiste, wenn der Inhalt größer als das Browserfenster ist…. Quelle: Einige nette Leute Schnell übersetzt von einem netten Kerl, der, als Autor dieses Ortes, gerne hilft.. um geholfen zu werden – von netten Leuten.
Formatierung des letzten Absatzes korrigieren Ein Element horizontal und vertikal ohne JavaScript zentriert! Reine CSS-Technik ermöglicht ein Element mit dynamischer Höhe, horizontaler und vertikaler Zentrierung. Getestet mit: Win – ie6, ie7, ie8, Chrome 2, Firefox 2; Mac – Safari 3, Safari 4 (beta), Firefox 3, Opera 9. Ungelöstes Problem: IE6 und IE7 – etwas mit der Scrollleiste, wenn der Inhalt größer als das Browserfenster ist…. Quelle: Einige nette Leute http://www.flashjunior.ch/school/test/divcentering/index.cfm . Schnell übersetzt von einem netten Kerl, der, als Autor dieses Ortes, gerne hilft.. um geholfen zu werden – von netten Leuten.
Hat mir Zeit gespart, bei der Überarbeitung einer Website, die CSS-Klassen zur Positionierung von Inhalten verwendet, was zu einem Wartungsproblem führte.
Hat mir Zeit gespart, bei der Überarbeitung einer Website, die CSS-Klassen zur Positionierung von Inhalten verwendet, was zu einem Wartungsproblem führte.
Danke Chris.
(Sie können meinen ersten Kommentar und diese Zeile während der Moderation entfernen, wenn Sie möchten. Ich habe versehentlich meine URL zu HTTPS gemacht, was sie nicht ist, daher hat der Link nicht funktioniert.)
Danke, ich benutze eine modifizierte Version davon, um meinen Inhalt zu zentrieren. Es funktioniert sehr gut in FF. Ich habe über 10 Zeilen JavaScript-Code entfernt.
hallo yo mann, es funktioniert
Sehr gutes Skript. Gratuliere!
Weil Twitter in China blockiert ist.
Daher hat diese Codezeile sehr lange zum Laden gebraucht.
http://platform.twitter.com/widgets.js
Kann externes JavaScript dynamisch geladen optimiert werden?
großartig….
sehr nützliches Werkzeug!
du meinst Werkzeug, oder??
FEHLGESCHLAGEN. Man kann die Sachen nicht mal von der Seite kopieren, um sie auszuprobieren.
Gute Sache. … Und mir gefällt das neue Website-Logo und die Schriftarten. ;)
So großartig!! Es funktioniert mit IE7, IE8, FF 3.5
Danke.
Verzeihen Sie meine Unwissenheit, aber warum hat der CSS zwei identische ID-Selektoren? Die zweite Zeile hat #page{…} und die letzte Zeile hat sie wieder (obwohl sie unterschiedliche Dinge beeinflusst).
Warum nicht kombinieren? Oder gibt es dafür einen Grund, den ich nicht verstehe?
Gleiche Frage, aber ich vermute, es dient nur der Organisation des Codes. Aber ich würde wirklich gerne wissen, ob es dafür einen spezifischen Grund gab.
Das funktioniert wunderbar, danke fürs Teilen. Ich bekomme immer noch Magenschmerzen, wenn ich IE-Hacks berücksichtigen muss, aber so ist das Leben.
@Brian, ich habe versucht, das CSS für die 2 #page-Selektoren zu kombinieren, und sah keine Änderung im Rendering unter Firefox. Ich vermute, es gibt einen sehr spezifischen Grund, warum es getrennt wurde (vielleicht eine Art Voraussicht für die Verwendung in einem größeren Design?), aber für dieses einfache Beispiel spielt es keine Rolle.
— Jesse
PS: Zum Zeitpunkt der Veröffentlichung ist meine Portfolio-Website noch sehr roh; richtet kein Urteil, bitte.
Funktioniert bestens. Sehr dankbar für diesen CSS-Trick und all die anderen angebotenen Schnipsel…
toll! danke!
ja! Mann… es funktioniert :D danke dir vielmals Bruder :D
Funktionierte sofort auf einer bestehenden Website, sehr zufrieden!! Wollte schon ewig wissen, wie das geht.
Ich habe keine Ahnung, was dieser Code macht oder was er bedeutet. Für mich nicht sehr nützlich.
Danke .. einfach und simpel
Danke Chris, unglaubliches CSS!
Sie haben nicht wirklich einen "*" Selektor verwendet, um diese Ränder und Abstände zurückzusetzen, oder? Ja, haben Sie.
Das ist nicht gerade das, was ich als "smarte Idee" bezeichnen würde, wenn Sie eines Tages Inhalte zwischen diesen Tags einfügen möchten. Schließlich bedeutet "*" "alles".
Meine Güte, und das von jemandem, von dem ich dachte, er wäre klüger, als so etwas an die breite Öffentlichkeit von Noobs und Geeks zu verbreiten. Tsss…
Ja, ich bin heute zynisch und kritisch! ;)
Ich bin ein großer Fan dieses Resets. Er ist einfach, er ist leicht, er deckt viel ab.
es funktioniert nicht
Es funktioniert nicht in IE 9
Wovon redest du? Es funktioniert einwandfrei in IE9. Möglicherweise hast du zu strenge IE9-Sicherheitseinstellungen.
Hey Mann, du wirst gebeten, den Code noch einmal zu überprüfen. Es funktioniert nicht.
CSS: kopieren/einfügen und Quellformatierung anwenden (oder es so belassen…)
HTML
verwenden Sie die obige im Artikel bereitgestellte
__ – __
Ein Element horizontal und vertikal ohne JavaScript zentriert! Reine CSS-Technik ermöglicht ein Element mit dynamischer Höhe, horizontaler und vertikaler Zentrierung. Getestet mit: Win: ie6, ie7, ie8, Chrome 2, Firefox 2 Mac: Safari 3, Safari 4 (beta), Firefox 3, Opera 9 Ungelöstes Problem: IE6 und IE7 – etwas mit der Scrollleiste, wenn der Inhalt größer als das Browserfenster ist…. Quelle: Einige nette Leute Schnell übersetzt von einem netten Kerl, der, als Autor dieses Ortes, gerne hilft.. um geholfen zu werden – von netten Leuten.
__ – __
das funktioniert wirklich großartig…..
Formatierung des letzten Absatzes korrigieren
Ein Element horizontal und vertikal ohne JavaScript zentriert!
Reine CSS-Technik ermöglicht ein Element mit dynamischer Höhe, horizontaler und vertikaler Zentrierung.
Getestet mit: Win – ie6, ie7, ie8, Chrome 2, Firefox 2; Mac – Safari 3, Safari 4 (beta), Firefox 3, Opera 9.
Ungelöstes Problem: IE6 und IE7 – etwas mit der Scrollleiste, wenn der Inhalt größer als das Browserfenster ist….
Quelle: Einige nette Leute http://www.flashjunior.ch/school/test/divcentering/index.cfm .
Schnell übersetzt von einem netten Kerl, der, als Autor dieses Ortes, gerne hilft.. um geholfen zu werden – von netten Leuten.
Funktioniert großartig! Aber mit einer Breite von 100 % für das Seiten-DIV funktioniert es nicht, und das ist es, was ich suche.
Hey.!! es funktioniert nicht in IE-6. Wenn wir unseren Inhalt vergrößern, kommt keine vertikale Scrollleiste.
Hii Freund korrigiere es, es funktioniert nicht
Hat mir Zeit gespart, bei der Überarbeitung einer Website, die CSS-Klassen zur Positionierung von Inhalten verwendet, was zu einem Wartungsproblem führte.
Danke Chris.
Hat mir Zeit gespart, bei der Überarbeitung einer Website, die CSS-Klassen zur Positionierung von Inhalten verwendet, was zu einem Wartungsproblem führte.
Danke Chris.
(Sie können meinen ersten Kommentar und diese Zeile während der Moderation entfernen, wenn Sie möchten. Ich habe versehentlich meine URL zu HTTPS gemacht, was sie nicht ist, daher hat der Link nicht funktioniert.)
Danke, ich benutze eine modifizierte Version davon, um meinen Inhalt zu zentrieren. Es funktioniert sehr gut in FF. Ich habe über 10 Zeilen JavaScript-Code entfernt.
Ich habe es einfacher gefunden, die Höhe des Viewports des Clients zu ermitteln.
Hier ist eine Lösung, die keine IE-Hacks verwendet: https://css-tricks.de/centering-in-the-unknown/