Problem mit Bilder und Alignment

Beitrag von **Pfauli** » 28.01.2010, 01:16

Hallo Zusammen

Ich habe ein Problem und stehe im Konflikt zwischen der Ausrichtung von Bildern und dem korrekten Erstellen von Html an dieser Stelle. Vielleicht weiß jemand Rat und hat einen Tipp parat.

Und zwar habe ich drei Bilder, die Zusammen ein Bild ergeben. Diese Bilder habe ich untereinander. Gerne möchte ich diese Bilder genau in der Mitte einer Zelle haben. Gebe ich ihnen den Befehl align="middle" mit auf den Weg, sitzen sie ohne Zwischenraum exakt übereinander.

Nun ist das aber nicht gut, wie ich gelesen habe, als ich meine Seite auf Richtigkeit getestet hatte. Durch diesen Alignment-Befehl habe ich ja nun ein so gennantes "Spagetti Markup" und dies wertet meine Seite ja an dieser Stelle in der Richtigkeit ab.

Nehme ich das Alignment heraus und versuche sauber das html aufzubauen, ergibt sich zwischen den Bildern immer eine minimale Lücke.

Weiß jemand, warum dann solch eine Lücke entsteht und wie ich beide Interessen unter einen Hut bekomme? Ich suche schon im Netz und auch unter Self-html, aber werde nicht wirklich fündig, wie ich das hinbekommen kann, oder wie es besser geht.

Viele Grüße

von **Anzeige von ABAKUS** »

Beitrag von **r-alf** » 28.01.2010, 01:22

Das du ein Problem mit Bildern hast, sieht man schon an deinem Avatar

Google mal nach "css"

Beitrag von **Pfauli** » 28.01.2010, 01:32

Du meinst, die sauberste Lösung wäre über meine ausgelagerte CSS-Datei?
Ich hatte mich schon einmal in CSS eingelesen, um eine "bessere" Seite zu haben. Hinsichtlich Layout und Schriften bin ich auch voran gekommen und habe dazu gelernt. Leider jedoch habe ich nirgendwo etwas gefunden, was dem einen Bild der Webseite sagt: Positioniere Dich rechts und dem nächsten mittig.

Ich weiß, eine Tabelle auf meiner Webseite zu haben ist...sagen wir mal altbacken, aber alles über CSS mit Koordinaten - soweit bin ich noch nicht, das muss ich noch erlernen und helfe mir soweit mit Tabellen aus. Mein realer Job ist etwas ganz anderes, daher: Stück für Stück

Was ich jedoch gerne lernen wollen würde ist, warum durch den Befehl Alignment sich die Lücke zwischen den Blidern schließt und ohne überhaupt eine entsteht? Das verstehe ich nicht.

PS: Das Geld für einen Flug nach Pandora reichte nicht, daher konnte ich mir noch kein Avatar leisten

Beitrag von **r-alf** » 28.01.2010, 01:50

Wenn du das mit ccs nicht hinbekommst, dann nutze halt Tabellen. Den Usern ist das sowieso egal und den meisten Sumas auch. Der wesendlichste Vorteil von ccs liegt in der Ladezeit.

Beitrag von **Pfauli** » 28.01.2010, 02:08

r-alf hat geschrieben:Der wesendlichste Vorteil von ccs liegt in der Ladezeit.

Mhm ... okay. Da die Ladezeit ja auch ein Maß von vielen bei der Beurteilung ist, muss ich das wohl irgendwann auch angehen. Aktuell sagen mir Webseitentools, dass es noch so gerade i. O. ist.

Im Grunde liege ich jedoch richtig, oder? - Wenn ich den ein oder anderen "Spagetti-Markup" Eintrag zu viel auf einer einzelnen Seite habe, die Suchmaschinen meine Seite als "technisch schlecht ---> ab nach hinten in die Suchergebnisse" einstufen werden?

Nun ja. Trotzdem erst einmal danke für Deine Tipps.

Beitrag von **Hobby_SEO79** » 28.01.2010, 08:41

Ein div herum, Breite des div (width) definieren und dann margin (padding): 0 auto 0 auto;

in der globalen CSS Bilder vordefinieren mit:

Code: Alles auswählen

img &#123;border&#58;none;padding&#58;none;margin&#58;none;display&#58;block;&#125;

So werden die img in allen Browsern korrekt dargestellt.

Müsste klappen. Hoffe hab dich richtig verstanden.

Beitrag von **Mork vom Ork** » 28.01.2010, 10:34

Pfauli hat geschrieben:Und zwar habe ich drei Bilder, die Zusammen ein Bild ergeben.

Wenn sie ein Bild ergeben, warum speicherst du sie dann nicht einfach als ein Bild, anstatt sie in drei Teile zu zerstückeln? Die Beschreibung macht so erstmal keinen Sinn, das Loch hast du dir selbst gegraben.

Durch diesen Alignment-Befehl habe ich ja nun ein so gennantes "Spagetti Markup"

Nein, das ist nur altes HTML. Spaghetticode hast du, wenn das Chaos ausbricht und keine Sau sich mehr zurecht findet - das tritt zwar gerne mit altem HTML in Verbindung auf, kann man aber auch fein mit standardkonformem Code veranstalten.

und dies wertet meine Seite ja an dieser Stelle in der Richtigkeit ab.

Nein, das hängt davon ab, welchen Maßstab du ansetzt. Ist dein Maßstab beispielsweise HTML 3, kann deine Seite auch so vollkommen richtig sein.

ergibt sich zwischen den Bildern immer eine minimale Lücke.

Weiß jemand, warum dann solch eine Lücke entsteht

Bilder werden standardgemäß immer auf der Grundlinie der Zeile platziert, in der sie sich befinden (die Grundlinie ist jene, auf der alle Buchstaben stehen). Die kleine Lücke, die du siehst, ist jener Keller, in den Buchstaben wie g oder j und Satzzeichen wie das Komma hinunterlangen.

Du kannst die Lücke minimieren, indem du entweder die Zeilenhöhe (line-height:[Höhe des Bildes]px) anpasst oder das Bild nicht als Zeilenelement, sondern als Blockelement (display:block, quasi ein eigener Absatz) gestalten lässt.

Nichtsdestotrotz bleibt die eingangs gestellte Frage: Wenn die drei Bilder eh ein Bild ergeben sollen, dann speichere sie als ein Bild, nicht als drei. Mit der CSS-Lösung und auch mit dem align-Attribut übertünchst du die Ursache nur, aber beseitigst sie nicht.

Hobby_SEO79 hat geschrieben: in der globalen CSS Bilder vordefinieren mit:
Code: Alles auswählen
img &#123;border&#58;none;padding&#58;none;margin&#58;none;display&#58;block;&#125;
So werden die img in allen Browsern korrekt dargestellt.

Nein. Mal abgesehen davon, dass Bilder weder einen Außen-, noch einen Innenabstand, noch einen Rahmen haben, margin, padding und border also überflüssig sind (border nur in Zusammenhang mit a), sprengen mit so einer Einstellung sämtliche Bilder der Seite die Zeilen. Ich halte es für fragwürdig, einfach davon auszugehen, dass das immer so sein soll.

Beitrag von **Hobby_SEO79** » 28.01.2010, 11:25

Ja mit dem padding und margin hast du eig. Recht. Ich mach das immer in alle Elemente, weil manche Browser immer eine eigene Elemente-Definition haben. Sieht man auch sehr schön wenn man FF und IE vergleicht, wenn man <form>-Elemente nutzt. Bei Bildern ist das im Grunde genommen unerheblich.

Ich glaube border hab ich mit reingenommen, weil mir ein IE-Browser da immer drei Pixel mehr gemacht hatte. So krieg ich das in allen Browsern auf eine Höhe.

display, weil es auch Browser gab, welche den Text dahinter geschrieben haben und andere darunter. War meine Lösung der Vereinheitlichung. Kann man ja beim jeweiligen Bild nochma individuell abändern.

Beitrag von **Pfauli** » 28.01.2010, 12:41

Hallo Zusammen

Ich habe mich für die Teilung des Ursprungbildes meiner Startseite entschieden und dies in 3 Teile zersägt, da ich mittels Photoshop kleine Animationen eingespeist habe. Diese GIF-Animationen haben teils den Befehl einmalig zu handeln, aber auch (das Unterste ist eine Wasserspiegelung) unendlich zu agieren. Somit weise ich ja jeweils verschiedene Aufgaben zu. Würde ich das alles zusammen in ein Bild setzen, wäre dies nicht möglich.