Bilder links, Text rechts, OHNE umfließen, ohne Tabellen... Nur wie???

zwobot · 15.01.2009

HAT SICH SCHON DURCH REINEN ZUFALL VON SELBST ERLEDIGT!!! SORRY!!! ^^

Mal wieder so ne Newbie-Frage, entschuldigt... :rolleyes:

Alsoo, ich hab kleine Bilder mit 30x30px und rechts dazu Erläuterungen.
Die Erläuterungen sind mit umbruch in der Höhe viel größer als die Bilder. Mit tabellen darf ich nicht arbeiten (wurd mir verboten) und die Menü-2-Spalten-Anleitungen im Netz sind zu hoch für mich (hab heute erst mit CSS begonnen):'(

An sich klappt ja alles ganz gut, aber leider soll der text das Bild nicht umfließen.

So siehts momentan aus:

Bild1 BlindtextBlindtextBlindtextBlindtext
Bild1 BlindtextBlindtextBlindtextBlindtext
BlindtextBlindtextBlindtextBlindtextBlindtext

Bild2 BlindtextBlindtextBlindtextBlindtext
Bild2 BlindtextBlindtextBlindtextBlindtext
BlindtextBlindtextBlindtextBlindtextBlindtext

etc...

und so solls sein:

Bild1 BlindtextBlindtextBlindtextBlindtext
Bild1 BlindtextBlindtextBlindtextBlindtext
____ BlindtextBlindtextBlindtextBlindtext

etc...

Mein Code ist bis jetzt wie folgt:

((blablabla...))

<body>

<div id="box1">
<div>
<img src="Scratch_Icons/icon_photo.png" style="margin-right: 10px;" alt="webcam" name="webcam" width="30" height="30" hspace="1" vspace="1" align="left" id="webcam"/>
</div>
<div>
<p>
BlindtextBlindtextBlindtextBlindtextBli dtextBlindtextBlindtextBlindtextBlindtext Blindt extBlindtextBlindtext Blindtext
</p>
</div>
</div>

<div id="box2">
<div>
<img src="Scratch_Icons/icon_text.png" style="margin-right: 10px;" alt="text" name="text" width="30" height="30" hspace="1" vspace="1" align="left" id="text"/>
</div>
<div>
<p>
BlindtextBlindtextBlindtext BlindtextBlindtextBlindtext BlindtextBlindtextBlindt extBlindtextBlindtextBlindtextBlindtextBlindtext
BlindtextBlindtextBlindtextBlindte xtBlindtext
</p>
</div>
</div>

((etc...))

</body>
</html>

Gibts nicht nen einfachen Code, der

A) erlaubt, dass der text weiter rechts vom Bild steht und dabei

B) das umfließen verhindert?

Und falls es nur den schweren Weg gibt, könnt ihr mir dann sagen, wie ich das dann in CSS schreiben kann? Aber bitte so, dass das auch ein absoluter Vollhonk :kopfpatsch

also ich) nachvollziehen kann :danke:

Mir fällt nämlich nur son Mül ein wie

<img src="Scratch_Icons/icon_text.png" style="margin-right: 10px; MARGIN-BOTTOM: Texthöhepx" alt="text" name="text" width="30" height="30" hspace="1" vspace="1" align="left" id="text"/>

Und dass sowas ziemlicher Schwachsinn ist, kann ich mir schon denken...

dozi · 15.01.2009

AW: Bilder links, Text rechts, OHNE umfließen, ohne Tabellen... Nur wie???

Versuchs mal mit einem "Layout ohne Tabellen" : CSS 4 You - The Finest in Stylesheets

zwobot · 15.01.2009

AW: Bilder links, Text rechts, OHNE umfließen, ohne Tabellen... Nur wie???

Danke, aber das hätt mir kein Stück geholfen. ich bin aber durch pures Nachdenken und Ausprobieren auf die Lösung gestoßen.

Ich hab einfach die Stylevorgabe aus dem Bild rausgelöscht und dafür folgendes gemacht:

<p style="margin-left: 40px;">
BlindtextBlindtextBlindtextBlindtext BlindtextBlindtextBlindtext BlindtextBlindtext Blindtext BlindtextBlindtextBlindtext
</p>

Und es hat GEKLAPPT!

Man, war das einfach. Wieso steht sowas in keinem der Tutorials, die google so ausspuckt? Und warum müssen immer Menü-Spalten-Anleitungen herhalten, die kein Anfänger versteht? hab doch geschrieben, dass ich son verschachteltes zeugs noch nicht raffe...

Oder ist meine Lösung auch wieder unschön?

jens260181 · 15.01.2009

AW: Bilder links, Text rechts, OHNE umfließen, ohne Tabellen... Nur wie???

am besten du schreibst das so:

Code:

<p class="abstand">
BlindtextBlindtextBlindtextBlindtext BlindtextBlindtextBlindtext BlindtextBlindtext Blindtext BlindtextBlindtextBlindtext
</p>

in deiner css datei kannst du die klasse abstand mit .abstand ansprechen

Code:

....
.abstand{
margin-left: 40px;
}
....

das erleichert die später das pflegen der website

dozi · 15.01.2009

AW: Bilder links, Text rechts, OHNE umfließen, ohne Tabellen... Nur wie???

Ich denke das ist O.K. so. Man könnte nur grundsätzlich darüber nachdenken, ob man die Seite mehrspaltig aufbaut. Eine Spalte Bilder und eine Spalte Text. Aber um hierzu genaueres zu sagen, kenne ich natürlich dein Projekt zu wenig.
Trial and Error! Immer weiter so...

zwobot · 16.01.2009

AW: Bilder links, Text rechts, OHNE umfließen, ohne Tabellen... Nur wie???

Vielen lieben Dank, Jens. :desnemma:meine kleine Hausaufgabe wurde jetzt in die Website eingearbeitet und ich konnte deinen CSS-Code jetzt einfügen.

Danke, Dozi, :blumen:für den Vorschlag mit den Spalten, aber da es sich nur um 4 Bilder handelt und es auch mit großer Wahrscheinlichkeit nicht mehr werden, lohnt das hier nich. So siehts jetzt aus:

Und ich für meinen Teil hoffe einfach mal, dass ich die nächsten Wochen von weiteren CSS-Aufgaben verschont bleibe :mrgreen: