text rechts an bildern entlang

[H2SO4]

hy, ich möchte gerne am linken rand einige bilder untereinader stellen und rechts davon einen text. Habe jedoch das problem wie mache ich das.
mit img scr="xvy.gif" align=left> ist zwar der text rechts vom bild aber mehere bilder sind halt nebeneinander und nicht untereinander.Mit <br clear=all> schaffe ich zwar das die bilder untereinander sind aber der text halt auch.
Oder muss ich das mit css machen und die positionen festsetzen?

[Analfabeet]

Moin,

Oder muss ich das mit css machen und die positionen festsetzen?

Kannst Du:

float:left;
das img in p-Tags setzen, folgende p-Tags erscheinen rechts daneben...

clear:left;
geht wieder geradaeaus...

--Analfabeet

[Marc]

Hallo zusammen,

Oder muss ich das mit css machen und die positionen festsetzen?

Kannst Du:

float:left;
das img in p-Tags setzen, folgende p-Tags erscheinen rechts daneben...

clear:left;
geht wieder geradaeaus...

Ich bin mal gespannt, ob er mit Deinem Tipp zurecht kommt...

Du solltest in Zukunft versuchen, dich etwas kürzer zu fassen. :-)

Viele Grüße,
Marc.

[Analfabeet]

Mahlzeit,

Ich bin mal gespannt, ob er mit Deinem Tipp zurecht kommt...

Du solltest in Zukunft versuchen, dich etwas kürzer zu fassen. :-)

Ach ich Depp, gelegentlich ja:

<LINK REL="stylesheet" HREF="/nt.css" TYPE="text/css">
im HTMl-Header notieren.

<p class="linksbild">
<img ... alt="wichtiges Bild links neben dem Text">
</p>

<p>
Der Text steht nun rechts daneben...
</p>

<p>
Das hier auch...
</p>

<h2 class="cleft">Hier gehts wieder geradeaus</h2>

nt.css Datei:
p.linksbild {
 float:left;
 margin-right:20px;
}

.cleft {
 clear:left
}

--Analfabeet

[wahsaga]

hi,

hy, ich möchte gerne am linken rand einige bilder untereinader stellen und rechts davon einen text. Habe jedoch das problem wie mache ich das.
mit img scr="xvy.gif" align=left> ist zwar der text rechts vom bild aber mehere bilder sind halt nebeneinander und nicht untereinander.Mit <br clear=all> schaffe ich zwar das die bilder untereinander sind aber der text halt auch.
Oder muss ich das mit css machen und die positionen festsetzen?

Die Frage stellt sich doch wohl gar nicht - natürlich machst du sämtliche Darstellungsempfehlungen mit CSS. Alles andere wäre blödsinnig.

Packe die Bilder in einen Container, der so breit ist, dass sie darin untereinander dargestellt werden. Floate diesen Container nach links.

gruß,
wahsaga

[Marc]

Hallo zusammen,

hy, ich möchte gerne am linken rand einige bilder untereinader stellen und rechts davon einen text.

Am einfachsten wird es sein, die Bilder in ein eigenes div zu packen. Das sollte links floaten (CSS)

dazu sollte man sich aber ein wenig mit floats auseinadersetzen. Zum Beispiel hier in SelfHTML oder unter http://www.andreas-kalt.de/webdesign/tutorials/float-theorie

Viele Grüße,
Marc.

[H2SO4]

mh, mit den floats habe ich aber wie es scheint das selbe problem, wie ich es hätte wenn ich eine tabelle nehmen würde. Ich muss den einzelnen feldern eine konkrete breite zuweißen. Bei den Bildern ist das ja kein problem aber beim text. Dieser soll sich ja an der auflösung des jewiliegen bildschirms ausrichten. Wenn ich jedoch auch hier eine feste Breite angebe, ist entweder auf der rechten seite unnötig viel platz oder der benutzer muss bei jedem satz den bildschirm nach rechts srollen.

[wahsaga]

hi,

mh, mit den floats habe ich aber wie es scheint das selbe problem, wie ich es hätte wenn ich eine tabelle nehmen würde. Ich muss den einzelnen feldern eine konkrete breite zuweißen.

Welchen "Feldern"?
Das wichtigste ist erst mal, dass du dich vom Denken "in Tabellenzellen" befreist.

Bei den Bildern ist das ja kein problem aber beim text. Dieser soll sich ja an der auflösung des jewiliegen bildschirms ausrichten. Wenn ich jedoch auch hier eine feste Breite angebe, ist entweder auf der rechten seite unnötig viel platz oder der benutzer muss bei jedem satz den bildschirm nach rechts srollen.

Dann gebe halt für den Text keine Breite an.

gruß,
wahsaga

[H2SO4]

habe es doch gerade mal mit tabellen ausprobiert. Hat ja doch viel besser geklappt als ich dachte. Nur noch die frage. Wie bekomme ich den internetexplorer dazu mehere bilder untereinander mit einer leerzeile dazwischen anzuzeigen und sie nicht nebeneinander zu platzieren. (wenn alle in einer zelle sind) Bisher hat sowohl width, <br clear=all> und ein einfaches <br> bzw <p> nicht geklappt

[Marc]

Hallo zusammen,

habe es doch gerade mal mit tabellen ausprobiert.

Dir haben zwei Leute (wahsaga und ich) Tipps gegeben, wie es geht (gefloatetes div). Außerdem hast du noch einen Hinweis bekommen (und den nötigen Code), wie es alternativ geht, wenn Du bestimmen willst, wie viel Text neben einem Bild steht, bevor das nächste Bild kommt (von analfabeet).

Stattdessen setzt Du Tabellen ein. Wieso wunderst Du Dich eigentlich, dass Dein Versuch nicht funktioniert, obwohl Du nichts von dem tust, was Dir geraten wird?

Viele Grüße,
Marc.

[H2SO4]

war ja nicht böse gemeint :) hatte nur gerade während ich auf antworten wartete (konnte ja nicht wissen das es so schnell geht) mit tabellen versucht. Und bis auf die anordnung der bilder klappt es ja sehr gut.
Das mit dem float hatte ich mir ja noch durchgelesen, jedoch scheint es nach dem was ich gelesen habe, wichtig zu sein, das für jedes float eine feste breite angegeben wird, was ich ja bei dem text nicht gebrauchen kann. Beim dem anderen muss ich mich nochmal durcharbeiten.
Übrigens der text ist unabhängig von den bildern. Könnt ja mal draufschauen was ich machen möchte www.michaelmoebius.net/bilder/workshops.html links neben den text sollen einfach 4-5 bilder von beispielen usw. die nicht mit bestimmten stellen im text verbunden sind.

[wahsaga]

hi,

Das mit dem float hatte ich mir ja noch durchgelesen, jedoch scheint es nach dem was ich gelesen habe, wichtig zu sein, das für jedes float eine feste breite angegeben wird, was ich ja bei dem text nicht gebrauchen kann.

Du brauchst den Text weder zu floaten, noch ihm eine Breite zuzuweisen.

gruß,
wahsaga

[Marc]

Hallo zusammen,

war ja nicht böse gemeint :)

ist klar, aber Du solltest entweder auf Ratschläge hören ODER eigene Wege gehen. :-)

hatte nur gerade während ich auf antworten wartete (konnte ja nicht wissen das es so schnell geht) mit tabellen versucht. Und bis auf die anordnung der bilder klappt es ja sehr gut.

Also klappt es nicht.

Auch wenn ich es sonst nciht machen: bevor Du weiter mit Tabellen arbeitest:

Das Ganze sollte in einem bestimmten Bereich der Seite stattfinden. Den begrenzt mit einem umgebenden div

<div id="content"></div>

Da kommt EIN gefloatetes-div-Element hinein. und Deine Text. Das wars.

<div id="content">
  <div id="illustrations">
    <img src="bild1.jpg" alt="illustration1" />
    <img src="bild2.jpg" alt="illustration2" />
    <img src="bild3.jpg" alt="illustration3" />
  </div>
  <h1>Meine Bastelanleitungen</h1>
  <h2>Papierflugzeug</h2>
  <p>Papierflugzeuge bastelt man am besten aus Papier.</p>
</div>

In die EXTERNE CSS-Datei schreibst Du rein:

div#illustrations {
  float:left;
  width:bildbreite+8px; /* dadurch kleben die Bilder nicht direkt am Rand */
  text-align:center;    /* damit von den 8px vier links, vier rechts sind */
}

Viele Grüße,
Marc.