CSS

CSS: vertical-align – wie geht man damit um?

16. Juli 2009
von

Dieser Beitrag basiert zum Teil auf dem Beitrag “What is Vertical Align?” von Chris Coyier. Dieser Beitrag ist allerdings erweitert und wurde recherchiert. Die Genehmigung des Autors für die Verwendung von Bildern sowie Teil des Textes liegt vor (hinzugefügt um 14:20, 16. Juli 2009).

Die CSS-Eigenschaft vertical-align wird häufig als ein kryptisches, nicht gerade intuitives Attribut gesehen, mit dem man nur selten etwas anfangen kann. Sie wird gerne in eine Ecke zusammen mit CSS Spezifizität, CSS Floats, z-index und weiteren anspruchsvollen CSS-Konzepten gestellt – dabei hat sie doch dort nichts zu suchen. Und als ob es nicht schon genug wäre: oft hält man vertical-align für ein längst überholtes (“deprecated”) Attribut aus den Zeiten der tabellen-basierten Layouts (erinnert sich noch jemand an das legendäre <td valign=”top”>?), das somit der Vergangenheit angehört und in modernen CSS-basierten Layouts nichts zu suchen hat.

Gute Nachrichten: vertical-align ist nicht überholt und kann – wenn richtig eingesetzt – manch einem Designer Nerven, Arbeit und Workarounds ersparen. Doch alles der Reihe nach. Zunächst einmal: worum handelt es sich überhaupt?

Was ist vertical-align?

vertical-align ist eine CSS-Eigenschaft, mit der man die vertikale Ausrichtung von Inline-Elementen innerhalb einer Textzeile oder die vertikale Ausrichtung von Inhalten einer Zelle (table cell) innerhalb einer Zeile (table row) in der Tabelle festlegen kann. Mit anderen Worten bedeutet es, dass man mit vertical-align nur die Platzierung eines Elements innerhalb eines Blocks, der eine einzige (Text- oder Tabellen-)Zeile umfasst, ausrichten kann. So lassen sich etwa nebeneinander stehende Elemente mit unterschiedlicher Höhe, zum Beispiel Textpassagen mit unterschiedlicher Schriftgröße innerhalb einer Zeile im Verhältnis zueinander ausrichten.

Es liegt nahe, vertical-align auf Bilder in einem Beitrag anzuwenden, da img ein Inline-Element ist. Dies kann nützlich sein wenn man beispielsweise ein Icon neben einem Wort perfekt platzieren will, ohne auf die background-image und background-position-Eigenschaften in CSS zu zugreifen. Dies wird im Folgenden als Standardbeispiel benutzt.

Welche Werte kann vertical-align annehmen?

Insgesamt kann vertical-align 10 verschiedene Werte annehmen: baseline, text-bottom, text-top, bottom, top, middle, sub, super, length und %-Angaben.

Baseline (img { vertical-align: baseline; })
Standardmäßig (by default, ohne explizite Angaben) hat die Eigenschaft den Wert “baseline”. Dabei werden Bilder im Textfluss genauso platziert wie der davor- oder auch darauffolgende Text. Jede Zeile Text hat eine Art Grundlinie, auf der sie “sitzt”. Wenn vom Designer nicht anders gewünscht, wird das Bild also ebenfalls auf dieser Grundlinie sitzen (siehe Beispiel unten).

Screenshot
Standardmäßig ist der Wert der Eigenschaft “vertical-align” bei einem Bild “baseline” – das Bild sitzt genauso wie Text auf der Grundlinie.

Text-Bottom (img { vertical-align: text-bottom; })
Dieser Wert sorgt dafür, dass das Bild-Element am unteren Schriftrand ausgerichtet wird, also etwa genau dort wo die Unterlängen der Buchstaben “g” oder “p” enden.

Screenshot
Man kann das Inline-Element (hier Bild) auch am unteren Schriftrand ausrichten.

Text-Top
Was für den unteren Schriftrand gilt, kann auch für den oberen Schriftrand gelten. Im Beispiel unten ist der oberste Punkt nicht zu sehen, anscheinend gibt es bei Georgia einen Buchstaben, der eine höhere Oberlänge hat.

Screenshot
Man kann das Inline-Element (hier Bild) auch am oberen Schriftrand ausrichten.

Bottom und Top
Im Wesentlichen bewirken diese beiden Werte das gleiche wie Text-Bottom und Text-Top, allerdings beziehen sie sich nicht nur auf Text, sondern auch auf alle andere Elemente, die in der Zeile vorkommen können (etwa auf ein anderes Bild auf der selben Zeile). Sind etwa zwei Icons auf der selben Zeile, die unterschiedliche Höhe haben und beide höher als die Schrifthöhe auf dieser Zeile sind, so würden ihre Oberpunkte (oder Unterpunkte) perfekt zueinander passend ausgerichtet, unbeachtet des sie begleitenden Textes.

Middle
Dieser Wert wird wohl am häufigsten eingesetzt, um etwa Icons, die neben einem Wort auftreten, vertikal zu zentrieren. “Middle” richtet das Inline-Element mittig aus; der vertikale Mittelpunkt hat den Abstand gerade die Hälfte der x-Höhe von oben und von unten (x-Höhe = Mittellänge, Höhe eines Kleinbuchstabens ohne Ober- und Unterlänge). Das heißt der vertikale Mittelpunkt, entlang dem das Bild ausgerichtet wird, liegt äquidistant in der Mitte des Textes im Bezug auf die Mittellänge. Unklar? Siehe Beispiel unten.

Screenshot
“Middle” richtet das Inline-Element mittig aus

Beachten Sie: wenn ein Bild höher ist als die aktuelle Schriftgröße, so wird es die darauffolgenden Textzeilen nach unten schieben und somit das Textbild verzerren:

Screenshot
Wenn ein Bild höher ist als die aktuelle Schriftgröße, so wird es die darauffolgenden Textzeilen nach unten schieben und somit das Textbild verzerren

Sub und Super
Sub stellt das Inline-Element tiefer und Super stellt das Inline-Element hoch, beide ohne die Schriftgröße zu reduzieren.

Screenshot

Length
Gibt man bei der Eigenschaft einen positiven Wert an (etwa 3px), so wird die Inline-Box um diesen Wert vertikal nach oben (mit dem Ausgangspunkt Grundlinie) verschoben (also um 3px nach oben). Ist der Wert negativ, so wird die Box nach unten verschoben.

%-Angaben
Ähnlich wie beim vorigen Fall, kann man mit %-Angaben die Inline-Box nach oben oder nach unten (mit dem Ausgangspunkt Grundlinie) verschieben. Der Prozent-Wert bezieht sich dabei auf die Zeilenhöhe (line-height).

Bei Tabellen haben Inhalte innerhalb einer Zelle standardmäßig den Wert “middle” (also nicht “baseline” wie das bei Textzeilen der Fall ist); sie werden also mittig ausgerichtet. Falls man die Ausrichtung ändern will, lässt sich dies zum Beispiel mit den Angaben td { vertical-align: bottom; } oder td { vertical-align: top; } anpassen.

Screenshot

Der simple Grund, weshalb vertical-align häufig missverstanden wird, liegt daran, dass die Eigenschaft immer wieder im falschen Kontext benutzt wird und demzufolge auch so gut wie nie zur Lösung eines Problems beiträgt. Ein fast schon klassisches Beispiel ist etwa der Versuch, einen kleineren Div-Block innerhalb eines größeren Div-Blocks vertikal zu zentieren – natürlich mithilfe der vertical-align-Eigenschaft in CSS. Das funktioniert nicht, weil vertical-align laut Spezifikation nur auf Inline-Elemente angewendet werden darf, also nicht auf Block-Level-Elemente.

Man kann natürlich jedes Block-Level-Element explizit in den “Inline-Mode” mittels display:inline schalten, doch meistens hillft dies nicht, da der Div-Block etwa nicht unbedingt auf eine Textzeile passt (Frank Mey, danke für den Hinweis!). Wer dennoch wissen möchte wie das oben beschriebene Problem gelöst werden kann, findet ein paar interessante Techniken im Douglas Heriots Beitrag Vertical Centering with CSS (engl.)

Screenshot
Die meisten modernen Browser können mit der Eigenschaft vertical-align umgehen. Allerdings ist die Darstellung in verschiedenen Browsern teilweise unterschiedlich.

Wie es zu erwarten ist, verstehen sich nicht alle Browser auf die vertical-align-Eigenschaft. Verschiedene Browser interpretieren die Angaben unterschiedlich, auch wenn moderne Browser damit mehr oder weniger gut klarkommen. In Internet Explorer bis Version 7 (Win) werden “bottom” und “text-bottom” sowie “top” und “text-top” identisch interpretiert. Zudem beziehen sich “length”-Angaben, %-Werte, sub, super, text-bottom und text-top in diesem Browser bei Tabellenzellen nicht auf die Grundlinie. In Firefox und Internet Explorer für Windows wird “vertical-align” – wenn angewandt auf eine Tabellenzeile – “vererbt” und automatisch auf alle Zellen dieser Zeile angewandt, was jedoch nicht der Spezifikation entspricht.

Beachten sollte man, dass “valign” im (X)HTML-Markup für die vertikale Ausrichtung von Tabellenzellen (etwa <td valign=”top”>) als  überholte Praktik gilt und wenn möglich vermieden werden sollte. Schließlich gibt es eine elegante alternative Lösung, die leicht mit “reinem” CSS realisiert werden kann. (sl)

Weitere Informationen zum Thema:

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.

49 Kommentare zu „CSS: vertical-align – wie geht man damit um?
  1. Frank Mey am 16. Juli 2009 um 08:47

    Man kann übrigens jedes Element per CSS explizit in den “Inline-Mode” mittels display:inline schalten, sollte aber als DIV-”Ersatz” das SPAN-Element im HTML-Code einsetzen, das lt. Spezifikation per Default inline ist.

    In Zukunft hoffe ich mal, daß mit der Einführung von CSS 3 Features in moderne Browser float-Layouts nicht mehr dazu missbraucht werden müssen, um Column-Layouts zu realisieren…

    PS: IETester ist gut, die IE6/7-Engine stellt die Webseiten aber nicht(!) 100% nativ dar, ich würde den Browser-Preview von XENOCODE (http://www.xenocode.com/Browsers/) empfehlen…

  2. Peter Majmesku am 16. Juli 2009 um 09:09

    Hi,

    gutes Tutorial. Seht her: Dr. Web kann es doch. ;-)

    >> Der Prozent-Wert bezieht sich dabei auf die Zeilenhöhe (line-length).

    Bezweifle jedoch, dass man mit »line-lenght« die Höhe definieren kann. Eher mit »line-height«.

    Viele Grüße,
    Peter

  3. Manuel am 16. Juli 2009 um 09:13

    Danke, sehr schön.
    Beschäftige mich seit Jahren beruflich mit Stylesheets und habe dementsprechend auch häufigen Kontakt mit vertical-align gehabt. Aber wie sich was effektiv auswirkt und genutzt wird, hab ich in der Hinsicht meist doch eher ausgetüftelt bzw wie angeschrieben mit Workarounds umgangen.
    Herzlichen Dank für diese kleine Lehrstunde.

  4. Vitaly Friedman am 16. Juli 2009 um 09:22

    @Peter Majmesku (#2): danke für den Hinweis, war ein Tippfehler! Ist jetzt korrigiert!

  5. Peter Majmesku am 16. Juli 2009 um 09:25

    @ Frank Mey:

    >> http://www.xenocode.com/Browsers/

    Da gibts nur irreführende Links zum IE8, die fälschlich als IE6- oder IE7-Links gepriesen werden. .oO

  6. Mariusz am 16. Juli 2009 um 09:26

    @Frank Mey: Column Layouts werden noch eine Weile bleiben. Begegne immer wieder Leuten, die die Tabellenlayouts verwenden. Grund ist: a) Lehrer/Professor hat’s gesagt b) “bei http://www.xyz .com steht geschrieben, dass …” c) Layout und Daten sind in einer Datei (also keine Spaltung wie bei CSS). Denn nicht jeder hat Informatik studiert/verstanden ;)

    @Vitaly Friedman: Danke fuer den Artikel. Auch ich hatte bis dato nicht zwischen TEXT-TOP und TOP unterschieden. Dieses Wissen wird mir nun Einiges an Workarounds ersparen.

  7. Vitaly Friedman am 16. Juli 2009 um 09:30

    @Mariusz (#5): gerne, gerne. Ich hoffe, dass der Beitrag für einige Entwickler hilfreich sein wird.

  8. Frank Mey am 16. Juli 2009 um 09:33

    @Mariusz: Sehe ich auch so, aber wir können u.a. hier zeigen, wie mans anders angehen kann ;). HTML 5 z.b. hat eine “Einführungsphase” bis 2022, d.h. ich kann meinen Enkelkindern dann von der Erstveröffentlichung erzählen – die Hoffnung stirbt zuletzt :rolleyes:

  9. Vitaly Friedman am 16. Juli 2009 um 09:59

    @Frank Mey (#8): HTML 5 wird zwar vermutlich in der Tat erst 2022 offiziell veröffentlicht (HTML 5 Roadmap), aber das heißt nicht, dass die Markup-Sprache nicht schon in 5 Jahren von modernen Browsern unterstützt wird. Da muss man sich imho nicht unbedingt auf 2022 einstellen.

  10. Manuel2 am 16. Juli 2009 um 10:00

    Also erst einmal Danke für den Artikel.
    Habe das ganze sonst immer sehr Stiefmütterlich behandelt oder habs umgangen. Jetzt ist es schön übersichtlich dargestellt und verständlich.

    Jetzt zu ein, zwei Anmerkungen:
    1. Bildunterschrift bei “Text-Bottom” sollte wohl “auch am _oberen_ Schriftrand ausrichten.” heißen
    2. Natürlich haben Fonts (auf Georgia) eine Zeichen mit einer anderen Oberlänge, wie z.B. große Umlaute

    3. @Frank Mey und @Mariusz
    Wir können nur hoffen, dass CSS3 bald flächendeckender implementiert wird, so dass wir designs mit {display: table;} und {display: table-cell;} anständige, saubere und unverwüstliche Layouts erstellen können.

  11. Frank Mey am 16. Juli 2009 um 10:31

    @Vitaly: War auch als zugespitzte Antwort auf Mariuz gedacht – du hast natürlich recht :)

    @Peter : Bei Xenocode installierst du dir ein Sandbox-Plugin und gehst danach wieder auf die Seite, dann hast du nach Klick auf das grüne Run-Symbol eine “echte” IE 6/7/8 etc. – Instanz in eben dieser Sandbox auf deinem PC laufen – und der Output ist 100% nativ. Ich nutze mittlerweile ausschließlich dieses System, um die Crossbrowser-Fähigkeit meiner Sites zu testen…

    Mit IE 8 werden ja nun display:table/table-cell – Konstrukte von allen großen Browsern unterstützt. Allerdings hapert es wie immer an der Installationsbasis des IE 8 , da werden wohl noch 2-3 Jahre ins Land gehen…

  12. Dirk am 16. Juli 2009 um 10:55

    schon am 20.04. auf css-tricks veröffentlicht ;)
    http://css-tricks.com/what-is-vertical-align/

  13. Peter Majmesku am 16. Juli 2009 um 11:07

    @Frank: Xenocode läuft nicht hier unter Linux und ist auch irgendwie witzlos, wenn man die Browser doch unter Windows installieren kann – wenn man schon Windows braucht. Ist ja fast wie eine VM.

    Zu den anderen Angeboten von Xenocode: Warum soll ich Winamp (= oO) im Browser laufen lassen, wenn die installierte Fassung deutlich bequemer zu bedienen ist?

    Besser ist da schon die Browser-Simulierung von Adobe: http://browserlab.adobe.com. Läuft komplett im Browser ab, man muss nichts installieren, sofern Flash vorhanden ist.

  14. Vitaly Friedman am 16. Juli 2009 um 11:27

    @Manuel2 (#10): Du hast natürlich Recht. Danke! Den Beitrag habe ich korrigiert.

  15. Frank Mey am 16. Juli 2009 um 12:01

    @Peter: Ist halt eine Sandbox, damit man die Browser eben nicht alle lokal installieren muß (außerdem: Versuch mal, ohne Tricks mehr als eine IE-Version unter Windows zu installieren ;)…). Ich hab’ also z.b. meinen Laptop auf Reisen dabei, geh auf die XenoCode – Website und hab meine Browser-Testumgebung… es gibt natürlich noch einige andere Browsertest-Anbieter, bei Xenocode weiß ich, daß der Browser 100% nativ läuft, was ich in Flash nicht sagen kann…

    Sry für soviel OT, weiter im (Fach)text bitte :)

  16. Peter Majmesku am 16. Juli 2009 um 12:19

    @ Vitaly: Du hast einfach nur den Text von Chris Coyier übersetzt. http://is.gd/1AQCq.

    Darf man das so machen? Steht ja dort nirgens, dass der Artikel etwa unter einer Creativ-Commons Lizenz veröffentlicht wurde. Oder täusche ich mich da?

    (Vitaly Friedman) Bitte beachte die ersten paar Sätze in diesem Beitrag.

  17. Andreas am 16. Juli 2009 um 13:11

    Dachte bisher immer, dass es Vitaly Friedman drauf hat. Aber da ist mir der gestrige Text ja sogar noch lieber: http://css-tricks.com/what-is-vertical-align/. Denn das ist gestohlener Content!

    (Vitaly Friedman) Bitte beachte die ersten paar Sätze in diesem Beitrag.

  18. Thorsten am 16. Juli 2009 um 13:23

    Heftig! Was ist hier denn los??

    (Vitaly Friedman) Bitte beachte die ersten paar Sätze in diesem Beitrag.

  19. Frank am 16. Juli 2009 um 13:55

    Dr. Web geht den Bach runter.

    @ Andreas:
    Schließe mir dir an. Lieber was aus dem eigenen Hirn drücken, als was abkupfern. Von Vitaly kaufe ich kein Buch mehr.

    (Vitaly Friedman) Bitte beachte die ersten paar Sätze in diesem Beitrag.

  20. Vitaly Friedman am 16. Juli 2009 um 14:09

    Danke für die Kommentare. Zunächst einmal bitte beide Beiträge genauer vergleichen bevor auf den “gestohlenen” Content hingewiesen wird. Der Beitrag ist nicht 1:1 übersetzt. Wer sich die Mühe gegeben hätte, beide Beiträge zu vergleichen und genau zu lesen, würde schnell feststellen, dass dieser Beitrag im Dr. Web Magazin über den Beitrag von Chris Coyier hinaus geht und eben keine Übersetzung ist. Die Bilder stammen von Chris, auch dafür liegt seine Genehmigung vor. Auch das ist im Beitrag erwähnt.

    Ich entschuldige mich öffentlich dafür, dass die Anmerkung über den Beitrag von Chris Coyier wohl für viele Leser zu weit unten war – nächstes Mal wird sie prominenter platziert – imho würde das vielen Missverständnissen hier in Kommentaren vorbeugen.

    Ich finde es total schade, dass das Publikum hier dermaßen heftig auf alles reagiert und kein Respekt für die Mühe der Autoren hat. Konstruktive Kritik wird immer gerne entgegengenommen, aber ein Flame ist unzulässig. Was ist denn mit dem Publikum von Dr. Web los?

    Wenn Ihr wollt, dass kein Autor mehr hier im Magazin schreibt, dann seid Ihr auf dem richtigen Weg.

  21. Christian am 16. Juli 2009 um 15:21

    Danke Sven! Das war glaube ich der Artikel den ich mir deutsch gewünscht hatte, oder?

    Was juckt es eine deutsche Eiche, wenn sich eine Sau an ihr kratzt!

  22. Peter Majmesku am 16. Juli 2009 um 16:21

    >> Ich finde es total schade, dass das Publikum hier dermaßen heftig auf alles reagiert und kein Respekt für die Mühe der Autoren hat. Konstruktive Kritik wird immer gerne entgegengenommen, aber ein Flame ist unzulässig. Was ist denn mit dem Publikum von Dr. Web los?

    Stelle mir ebenso die Frage. Die Kritiken (bei meinen Artikeln) zuletzt, haben mich stark getroffen. Ich habe mich ernsthaft bemüht und hatte mit den Rückmeldungen nicht gerechnet.

    Beim PHP-Artikel gab es nun auch Kommentare von Leuten, die das Tutorial anwenden konnten. Es kommt eben ganz darauf an, welchen Bedarf man hat. Da muss man nicht direkt andere niedermachen und in die Hände spucken, die einen seit langer Zeit füttern. Welche Website besteht denn sonst schon so lange wie Dr. Web? Mit den wenigen konstruktiven Kommentaren habe ich ja Änderungen am Artikel durchgeführt.

    Photoshop ist ein ganz anderes Programm als GIMP und mit diesem haben die Leute das Programm in meinem Artikel verglichen. GIMP wird eben auch wegen der Lizenz benutzt, die mehr als nur kostenlose Anwendung ermöglicht. Doch kennen eben viele Leser FOSS nicht. Daher auch die Resignationen von OpenSource Entwicklern, wie dem des FF-Addons Sage-Too: http://is.gd/1B354. Wären beide Bilder von einer wunderschönen Frau gewesen, so wäre es niemals soweit gekommen – da bin ich mir sicher. Das ist jener Oberflächlichkeit abzusehen. Und auch wenn der Kopierschutz von Photoshop nicht zu knacken wäre, hätte man sich meinen Artikel mehr zu Herzen genommen.

    Derzeit gehe ich davon aus, dass viele Leser hier weniger dem Jäger- als dem Sammlercharakter anhaften und nur mal schnell etwas Fertiges haben wollen, was sie möglichst kurzfristig gewinnbringend einsetzen können. Somit kommen die Artikel mit den freien Buttons und Icons oder AJAX-Frameworks mit am besten an.

    Letztendlich hoffe ich noch, dass ich mich irgendwann mit Dr. Web und seinen Lesern versöhnen kann. Denn ich möchte die mir hier gebotenen Erfahrungen zusammen mit den Lesern teilen und hoffe, dass man mir irgendwann wieder eine Chance gibt.

    In diesem Sinne,
    Peter

  23. Thorsten am 16. Juli 2009 um 16:37

    Sorry, da war ich vorschnell!
    Habe die Anmerkung übersehen.

    Kann ja auch nicht geklaut sein, der Artikel “Alles nur geklaut. Wie findet man Plagiate im Netz?” ist ja von dir.

    http://www.drweb.de/magazin/geistiges-eigentum-beschutzen-wie-findet-man-plagiate-im-netz/

  24. Turicon am 16. Juli 2009 um 18:25

    Feiner Artikel! Vielen Dank dafür.

    @Vitaly: Schau in die Zugriffszahlen. Ich denke, es gibt noch jede Menge treue und dankbare Leser hier, die auch ohne eigenen Kommentar auskommen.

    Das ist halt das Schicksal der Fleißigen und Berühmten im Internet, dass man von Neidern und Bettnässern angemacht wird. :-D

  25. Jupp am 16. Juli 2009 um 19:59

    Auch von mir
    Feiner Artikel Vielen Dank!!
    Konnte ich gerade gut gebrauchen

  26. Matthias am 16. Juli 2009 um 20:00

    Vielen Dank für die ausführliche Betrachtung von vertical-align… hatte da schon hier und da Problemchen mit. :)

  27. Sylvia am 16. Juli 2009 um 21:13

    ich denke #24 hat recht – auch ich lese hier regelmässig, ohne ein Kommentar zu hinterlassen. Auch wenn ich von vielen Artikeln viel gelernt habe. So auch von diesem Artikel – obwohl mir der Sinn und Unsinn von vertical-align schon länger klar war, ist so eine genaue beschreibung mit beispielen doch durchaus hilfreich. Danke hierfür!

    @Peter (#22) – ich vermute die negativen Kommentare haben weniger mit GIMP vs. Photoshop zu tun als damit, dass das Ergebnis leider sehr unschön ist. Habe gestern extra keinen Kommentar hinterlassen da eh schon vieles gesagt wurde, aber ich frage mich ernsthaft : bist du zufrieden mit dem Endergebnis? Mal abgesehen davon ob die Frau nun toll aussieht oder nicht – wenn du dir das Nachher-Foto anschaust – das sieht in meinen Augen noch unvorteilhafter aus als das Vorherfoto. Darum ging es in vielen Kommentaren.

    Trotzdem werden denke ich die Mühen der Autoren hier oft unterschätzt – und Ausrutscher passieren nunmal. Also trotzdem ein dickes Danke an Dr. Web!

  28. Helen am 16. Juli 2009 um 21:47

    Vitaly, hast Du probiert, ob man Inline-Icons durch Padding einer span class pixelgenau in der Zeile nach oben und unten verschieben kann? Das dürfte die Zeilenhöhe selbst eigentlich nicht verschieben.

  29. Harry Schmieder am 16. Juli 2009 um 22:38

    Es gibt viel zu wenig gute deutschsprachige Artikel, nicht nur über dieses Thema.

    Wenn sich dann jemand die Mühe macht, einen guten englischen Artikel mehr oder weniger mit seinen eigenen Worten in´s Deutsche zu übersetzen und noch dazu auf die englische Quelle verweist, dann finde ich das gut und lobenswert.

    Von einer 1:1 Kopie kann ich hier nichts feststellen.

    Ich kann auch englisch. Aber wenn ich etwas anderes unbedingt lernen und vor allem auch richtig verstehen will, dann habe ich das lieber in deutsch vorliegen.

    Von daher kann ich es nicht verstehen, wieso andere User sich so “wild” auf Vitaly stürzen.
    Wir sollten ihm dankbar sein.

    Und ich sehe es so: Selbst in einem 1:1 Plagiat steckt irgendwo ein gewisser Respekt für den Urheber. Sonst würde man sich die Mühe ja nicht machen.

    In diesem Beispiel wäre mir also auch ein 1:1 Plagiat wurscht. Wem ist damit wirklich geschadet?!?! Die Amis und Briten lesen eh nur den englischen Beitrag. Und die deutschsprachigen freuen sich über einen tollen Artikel in ihrer Sprache.

    Denkt mal drüber nach und lasst bitte die Kirche im Dorf. Im Internet gibt es sicher wesentlich schlimmere Dinge, über die es sich lohnt, sich darüber aufzuregen.

    Wenn ein englischsprachiger Autor Sequenzen meiner Website in´s Englische übersetzen würde, dann wäre ich auch ein wenig stolz (und hätte mir Arbeit gespart ;-) ).

    Ich sage einfach: Danke Vitaly.

  30. Sven am 17. Juli 2009 um 00:09

    Ich sag auch mal Danke für die ganzen Artikel hier! Dr.Web rulez!

    Nur das Abo ist zu teuer, habt ihr euch schonmal überlegt ne monatliche Zahlungsmöglichkeit anzubieten? :)

  31. Christian am 17. Juli 2009 um 08:21

    @Peter Majmesku – Kommentar 16 war, gerade vor dem Hintergrund deiner persönlichen Erfahrung, die du hier vor kurzem gemacht hast, reichlich unüberlegt und zeugt letzten Endes nur davon, dass du genau so oberflächlich liest wie die, denen du eben dies vorwirfst.

    Dein Artikel zum retouchieren mit dem GIMP war einfach sehr schlecht und die Aufkündigung der Kooperation durch Dr. Web dadurch nur folgerichtig (auch wenn der Stil m.E. mies war). Ich denke ehrlich gesagt, dass es offensichtlich ist, dass du erstmal einiges mehr an Erfahrung sammeln solltest, bevor du sie mit anderen teilst. Mag sein, dass derartige Artikel für andere Webseiten ausreichend sind, hier wird eine andere Klientel bedient.

  32. pe am 17. Juli 2009 um 11:16

    Hi,

    @Christian:
    Der GIMP-Artikel erschien ja schon am nächsten Tag. Ich war neu hier und dachte das der Artikel von der Qualität her Ok ist, da ja mein erster GIMP Artikel hier gut war. Auf Dr. Web gibt es wenige Artikel über GIMP. Da gab es auch wenig Vergleichsmaterial. Auch fühle ich mich da vom Dr. Web-Team im Stich gelassen. Aber Ok. In Zukunft befrage ich Freunde und Bekannte nach Ihrem Artikel-Feedback, bevor ich veröffentliche.

    @Sylvia: Zum Thema Gesichts-Retusche mit GIMP wirst du im Web kaum etwas finden. Hast du schonmal ein Bild mit solcherlei Ausgangsmaterial mit GIMP retuschiert? Im Buch von Jürgen Wolf (Titel: GIMP 2.6 – im Galileo Verlag erschienen) wird auf ähnliche Art und Weise retuschiert. Nur eben mit anderem Ausgangsmaterial. Und jenes Buch wurde von GIMP-Fachleuten lektoriert.

    Das sollen nun keine Ausreden sein. In Zukunft werde ich eben über Themen schreiben, bei denen ich nicht selbst hinzulernen will, sondern wo ich aufkläre. Dann gibt es auch weniger feindselige Kommentare.

    Viele Grüße,
    Peter

  33. Tobi am 17. Juli 2009 um 11:50

    @ Peter: Ich arbeite schon seit längerer Zeit mit GIMP und finde auch, dass gerade bei einer Gesichtsretusche die Möglichkeiten begrenzt sind. Deshalb findet man auch wenige Tuts. In Zukunft bei der Themenauswahl ein weniger spezielles aussuchen. Dann gibt es auch kein Fiasko.

  34. Christian am 17. Juli 2009 um 12:31

    @pe (#32) – Natürlich hätte man hier auf ein besseres Lektorat hoffen können, aber das entschuldigt doch nicht das Resultat, dass dir ja im Vorfeld bekannt war und das unmöglich den eigenen Ansprüchen genügen kann.

    “In Zukunft werde ich eben über Themen schreiben, bei denen ich nicht selbst hinzulernen will, sondern wo ich aufkläre.”

    Eben, über Dinge, die man selbst noch lernen muss, schreibt man am besten in einem privaten Blog. Wie schon gesagt ist die Klientel hier einfach eine andere.

  35. Michael am 18. Juli 2009 um 08:42

    @ Peter Majmesku:

    Ich verstehe nicht weshalb sie hier anprangern.
    Wo Sie sich doch selbst mit dem Klau von Scripten auskennen – Nun gut es ist nun mal passiert. ( U.a.: Wie auch Ihr Webseiten-Design, welches sie vorerst als eigene Gestaltung ausgegeben haben – Gut der “Künstler” hat Ihnen das Einverständnis gegeben, wie Sie meinten “Ihr guter Bekannter”.

    Ich weiß auch nicht weshalb man die Verantwortung ständig auf andere abwälzt. Schließlich ist jeder für seine Taten selbst verantwortlich. Wenn Sie bereits erfolgreich eigene Artikel schreiben dann sollte Ihnen “eigentlich” auch klar sein worauf es bei solchen ankommt.

  36. Tom am 18. Juli 2009 um 11:25

    Ist man denn hier schon zu träge um Kommentare zu prüfen? So ein Kommentar wie der letzte gehören gelöscht.

    Man kommt hier hin, wird kostenlos mit Informationen bedient und dann unterstellt man anderen Diebstahl. Wobei man es sich gemütlich macht und sich anonym gibt.

  37. Martin am 18. Juli 2009 um 16:06

    Die meisten die sich hier über geklauten Content aufregen sind ja in Wirklichkeit eh froh dass der Text ins Deutsche übersetzt wurde – weil sie der englischen Sprache wahrscheinlich nicht mächtig sind? Wieso man das überhaupt erwähnen muss, wenn im Artikel doch extra der Verweis auf den englischen Artikel steht, versteh ich auch absolut nicht und ist meiner Meinung nach vollkommen ok und ausreichend.

    Ich verfolg den Blog schon länger und er gefällt mir bis auf ein paar Ausnahmen (die sich in letzter Zeit häufen) ganz gut. Hatte heute erst wieder mit vertical-align zu tun und dann seh ich auf einmal den Artikel da, einfach Wahnsinn^^, ist echt gut und ausführlich beschrieben worden. Danke hierfür.

    Was Peter Majmesku angeht. Ich weiss ja nicht was du mit deinen Kommentaren erreichen oder bezwecken willst, aber begreifst du es denn nicht, dass Dr. Web N i c h t an deinen misslungenen Artikeln Schuld ist, sondern ganz du selbst? Ich glaub solche hinterlistigen Kommentare wie “ist das kopiert und das” blah blah kannst du dir in Zukunft sparen. Zurecht “haben dich die Kritiken zu deinen Artikeln getroffen”. Meiner Meinung nach sollte man als Autor in der Lage sein, seine eigenen Werke einzuschätzen.

    Nungut das wars.

  38. Michael am 18. Juli 2009 um 16:28

    Man könnte meinen Sie kennen sich gut.
    Ein Schelm wer böses denkt.

    “Klauen” war wohl etwas misslungen formuliert,
    da haben Sie wohl recht.

    Ich finde es denn noch sehr seltsam
    wenn jemand ein fremdes Onlineshop-Script (Dieses noch in einem Forum zur Bewertung an zu bieten) sein Eigen nennt einen auf das Copyright anzusprechen.

    ps.:Anonym?! Nun ist aber gut.
    Sind Sie denn nicht anonym unterwegs?

  39. Michael am 19. Juli 2009 um 14:11

    Entschuldigung,
    hatte da noch einen Link vergessen – Welcher den obigen Artikel ergänzen sollte.

    Siehe:
    http://www.ecombase.de/forum/NETzorde-Shop-Schneller-uebersichtlicher-und-mehr-wirklich-nuetzliche-Funktionen-als-Gambio-GX-t42813.html
    (Hr. Peter Majmesku, alias Netzor, alias Pee, alias elegantdesign, alias …)

  40. Torsten am 19. Juli 2009 um 18:17

    Sehr guter und informativer Beitrag. Für Leute wie mich die Englisch nicht soooo gut können sehr hilfreich, damit man auch den Sinn versteht.
    Danke

  41. Reguel Wermelinger am 20. Juli 2009 um 09:28

    Super Artikel. Und wiedermal etwas gelernt.

    @Vitaly & andere Artikel ersteller: lasst euch doch von den Kommentaren hier nicht zu sehr beindrucken. Ich für meinen Teil schreibe so gut wie nie einen Kommentar, lese aber die Artikel immer wieder gerne. Von daher würde ich mich eher an den Klick-Zahlen orientieren als an den teilweise sehr unhöflichen Kommentaren…

  42. Christian am 20. Juli 2009 um 13:50

    Ich denke, dass es auch langsam reicht und das die gezielte Demontage einzelner hier von der Redaktion unterbunden werden sollte – derartige Dinge kann man, wenn es einem denn wirklich ums Prinzip geht, auch gern per Email an die entsprechende Person schicken, und nicht vor allen Leuten breit treten. In diesem Fall beziehe ich mich auf die Kommentare #35, 38 und 39, die an vorliegenden Werken vorbei auf weitere Arbeiten des ex-Autoren eingehen und hier nichts verloren haben. Ich bitte hier um Zensur.

  43. Felix am 24. Juli 2009 um 19:25

    browserlab.adobe.com will Shockwave Version 10 installieren, ich hatte bereits Version 11 installiert. Nachdem das vorgenommen wurde hatte Shockwave überhaupt nicht mehr funktioniert.

    Vielleicht habe ich etwas falsch gemacht – ich wüsste zwar nicht was -, aber jedenfalls werde ich das lieber so wie bisher machen, nämlich mit installierten Browsern testen.

    Jedenfalls ist browserlab mit Vorsicht zu genießen.

  44. Marety am 26. Juli 2009 um 18:47

    Zum Thema Kritik an Dr.Web: Ich habe in einem anderen Blog gelesen, dass zehn zustimmend nickende Köpfe leiser sind, als ein kreischender… Kommentare sind also ganz allgemein mit Vorsicht zu geniessen und geben nicht die Meinung aller Dr.Web-Fans wieder.

  45. EloKoN am 26. August 2009 um 17:26

    Ich habe mir PHP, HTML, CSS, JavaScript und Ajax selbst angelernt. Und diese Eigenschaft brachte mir immer Kopfzerbrechen.

    Danke. Jetzt hab ichs endlich verstanden ;-)

  46. Benjamin am 2. Februar 2010 um 01:04

    Es ist wirklich sehr schade dass es immer wieder Leute gibt die selbst nur Kritik unter der Gürtellinie verteilen, aber selbst nichts konstruktives zustande bringen können. Ein Hoch auf die selbsternannten Internetpolizisten.

    P.S.: Vielen Dank für den Beitrag, ich finde den gut…

  47. Peter am 28. Mai 2010 um 17:02

    css stinkt!!!!! css3 stinkt noch mehr.
    da gibs neue eigenschaften und die sehen so aus:
    arsch-grütze-top-left-offset-height

    vertical algin mit divs geht leider immernoch nicht….schade.

  48. Marie am 17. August 2010 um 19:25

    Ich schließe mich EloKoN an. Auch ich bin Autodidakt und konnte damit nie viel anfangen. Nach Lektüre dieser Seite hab’ ichs direkt mal eingesetzt und das werde ich jetzt wohl öfters tun. Gut, dass es so gute und verständliche Erklärungen im Netz noch gibt.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!