Sehr kurze Trick: Wie Zentrum Elemente auf der Seite, auch auf IE5

Donnerstag, 4. Dezember 2008

Es ist nicht für mich bin ich immer mit dem Internet Explorer, es ist nur, dass jeder Damn Thing in der Web-Entwicklung (HTML-und CSS) scheint nicht mit dem Browser - noch immer - weiter verbreitet (ein Tag jemand mir erklären, warum). Eine sehr praktische Methode, um ein Element in der Mitte des Browser-Fensters ist die Eigenverantwortung sfrutture auto Stil margin zum Beispiel, gehen Sie wie folgt vor, um ein div in der Mitte des Bildschirms:

HTML:
  1. > <div id = "box">
  2. <p> Inhalt DIV </ p>
  3. </ Div>

CSS:
  1. :300px;height:200px;margin : 0 auto } div # box (width: 300px; height: 200px; margin: 0) Auto

Leider (Manco zu sagen), dass auf IE5 funktioniert nicht! Eine Möglichkeit zur Lösung dieses Problems ist es, einen anderen "Fehler" der IE5 im Stil text-align In der Praxis, schreiben Sie einfach:

CSS:
  1. : center } Stelle (text-align: center)
  2. :300px;height:200px;margin : 0 auto;text-align: left } div # box (width: 300px; height: 200px; margin: 0 auto; text-align: left)

In ganz ehrlich, persönlich, ich weigere mich, zu schreiben "dieser zozza könnte jedoch immer es sinnvoll. Doch das Ziel dieser "Trick" wurde nur auf die Technik der margin auto

Verwandte Post

Wie ich es gemacht habe: wie man ein Aufkleber-Band in 3 Schritten

Dienstag, 2. Dezember 2008

Der Aufkleber (oder Band) sind die Bilder, die sich in der oberen rechten Ecke oder oben links, und sie bilden gemeinsam eine Band Winkel. Es gibt verschiedene Arten, von einfachen Bildern zu den schönsten Flash-Filme. Manchmal sind sie so konzipiert, um ihre Position auch bei navigieren Sie den Inhalt des Browser-Fenster.
Wenn Sie nicht möchten, dass sich auf Dienstleistungen wie QuickRibbon.com, sondern wollen ein Band der eigenen, hier sind 3 einfachen Schritten zu folgen.

1. Wir schaffen das Bild

Zunächst erstellen wir das Bild, das wollen wir in einer Ecke, links oder rechts. Das Bild unten, bis 163x163 Pixel, ecostruita auf der oberen linken Ecke.

Ribbon Sticker

Um die volle Wirksamkeit der Überschneidung muss sich bei der Rettung, ein Format, das Transparenz, wie GIF oder PNG.

2. Der HTML-Code

Gespeicherte unser Image können wir es in unseren Seiten, die Umhüllung der das img mit einem div die Sie verwenden können, um das Bild in:

HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>

Wenn unsere Aufkleber sollte ein Link, wir können den map um einen sensiblen Bereich, ist nicht rechteckig. Die Aufkleber, die in diesem Beispiel, in der Tat, eine schräge und Transparenz zeigt perfekt die Konturen. Es wäre daher unangemessen, lassen klicken Sie auf einen leeren Bereich, indem Sie einfach ein Tag a introno Bild. Dann haben wir mit dieser Syntax:

HTML:
  1. > <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink" > </div> <div class = "ribbon"> <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0" usemap = "#ribbonlink"> </ div>
  2. > <area shape = "poly" coords = "163,0,0,163,0,129,129,0" href = "http://undolog.com" > </map> <map name = "ribbonlink"> <area Form = "poly" Coords = "163,0,0163,0129129,0" href = "http://undolog.com"> </ map>

Das Attribut coords area definiert die Koordinaten unserer Band.

3. der CSS

Nun fügen wir die Definitionen der Stile, die zulassen, dass unsere Aufkleber auf Ihrer Seite zu positionieren sie richtig:

CSS:
  1. div.ribbon (
  2. ; position: absolute;
  3. top: 0px; left: 0px;
  4. height: 163px; width: 163px;
  5. ;padding: 0 ; margin: 0; padding: 0;
  6. ; overflow: visible;
  7. ; float: none;
  8. } z-index: 10000)
  9. div.ribbonimg (
  10. ;padding: 0 ;margin: 0 ; border: 0; padding: 0; margin: 0;
  11. } background-image: none)

Wenn wir wollen, dass die Band zu bleiben "stecken" in der Video-, auch beim Scrollen Sie das Fenster, nur die Art absolute Stil position im fixed

CSS:
  1. div.ribbon (
  2. ; Position: fixed;
  3. top: 0px; left: 0px;
  4. height: 163px; width: 163px;
  5. ;padding: 0 ; margin: 0; padding: 0;
  6. ; overflow: visible;
  7. ; float: none;
  8. } z-index: 10000)

Hinweis: die fixed die im Stil position bis vor kurzem war es nicht von allen Browsern unterstützt. Um die Wirkung, in der Tat, war gezwungen, eine JavaScript-Funktion, dass in regelmäßigen Abständen kontrolliert die Strömung von den möglichen Inhalt des Fensters und ersetzen das Band, um den Eindruck zu bleiben im Wesentlichen unbeweglich. Zum Glück, heute, mit einigen veralteten Version von Explorer, von allen Browsern unterstützt die Art fixed

Verwandte Post

Wie zu ertragen und glücklich leben IE6

Mittwoch, 26. November 2008

Ich habe immer einige "Krankheit", wenn ich das Thema "Vereinbarkeit von Browser zu Browser." Darüber hinaus, und ich habe noch zu verstehen, der wahre Grund, von allen Browsern, die wissen, die "unangenehm", hat er immer noch: Microsoft Internet Explorer 6! Leider ist die Version von Internet Explorer 6 ist noch im Umlauf und sind häufig Berichte über Probleme bei der Darstellung der Seiten.
Eine Web-Entwickler müssen organisieren, so dass Sie alle Werkzeuge für die Kontrolle und Überprüfung ihrer (Schweiß) Arbeit auf alle möglichen Browser (und Plattformen) zur Verfügung. Microsoft Internet Explorer, die meisten anderen, macht diese Aufgabe noch schwieriger, weil - jetzt - müssen Sie Ihren Web-Seiten sind mit der neuesten Version 8 (noch in der Beta-Phase) ist mit früheren Versionen, wie z. B. 6 oder 5,5 . Es gibt verschiedene Möglichkeiten zu leben, mit unterschiedlichen Versionen von Explorer (siehe Verwenden Sie Microsoft Internet Explorer 6 und 7 gleichzeitig) und als Alternative gibt es auch sehr gut (wenn auch ein wenig "-Objektive) Dienstleistungen online.

Bild

Eine weitere gute Möglichkeit, die gut funktioniert unter Windows Vista, wird vertreten durch IETester, völlig frei und von den Entwicklern DebugBar und Companion.JS. IETester, aber es ist immer noch in der Beta-Phase und einige Absturz im Hinterhalt, erlaubt schnell Sie unsere Seiten - auf einmal - auf IE5.5, IE6, IE7 und IE8 Beta.

Patch CSS

Wenn Sie IETester finden wir einen Fehler in der Stile, das ist ein Unterschied zwischen IE6 und IE7 und Firefox oder IE6, zum Beispiel, die Lösung, die wir gefunden haben, so weit, dass nur IE6 nutzt die neue Definition. Für mich, wie es bei einer Marge! Ich hatte eine Klasse, die den rechten Rand für 28px, und in allen Browsern, das Ergebnis war identisch, es sei denn, mit IE6! Auf der letzteren, um das gleiche Layout, musste ich mit einem Wert von 8px.
Eine sehr einfache, leicht zu merken und sehr direkt, das Problem zu lösen, ist die "Override" Unser Stil Laden eine andere Ad-hoc-Datei nur, wenn der Browser - befürchtet - IE6:

CSS:
  1. / ** Datei ie_override.css ___
  2. * Verwenden Sie diese Datei zu überschreiben einen Stil
  3. * /
  4. :8px } div.mystyle (margin-left: 8px)

HTML:
  1. <! - Styles für alle Browser ->
  2. href = "css/style.css" type = "text/css" > <link "stylesheet" rel = href = "css/style.css" type = "text/css">
  3. <! - Styles für IE6 ->
  4. = "stylesheet" type = "text/css" href = "css/ie_override.css" / > < ! [ endif ] -- > <!--[ If lt IE 7]> <link rel = "stylesheet" type = "text/css" href = "css/ie_override.css" /> <[endif] ->

Verwandte Post

jQuery: abgerundete Kanten auf die Bilder, um Überschneidungen

Donnerstag, 30. Oktober 2008

Aufgrund der unterschiedlichen Darstellung von den verschiedenen Browsern, die sich Microsoft Internet Explorer zu berücksichtigen, müssen wir immer auf Kunststücken für die Auswirkungen, die jetzt zu einem Standard. Die Multi-diskutiert abgerundeten Kanten sind ein klassisches Beispiel für die "Katastrophe" durch die vollständige Unfähigkeit, eine Norm für schwere Rendering von HTML / CSS. Es gibt viele Online-Lösungen, die es Ihnen ermöglichen, um die "Auswirkungen" (Auswirkungen dall'HTML Freistellung als abgerundeten Ecken, Schatteneffekte, Spiegelungen, etc. ...) mit Patches auf die Blätter von Stilen, spezielle Tricks mit dem Einsatz von div veredelten , JavaScript-Bibliotheken, die Verwendung von canvas etc. ...
Eine rein Bildungseinrichtungen möchte ich erklären, weitere Technik (Cross-Browser), um die Kanten gerundet, um die Bilder:

Demo-und Source -

Lesen Sie weiter ... "

Verwandte Post

Erstellen Sie mit Google Desktop und Firefox, Chrome?

Dienstag, 28. Oktober 2008

Google Chrome ermöglicht es Ihnen, Desktop-Anwendungen auf einer Web-Seite? In der Tat, wie in der Menüpunkt ist es möglich, erstellen Sie einfach eine Verknüpfung zu einer Verknüpfung, die - wiederum - öffnet ein Fenster, ohne die Adressleiste ohne all die "Extras" des Browsers. Dies bedeutet nicht, dass haben wir einen Desktop, und wir haben gerade ein Link zu den Google-Chrome-Modus - quasi-Chrom-weniger.

Simle Funktion, aber ehrgeizig, hatte bereits vorgeschlagen wurden, von der Mozilla Foundation im Jahr 2007, durch das Projekt Prism. Dies ist sicherlich vielseitiger, gut, begleitet durch eine sinnvolle Erweiterung, die Ihnen erlaubt, auf Desktop-Anwendungen erstellen Menü FireFox, wie Google Chrome.

Die beiden Lösungen sind weit entfernt von der Technologie von Adobe AIR. Bevor jemand verwechseln sollte darauf hingewiesen werden, die wesentlichen Unterschiede zwischen einer Desktop-Verknüpfung, öffnet sich ein Fenster mit Menü und eine Desktop-Anwendung und ihre wahren.
Adobe AIR, in der Tat, im Gegensatz zu den Lösungen von Google Chrome und Prism ermöglicht:

  • Nahezu vollständigen Zugriff auf das System, auf dem die Anwendung mit der Fähigkeit zum Lesen und Schreiben von Dateien. Möglichkeit, die Funktionalität durch eine DLL (Dynamic Link Library), Erweiterungen und Third-Party-Produkte wie MH-Player (siehe Verteilen Adobe AIR AIR Badge von einem MH-Player)
  • Verwaltet die Anwendung und anderen Anwendungen System: Installation und Deinstallation

Verwandte Post

jQuery gegen alle: ein Benchmark mit 5 Browser

Mittwoch, 17. September 2008

Bild Ein guter Entwickler ist kein Problem, von einer Programmiersprache zur anderen. Die Wahl auf eine bestimmte Sprache, Rahmen-und Entwicklungsumgebung, ist mehr diktiert durch die Verfügbarkeit von Zeit und der Art der Arbeit, die stattfinden. Jedoch ein wichtiger Faktor, die möglicherweise Einfluss auf die Wahl der "Rahmen", wie ist die Sympathie oder die Krankheit, die im Laufe der Zeit reifen.
Genauer gesagt, ich wollte zu analysieren einige - nicht alle - Javascript Rahmen heute, denn "empfohlen", um einen Blick vor allem jQuery.
Die Entwickler von Mootools (einer der beliebtesten Javascript Rahmen) zur Verfügung gestellt haben ein Werkzeug, um einen Test der Geschwindigkeit und der Gültigkeit von fünf bekannten Javascript Rahmen: Slickspeed. Diese Prüfung, die Ergebnisse nicht Rabatt auf alle, es ist wichtig, da die Rahmenbedingungen clientseitigen Javascript, die von unseren Browser. Es ist genau aus diesem Grund, dass einige finden Safari schneller als Internet Explorer oder Google Chrome schneller als Firefox. Allerdings, dieser hängt oft von der Seite, die Sie sich ansehen. In der Tat ist, kann sehr gut passieren, dass einer bestimmten Website ist wirklich mehr "schnell", wenn sie in Safari, das heißt aber nicht, dass alle Seiten werden schneller mit Safari! Natürlich, dieser Diskurs ist gültig für alle anderen Browser.

Die Benchmark

In Tests habe ich mit Slickspeed Vergleich habe ich den Browser auf meinem Rechner (Windows Vista Utilmate 64bit - Intel Core 2 Quad zu 2,4 GHz mit 8Gb RAM).
Leider, ist der Test nicht in der Lage war, um mit Internet Explorer 7, da es blockiert das Auto, sogar noch aus der Skala mit den Ergebnissen! Noch einmal, herzlichen Glückwunsch Microsoft.
Ich crercato, um den gleichen Status der PC während der Ausführung der Tests, die Öffnung der Browser individuell und nicht irgendeine andere Prozess läuft.

Hinweis: Wenn Sie der Meinung sind wie Sie eines oder mehrere dieser Prüfungen, können Sie Kommentare zu diesem Beitrag im Falle von "neugierig" und unterschiedlichen Ergebnissen.

Bild

Google Chrome war wirklich schnell, mit einem Wert von 68 (Durchschnitt) in die Prüfung mit jQuery. Je langsamer, jedoch wurde Flock, trotz der aus dem gleichen "Mutter" Mozilla. Das schlechte Ergebnis für Flock ist wirklich merkwürdig angesichts ihrer Schneiden Social Network, denn es ist die Social Network Web 2.0 zu nutzen viele Javascript Rahmen zur Verfügung, so dass eine Erfahrung im Bereich der Navigation und Interaktion wirklich innovativ.
Eine Überraschung Beat FireFox und Opera hat auch eine Menge ", sogar noch eine 74 im Dojo! Firefox und Safari, alle Dinge berücksichtigt, sind ähnlich, mit Safari schneller in Tests mit Mootools und jQuery.

Was Rahmen zu wählen?

Sie können badiamo, um die Schnelligkeit bei der Ausführung und wir kümmern uns nicht um die Größe in KB des gleichen Rahmen, die Antwort könnte "Was ist für Sie", oder, wenn Sie es vorziehen, "was Sie wissen am besten, oder mehr mit dem harmonischen Stil der Programmierung. "
Letztlich sind diese Rahmenbedingungen wird wie ein "(siehe die Verwendung von $ zum Beispiel), obwohl einige wichtige Unterschiede, die sich direkt in die Augen eines Sachverständigen oder wirklich forciert den Einsatz einer bestimmten Bibliothek. Im Prinzip ist in der Tat alles, was getan werden kann, mit jQuery, zum Beispiel, können Sie auch mit Mootools oder Prototyp! Wenn jQuery hat eine sehr kompakte Syntax, da alle Methoden immer wieder die Grundlage jQuery-Objekt, wodurch endlose Dateien oggetto.metodo().metodo().metodo()... ist nicht gesagt, dass dies auf allen Kosten einer Stärke, vor allem für diejenigen, die haben zu debuggen!
Bibliotheken wie prototype.js vielleicht schuldig in Ermangelung grafische Effekte, selbst einfache, zwingt die Entwickler zur Umsetzung als Spin-off scriptaculous.js, schwerer und weit von der Bibliothek die erste Wahl.

Ein Beispiel

Genau diesem Grund, zum Beispiel, hat mich zu ersetzen, gekoppelt Prototyp / scriptaculous mit jQuery um interaktive Tafeln / animierte hier in der Seitenleiste undolog.com. Ja, mit Google-API-Bibliothek zu importieren, ist ein Abfall laden die gesamte Bibliothek für eine scriptaculous slideDown und slideUp. Für weitere Informationen und ein Beispiel, hier ist, wie die Javascript-Code in Verbindung mit dem Prototyp / scriptaculous:

JavaScript:
  1. / / Prototype / scriptaculous
  2. ) . each ( $ $ ( 'H2.dropdown "). Jede (
  3. element ) { Funktion (Element) (
  4. = "pointer" ; Element. Stil. cursor = "pointer";
  5. 'click' , Element. beobachten ( "klicken Sie auf",
  6. event ) { Funktion (event) (
  7. this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration:. 5 } ) ; if (this. next (). Stil. Display == "") neuen Effekt. BlindUp (this. next (), (Dauer:. 5));
  8. Effect. BlindDown ( this . next ( ) , { duration:. 3 } ) ; Wirkung sonst neu. BlindDown (this. next (), (Dauer:.) 3);
  9. event ) ; Event. Stop (event);
  10. )
  11. )
  12. )
  13. );

und es ist jetzt mit jQuery:

JavaScript:
  1. / / JQuery
  2. ) . each ( $ ( 'H2.dropdown "). Jede (
  3. i ) { Funktion (i) (
  4. ) . css ( 'cursor' , 'pointer' ) . click ( $ (This). CSS ( "Cursor", "Zeiger"). Klicken Sie auf (
  5. Funktion () (
  6. $ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). ist ( ': versteckt')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
  7. )
  8. );
  9. )
  10. );

Alles in allem ein genauerer Blick, ich glaube nicht, dass es einen großen Unterschied! Aber wie ich schon sagte ... Frage ist, "auch" persönlichen Geschmack.

Verwandte Post

Flick und Flock

Dienstag, 19. August 2008

Wenn es etwas gibt, dass Mozilla hat gute Browser!

Flock

Flock ist ein Browser mit einer Reihe von Funktionen für das soziale Netz-und Blog. Verfügbar für Mac, Windows und Linux bietet eine neue Erfahrung mit der Suche, die, wie ich, haben verschiedene Konten in sozialen Netzwerken (Facebook, Twitter, YouTube, ...) und wird auch mit RSS-Feeds, so glatt und schnell.

Installation

Wenn Sie Firefox (die nicht zu deinstallieren) alle Einstellungen können in Flock bei der ersten Verwendung: Cookies, Passwörter, Lesezeichen, die alle kurz. Nach der Verwendung Flock für ein paar Minuten, kam ich spontan Entfernen Sie die hervorragende FeedReader jetzt überflüssig angesichts der exzellenten Verwaltung der Feed Flock.

Merkmale

Neben vielen anderen Funktionen, die Firefox, das es ab sofort verfügbar, Flock ermöglicht:

  • Blog-Editor
    Einfache, aber wirkungsvolle Editor für die Veröffentlichung auf unserer Blog. Es unterstützt sowohl persönliche Blog-Plattformen wie WordPress, Blogger und Live Journal. Hervorragend die "Notizen", die Web-Zwischenablage, in verschiedenen Teilen der Browser
  • Menschen Panel
    Durch die einfache Drag & Drop können Sie sofort Sie Bilder und Links mit unseren Kontakten, aus Twitter, Facebook, YouTube und Flickr
  • Media Bar
    Flock kann automatisch erkennen, viele Features, wenn Sie eine Website (Blog-und Social Network). Zum Beispiel, Eingabe von Flickr oder YouTube ist ein Apera Media Bar auf dem Gipfel, wo Sie können horizontal scrollen, Filme und Fotos können Sie oder kopieren Sie den Inhalt sofort
  • Search Engine
    Die Verwaltung der Forschung ist vollständig anpassbar (wie es bereits in Firefox, dank der Open-Standard-Suche), die es ermöglichen, auf einfache Weise "eine Reihe von alternativen Suchmaschinen, die beide aus einer Liste, die auf der Website von Flock oder über die automatische Anerkennung in eine Seite
  • Plugins und Erweiterungen
    Auch Flock als Firefox bereits zahlreiche Erweiterungen, eine Waffe, die sich als erfolgreich erwiesen für Firefox. Einige sind speziell für den Flock, auch wenn Sie finden einige "Portierung" der bekannten Erweiterungen für Firefox
  • Verwaltung von Fotos
    Dank der Foto-Uploader, können Sie eine interne Flock schnell an unsere Fotos auf Flickr oder Facebook.

Verwandte Post

Safari, löschen Sie die blaue Grenze auf Eingabefelder

Montag, 14. Juli 2008

Safari, der Apple-Browser auch für Windows, hat einen blauen Rand (blau), wenn Sie in ein Feld input Wenn in einigen Fällen kann es angenehmer, in anderen wird es wirklich ärgerlich! So löschen Sie einfach in unserem Stylesheet:

CSS:
  1. / * Entfernen ____________________________ blaue Grenze * /
  2. : 0 none } Eingang (Entwurf: 0 none)

Oder, alternativ, direkt als Attribut im input

HTML:
  1. ... <input style = "outline: 0 none" ... />

Verwandte Post

Geben Sie den Text mit CSS: IE7, ein schlechtes Geschäft

Dienstag, 10. Juni 2008

Wieder einmal, wenn ich schriftlich über die Fähigkeit von Style Sheets, sind gezwungen, neben dem Microsoft Internet Explorer! Mit CSS2 wurde eine sehr interessante Funktion, die content die in Verbindung mit der Pseudo-Elemente before und after Durch diesen "Stil" können Sie den Inhalt einer Seite, die ausschließlich auf die CSS-Datei. Zum Beispiel, wenn wir schreiben:

CSS:
  1. content : ">>" } li: vor (Inhalt: ">>")

Eine Liste mit Aufzählungszeichen UL LI werden jeweils vorangestellten Zeichen ">>"! Alles, was, natürlich, die behandelt werden können auf diese Weise:

HTML:
  1. fogli di stile </span> </p> <p> können Zeichen mit <span> Stylesheets </ span> </ p>

CSS:
  1. content : "-->" } p span: vor (Inhalt: "-->")

Die Vielseitigkeit dieses Element noch nicht zu Ende! Sie können andere Parameter zusätzlich zu den einfachen (aber nützliche) Text. Der content auch die besonderen Werte oder URL:

CSS:
  1. content : url ( images/quote.gif ) } p: vor (Inhalt: url (Bilder / quote.gif))
  2. content : close-quote } p: nach (Inhalt: In der Nähe-Zitat)
  3. content : url ( waves/sound.wav ) } p: vor (Inhalt: url (Wellen / sound.wav))

Für Informationen über die Anwendung direkt auf W3C - schade, sie nicht einmal Microsoft!

Verwandte Post

Firefox 3 RC1 Acid 3

Dienstag, 3. Juni 2008

Acid 3 Test

Wir sind auf dem Weg als zuvor! :)

Verwandte Post