EKKi: HTML Darstellung - Firefox vs IE 8

Beitrag lesen

Mahlzeit Iron Crusher,

Aus diesem Grunde bin ich doch erst hier. Aus Referenzen, Einführungen, Guides, Tutorials oder sonstwas werde ich bei einigen Fragen nicht schlauer, da sie dort nicht beantwortet werden. Um dies zu ändern, muss ich mich an andere Menschen wenden, die Ahnung davon haben.

Das ist richtig. Diese anderen Menschen wissen aber nur, welche konkreten Probleme Du hast, wenn du diese so genau wie möglich benennst - und dazu Deine bisherigen Lösungsversuche detailliert aufzeigst und Deine Gedanken umfangreich ausformulierst. Funktionierende Glaskugeln und Brain-Web-Interfaces wirst Du hier im Forum leider nicht finden. :-)

vertical-align habe ich schon vor einiger Zeit probiert, ich weiß nicht mehr genau zu welchem Schluss ich damals gekommen bin, jedenfalls hat das nicht so funktioniert wie ich erhofft hatte. Möglich, dass andere Browser diese Eigenschaft nicht kannten etc.

Definiere "andere Browser". Versuche, das damalige Problem nachzustellen. Vielleicht kann Dir auch dabei hier geholfen werden. Ein einfaches "geht aber nicht" hilft nur keinem potentiellen Helfer weiter ...

Das hilft mir leider nicht weiter. Ich weiß immer noch nicht, wie ich die Darstellung, die man auf dem Screenshot sehen kann, am sinnvollsten und logischsten umsetze.

Das kann ich mir - wie gesagt - erst heute abend anschauen.

Wenn ich das Template jetzt neu bauen würde, würde ich wahrscheinlich einen div-container nehmen als Grund-Mutterelement.

Warum? Es gibt <body>.

Dort hinein kommen dann lauter andere div-container,

Warum? Willst Du so viel gruppieren?

die die Informationen enthalten, die ich gerne anzeigen würde (Gruppenname, ID, Name, etc). Hierbei würde ein div-container genau eine Information enthalten, d. h. die Grundidee eines divs etwas zu gruppieren würde missachtet werden.

Richtig. Frage Dich: Was wird auf der Seite dargestellt? Genau eine Gruppe? Ist dann nicht der Gruppenname logisch bzw. semantisch so etwas wie die Überschrift der Seite? Also <h1> drumherum ... usw.

Sind es mehrere Gruppen? Also eine Auflistung? Alles andere außer <ul> oder <ol> wäre in dem Fall falsch.

Oder ist es eine tabellarische Übersicht von Gruppen bzw. deren Eigenschaften (wie ID, Name, ...)? Dann wäre alles andere außer *EINER*(!!!) Tabelle falsch.

Hat das Mutterelement keine feste Größe, sondern eine, die expandierbar ist, so würde mir ein Angabe wie z. B. margin-top: 20px nichts bringen. Grund dafür ist, dass der Abstand von 20px zwischen Rand und des eigentlichen Elements fix ist, unabhängig von der Größe des gesamten Mutterelements.

Ja und? Du willst ein flexibles Layout, das sich der Größe des Anzeigebereichs bzw. der Schriftgröße oder dem Zoom-Faktor des Benutzers anpasst? Dann nutze <http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische@title=eine passende Maßeinheit>.

Jetzt füge in den Muttercontainer ein Bild ein (<img>). Das Bild ist 50px groß und 40 px breit. Zudem verfügt es über margin-left: 50% (um nicht überlappend mit dem ersten div zu sein (wobei ich mir nicht sicher bin, ob das bei img auch erforderlich ist. Texte werden jedenfalls automatisch eingerückt))
Wenn ich nun mit festen px-Werten arbeiten würde, um eine vertikale Zentrierung zu erreichen, würde ich diesem img-Element margin-top: 25px zuweisen.Was aber, wenn der Text, der sich in dem anderen div-container befindet, über mehr Zeilen verfügt? Dann ist der gesamte Kasten höher als 100px und meine margin-top: 25px bringt mir dann auch nichts mehr.

Versuch doch mal Folgendes:

img {  
  position:   relative;  
  top:        -25px;  
  margin-top: 50%;  
}

Das sollte das Bild in seinem umgebenden Element ausgehend von einer vertikalen Zentrierung 25px (die halbe Bildhöhe) nach oben verschoben darstellen. Wenn's so direkt nicht klappt, probiere entsprechend ein wenig herum.

Feste px-Werte bei Eigenschaften wie margin-top, die einem verschachtelten Element zugewiesen werden, sind dann unnütz, wenn der Abstand zwischen Ober- und Unerkante des Mutterelementes variabel ist.

Jein. Es kommt darauf an, um welche Kindelemente es sich handelt, was sie beinhalten und wie sie dargestellt werden.

MfG,
EKKi

--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|