Problem mit floaten von listItems

Ich möchte gern ein Bild und rechts daneben einen Text positioneren. Der Text sollte aber als Block neben dem Bild dargestellt werden.

Als Erstes hab ich deshalb das Bild und die Textausgabe (is von nem CMS) in jeweils einen div-Container gepackt und diese mit float versehen. Irgendwie funktioniert das floaten von listItems aber nicht.

Mein zweiter Versuch war dann die Textausgabe in Elemente zu packen. Jetzt klappt zwar die Anordnung aber der Text wird natürlich nicht als Block angezeigt. display:block ändert daran leider auch nichts.
Ich hoff ihr könnt mir da weitehelfen. Bin schon fast am verzweifeln… :neutral_face:
unten ist noch der Quelltext dazu:

[code]

Icon 1
<?php echo $this->listItem ['Erklaerung']['label'];?>: <?php echo $this->listItem ['Erklaerung']['content']; ?>
[/code]

greetz

Versuch mal sowas:

<div style="margin-bottom:10px;">
<div style="float:left;width:50px;"><img src="/tl_files/Idison/Erklaerung1.png" width="50" height="50" alt="Icon 1"></div> 
<div style="margin-left:50px;"><b><?php echo $this->listItem ['Erklaerung']['label'];?>:</b> <?php echo $this->listItem ['Erklaerung']['content']; ?></div>
</div>

Edit: “width” hinzugefügt ^^"

Von welcher Art sind denn diese ‘listItems’?
Das hört sich sich sehr nach einer Liste und Listenelementen
an, die können aber nicht in einem b-Element auftauchen.
Könnte also sein, daß da was mit der kompletten Struktur nicht
stimmt.
Bei dem float könnte man auch mal explizit die Breite angeben.
Daß man das nicht unbedingt (bei Blockelementen) muß, wurde
in CSS2.1 wohl eingeführt, da müßte man dann mal nachgucken,
welche Breite CSS2.1-fähige browser da nehmen täten. Ältere
werden da jedenfalls immer Probleme bereiten. Man kann da auch
mal testweise einen sichtbaren Rahmen drum machen, dann sieht
man, wie breit das Element ist, auf welches float angewendet
wird.
Ob das float Elemente nebeneinander anordnet, hängt auch
davon ab, ob der eingefügte Inhalt eine bestimmte Breite hat, die
gegebenenfalls zu groß sein kann. Um das zu beurteilen, müßte
man das gesamte Dokument samt Stilvorlage sehen
(URI angeben).

@Balmung: danke, auf die Idee bin ich gar nicht gekommen, das über dem Außenabstand zu machen. Funktioniert auch einwandfrei. :slight_smile:

@hoffmann: Welche Art von listItems das genau sind weiß ich leider auch nicht. Das ganze läuft auf Typolight mit ner Erweiterung zum speichern von Formulardaten. Der Entwickler davon hat mir gesagt ich soll die Daten dann über solche listItems abrufen. Ich weiß bloß das das Ganze aus einem assoziatives Array, indem jedes Element glaub wieder aus mehreren Arrays besteht, z.B. dem Titel und dem Inhalt des Elements, zusammensetzt.
Aber ich hab das jetzt mal in nen paar Browser ausprobiert und es funktioniert soweit.
kannst dir ja mal trotzdem unter http://idison.de/index.php/eure-brandversuche/details/calcium.html anschauen.

greetz

Das ist ein span-Element und ansonsten Text, hat also mit Listen
nichts zu tun, das kann man auf jeden Fall in ein div packen, ist
also kein Problem.
Da die gesamte Konstruktion ja nur aus div und span besteht,
bleibt die inhaltliche/semantische Bedeutung sowieso komplett
im Dunkeln.

Das hier in den Zitaten zu sehende b habe ich auch gar nicht
gesehen, scheint irgendwie durch das span ersetzt zu sein.

Zum Inhalt - ich hatte immer den Eindruck, daß das Natrium
deutlich heftiger knallt. Bei Li und Ca hat man immer Mühe, den
Kram mit Wasser wieder sauber zu bekommen, weil das nur so vor
sich hinschmurgelt. Bei K wird es schon brenzlig, wenn man nur an
was Feuchtes denkt. Na entferne ich aus meiner Apparatur immer
noch einfach mit Wasser (mit Schutzbrille), bei Li und Ca braucht
es schon heißes Wasser und Geduld, damit das Zeug mal
wegreagiert ;o) Gerade habe ich in meinem Experiment K in
meiner Atomstrahlquelle. Muß ich mir noch schwer überlegen,
wie ich das wieder sauber bekomme, ohne eine Explosion zu
riskieren …
Ganz böse wird es, wenn um das Na (oder K) eine Oxidschicht ist,
wenn man es ins Wasser wirft, da kann einem mit einer
undefinierten Verzögerung der ganze Mist sehr heftig explodieren.
Hatte ich schon mal unter einem gesicherten Abzug ;o)

das ganze sieht jetzt so aus: [code]

Durchfuehrung
<?php echo $this->listItem ['Durchfuehrung']['label'];?>: <?php echo $this->listItem ['Durchfuehrung']['content']; ?>
[/code] Wie oben beschrieben hat ich halt Probleme die $this->listItem im Div-Container zu floaten. Das b hab ich jetzt auch in css gemacht, da ich auch die Farbe ändern wollt. Aber jetzt funktionier ja auch alles... :slight_smile:

Die Versuche in diesem Bereich haben wir nicht selber gemacht. Durch ein Formular kann da jeder seine Experimente mit Bilder hochstellen. Wenns fertig ist (was schon fast der Fall ist) kannst du auch gerne deine Versuche vorstellen. würd mich freuen…
Mit Natrium haben wir selber auch schon mit größeren Mengen experimentiert (is unter Explosionen). Die Reaktion war da schon sehr heftig, aber bei Calcium waren es ja auch nur sehr geringe Mengen. Muss ich mal nochmal nachfragen wie stark das wirklich reagiert hat. Wobei man bei Calcium glaub generell das Problem hat die Oxidschicht abzubekommen.
In der Schule ham mer Cäsium in Glas eingegossen. Das würde dann schon mit der Luftfeuchtigkeit reagiern… :smiley:

greetz

Wenn es so geht mit dem CSS, ist das Hauptproblem ja
gelöst. Das Attribute style sollte man nach Möglichkeit schon
vermeiden und das ganze CSS in einer externen Datei
unterbringen, dann kann man im Bedarfsfalle das Design auch
einfacher austauschen oder auch alternative Stile anbieten.

Einen Überblick über das Experiment in der einfach verdaulichen
Fassung gibt es hier:
drohoffmann.gmxhome.de/os/index.html

Das ist auch nicht dazu gedacht, daß einem was explodiert,
man betreibt das Experiment im Hochvakuum. Nur irgendwann
ist die Strahlquelle leer und der Detektor mit dem Zeug verdreckt,
da muß man es dann aufmachen und saubermachen.
Da hat man dann über einen größeren Bereich teils mehrere
Millimeter dicke Schichten von den Metallen in der Apparatur
sitzen.
Ganz schlaue Leute wollten das früher auch mit n-Heptan
absichern. Gab dann aber den einen Sommer an einem Tag mit
hoher Luftfeuchtigkeit einen heiklen Zwischenfall - reines Natrium
erhitzte sich durch Luftfeuchtigkeit, entzündet dabei das n-Heptan
und es gibt eine gewaltige Stichflamme. Gut, ist keinem was
passiert, aber seitdem mache ich da nur noch mit Wasser sauber,
das zischt und dampft zwar heftig, ist aber berechenbarer als
das angebliche Absichern mit brennbaren Flüssigkeiten - die
eignen sich gut zum Lagern, wenn das Natrium nicht gerade
heiß ist ;o)