nicht angemeldet
Warum Bild nicht mittig u.a.
0 0 0
0 
Matthias Apsel
0 0 Matthias Apsel
0 0 
Der Martin
0 Matthias Apsel
Warum Bild nicht mittig u.a.
Hallo,
Warum ist das Bild im 1. Beispiel (s.u.) nicht vertikal zentriert? Ich habe das vertical-align an den verschiedensten Stellen versucht
Warum springt im 2. Beispiel (s.u.) der Text unter das Bild obwohl "float:left"?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>test</title>
</head>
<body>
<h1>1. Beispiel</h1>
<div style="font-size:0.9em;width: 220px;">
<a href="http://www..............de" style="vertical-align:middle;">
<span><img style="vertical-align:middle;float:left;border-style:none;" src="bild.jpg" alt ="">ABC Rxxxxxxxxxxxxxxxx DEF xxxxxxx</span>
</a>
</div>
<br><br>
<h1>2. Beispiel</h1>
<p>Warum Text unter dem Bild obwohl "float:left"?</p>
<div style="font-size:1.2em;width:220px;">
<a href="http://www..............de">
<span><img style="float:left;border-style:none;" src="bild.jpg" alt ="">ABC Rxxxxxxxxxxxxxxxx DEF xxxxxxx</span>
</a>
</div>
</body>
</html>
Ich hoffe, dass ich trotz Ostern noch einen Tipp erhalte, ich muss nämlich arbeiten - ansonsten "Frohe Ostern"
-
Hallo,
Warum ist das Bild im 1. Beispiel (s.u.) nicht vertikal zentriert? Ich habe das vertical-align an den verschiedensten Stellen versuchtGehn könnte es so (getestet in Opera 12.14)
<!DOCTYPE HTML > <html> <head> <meta charset="utf-8"> <title>test</title> <style> td { vertical-align:middle; } .bspl2 { float:left; } </style> </head> <body> <h1>1. Beispiel</h1> <table> <tr> <td> <a href="http://www.example.de"> <img src="" width="100" height="100" alt =""> </a> </td> <td> Text Text Text </td> </tr> </table> <h1>2. Beispiel</h1> <a class="bspl2" href="http://www.example.de" > <img src="" width="100" height="100" alt=""> </a> <p> Text Text Text </p> </body> </html>Obwohl -- die Benutzung iner Tabelle -- Tzz - Tzz - Tzz
Gruß H.
-
Hallo,
von Tabellen wird ja wohl immer abgeraten.
Gruß
H.-
Hallo,
von Tabellen wird ja wohl immer abgeraten.Es sei denn, die Dinge haben durchaus tabellarischen Charakter wie hier.
Gruß H.
-
Om nah hoo pez nyeetz, Herrmann!
Es sei denn, die Dinge haben durchaus tabellarischen Charakter wie hier.
Es sei denn, es sind tabellarische Daten. Für dein verlinktes Beispiel würde ich eine Liste vorschlagen. Mit dem Pfeil als Listengrafik.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias!
Es sei denn, die Dinge haben durchaus tabellarischen Charakter wie hier.
Es sei denn, es sind tabellarische Daten. Für dein verlinktes Beispiel würde ich eine Liste vorschlagen. Mit dem Pfeil als Listengrafik.
Hab ich auch schon gedacht, bin aber zunächst nicht weiter gekommen, wenn es genau so hübsch aussehen sollte - Bilder unterschiedlich breit und hoch, aber Text in Reih' und Glied, und alles vertikal schön zentriert, und das auch bei (in Grenzen) veränderlichem Viewport. Trotzdem Danke für die Anregung.
Gruß H.
-
-
-
-
-
Om nah hoo pez nyeetz, Harro!
Solche generierten Beispiele haben immer das Problem generiert zu sein. Besser wäre das Original. Ich schreib hier beispielsweise, das liegt da und da dran und du antwortest, im Original ist das aber nicht so.
Zudem wäre wichtig zu wissen, was du eigentlich erreichen möchtest. Du präsentierst hier schon deinen möglicherweise in die Irre führenden Lösungsweg.
- die Span-Elemente sollten überflüssig sein.
#1# vertical-align muss das Bild bekommen, das floating nimmt die Elemente aus dem Textfluss und macht möglicherweise deshalb Schaden.
#2# Der Platz reicht nicht, weil das Div-Element zu schmal ist?
Für weitere Hilfe formuliere bitte dein Ziel und zeig das Original.
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
Solche generierten Beispiele haben immer das Problem generiert zu sein. Besser wäre das Original. Ich schreib hier beispielsweise, das liegt da und da dran und du antwortest, im Original ist das aber nicht so.
das ist das Original (nämlich ein Test, s.u.).
Zudem wäre wichtig zu wissen, was du eigentlich erreichen möchtest.
Ich möchte erreichen (testen), was sicher des öfteren in meiner geplanten Seite vorkommen wird, dass ein Bild und ein Text nebeneinander stehen, wobei Bild und Text jeweils vertikal zentriert sind. Der Text soll nicht das Bild umfließen. Das Bild kann einmal höher, einmal niedriger sein als der Text.
#1# vertical-align muss das Bild bekommen, das floating nimmt die Elemente aus dem Textfluss und macht möglicherweise deshalb Schaden.
Wenn ich float left weglasse, springt ein Teil des Textes auch im 1. Beispiel unter das Bild
#2# Der Platz reicht nicht, weil das Div-Element zu schmal ist?
Warum wird der Text dann nicht im schmalen div untereinander geschrieben - Leerstellen sind doch vorhanden?
Österliche Grüße
Harro-
Om nah hoo pez nyeetz, Harro!
Ich möchte erreichen (testen), was sicher des öfteren in meiner geplanten Seite vorkommen wird, dass ein Bild und ein Text nebeneinander stehen, wobei Bild und Text jeweils vertikal zentriert sind.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> [code lang=css]img { vertical-align: middle; }</style>
</head>
<body>
<div>
<img src="http:/example.com/bild.jpg" alt ="Alternativtexte sind nicht unwichtig"> Ein Bild an einem Text ausgerichtet.
</div>
</body>
</html>[/code]Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
[code lang=css]img { vertical-align: middle; }> </style> > </head> > <body> > <div> > <img src="http:/example.com/bild.jpg" alt ="Alternativtexte sind nicht unwichtig"> Ein Bild an einem Text ausgerichtet. > </div> > </body> > </html>[/code] Dein Beispiel funktioniert, weil der Text in eine Zeile passt. Der Normalfall ist aber doch, dass dies nicht der Fall ist, siehe nachfolgendes Beispiel: ~~~html <!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> img { vertical-align: middle; } .schmal { width:200px; } </style> </head> <body> <div> <img src="http:/example.com/bild.jpg" alt ="Alternativtexte sind nicht unwichtig"> Ein Bild an <br>einem Text ausgerichtet. </div> <div class="schmal"> <img src="http:/example.com/bild.jpg" alt ="Alternativtexte sind nicht unwichtig"> Ein Bild an einem Text ausgerichtet. </div> </body> </html>Gruß
Harro-
Moin,
Dein Beispiel funktioniert, weil der Text in eine Zeile passt.
nein, das ist nicht der Grund - das heißt, indirekt schon. Der Punkt ist, dass vertical-align den Inhalt *innerhalb einer Zeile* definiert ausrichtet. Das Bild bleibt aber immer noch im Textfluss, als wäre es ein Zeichen. Es wird also in der Zeile ausgerichtet, in der es steht, aber vorhergehende oder nachfolgende Zeilen sind davon nicht betroffen.
Was du möchtest, ist aber, den Text zu einem Block zusammenzufassen und als Ganzes zusammen mit dem Bild mittig auszurichten. Ich würde versuchen, den Text in ein Containerelement zu stecken (ein p-Element bietet sich an) und diesen Container als inline-block zu formatieren. Dann sollte es wieder möglich sein, das Bild und den p-Container (der sich nun nach außen hin wie ein inline-Element verhält) auszurichten.
Schöne Feiertage,
Martin--
Alle Tage sind gleich lang. Aber unterschiedlich breit.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hi Martin,
wenn ich Dich richtig verstanden habe, müsste es jetzt so aussehen:<!doctype html> <html> <head> <meta charset="utf-8"> <title>test</title> <style> img { vertical-align: middle; } .schmal { width:200px; } .ib {display: inline-block; width: 120px; } </style> </head> <body> <div class="schmal"> <img src="http:/example.com/bild.jpg" alt ="Alternativtexte sind nicht unwichtig"><p class="ib">Ein Bild an einem Text ausgerichtet.</p> </div> </body> </html>Jetzt ist der Text zwar rechts vom Bild, aber das Bild ist nicht vertikal-zentriert sondern
auf der Höhe der 2. Zeile des Textes, also in etwa soEin Bild an einem
<bild> Text ausgerichtetGruß
Harro-
Om nah hoo pez nyeetz, Harro!
img { vertical-align: middle; }
vertical-align sorgt für die Ausrichtung in einer Zeile. Jetzt steht das Bild aber ganz allein in seiner Zeile.
img { display: inline-block; }
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
vertical-align sorgt für die Ausrichtung in einer Zeile. Jetzt steht das Bild aber ganz allein in seiner Zeile.
ja, eben - und der inline-Block ist als Ganzes die zweite Komponente in dieser einen Zeile. Wass sich innerhalb des inline-blocks so alles abspielt, sollte doch nach außen keine Wirkung haben.
Oder habe ich da was falsch verstanden?
Schöne Ostern noch ... und weg.
Martin--
Niemand ist überflüssig: Er kann immer noch als schlechtes Beispiel dienen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
Om nah hoo pez nyeetz, Harro!
Dein Beispiel funktioniert, weil der Text in eine Zeile passt.
Der Normalfall ist aber doch, dass dies nicht der Fall ist, siehe nachfolgendes Beispiel:Deshalb schrieb ich: Zeig das Original. Verwende display: inline-block.
Matthias
--
1/z ist kein Blatt Papier.
-
Hi,
Deshalb schrieb ich: Zeig das Original. Verwende display: inline-block.
Das war doch das Original und genau in diesem trat ja der Effekt auf.
Gruß
Harro
-
-
-
-