Bündige Positionierung voon Bildern mit CSS

[Manfred]

Hallo,

nachdem ich mir hier so manche Grundkenntnisse zu html und css angeeignet habe, bin ich daran gegangen eine einfache html-seite zu bauen. die Formatierungen sollen in einer css-Datei liegen. Das klappt soweit auch gut.

Aber die bündige Positionierung von Bildern hinter einem Text macht mir Probleme. Ich habe jetzt hier alles zu 'position' etc. gelesen. Aber nichts löst davon mein Problem:

Ich möchte jeweils hinter einer kurzen liste ein kleines Bild anzeigen lassen. Alle Bilder sollen sauber untereinander und linksbündig ausgerichtet sein.

Also z. B.:

Deutsch (hier Bild von deutscher Flagge)
English (hier Bild von englischer Flagge)

etc.

Dazu habe ich in mein CSS folgendes eingebaut:

img {border:0px;margin:-4px -4px -4px 0px;margin:bottom;position:absolute;left:100px;}

Das sieht zunächst gut aus, aber leider werden die Bilder dann doch verschoben dargestellt, je nachdem wie groß das Browserfenster gerade ist verändert sich auch die Position der Bilder. Geht also nicht.

Die Änderung des Eintrages auf 'position:relativ' positioniert die Bilder dann zwar 'fest', aber leider stehen dann beide Bilder nicht genau untereinander. Das zweite Bild ist leicht nach rechts verschoben.

Alle weiteren Experimente mit den anderen Erweiterungen von 'position' brachten auch keine besseren Ergebnisse.

Kann mir jemand bei meinem Problem helfen und mir sagen, was in einem CSS drin stehen muss, damit kleine Bilder zum Text und bündig zueinander ausgerichtet sind. Und zwar so, dass sie durch verkleinern oder vergrößern des Browserfensters nicht verschoben werden?

Vielen Dank schon einmal. Weiß echt nicht mehr weiter und habe schon Stunden mit Experimentieren zugebracht.

Gruß
Manfred

[apsel]

Om nah hoo pez nyeetz, Manfred!

unabhängig von deinen Wünschen: Was soll

margin:bottom;

bedeuten?

Matthias

[Gunnar Bittersmann]

@@Manfred:

nuqneH

Ich möchte jeweils hinter einer kurzen liste ein kleines Bild anzeigen lassen.

Nein, das möchtest du nicht, denn …

Deutsch (hier Bild von deutscher Flagge)
English (hier Bild von englischer Flagge)

… Flaggen stehen für Länder, nicht jedoch für Sprachen.

Außerdem werden die wenigsten (vielleich incl. dir?) wissen, wie die englische Flagge aussieht.

Qapla'

[suit]

Außerdem werden die wenigsten (vielleich incl. dir?) wissen, wie die englische Flagge aussieht.

Das geht besonders klar, wenn man die Google Bildersuche verwendet (wo bekanntlich maßgeblich crowdsourcing zum Taggen der Bilder verwendet wird):

english flag (fürchterlich)
flag of england (eigentlich ganz ordentlich)

[Matze]

Hey suit!

english flag (fürchterlich)

Aber auch nur weil du nicht nach der englischen Flagge suchst, sondern Flagge auf englisch - quasi.
Mit england flag sieht es auch wieder ganz gut aus.

Grüße, Matze

[Manfred]

Hallo,

nachdem ich hier alle bisher auf meine Frage eingehenden Antworten gelesen habe, muss ich sagen, nicht gerade sehr hilfreich.

Statt einen Hinweis zu geben, wie mann Textelemente zu Bildern und diese Bilder untereinander sauber über CSS ausrichtet, kam eine abstruse Diskussion über Länder, Sprachen, Flaggen etc. in Gang.

Nur zum Verständnis:
Wenn bestimmte Info-Seiten für bestimmte Länder erstellt werden, die diese Infoseiten über eine einheitliche Startseite mit Sprachauswahl aufrufen sollen, ist es üblich, für diese Sprachauswahl auch die jeweilige Landesflagge anzubieten. Denn Flagen stehen nicht nur für Länder, sondern auch für Landessprachen!

Die Landesflaggen liegen mir bereits als gekaufte Fotos vor. So dürfte sich auch die Diskussion über Google-Bildsuche etc. erübrigen. Außerdem ist wohl davon auszugehen, dass ein Engländer seine Landesflagge erkennt.

Stellt sich also für mich noch die Frage:

Kann jemand in diesem Forum mein Problem der Positionierung von Textelementen mit Bildern und die saubere Ausrichtung dieser Bilder untereinander beantworten, ohne meine Intention in Frage zu stellen?

Wäre jedenfalls schön.
MfG
Manfred Herbst

[apsel]

Om nah hoo pez nyeetz, Manfred!

Das man es so eher nicht machen sollte, darüber ist hier im Forum auch schon viel geschrieben worden. Schau dir die dortigen Argumente wenigstens an.

Matthias

[Gunnar Bittersmann]

@@Manfred:

nuqneH

[…] kam eine abstruse Diskussion über Länder, Sprachen, Flaggen etc. in Gang.

Du hast damit angefangen. Der Gedanke, Flaggen stünden für Sprachen, ist abstrus.

Wenn bestimmte Info-Seiten für bestimmte Länder erstellt werden, die diese Infoseiten über eine einheitliche Startseite mit Sprachauswahl aufrufen sollen, ist es üblich, für diese Sprachauswahl auch die jeweilige Landesflagge anzubieten.

Üblich heißt nicht vernünftig.

Ist der Inhalt für verschiedene Regionen verschieden (Multilingual, changed content) oder wird derselbe Inhalt in verschiedenen Sprachen angeboten (Multilingual, same content)? [MONO-MULTILINGUAL]

(Im zweiten Fall ist es angebracht, Sprachvereinbarung (language negotiation) einzusetzen. [WHEN-LANG-NEG]

Denn Flagen stehen nicht nur für Länder, sondern auch für Landessprachen!

Nein.

Welche Flagge stünde denn für Spanisch (Kastillisch)? Die spanische? Bist du sicher, dass alle Spanischsprecher (davon soll es in Südamerika einige geben) die spanische Flagge kennen?

Und warum sollte die spanische Flagge für Kastillisch stehen, nicht aber für eine der anderen in Spanien gesprochenen Sprachen?

Sollte ein Schweizer auf die deutsche/französische/italienische Flagge klicken? Bekommt er damit Informationen speziell für Deutschland/Frankreich/Italien? (S.o.)

Die Landesflaggen liegen mir bereits als gekaufte Fotos vor. So dürfte sich auch die Diskussion über Google-Bildsuche etc. erübrigen. Außerdem ist wohl davon auszugehen, dass ein Engländer seine Landesflagge erkennt.

Du hast offenbar nichts verstanden. Vermutlich bist du den Links nicht einmal gefolgt und hältst den Union Jack immernoch für die englische Flagge.

Qapla'

[Der Martin]

Hi,

Wenn bestimmte Info-Seiten für bestimmte Länder erstellt werden, die diese Infoseiten über eine einheitliche Startseite mit Sprachauswahl aufrufen sollen, ist es üblich, für diese Sprachauswahl auch die jeweilige Landesflagge anzubieten.

ob es "üblich" ist, kann ich nicht sagen; aber der Unsinn wird oft gemacht, das stimmt.

Denn Flagen stehen nicht nur für Länder, sondern auch für Landessprachen!

Soso. Für welche Sprache steht denn dann die belgische Flagge: Französisch? Niederländisch? Oder die Schweizer Flagge: Deutsch? Italienisch? Schwyzerdütsch? Oder die kanadische? Oder die britische: Für Englisch, Schottisch (Gälisch) oder Welsh?
Abgesehen von solchen Mehrdeutigkeiten können auch irrationale, typische nationale Animositäten eine Rolle spielen: Warum soll man dem Österreicher zumuten, seine Sprache mit Klick auf die deutsche Piefke-Fahne auszuwählen? Warum sollte ein Kanadier aus Montreal auf die französische Fahne klicken, obwohl er mit Frankreich nichts am Hut hat?

Sprachgrenzen fallen zwar manchmal mit Landesgrenzen zusammen, das ist aber alles andere als selbstverständlich. Daher sind Flaggen zur Sprachauswahl auch ziemlich ungeeignet.

So dürfte sich auch die Diskussion über Google-Bildsuche etc. erübrigen. Außerdem ist wohl davon auszugehen, dass ein Engländer seine Landesflagge erkennt.

Hmm. Die englische oder die britische? ;-)

Kann jemand in diesem Forum mein Problem der Positionierung von Textelementen mit Bildern und die saubere Ausrichtung dieser Bilder untereinander beantworten, ohne meine Intention in Frage zu stellen?

Da du immer noch kein Code-Beispiel zeigst: Wohl kaum.

So long,
 Martin

[apsel]

Om nah hoo pez nyeetz, Manfred!

wenn die Bilder alle dieselbe Größe hätten, wäre es denkbar, sie als Hintergrundgrafik für die <li> zu verwenden. Schau dir mal an, wie ich es in diesem Artikel über Hintergrundgrafiken mit den Links gemacht habe (firefox und Firebug, Rechtsklick, Element untersuchen) oder aktueller Opera Rechtsklick, Element untersuchen.

Matthias

[Gunnar Bittersmann]

@@apsel:

nuqneH

wenn die Bilder alle dieselbe Größe hätten

Flaggen haben nicht dieselbe Größe. Bei Schwarz-Rot-Gold ist das Seitenverhältnis Höhe zu Breite 3:5, beim Union Jack 1:2, bei Stars and Stripes 10:19, bei den Trikoloren Frankreichs und Italiens 2:3.

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Flaggen haben nicht dieselbe Größe.

Schweiz 1:1, es gibt auch welche, die nicht rechteckig sind (Nepal).

Zumindest könnte man aus den Flaggen Grafiken mit einer einheitlichen  Größe machen, ggf. durch einen transparenten Hintergrund.

Wenn man denn die richtigen Seitenverhältnisse beachten möchte, was imho die schlechte Idee, Sprachen mit Flaggen zu assoziieren, nicht wirklich noch schlechter macht.

Matthias