Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>HTML/CSS: Bild vertikal zentrieren

HTML/CSS: Bild vertikal zentrieren

dom_beta09.07.1401:08
Hallo!

Irgendwie komme ich da nicht drauf. Wie kann ich mithilfe von HTML/CSS ein Bild vertikal zentrieren?

Hier mein Code:
<div style="width:500px; height:500px; float:right; ">

<img src="Bild.jpg" width="450" height="313" alt="Beschreibung">
</div>

Wahrscheinlich ist das ganz einfach, nur irgendwie komme ich da nicht drauf.

Danke im Voraus!
„...“
0

Kommentare

sierkb09.07.1403:16
Gib dem umgebenden <div> entweder nach innen hinein entweder ein passendes, jeweils identisches padding-top und padding-bottom oder stelle es beides jeweils auf den Wert: auto.
Oder, alternativ, dem <img> nach außen wirkend einen entsprechend passenden margin-top und margin-bottom bzw. jeweils den Wert: auto.

Zudem sei die Frage erlaubt, ob Du das Bild überhaupt in ein <div> kapseln musst oder ob das <div> nicht evtl. obsolet ist, weil man das <img> auch direkt floaten bzw. ihm Abstände mitgeben kann, dazu braucht man nicht unbedingt ein umhüllendes <div>. Wenn nix weiter drin ist innerhalb dieses <divs> außer diesem Bild, dann kann man dieses <div> sicher auch weglassen und das Floating und die Abstände alle dem Eigentlichen, dem Bild selber, zuweisen.
Und auch, wenn mit <p>-Elementen ausgezeichneter Text danebenstehen soll, wäre das zu überlegen, ob's das genannte umhüllende <div> wirklich braucht oder ob's nicht verzichtbar sein könnte da möglicherweise im Grunde überflüssig. Wenn es hingegen unverzichtbar sein sollte, weil in ihm noch viele andere Elemente außer diesem Bild zu liegen kommen, dann will ich nix gesagt haben, dann soll es so sein und ist dann auch so richtig und sinnvoll.
0
molinar09.07.1404:35
Pack mal ein < ... align = "middle" ... > dazu ... statt dem div geht übrigens eine Blindtabelle besser.
0
sb09.07.1406:34
molinar
Pack mal ein < ... align = "middle" ... > dazu ... statt dem div geht übrigens eine Blindtabelle besser.

... und dann im div line-height:500px; setzen. Blindtabellen sind seit CSS3 flex nicht mehr nötig.
„🎐 Sie werden häuslichen Frieden, finanzielle Sicherheit und gute Gesundheit genießen.“
0
sierkb09.07.1410:16
molinar
Pack mal ein < ... align = "middle" ... > dazu ... statt dem div geht übrigens eine Blindtabelle besser.

Zu <img align="middle">: Ist seit HTML4 "deprecated", also missbilligt, sollte nicht eingesetzt werden zugunsten von CSS, fehlt in HTML5 deshalb völlig. Sowas macht man seit Jahren schon besser mit CSS – das ist Positionierung, das gehört nicht ins Markup, sondern ins CSS. Ebenso Blindtabellen: das sollte verpönt sein, damit haben sich in den 90ern des letzten Jahrhunderts viele beholfen, als sie es noch nicht besser wussten (leider). Inzwischen ist man da allgemein weiter, hat hinzugelernt, weiß mit der Trennung von Markup und Style umzugehen und das volle Potential von CSS auszunutzen.
sb
... und dann im div line-height:500px; setzen.

Die Zeilenhöhe für Text auf diesen Betrag setzen, wo es doch hier gar nicht um Text sondern um ein <img>-Element geht, das positioniert werden soll? Wozu? Sinnfrei?
sb
Blindtabellen sind seit CSS3 flex nicht mehr nötig.

So richtig nötig und sinnvoll waren sie eigentlich noch nie, haben Code nur unnötig aufgebläht, die Parsing- und Renderzeiten des Browsers unnötig verlängert und es den Suchmaschinen, die das spidern sollten, unnötig erschwert, auch nicht erst seit CSS3 flex, sondern schon lange lange vorher – viele wussten sich damals und noch Jahre später mangels besseren Wissens nur nicht anders zu helfen.
0
buck
buck09.07.1411:14
Wenn die Bilder nicht immer die gleiche Größe haben kann folgende Style-Anweisung im <div> helfen:

<div style="width:500px; height:500px; float:right; display: table-cell; vertical-align: middle; ">

"vertical-align: middle" klappt nämlich nur in Tabellenzellen (display: table-cell) richtig.
0
sierkb09.07.1411:34
buck
"vertical-align: middle" klappt nämlich nur in Tabellenzellen (display: table-cell) richtig.

Was kein Wunder und völlig korrektes Verhalten ist, denn das Attribut valign gab und gibt es je nur für Tabellen-Elemente und noch nie für das img-Element, siehe dazu auch .

Was Du vor diesem Hintergrund mit Deinem Konstrukt versuchst, ist, dem div-Element ein Verhalten aufzuzwingen (à la: "Stelle Dich als Tabellenzelle dar" bzw. "Zeige Dich so, als wärest Du eine solche"), um den in Frage stehenden Effekt zu erzielen, das eh immer nur für Tabellen-Elemente gegolten hat und dort auch sinnvoll war/ist. Von hinten durch die Brust ins Auge sozusagen.

Ich denke, da ist der Ansatz über ein padding: auto oder margin: auto direkt auf das img-Element bezogen (im Fall von margin-top: auto; margin-bottom: auto) oder alternativ auf das umgebende div-Element bezogen (im Fall von padding-top: auto; padding-bottom: auto), naheliegender, sinnvoller, richtiger (im Sinne des Erfinders) und seit Jahren best practice.
0
Igor Detlev09.07.1412:50
sierkb
Ich denke, da ist der Ansatz über ein padding: auto oder margin: auto direkt auf das img-Element bezogen (im Fall von margin-top: auto; margin-bottom: auto) oder alternativ auf das umgebende div-Element bezogen (im Fall von padding-top: auto; padding-bottom: auto), naheliegender, sinnvoller, richtiger (im Sinne des Erfinders)

Es gibt keinen "auto" Wert für padding. Und bei margins benutzt man "auto" für margin-left und margin-right. Geht aber nur mit block Elementen. Ein Bild ist ein inline Element. Man muss es also erst mal per "display: block" umdeklarieren.

Ein "float" wie im vorliegenden Fall macht das ganze aber wieder kaputt.
sierkb
und seit Jahren best practice.

Guter Witz

Was, bitteschön, weißt du denn von "practice"? Alles, was du hier regelmäßig zum besten gibst, ist irgendwelcher Kram, den du im Internet gelesen hast. In diesem Fall trübt dich aber deine Erinnerung.

Aus der Praxis kennst du doch überhaupt nichts.
0
Igor Detlev09.07.1413:10
und dom_beta: seid Jahren fragst du hier immer wieder Sachen, die eigentlich nur minimalste Grundlagen sind, wenn man was mit HTML bastelt. Du solltest dir wirklich mal einfach ein Wochenende Zeit nehmen, um dich systematisch mit HTML und CSS beschäftigen.

MTN ist so ziemlich der schlechteste Ort, um vernünftige Antworten zu bekommen. Benutze Google, schau bei CSS-Tricks und frage auf StackOverflow , aber suche erst, bevor du dort einen Thread startest. Du könntest alle deine CSS-Probleme in einem Bruchteil der Zeit lösen, und gleichzeitig viel neues lernen, wenn du nur mal systematisch suchst.
0
sierkb09.07.1413:33
Igor Detlev
Es gibt keinen "auto" Wert für padding.

Damit hast Du sogar Recht, sorry für die etwas übereifrige Falschaussage & Danke für den Hinweis, denn:

W3C: CSS3 Box: 5. The padding properties :
W3C: CSS3 Box Spec
Name: padding
Value: [ <length> | <percentage> ]{1,4}
Initial: (see individual properties)
Applies to: all elements
Inherited: no
Percentages: width* of containing block
Media: visual
Computed value: see individual properties
*) if the containing block is horizontal, otherwise the height
W3C: CSS3 Box Spec
Name: padding-top , padding-right, padding-bottom, padding-left
Value: [ <length> | <percentage> ]
Initial: 0
Applies to: all elements
Inherited: no
Percentages: width* of containing block
Media: visual
Computed value: <length>
*) if the containing block is horizontal, otherwise the height
Igor Detlev
Und bei margins benutzt man "auto" für margin-left und margin-right, um Elemente in der Horizontalen zu zentrieren.

Da bin ich leicht anderer Meinung. Nur dort? Nein. Das ist durchaus auch für margin-top und margin-bottom bzw. die gesamte Eigenschaft margin gültig und anwendbar:

W3C: CSS3 Box: 5. The margin properties :
Name: margin-top , margin-right, margin-bottom, margin-left
Value: <length> | <percentage> | auto
Initial: 0
Applies to: see text
Inherited: no
Percentages: width* of containing block
Media: visual
Computed value: the percentage as specified or the absolute length or ‘auto’
*) if the containing block is horizontal, otherwise the height

Name: margin
Value: [ <length> | <percentage> | auto ]{1,4}
Initial: (see individual properties)
Applies to: see text
Inherited: no
Percentages: width* of containing block
Media: visual
Computed value: see individual properties
*) if the containing block is horizontal, otherwise the height
Igor Detlev
Geht aber nur mit block Elementen. Ein Bild ist ein inline Element. Man muss es also erst mal per "display: block" umdeklarieren.

Hasse räsch. Ja und? Dann wird img eben zu einem Block-Element deklariert (ohne dabei aber den sinnigen Charakter völlig zu wechseln, denn es bleibt ja ein img-Element)
Igor Detlev
Ein "float" wie im vorliegenden Fall macht das ganze aber wieder kaputt.

Nicht, wenn man die margins passend anwendet/wählt oder alternativ statt floating z.B. display: inline-block verwendet.
sierkb
und seit Jahren best practice.
Igor Detlev
Guter Witz

Was, bitteschön, weißt du denn von "practice"? Alles, was du hier regelmäßig zum besten gibst, ist irgendwelcher Kram, den du im Internet gelesen hast. […] Aus der Praxis kennst du doch überhaupt nichts.

Möglicherweise mehr als Dir scheint bzw. mehr als Du weißt.
Zudem: Nun werde mal bitte nicht persönlich und unter die Gürtellinie greifend.
Ist das hier bei MTN eigentlich so dermaßen schwer, sich diesbzgl. zu beherrschen und sich gegenseitig achtend und schätzend zu begegnen und auch so seine Worte zu wählen, anstatt den Anderen bei jeder sich bietender Gelegenheit runterzumachen, ihn zu diskreditieren oder ihm seine Kompetenz streitig zu machen oder gar abzusprechen?
Igor Detlev
In diesem Fall trübt dich aber deine Erinnerung.

Im Fall des padding: auto: ja. Deshalb danke für den Hinweis bzw. die Korrektur. Ansonsten bleibe ich bei meinem Gesagten.

Eigentlich ist obig geschildertes Problem trivial und auch trivial zu lösen. Zum Beispiel und sehr naheliegend eben mittels padding bzw. margin.
0
sierkb09.07.1413:38
Igor Detlev
und dom_beta: seid Jahren fragst du hier immer wieder Sachen, die eigentlich nur minimalste Grundlagen sind, wenn man was mit HTML bastelt. Du solltest dir wirklich mal einfach ein Wochenende Zeit nehmen, um dich systematisch mit HTML und CSS beschäftigen.

MTN ist so ziemlich der schlechteste Ort, um vernünftige Antworten zu bekommen. Benutze Google, schau bei CSS-Tricks und frage auf StackOverflow , aber suche erst, bevor du dort einen Thread startest. Du könntest alle deine CSS-Probleme in einem Bruchteil der Zeit lösen, und gleichzeitig viel neues lernen, wenn du nur mal systematisch suchst.

+1
0
Igor Detlev09.07.1413:56
sierkb
Igor Detlev
Und bei margins benutzt man "auto" für margin-left und margin-right, um Elemente in der Horizontalen zu zentrieren.

Da bin ich anderer Meinung. Nur dort? Nein. Das ist durchaus auch für margin-top und margin-bottom bzw. die gesamte Eigennschaft anwendbar:

Natürlich ist es anwendbar, aber nicht für die vorliegende Problemstellung.
sierkb
Igor Detlev
Ein "float" wie im vorliegenden Fall macht das ganze aber wieder kaputt.

Nicht, wenn man die margins passend wählt oder alternativ statt floating z.B. display: inline-block verwendet.

Wir reden aber von "auto", und nicht von angepassten Werten.

Und ohne "float" kein "float" Problem, ist eh klar
sierkb
und seit Jahren best practice.
Igor Detlev
Guter Witz

Was, bitteschön, weißt du denn von "practice"? Alles, was du hier regelmäßig zum besten gibst, ist irgendwelcher Kram, den du im Internet gelesen hast. […] Aus der Praxis kennst du doch überhaupt nichts.
sierkb
Möglicherweise mehr als Dir scheint bzw. mehr als Du weißt.
Zudem: Nun werde mal bitte nicht persönlich und unter die Gürtellinie greifend.

Ich habe das, was ich gesagt habe, ganz bewusst und überlegt gesagt.

Du könntest ein Fiddle mit deiner Lösung posten. *Das* ist Praxis. Statt dessen zitierst du die Spezifikation. Ist nie verkehrt, aber halt wie üblich eben kein Praxis-Wissen.
In diesem Fall trübt dich aber deine Erinnerung.
sierkb
Im Fall des padding: auto: ja, deshalb danke für den Hinweis bzw. die Korrektur. Ansonsten bleibe ich bei meinem Gesagten.

Eigentlich ist obig geschildertes Problem trivial und auch trivial zu lösen. Zum Beispiel und sehr naheliegend eben mittels padding bzw. margin.

nein. Poste eine Lösung, die die obige Problemstellung, inklusive float am übergeordneten Element, über auto-Werte löst. Gibt es nicht.

Natürlich kann man *absolute* Werte setzen, denn offenbar sind die Dimensionen des Bildes und des Containers bekannt. Aber warum hast du dann die "auto"-Werte ins Spiel gebracht?

Aber ist eh Wurscht. dom_beta soll sich zu Weihnachten ein CSS Buch schenken lassen
0
dom_beta09.07.1414:04
Glücklicherweise könnt ihr ja immer alles und sofort, und könnt euch auch bestimmt immer und überall an alles erinnern. Gut.
„...“
0
sierkb09.07.1414:18
Igor Detlev
Natürlich ist es anwendbar, aber nicht für die vorliegende Problemstellung.

Aber sicher doch ist es das! Zumal er so ein Problem schon öfters hatte und er es mit dieser meiner Hilfe auch genauso hat in der Vergangenheit lösen können.
Er weiß also eigentlich, wie es geht, ist nur leider wohl vergesslich, ich habe es ihm in der Vergangenheit öffentlich wie privat mehr als einmal bei solchen und ähnlichen Problemen empfohlen, und es hat funktioniert.
Igor Detlev
Wir reden aber von "auto", und nicht von angepassten Werten. Und wenn man kein "float" benutzt, macht "float" auch keine Problem.

Floating macht eigentlich eher selten Probleme, wenn man richtig damit umzugehen weiß.
Auch da hatte ich dom_beta in der Vergangenheit schon viel geholfen. Bei ganz ähnlichen Problemstellungen.

sierkb
und seit Jahren best practice.
Igor Detlev
Ich habe das, was ich gesagt habe, ganz bewusst und überlegt gesagt.

Sprich: du wolltest einfach nur mal provozieren bzw. blöd daherquatschen, oder wie?
Du könntest ein Fiddle mit deiner Lösung posten.
*Das* ist Praxis.[/quote]

Nein. dom_beta braucht keine fertigen Lösungen, dom_beta fehlt das tiefere Verständnis bei dem, was er da macht. Und er vergisst. Er vergisst Dinge, die er bei sehr ähnlichen Problemen schon häufiger gesagt bekommen, ausführlich erläutert bekommen und mit Beispielen unterlegt bekommen hat.
Statt dessen zitierst du die Spezifikation..

Dir gegenüber habe ich die angeführt, nicht dom_beta gegenüber. Und warum habe ich das gemacht? Weil DAS die Refernez ist, DA steht's halt nun mal drin.
Gewusst WO. Gelle?
Ist nie verkehrt

Eben. Deshalb.
aber halt, wie immer, irgendwelches Zeug, dass du im Internet gelesen hast, und eben kein Praxis-Wissen.

Du kannst mit dieser Aussage gar nicht weiter entfernt von der Wirklichkeit sein.
Ich lasse Dich einfach mal in dem Glauben, dass ich diesbzgl. total unwissend bin (kannst Dich ja btw. sogar mal fragen, wie ich bei bestimmten Dingen immer so schnell darauf komme, ziemlich schnell eine entsprechend treffende Quelle parat zu haben – ohne Hintergrundwissen und ohne genaues Wissen (in diesem Fall: Fachwissen), wo und wonach ich zu suchen habe, ist das wohl kaum möglich, so auch in diesem Fall ). Macht mir grad' sogar Spaß, Dich in diesem Unwissen zu lassen.
nein. Poste eine Lösung, die die obige Problemstellung, inklusive float am übergeordneten Element, über auto-Werte löst. Gibt es nicht.

Ich habe bereits grad' was dazu geschrieben.
Natürlich kann man *absolute* Werte setzen, denn offenbar sind die Dimensionen des Bildes und des Containers bekannt. Aber warum hast du dann die "auto"-Werte ins Spiel gebracht?

Weil ein margin: auto den darin eingeschlossenen Inhalt automatisch positionieren kann – erst recht, wenn die Dimensionen des zu positionierenden Elements bekannt sind, wie in vorliegendem Fall gegeben? Und wenn diese automatische Berechnung gleichzeitig von oben wirkt wie von unten, das betreffende eingeschlossene Element aus diesem Grund automatisch vertikal mittig positioniert wird? Analog die Geschichte bzgl. links und rechts und einer mittigen horizontalen Ausrichtung.
Ich lasse Elemente auf diese Weise schon seit 1999 sowohl horizontal als auch vertikal mittig positionieren. Und dieser Ansatz IST best practice bzw. common sense. Schon seit über einem Jahrzehnt.
Aber ist eh Wurscht. dom_beta soll sich zu Weihnachten ein CSS Buch schenken lassen

Auch da hat er seit Jahren mehrere Buchempfehlungen (sowohl von mir als auch von anderen sowohl öffentlich als auch nicht-öffentlich) bekommen und braucht da diesbzgl. eigentlich keine Wiederholung.
0
dom_beta09.07.1415:09
na ja, doer man gibt für margin-top einfach

Height Div - Height Img / 2 ein
„...“
0
buck
buck09.07.1420:03
W3C ist ja schön und gut… Leider gibt es da die Theorie und die Praxis.

Meine Devise ist es immer die einfachste Lösung (Kürzeste, mit der geringsten Renderanforderung) zu verwenden, die auf den meisten Browsern läuft.
Meiner Meinung nach eine der besten Seiten zum Nachschlagen (incl. Browserkompatibilität) ist w3scools.com und dann noch caniuse.com für allgemeine Kompatibilitätsübersicht. Daneben gilt für mich immer noch (für die einfacheren Sachen) ein Blick auf seflhtml lohnt sich. Damit habe ich schon vor einer gefühlten Ewigkeit angefangen.

dom_beta
Vielleicht solltest Du da erst mal schauen. Wenn man sich etwas selber aneignet lernt man es auch meistens besser.
sierkb & Igor Detlev
Das hört sich ein wenig nach "meiner ist länger als Deiner" an und grenzt schon fast an Rechthaberei.

Eine (kurze) fachliche Auseinandersetzung wäre hier für alle hilfreicher. Wir sind doch nicht hier um uns gegenseitig anzumachen?
0
sierkb09.07.1420:24
buck:
W3C ist ja schön und gut… Leider gibt es da die Theorie und die Praxis.

Wenn Du wüsstest, wie W3C Spezifikationen zustandekommen, dann würdest Du das nicht sagen. Dann würdest Du wissen, dass da die Praxis ganz gehörig mit einfließt bzw. im Entstehungsprozess einer solchen Spezifikation eine entscheidende, wenn nicht sogar die entscheidende Rolle spielt. Deshalb braucht eine Spezifikation im Werdungsprozess auch so lange. Eben weil da vorher getestet wird bis der Arzt kommt bzw. Test-Suites geschrieben und zur Verfügung gestellt werden müssen (vor allem von den Browser-Herstellern und erst recht denen, die selber mit Vorschlägen vorangehen), die keiner gerne schreibt. Deshalb gibt es einige Ansätze, diese ganzen Prozesse zu beschleunigen. Indem man z.B. weit weniger Test-Suites einfordert als in früheren Zeiten.
Meiner Meinung nach eine der besten Seiten zum Nachschlagen (incl. Browserkompatibilität) ist w3scools.com

Kann man nur von abraten. w3schools publiziert seit Jahren Falschheiten bzw. Unkorrektheiten. Seit Jahren wird regelmäßig bei User-Anfragen auf entsprechenden W3C-Mailinglisten von dieser Resource abgeraten und muss eine irrige User-Meinung korrigiert und richtiggestellt werden, wenn sich ein anfragender User bei einem Problem mal wieder drauf bezieht, dass er dort irgendwas gelesen hat, das angeblich so sei, was aber von dort aus offenbar aber falsch unters Volk gestreut worden ist.
caniuse.com

+1
Meine Devise ist es immer die einfachste Lösung (Kürzeste, mit der geringsten Renderanforderung) zu verwenden, die auf den meisten Browsern läuft.

Und das ist, nicht ohne Zufall, genau jene, die ich vorgeschlagen habe. Diese einfachste Lösung sollte zudem jedoch auch inhaltlich Sinn haben bzw. nicht sinnentstellend sein.
Das hört sich ein wenig nach "meiner ist länger als Deiner" an und grenzt schon fast an Rechthaberei.

Von wem aus? Ursache Wirkung?
Wenn ich derart öffentlich angegriffen und mit wenig schmeichelhaften Worten belegt werde, werde ich mich ja wohl noch verteidigen dürfen, oder?
Eine (kurze) fachliche Auseinandersetzung wäre hier für alle hilfreicher.

Kannste gerne haben, habe ich getan, tue es jetzt wieder. Wenn dem Einen oder Anderen, der den Stein ins Rollen gebracht hat, das dann auf einmal ZU fachlich ist, weil hier im Zuge dessen auf die Spezifikation verwiesen wird, da die nun mal eben die normative Referenz ist, soll das nicht mein Problem sein.
Wir sind doch nicht hier um uns gegenseitig anzumachen?

+1
Eben. Entsprechend habe ich reagiert.
0
buck
buck09.07.1420:38
sierkb
buck:
W3C ist ja schön und gut… Leider gibt es da die Theorie und die Praxis.

Wenn Du wüsstest, wie W3C Spezifikationen zustandekommen, dann würdest Du das nicht sagen. Dann würdest Du wissen, dass da die Praxis ganz gehörig mit einfließt bzw. im Entstehungsprozess einer solchen Spezifikation eine entscheidende, wenn nicht sogar die entscheidende Rolle spielt. Deshalb braucht eine Spezifikation im Werdungsprozess auch so lange. …
Was ich meinte ist, dass die aktuellen Spezifikationen noch lange nicht auf allen Browsern laufen. Der IE ist da sowieso außen vor weil die ja immer alles besser machen.
Laufen muss es - egal was das W3C sagt. Nur wenn die etwas als "deprecated" markieren sollte man wirklich die Finger davon lassen.
sierkb
Meiner Meinung nach eine der besten Seiten zum Nachschlagen (incl. Browserkompatibilität) ist w3scools.com

Kann man nur von abraten. w3schools publiziert seit Jahren Falschheiten bzw. Unkorrektheiten.
Habe bis jetzt (im CSS-Bereich) noch keine Probleme gehabt. Werde aber mal verstärkt darauf achten.
0
sierkb09.07.1421:07
buck:
Was ich meinte ist, dass die aktuellen Spezifikationen noch lange nicht auf allen Browsern laufen.

Weiß Du, wie lange CSS2 im Status Candidate Recommendation war, bevor sie schlussendlich (ohne inhaltliche Änderungen!) eine Recommendation war (07.06.2011)? Eine sehr lange Zeit, ich glaube, 2 oder 3 Jahre. Warum? Weil die Browser-Hersteller so lange brauchten, ihre Test-Suites einzureichen bzw. das Zeugs umzusetzen. Was weder die Browser-Hersteller abgehalten hat, ihre Arbeit zu machen und umzusetzen was das Zeug hält und auch die Entwickler da draußen weder abgehalten hat noch abhalten sollte, das alles zu nutzen, was da spezifiziert worden ist und bereits in den Browsern umgesetzt worden ist.

Und einer der Hersteller, der hier allen hinterhertrottet sowohl was die Umsetzung der Spezifikation als auch das Einreichen von Test-Suites angeht, ist, Du wirst es nicht gerne hören, leider Apple. Nicht ohne Grund hat sich zudem auch Blink von WebKit geforkt, und nicht ohne Grund hat schon vor einigen Jahren, 2010, Opera Google darum ganz offen angefleht, WebKit doch bitte endlich zu forken und Apples bleiernder Kontrolle zu entreißen: Opera Blog (06.05.2010): Dear Google: Please fork WebKit . Selbst Microsoft ist da fleißiger, was die Umsetzung der Spezifikationen und Test-Suites angeht. Und ohne diese Mit- und Zuarbeit der Browser-Hersteller kann eine Spezifikation auf der Status-Leiter leider nicht weiterrücken, sie erreicht erst den formalen Recommendation-Status (und darf dann gemeinhin nach Definition des Hauses als Standard bezeichnet werden), wenn alle diese Vorarbeiten erledigt sind. Dazu gehört auch, dass es mindestens 2 unabhängige Implementierer (Browser- bzw. Software-Hersteller) gibt, die die Spezifikation in weiten Teilen umgesetzt haben. Und 100% wirst Du niemals gleichzeitig von allen umgesetzt haben. HTML 4 war jahrelang von allen Browser-Herstellern nicht zu 100% umgesetzt, CSS2 auch nicht. Wird auch gar nicht verlangt. Zu vielfältig und zahlreich sind die Dinge, die umgesetzt werden müssen.

Vor diesem Hintergrund ist es völliger Blödsinn, als Entwickler bei bestimmten Dingen zu zögern, die einzusetzen. Wenn es mindestens zwei Browser-Hersteller gibt, die ein Feature umgesetzt haben, dann sollte man nicht länger zögern, es einzusetzen. Denn nur das macht auch den verbliebenden anderen Herstellern den nötigen Druck, hier nachzuliefern und Gas zu geben. Weil deren Browser in der heutigen Zeit sonst schnell abgehängt sind, wenn sie ein bestimmtes nachgefragtes Feature nicht können bzw. sie sich in der Umsetzung zuviel Zeit lassen.
Der IE ist da sowieso außen vor weil die ja immer alles besser machen.

Das IE-Team hat in den letzten Jahren Erstaunliches vollbracht. Da ist in so mancher Hinsicht die Hölle zugefroren. Auch dank der Leitung des ehemalig dort 12 Jahre vorstehenden Chris Wilson, der mittlerweile die Fronten gewechselt hat und bei Google mit an Chrome arbeitet.
Sie machen nicht immer alles besser, auch sie machen immer noch manchen Fehler. Aber sie haben enorm hinzugelernt, haben das Ruder rumgerissen, haben da, wenn man vom IE6 ausgeht, Wunder vollbracht und sind sogar in so mancher Hinsicht vorbildhaft vorangegangen. Sowas nötigt mir, trotz aller gewesenen und immer noch ab und zu seienden Kritik (ich bin jahrelang einer der schärfsten IE- und Microsoft-Kritiker gewesen), doch einigen Respekt und Anerkennung ab. Es geht also. Man kann sich also doch ändern und den Pfad der Tugend wandeln. Wenn man nur will (was sicher auch nicht ohne Druck des Marktes vonstatten gegangen ist).
Laufen muss es - egal was das W3C sagt.

Ja und nein. Umgekehrt wird eher ein Schuh draus, siehe grad' zuvor Gesagtes – nur so erhöhst Du den Druck auf die Hersteller, die hinterherhinken bzw. sich gemächlich Zeit lassen mit der Umsetzung. Nutzt die Features, die spezifiziert sind – und wenn's nur zwei Browser derzeit können. Die anderen Browserhersteller ziehen erst dann nach, wenn sie merken, dass sie diesbzgl. nacharbeiten müssen, weil sie sonst außen vor bleiben (der Markt ist diesbzgl. gnadenloser und weniger samtener geworden als das noch zu früheren Zeiten der Fall war). Merken sie dies nicht, lassen sie sich Zeit und gehen womöglich Prioritäten nach, die nicht unbedingt dem entsprechen, was Du als Anwender gerne hättest. Zulasten der Umsetzung des in Rede stehenden.
0
sierkb09.07.1421:14
buck:

Sorry, Link stimmt leider nicht mehr. Hier im Archiv: Opera Blog (06.05.2010): Dear Google: Please fork WebKit
0
buck
buck09.07.1421:19
sierkb
Wenn es mindestens zwei Browser-Hersteller gibt, die ein Feature umgesetzt haben, dann sollte man nicht länger zögern, es einzusetzen.
Das erzähle mal einem Kunden der seine Seite auf min. 4 Browsern (IE, FF, Chrome & Safari) vernünftig sehen will - und das auch noch in den letzten 2 Versionen. Das sind (zumindest bei meinen Kunden) die Standardanforderungen.

Sollte man machen? Ja!
Kann man machen? Ja!
Darf man machen? Nein! (oder es gibt kein Geld!)
0
sierkb09.07.1421:24
buck

Ja und? Kriegste auch hin, ist mittlerweile ja auch nicht mehr schwer und kein rocket science mehr. Abgesehen davon: auch Du kannst Dir Deine Kunden aussuchen und "erziehen". Viele andere kriegen diesen Spagat hin bzw. haben die Einsicht, dass das geht. Warum Du nicht auch?

So, und nu is' Fußball. Prost!
0
sierkb09.07.1422:04
buck:
Kleiner Nachtrag, der mir grad' noch eingefallen ist:
Darf man machen? Nein! (oder es gibt kein Geld!)

Ein Trugschluss. Doch! Darf man. Sollte man sogar, wenn man sich nicht mit daran versündigen will, dass eine Entwicklung irgendwo steckenbleibt, weil man u.U. selber dazu beigetragen hat, den unbefriedigenden status quo zu verlängern. In puncto IE6 ist z.B. genau DAS der EINZIGE Weg gewesen, ihn weltweit endlich loszuwerden, ihn von den Desktops der Anwender verschwinden zu lassen bzw. sie upgraden zu lassen. Indem man einfach keine Rücksicht mehr auf ihn genommen hat, ihm endlich nicht mehr den Hof gemacht hat, so wie man das fälschlicherweise jahrelang zuvor getan hatte und ihm auf diese Weise ein Leben als wandelnder Untoter beschert hatte.

Sogar Microsoft selber hat dazu ermutigt (nicht nur ihn loszuwerden, sondern sie haben die Webentwickler sogar mehrfach explizit dazu aufgefordert, keine Sonderwünsche für betagte, alte Browser inkl. IE6/IE7 umzusetzen, keine Browserweichen dafür zu schreiben und stattdessen mutig alles das zu nutzen, was moderne Webstandards und moderne Browser, die auf der Höhe der Zeit sind, einem alles so bieten. Sondern sie im Grunde auflaufen zu lassen, gegen die Wand fahren zu lassen. Damit es weitergeht. Damit Webentwicklung weiter voranschreiten kann, Features in Webstandards genutzt werden können statt dass sie ausgebremst werden durch Browser, die veraltet sind und ihr Handwerk nicht beherrschen. Was ein Browser nicht kann, kann er halt eben nicht! Entweder er wird vom Hersteller dahingegend verbessert und erhält entsprechende Updates (und dann gibt es sogar im günstigsten Fall, weil z.B. entsprechend Druck gemacht wird seitens der Anwender und Entwickler, ein kalkulierbares Zeitfenster, ab wann er etwas kann), oder er fährt gegen die Wand und wird eben nicht mehr genutzt, und dann ereilt ihn sein gerechtes Schicksal).

Google hat letztens zum Beispiel für seine Dienste die Schere angesetzt und nimmt keinerlei Rücksicht mehr auf alle Internet Explorer kleiner als Version 9. Andere Anbieter im Netz tun es ihnen gleich. Das ist der einzig richtige Ansatz, den nein Browser-Update auf eine aktuelle Version ist nicht nur schnell gemacht, sondern auch aus sicherheitstechnischer Sicht dringend angeraten. Und wenn's nicht geht, wie z.B. bei XP – ja, dann höchste Zeit, sich von XP zu verabschieden. Da erst Recht aus Sicherheitsgründen.

So, ich habe mich mal wieder hinreißen lassen, mehr zu schreiben als ich vorhatte. Fußball beginnt. Und wir sind weit weit vom Thema abgekommen. Auch durch mein Zutun. Entschuldigung. Mea culpa.
Ich denke aber auch, das Thread-Thema (HTML/CSS: Bild vertikal zentrieren) ist hinreichend besprochen, das gestellte Problem einer Problemlösung zugeführt. dom_beta weiß im Grunde, worum es geht, und was er zu tun hat (wusste er eigentlich auch schon vorher, zumindest dürfte das Thema ihm bekannt vorkommen, weil hier schon öfters episch durchgekaut und mit einleuchtenden Beispielen dargelegt).

Happy Fußball-WM-Halbfinale-Gucking (und für mich: Geschmeidiges Extreme-Hineinrelaxing in meinen morgigen Geburtstag)!
0
buck
buck10.07.1400:11
sierkb
und für mich: Geschmeidiges Extreme-Hineinrelaxing in meinen morgigen Geburtstag
Na dann mal herzlichen Glühwurm! (gibt es denn hier nicht mal ein Kuchensymbol?)
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.