nur Visitenkarte
0 
Der Martin
0 0 0 
Rolf B
0 
Gunnar Bittersmann
0 
Robert B.
0 Gunnar Bittersmann
nur Visitenkarte
Moin. Würde gerne auf meiner Seite auf schwarzem Hintergrund lediglich die Rückseite meiner Visitenkarte darstellen. Ob das nun unter welchen Gesichtspunkten auch immer gut oder schlecht ist, will ich gar nicht wissen. Danke, falls jemand hätte Tips auf Lager gehabt. Nein, mir geht es nur um das html, damit das auf jedem Browser läuft. jqueries brauche ich nicht. das bild hat ne fixe Größe und feddich. Ich schmeisse mal n bissl pseudo-html raus. Vermutlich sieht jeder, was ich will. Sicher braucht's Korrektur, da würde ich euch drum bitten.
<html>
<body>
<div valign=center bgcolor=black>
<div align=center>
<img src=".../blabla.jpg" alt="pfui!!" width="123" height="456">
</div>
</div>
</body>
</html>
-
Hallo,
Würde gerne auf meiner Seite auf schwarzem Hintergrund lediglich die Rückseite meiner Visitenkarte darstellen.
die Rückseite?? Meine Visitenkarten sind auf der Rückseite blanko. Aber okay, ja, ich habe auch schon welche in der Hand gehabt, die auf der Rückseite auch noch bedruckt waren.
Nein, mir geht es nur um das html, damit das auf jedem Browser läuft. jqueries brauche ich nicht. das bild hat ne fixe Größe und feddich.
Wieso Bild? Das ist die einzige Rückfrage, die ich hier habe. Warum nicht als lesbaren Text? Damit wäre es nicht nur maschinenlesbar und damit von Suchmaschinen indizierbar, sondern auch von assistiven Techniken wie Screenreadern lesbar, so dass die Seite auch für visuell eingeschränkte Besucher zugänglich wäre.
<html> <body> <div valign=center bgcolor=black> <div align=center> <img src=".../blabla.jpg" alt="pfui!!" width="123" height="456"> </div> </div> </body> </html>- Das head-Element fehlt komplett, darin vor allem der Seitentitel.
- Visuelle Merkmale wie Ausrichtung oder Farben sollten nicht mit veralteten, missbilligten HTML-Attributen transportiert werden, dafür ist CSS zuständig. Außerdem sollten die Werte von Attributen in Anführungszeichen gesetzt sein (beim img-Element weißt du es plötzlich).
- Wenn du wirklich beim nicht barrierefreien Bild bleiben willst, ist mindestens eins der beiden div-Elemente überflüssig. Ich denke, sogar beide.
- Die gewünschte Größe des Bildes pixelgenau anzugeben, ist nicht sinnvoll; du weißt ja gar nicht, wie groß das dann im Verhältnis zur Display-Größe deiner Besucher ist. Beim einen wird's bildschirmfüllend sein, beim andern nur eine Briefmarke. Gib die Abmessungen öieber relativ an (z.B. in vh und vw oder in Prozent, und natürlich im Stylesheet anstatt im Markup)
Immer eine Handbreit Wasser unterm Kiel
Martin--
Wenn ich den See seh, brauch ich kein Meer mehr.-
Hieße dann
<title>Kein großes Ding</title> </head> <body style="background-color:black;"> <img src="https://de.wikipedia.org/wiki/Brandenburg_an_der_Havel#/media/Datei:Wappen_Brandenburg_(Havel)_alt.jpg" alt="pfui!!" style="position=auto; "> </body> </html>https://onkeloki.de/htmltester/ Scheint nicht zu laufen hier. Gibt es ne schönere Testumgebung?
-
so meine ich:
<html> <head> <title>Kein großes Ding</title> </head> <body style="background-color:black;"> <img src="https://de.wikipedia.org/wiki/Brandenburg_an_der_Havel#/media/Datei:Wappen_Brandenburg_(Havel)_alt.jpg" alt="pfui!!" style="position=auto; "> </body> </html>-
Hallo GarkeinPlan,
vermeide style Attribute. Setze ein Style-Element in den head-Bereich:
<head> <title>...</title> <style> body { background-color: black; } </style> </head>Mit solchen CSS Regeln kannst Du bestimmte Teile im Dokument auswählen (das ist der Teil vor der { Klammer - der Selektor) und dafür style-Eigenschaften festlegen. Unser Wiki enthält viele Informationen über CSS und die Syntax von Stylesheets.
Den Wert auto für die position-Eigenschaft gibt's übrigens nicht, d.h. diese style-Angabe hätte auch dann keinen Effekt, wenn Du den korrekten Doppelpunkt statt eines Gleichheitszeichens gemacht hättest. Was wolltest Du damit erreichen?
Eine Zentrierung des Bildes auf dem Bildschirm erreichst Du anders. Wie genau, hängt davon ab, was sonst noch auf der Seite ist. NUR das Bild? In dem Fall gib dem body noch die CSS Eigenschaft text-align:center.
Rolf
--
sumpsi - posui - obstruxi-
Dankeschön!
Da soll wirklich nur die Bilddatei sein, sonst nichts bzw Schwarz.
<head> <title>...</title> <style> body { background-color: black; text-align: center; } </style> <body> <div> <img src="https://bilder.bild.de/fotos/bu-32-bildlogo-0812-jpg_14249078_mbqf-1325756515-21916986/Bild/1.bild.jpg" height="200px" alt="pfui!!" > </div> </body> </head>Funktioniert soweit. Jetzt braucht's noch ein vertical alignment. Das Ding muss also auch mittig (horizontal) und mittig (vertica) hängen.
-
Hallo nochmal,
<head> <title>...</title> <style> body { background-color: black; text-align: center; } </style> <body> <div> <img src="https://bilder.bild.de/fotos/bu-32-bildlogo-0812-jpg_14249078_mbqf-1325756515-21916986/Bild/1.bild.jpg" height="200px" alt="pfui!!" > </div> </body> </head>das div-Element kann ersatzlos entfallen, es hat keine Funktion und keine Aussage. Gib dem img-Element zur vertikalen Zentrierung noch margin:auto im Stylesheet, und sowohl dem html- als auch dem body-Element eine Höhe von 100%. Oh, und die Einheit px im HTML-Attribut ist falsch. Größenangaben in HTML sind immer in Prozent (mit Prozent-Zeichen) oder in Pixel (ohne Einheit oder Symbol).
Aber wolltest du die Größe nicht besser per CSS relativ angeben?Immer eine Handbreit Wasser unterm Kiel
Martin--
Wenn ich den See seh, brauch ich kein Meer mehr. -
Hallo GarkeinPlan,
vertikale Zentrierung ist am einfachsten, wenn Du den body zu einem Grid aus einer Zeile und einer Spalte machst.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Hallo GarkeinPlan,
vertikale Zentrierung ist am einfachsten, wenn Du den body zu einem Grid aus einer Zeile und einer Spalte machst.
Ganz so einfach nicht, da bedarf es noch einiger Angaben: Codepen
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo Gunnar,
ich wollte es ja nicht vorkauen und habe darum auf's Wiki verwiesen. Dass margin:auto in einer Gridzelle auch vertikal zentriert, war mir aber neu; ich dachte, da wäre man auf align-items angewiesen.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
ich wollte es ja nicht vorkauen und habe darum auf's Wiki verwiesen.
Vom hier wohl nötigen
max-width/max-heightsteht da nichts.Dass margin:auto in einer Gridzelle auch vertikal zentriert, war mir aber neu
Ich lese gerade Lea Verous „CSS Secrets“, da steht sowas drin.
😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo Gunnar,
Vom hier wohl nötigen max-width/max-height steht da nichts.
Ja, ok. Aber da ist eine Seltsamkeit: max-width hat Wirkung. max-height in Chrome nicht. Im Firefox schon. Selbst ein max-height: 100vh auf dem Body ändert nichts.
Angeblich braucht max-height spec-konform ein Elternelement mit einer absoluten Höhe, um zu wirken. Das ist aber bei Dir der Fall. Trotzdem ignoriert Chrome es.
WTF?
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Ja, ok. Aber da ist eine Seltsamkeit: max-width hat Wirkung. max-height in Chrome nicht. Im Firefox schon. Selbst ein max-height: 100vh auf dem Body ändert nichts.
Angeblich braucht max-height spec-konform ein Elternelement mit einer absoluten Höhe, um zu wirken. Das ist aber bei Dir der Fall. Trotzdem ignoriert Chrome es.
WTF?
Man muss auch jede standardkonforme Kleinigkeit in diesen Kackbrowser prüfen, ob sie auch funktioniert oder ob Chromium da mal wieder einen Bug hat. 😣
Hab im Pen
max-height: 100%ersetzt durchmax-height: 100vh– damit geht’s auch in Chromium.Wegen der Symmetrie
max-widthauch invwangegeben, wenngleich es da egal ist.😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner-
Hallo Gunnar,
gerade gefunden: https://twitter.com/wesbos/status/1346481732946636800
Funktioniert in deinem Pen. Au weia, Chrome 😕
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
gerade gefunden: https://twitter.com/wesbos/status/1346481732946636800
Funktioniert in deinem Pen.
Ah. Konserviert.
Aber ich würde an der Stelle doch lieber
vhnehmen als diesen Hack.😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner
-
-
-
-
@@Gunnar Bittersmann
Dass margin:auto in einer Gridzelle auch vertikal zentriert, war mir aber neu
Ich lese gerade Lea Verous „CSS Secrets“, da steht sowas drin.
Ich schaute gerade Stay Curious, da erwähnte Stephanie Eckles eine noch bessere Lösung:
place-content: centerfürs Grid-Element. Selbsterklärender Code.In Chromium geht’s dann auch mit
100%fürmax-widthundmax-height. Allerding zickt der Firefox dann rum.😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner
-
-
-
-
-
-
-
-
-
@@Der Martin
- Wenn du wirklich beim nicht barrierefreien Bild bleiben willst
?? Mit entsprechendem Alternativtext kann ein Bild durchaus barrierefrei sein. Bei entsprechendem Farbkontrast kann auch eine Textgrafik durchaus barrierefrei sein.
ist mindestens eins der beiden div-Elemente überflüssig. Ich denke, sogar beide.
Ja, beide überflüssig. Mit
htmlundbodystehen bereits 2 Containerelemente zur Verfügung.Und wie Rolf schon zeigte, braucht man nur eins, um das Bild horizontal und vertikal zu zentrieren.
- Die gewünschte Größe des Bildes pixelgenau anzugeben, ist nicht sinnvoll
Mit
width- undheight-Attributen im HTML gibt man das Seitenverhältnis des Bilds an, wenn man die Größe mit CSS angibt – und das ist durchaus sinvoll. Der Browser kann dann den entsprechenden Platz fürs Bild bestimmen bevor die Bilddatei geladen ist.😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner -
Moin,
wenn wir schon beim
headsind: Der Viewport möchte bestimmt auch auf dem Telefon lesbar sein.Viele Grüße
Robert
-
@@GarkeinPlan
<html> <body> <div valign=center bgcolor=black>bgcoloristwar in HTML 4.01 Transitional nur beimbody-Element erlaubt. Und man sollte es nicht einsetzen, sondern CSS verwenden.[1]valignistwar in HTML 4.01 Transitional nur bei Unterelementen vontableerlaubt. Und man sollte es nicht einsetzen, sondern CSS verwenden.<div align=center>Das
divist genauso wie das vorige bedauerlich bis ärgerlich.<img src=".../blabla.jpg" alt="pfui!!" width="123" height="456">Sinnvoller Alternativtext ist nicht „pfui!!“;
„pfui!!“ ist nicht sinnvoller Alternativtext.😷 LLAP
--
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner
-
<!DOCTYPE html> <html> <head> <title>subba</title> <style> body { margin: 0; display: grid; height: 100vh; background-color: black; } img { margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; } </style> </head> <body> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Berlin_Alexanderplatz_1903.JPG/638px-Berlin_Alexanderplatz_1903.JPG" width="638" height="480" alt="Berlin Alexanderplatz 1903"/> </body> </html>Das funkt ganz hervorragend! Die weiteren Bemerkungen habe ich natürlich schon zur Kenntnis genommen! Ganz vielen Dank für die rege Beteiligung. Nun kann ich meine schlechte im billigen WP Template Stil gebastelte Webseite erstmal wieder loswerden und ohne Bauchschmerzen mal schnell ne neue index Datei setzen. Wer billig kauft, kauft zweimal...aber ich wußte ja auch noch nicht damals, wo die Reise hingehen wird. Nun kann ich mich vor Aufträgen nicht retten und verkürue das Ganze einfach mal. Toll!! Salvete!
-