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

Donnerstag, 4. Dezember, 2008

Nicht, dass ich mich immer mit dem Internet Explorer, ist, dass jede Damn Thing positive Entwicklung Web-(HTML und CSS) scheint nicht mit dem Browser - wieder - mehr beliebt (ein Tag jemand mir erklären, warum). Eine sehr bequeme Methode, um ein Element in der Mitte des Browser-Fensters ist es, die sfrutture auto margin zum Beispiel, wie hier, um ein div in der Mitte des Bildschirms:

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

CSS:
  1. :300px;height:200px;margin : 0 auto } # div-Box (Breite: 300px; height: 200px; margin: 0 auto)

Leider (sagen wollen) auf IE5 das nicht funktioniert! Eine Möglichkeit zur Lösung dieses Problems ist es, einen anderen "Fehler" der IE5 in der Art text-align In der Praxis einfach schreiben:

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

In ganz ehrlich, persönlich Ich weigere mich zu schreiben "dieser zozza", konnte aber immer hilfreich. Doch das Ziel dieser "Trick" wurde genau auf die margin auto

Verwandte Post

Wie ich es gemacht habe: Wie erstellt man eine Aufkleber-Band in 3 Schritten

Dienstag, 2. Dezember, 2008

Die Aufkleber (oder Band) sind jene Bilder, die sich in der oberen rechten oder linken oberen, und sie bilden gemeinsam eine Band Winkel. Es gibt verschiedene Arten, von einfachen statischen Bilder zu den schönsten Flash-Filme. Manchmal sind sie so konzipiert, bleiben in ihrer Position, auch wenn navigieren Sie den Inhalt Ihres Browser-Fenster.
Wenn Sie nicht möchten, dass hoheitliche eine Dienstleistung im QuickRibbon.com, wollen aber, dass zum Aufbau einer Band ganz Ihnen, hier gibt 3 einfachen Schritten zu folgen.

1. Wir schaffen das Bild

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

Sticker Ribbon

Um die Wirkung vollständig überschneiden müssen wählen, die zum Zeitpunkt der Rettungs-, ein Format, unterstützt die Transparenz, wie GIF oder PNG.

2. Der HTML-Code

Gespeicherte unser Bild haben wir in unserer Seite, einwickelung dem Tag 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 "ribbon" Klasse => <img src = "ribbon.gif" title = "Ribbon Test" width = "163" height = "163" border = "0"> </ div>

Wenn unsere Aufkleber muss ein Link, wir Gebrauch machen können von dem Tag map um einen sensiblen Bereich, die nicht rechteckig. Die Aufkleber, die in diesem Beispiel, in der Tat, Sie haben ein schräg und Transparenz hebt die Konturen perfekt. Es wäre daher unsachgemäße zu ermöglichen, klicken Sie auf einen leeren Bereich, indem Sie einfach ein a das Bild Introns. Dann benutzen wir diese Syntax:

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

Das Attribut coords area definiert die Koordinaten unserer Band.

3. die CSS

Jetzt fügen wir die Definitionen der Stile, durch die die Aufkleber von unserer Position auf der Seite 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: sichtbar;
  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 nach wie vor "appiccicato", um das Video, auch wenn Scrollen Sie das Fenster, einfach ändern die Art absolute Stil position

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

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

Verwandte Post

Best Technische Blog Italienisch: 2008-2009 Auflage:

Donnerstag, 27. November, 2008

Bild Ich hatte das Vergnügen, wenn nicht die Ehre aufgerufen, an der Jury für die beste Tech Blog, eine Initiative von Cristiano Fino und bereit zu belohnen, in der Tat, die besten italienischen technischen Blog. Wie geschrieben von Wolf "keine Verbindung zu jedermann, kein Trick zu klettern classfiche, nur einen gesunden Wettbewerb."
Bitte lesen Sie die Regeln des Wettbewerbs und wenn Ihr Blog hat Karten bis zu speichern, Registrierung wird geöffnet von 8-29 Dezember 2008! Falls gewünscht, können Sie dazu beitragen, die Verbreitung der Zugabe zu Ihrem Blog der ein Abzeichen, dass wir für den Anlass.
Die Jury von diesem "Wettbewerb" für die Jahre 2008-2009, besteht unter anderem durch:

und, natürlich, von Cristiano Fino, als Vorsitzender (denen ich danken für das Vertrauen accordatami). Ich möchte bei dieser Gelegenheit, Kompliment an die gesamte Gruppe der "Best Tech Blog, das wird in sehr kurzer Zeit, so dass die frühen Morgenstunden zu realisieren, was nur eine Idee. Eine ausgezeichnete, und vielleicht seltene Demonstration eines gut sortierten Gruppe von Arbeitnehmern : D Verantwortlich für Trainer : D Ich hoffe nur, zu sein, nell'insolita als Juror ...

Verwandte Post

Wie IE6 ertragen und leben glücklich

Mittwoch, 26. November, 2008

Immer einige "Krankheit", wenn Affront für die "Vereinbarkeit von Browser zu Browser." Darüber hinaus, und ich habe noch zu verstehen, der wahre Grund, von allen Browsern, die wissen, die meisten "unangenehm", hat er immer noch: Microsoft Internet Explorer 6! Leider ist die Freisetzung von IE 6 ist immer noch im Umlauf und werden häufig Berichte über Probleme in der Darstellung der Seiten.
Eine Web-Entwickler müssen so organisieren, dass Sie über alle Werkzeuge für die Kontrolle und Überprüfung ihrer (Schweiß), die auf alle möglichen Browser (und Plattformen) zur Verfügung. Microsoft Internet Explorer, die meisten anderen, macht diese Aufgabe schwieriger, weil - nun - müssen Sie überprüfen, ob ihre Web-Seiten mit der jüngsten Version 8 (noch im Beta-Version) ist mit früheren Versionen, wie z. B. 6 oder die 5/5 . Es gibt verschiedene Wege, um zusammen leben verschiedene Versionen von Explorer (siehe Verwenden Sie Microsoft Internet Explorer 6 und 7 gleichzeitig) und alternativ gibt es auch sehr gut (wenn auch etwas "langsam)-Services online erwerben.

Bild

Eine andere gute Möglichkeit, dass gut funktioniert unter Windows Vista, ist vertreten durch IETester, eine völlig freie und gebaut von den Entwicklern DebugBar und Companion.JS. IETester, obwohl noch in der Beta-Phase und einige Absturz in Hinterhalt, ermöglicht rapidamente di verficare le nostre pagine - contemporaneamente - sia su IE5.5, IE6, IE7 e IE8 beta.

Patch CSS

Wenn Sie IETester finden wir einen Fehler in Stilen, das ist ein anderes zwischen IE6 und IE7 oder Firefox und IE6, zum Beispiel, fanden die Lösung müssen wir sicherstellen, dass nur IE6 nutzt die neue Definition. Für mich, zum Beispiel, passiert mit einer Marge! Ich hatte eine Klasse, die den rechten Rand zu 28px, und in allen Browsern, das Ergebnis war identisch, außer mit IE6! Auf der letzteren, um das gleiche Layout, musste ich mit einem Wert von 8px.
Un modo assai semplice, facile da ricordare ed estremamente immediato per risolvere il problema, è quello di "sovrascrivere" il nostro stile caricando un diverso file ad hoc solo se il browser è il - temuto - 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. <! - Kollektionen für alle Browser ->
  2. href = "css/style.css" type = "text/css" > <link rel = "stylesheet" href = "css/style.css" type = "text/css">
  3. <! - EMI nur für IE6 ->
  4. = "stylesheet" type = "text/css" href = "css/ie_override.css" / > < ! [ endif ] -- > <!--[ Wenn lt IE 7]> <link rel = "stylesheet" type = "text/css" href = "css/ie_override.css" /> <! [Endif] ->

Verwandte Post

Pillolibri: Mini-Bücher über Photoshop Illustrator

Dienstag, 25. November, 2008

Pillolibri

David Vasta gedacht, dass viele Menschen versuchen oft sehr spezifischen Themen, und dann ein Buch zu lesen, kann zu anspruchsvoll. Daraus ergibt sich die Idee von der Entwicklung einer Reihe von Büchern äußerst kompakt (10 bis 40 Seiten maximal), die die nun verfügbar sind, sowohl in Papier, und zwar sowohl in-Download (auf einem sehr niedrigen Preis).
Die Argumente sind immer sehr unterschiedlich, die ersten 5 Pillolibri widmen sich den folgenden Themen:

  • Erstellen von 3D-Objekten mit Illustrator
  • Fotografie: die Grundlagen
  • Entwerfen einer Marke
  • Home-Banking mit BancoPosta
  • VR-Bilder mit Cubic Converter

Ich Pillolibri zeichnen sich durch eine klare und direkte Sprache, und sind auf Lulu, mit Farbe innen: auf diese Art den Screenshot, sondern auch Fotos und Illustrationen begleiten den Text, sind viel attraktiver!

Verwandte Post

Skypemote Version von Adobe AIR: 1000 Download

Montag, 24. November, 2008

Skypemote Version von Adobe AIR

Verwandte Post

Sehr kurze Auszug: Wordpress, getrennte Klassen in zwei Spalten

Mittwoch, 19. November, 2008

Inspiriert von Wordpress Hack # 2 - Trennen Sie die Kategorien in den Spalten in der Sidebar Mai finde es nützlich, "Pause" in zwei Spalten in der Liste der Kategorien von Wordpress. Wenn Sie die Folge, dass wir von links nach rechts, nämlich CAT1 | cat2 (Kopf) cat3 | cat4 (Kopf) etc ... Es besteht keine Notwendigkeit für die Verwendung eines PHP-Code, sondern nur das Spiel mit Stilen Einstellung dem Tag li float:left und "schließen" mit den entsprechenden width Tag ul um zu senden Beförderung liefert die li In Fällen, in denen die CSS eher nicht bekommen, zum Beispiel in der Reihenfolge CAT1 | cat3 (Kopf) cat2 | cat4, wir können mit dieser einfachen Code:

PHP:
  1. ( "<br />" ,wp_list_categories ( 'title_li=&echo=0&depth=1&style=none' ) ) ; $ Katzen = explode ( "<br />", wp_list_categories ( 'title_li = = 0 & & echo Tiefe = 1 & style = none'));
  2. ( ( sizeof ( $cats ) - 1 ) / 2 ) ; $ = Mittlere Runde ((sizeof ($ Katzen) - 1) / 2);
  3. ( $cats , 0 , $middle ) ; $ Cats_left = array_slice ($ Katzen, 0, $ Mitte);
  4. ( $cats , $middle , - 1 ) ; $ Cats_right = array_slice ($ Katzen, $ Mitte - 1);
  5. . implode ( '</li><li>' , $cats_left ) . '</li></ul>' . echo '<ul class="left"> <li> ". implode (' </ li> <Li> ', $ cats_left)." </ li> </ ul>'.
  6. ( '</li><li>' , $cats_right ) . '</li></ul>' ; "<ul class="right"> <li>". implode ( '</ li> <Li>', $ cats_right). "</ li> </ ul> ';

Verwandte Post

Adobe AIR und das API Feedburner: Reloaded

Dienstag, 18. November, 2008

Ich Rush von hoher Tutorial Napolux, Flex 3, Adobe AIR und die Feedburner-API, die zeigt, wie man eine einfache Anwendung (oder widget) mit Adobe AIR Flex 3, um zu zeigen, wie Sie die exakt gleiche Sache mit Adobe Flash CS3. Wenn Sie möchten, auch, können Sie die Erweiterung für die Erstellung von Adobe AIR-Anwendungen. Es ist nicht notwendig für die Zwecke des Tutorials, die Anwendung als ausführbare AIR, können Sie den Code vorgeschlagen als eine einfache Flash-Film aus "angebracht", um Ihre Web-Seiten.

Flex vs Flash

Obwohl Adobe AIR schätzen, wie Technologie und wie sie umgesetzt wurde Plattformen in HTML (Dreamweaver), Flash und Flex, sind nicht "noch" recht gut gegenüber Flex! Ich bin nicht einen Vergleich mit Flash Flex, trotz vieler Gemeinsamkeiten aber auch viele Unterschiede. Aber ich habe nicht ganz schätzen die politische Adobe auf dieser Spin-Off manchmal unsinnig. Ich hätte es vorgezogen, stattdessen die Schaffung eines einzigartigen Umgebung (Flachs) Entwicklung und nicht dieses "nutzlos" Trennung. Außerdem ist, wie ein guter Programmierer, die auch "visuelle" Ich weiss nicht wie Flex, und es scheint, bestimmt zu werden gefährlich ähnlich wie Visual Basic, die unter anderem sehr gut und wissen, dass ich seit vielen Jahren. Kurz gesagt, Flex ich wirklich nicht verstehen, und ich habe nicht verstanden, was Adobe will mit dieser Branche. Wenn Flex wird als das ideale Umfeld zu schreiben RIA, was das Schicksal von Flash? Alle Funktionen von Flex, tatsächlich nicht verfügbar "direkt" in Flash, könnte - wenn Sie wollen - einbezogen werden, ohne den Kauf mehrerer Lizenzen zu entwickeln - am Ende - die exakt gleiche Sache.

Lesen Sie weiter ... "

Verwandte Post

Sehr kurze Trick: 3-Ausgabe-Funktion in PHP

Dienstag, 18. November, 2008

Innerhalb einer PHP-Funktion können Sie auf drei verschiedene Arten:

PHP:
  1. <? Php
  2. $valore = 'Ciao' ) { miaFunction Funktion ($ value = 'hallo') (
  3. >
  4. <ul>
  5. ; ?> --> <! - <li> <? Php echo $ value;?> ->
  6. <Li> <? = $ value> </ li>
  7. </ Ul>
  8. <? Php
  9. )
  10. >

Oder:

PHP:
  1. $valore = 'Ciao' ) { miaFunction Funktion ($ value = 'hallo') (
  2. . $valore . '</li></ul>' ; $ O = '<ul> <li> ". $ Value." </ Li> </ ul>';
  3. ; echo $ o;
  4. )

Oder:

PHP:
  1. $valore = 'Ciao' ) { miaFunction Funktion ($ value = 'hallo') (
  2. ; $ O = "<ul> <li> $ value </ li> </ ul>";
  3. ; echo $ o;
  4. )

Verwandte Post

SWFObject auf Google AJAX API-Bibliotheken

Freitag 14 November, 2008

swfobject Google AJAX API-Bibliotheken erweitert seine Flotte von Bibliotheken und Rahmen für die SWFObject, nützlich, um zu manipulieren und Flash-Filme auf unserer Web-Seiten. SWFObject ist auch als Plugin für Wordpress, wenn ich schreibe, jedoch wurde nicht Plugin noch aktualisiert, um den Code und die "Repository" Google. Eine kurze, dann stelle ich mir vor, wird eine neue Version des Plug-... es sei denn, Sie bearbeiten wollen selbst Zwischenzeit ...

Fügen Sie SWFObject Google AJAX API-Bibliotheken

Wie bei anderen Bibliotheken in Google AJAX API-Bibliotheken können die URL oder die absolute meotdo google.load()

HTML:
  1. <! - ABSOLUTE URL ->
  2. src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js" > </script> <script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"> </ script>
  3. > <script type = "text/javascript">
  4. swfobject.embedSWF ( "main.swf", "main", "231", "132", "8.0.0");
  5. </ Script>

HTML:
  1. <! - Google.load () ->
  2. > </script> <script src = "http://www.google.com/jsapi"> </ script>
  3. google.load ( "swfobject", "2.1");
  4. google.setOnLoadCallback (Funktion () (
  5. swfobject.embedSWF ( "main.swf", "main", "231", "132", "8.0.0");
  6. ));
  7. </ Script>

Verwandte Post