Hallo Leute,

nach langer Abstinenz bin ich nun auch mal wieder im HTML Forum und bitte um Eure Hilfe, da ich schon seit gefühlten 5000 Stunden an einem mir nicht schlüssigen Problem mit HTML/ CSS hantiere.

Es geht um folgendes kleines Code-Fragment, dass ich um das Style-Attribute mit den Eigenschaften "border: 1px farbe solid" ergänzt habe, um die Darstellung im nachfolgenden Screenshot zu zeigen. Hier der Code-Schnipsel:

HTML-Code:

<div  style="border: 1px red solid">
                        <div class="cursor" style="border: 1px black solid"><span id="spacer_maxi" style="display: none" style="border: 1px black solid">&nbsp;</span><img src="gfx/pfeil.png" alt="Cursor" style="border: 1px green solid; display: block; margin-top: 9px;" id="cursor_maxi" /></div>
                        <h2 style="border: 1px yellow solid" class="fix activeTeam" onclick="loadTeam('maxi'); return false" id="link_maxi">Maxi Mustermann</h2>
                        <img style="border: 1px blue solid" src="gfx/xing_icon.png" alt="Kontaktinformationen zu Maxi via XING" onclick="window.open('http://www.xing.com/profile/Maxi___Mustermann98645'); return false;" class="cursor" />
                    </div>
                        
                        <div class="cursor"><span id="spacer_max">&nbsp;</span><img src="gfx/pfeil.png" alt="Cursor" style="display: none; margin-top: 9px;" id="cursor_max"/></div>
                        <h2 class="fix inactiveTeam" onclick="loadTeam('max'); return false" id="link_max">Max Mustermann</h2>
                        <img src="gfx/xing_icon.png" alt="Kontaktinformationen zu Max via XING" onclick="window.open('http://www.xing.com/profile/Max___Mustermann865'); return false;" class="cursor"/>
                        <div class="clearDIV"></div>

Geplant ist eigentlich, dass das Ganze so aussehen soll: http://img20.imageshack.us/img20/9135/soistrichtig.jpg (Anmerkung: Originalnamen wurden ersetzt, daher auch diese etwas unsaubere Grafik).

Leider aber zeigt sich zwischen den beiden Namen ein viel zu großer Abstand, der sich mit den herkömmlichen Mitteln (margin: 0; padding: 0; height: 20px; max-height: 20px; line-height: 20px) nicht beseitigen lässt. Alles natürlich per Style-Attribut probiert, um Überschreibungen durch Definitionen im CSS-File zu unterbinden.
So sieht das Ergebnis aktuell aus (mit den farbigen Borders. Der Freiraum ist, wie zu sehen ist, auch nicht durch irgendein unsichtbares Element blockiert): http://img210.imageshack.us/img210/7...ohnemargin.jpg

Ich hoffe, dass Ihr mir helfen könnt.

Vielen Dank und Beste Grüße
mille

Hi.

Zitat von mille

Leider aber zeigt sich zwischen den beiden Namen ein viel zu großer Abstand, der sich mit den herkömmlichen Mitteln (margin: 0; padding: 0; height: 20px; max-height: 20px; line-height: 20px) nicht beseitigen lässt.

Und auf welches Element hast du konkret margin:0 angewendet, um den Außenabstand auf null zu setzen? Etwa beim <div>-Element?

Den Abstand zum unteren roten Rahmen würde ich in deinem Schnappschuß eindeutig dem <h2>-Element zuschreiben, das, für ein Block-Element typisch, mit einem voreingestellten vertikalen Außenabstand einen Absatz im Textfluß erzeugt, den du offensichtlich nicht berücksichtigt hast.

Um solchen Fällen vorzubeugen, und auch diskrepante Darstellungen zwischen der IE-Familie und den übrigen Browsern zu vermeiden, empfiehlt es sich, zu Beginn des Stylesheets mit dem Universal-Selektor * die Initialwerte der margin- und padding-Eigenschaft für alle im HTML-Dokument enthaltenden (Block-)Elemente zunächst auf null zurückzusetzen, und im weiteren Verlauf des Stylesheets für das/die Element/e einen Außen- und/oder Innenabstand einzurichten, wo er tatsächlich erwünscht ist.

Code css:

1 2 3 4

* { margin:0; padding:0; }

Und eine Bitte zum Schluß: Wenn offensichtlich ein CSS-Problem vorliegt, richte dich zukünftig mit deiner Frage direkt an das Fachforum, anstatt im "HTML"-Forum, und poste neben deinem HTML-Code auch das dazugehörige Stylesheet, damit man überhaupt deine konkreten Formatierungen nachvollziehen kann.

Screenshots von der Soll- und Ist-Darstellung sind zwar hilfreich, um das Problem zu illustrieren, aber die Ursache lässt sich aus ihnen nicht immer mit Gewißheit ablesen, sondern lassen dann nur Mutmaßungen zu, die auch schon mal völlig daneben liegen können, womit dir nicht geholfen wäre, und so nicht in deinem Sinne sein dürfte.

mfg Maik