OliS: Zeilenumbrüche/text und Bilder ausrichten

Hallo!

Ich programmiere grad meine erste HP und hab dabei gleich mehrere Probleme...

1. Die Zeilenumbrüche, die ich im Notepad-Editor habe, werden im Browser (IE 6.0) übernommen. Wenn ich einen Zeilenumbruch im Editor habe (um den Quelltext übersichtlich zu gestalten), erscheint es im Browser so, als wenn ich das <br> tag verwendet hab.

2.Ich möchte ein Bild integrieren. Dieses soll rechts im Browser angezeigt werden, bündig mit dem Oberrand des Bildes soll der Text beginnen und ggf. unter dem Bild über die ganze Breite des Bildschirms laufen.
Hier der Quelltext:

<table width="100%">
<tr><td><p style="font-size:12pt">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxxxxa<br>
aaaaaaaaaiiiiiiiiiiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaxxxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiiiiiiiiiiiiiaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxxx<br>
xxxxxxaiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxx<br>
aaaaaaaaaaaaaiiiiiiiiiiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaxxxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaiiiiiiiiiiiia<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
xxxxxxxxxxaiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxxxxxxxaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxxxxxxxaaaaiiiiiiii<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaxxxxxx<br>
xaaaaiiiiiiiiiiiaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</td><td><img src="blabla.jpg" width="225" height="311" alt=""></td>
</tr>
</table>

Trotz des <tabele width="100%" tags ist das Browserfenster immer so breit, wie es die längste Textzeile plus die breite des Bildes erfordert.
Angeblich soll es so aber möglich sein, dass der Text automatisch so umbricht, dass ich nicht scrollen muss.

Wie im Quelltext zu sehen, hab ich jetzt erstmal den <br> tag verwendet. Bei 800x600 ist das auch OK, aber bei höherer Auflösung entstehen grosse Freiflächen.
Das muss doch besser möglich sein?

Noch ein Problem: Obwohl ich für den Text den tag <td valign="top" verwendet habe, beginnt er etwas zu tief - halt nicht bündig mit der Oberkante des Bildes. Warum?

Schon mal vielen Dank für eventuelle Antworten!

Gruß, Oli

  1. Hi Oli,

    ich habe dir das mal eben um ein paar attribute erweitert, das sollte schon eher so aussehen wie du willst. du mußt mehr formatieren mit attributen, sonst kann daraus nichts werden. also immer nachgucken was man zu einem tag alles dazuschreiben kann.

    <table width="100%" cellpadding="0" cellspacing="0" border="1">
    <tr><td valign="top" align="right">
    <p align="justify" style="font-size:12pt">aaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaa aaaaaaaa  aaaa  aa aaaaaxxxxxxxxa
    aaaaaaaa aiiiiii iiiia aaaaa aaaaaaaaaaaa a aaaaaaaaa aaaaaa aaaaaaaaaaaa
    aaaaaaa aaaaaaxxxxxxxx xaaaaaaa aaaaaaaaaaaaaaaa aaaa aaaaaaaaaa aaaaaa
    aaaaxxxx xxxxxxx aaaaaaaaaaaaaaaaa aa aaaaaaa aa aaaaaaaaaaa aaaaaaaaxxx
    xxxxxxaia aaaaaaa aaaaaaaaaaaaaaaaa xxxa aaaaaaaaaa aaa aaaaaaaaaaaaa
    aa aaaaaaaaaaaaaaaaa aaaaaaa aaaaxxx xxxxxxxxaaaaaaaaaaa aaaaaaaaaaaa
    aaaaaaaa aaaaaaaaaaaaa  aaaaaaaaaaaa aaa aaaaaxx xxxxx xxxxaaaaiiiiiiii
    aaaaaaaaa aaaaaaaa aaaaaaaaaaaaa aaaaa aaaaaaaaaa aaaaaaaaaa aaaxxxxxx
    xaaaaiii  iiiiii iiaaaaaaaaaaaa aaaaaaaa aaaaaaa</p>
    </td><td><img src="blabla.jpg" width="225" height="311" alt=""></td>
    </tr>
    </table>

    1. noch ne ergänzung:::

      ohne leerzeichen kann der text nicht umgebrochen werden, also habe ich ein paar eingefügt!!!!!

      1. Vielen Dank!

        Die Attribute haben kaum eine Auswirkung... werd mich trotzdem damit beschäftigen.

        Die fehlenden leerzeichen waren's!!!! Und damit schlag ich mich seit 2 Tagen rum!!!!!!

        Danke!

        Oli

  2. Hallo!

    Servus.

    1. Die Zeilenumbrüche, die ich im Notepad-Editor habe, werden im Browser (IE 6.0) übernommen. Wenn ich einen Zeilenumbruch im Editor habe (um den Quelltext übersichtlich zu gestalten), erscheint es im Browser so, als wenn ich das <br> tag verwendet hab.

    Hast du die "<html></html>" Tags ganz am Anfang und am Ende in deiner Datei?

    2.Ich möchte ein Bild integrieren. Dieses soll rechts im Browser angezeigt werden, bündig mit dem Oberrand des Bildes soll der Text beginnen und ggf. unter dem Bild über die ganze Breite des Bildschirms laufen.
    Hier der Quelltext:

    Nimm keine Tabelle, sondern setze das Bild direkt VOR den Text und verwende die Option -align="right"- (<img src="XY.jpg" align="right">)

    Trotz des <tabele width="100%" tags ist das Browserfenster immer so breit, wie es die längste Textzeile plus die breite des Bildes erfordert.
    Angeblich soll es so aber möglich sein, dass der Text automatisch so umbricht, dass ich nicht scrollen muss.

    Ja, das sollte eigentlich normal schon so sein. Dass eine Spalte NICHT umbricht, muss man eigentlich gesondert angeben...

    Wie im Quelltext zu sehen, hab ich jetzt erstmal den <br> tag verwendet. Bei 800x600 ist das auch OK, aber bei höherer Auflösung entstehen grosse Freiflächen.
    Das muss doch besser möglich sein?

    Warum hast du hinter JEDER Zeile den <br>-tag? Setz' den nur, wenn du einen Zeilenumbruch, unabhängig vom automatischen, erzwingen möchtest.

    Noch ein Problem: Obwohl ich für den Text den tag <td valign="top" verwendet habe, beginnt er etwas zu tief - halt nicht bündig mit der Oberkante des Bildes. Warum?

    Vielleicht hängt es mit der Schriftart zusammen, vielleicht mit den Standard-Abständen zwischen Tabellenrahmen und Inhalten. Schau im Selfhtml unter Tabellen nach, wegen den cellpadding - und spacing - Eigenschaften.

    Gruß, Oli

    Matthias Wolf

    1. Hast du die "<html></html>" Tags ganz am Anfang und am Ende in deiner Datei?

      Ja!

      Nimm keine Tabelle, sondern setze das Bild direkt VOR den Text und verwende die Option -align="right"- (<img src="XY.jpg" align="right">)

      Das war mein erster Versuch. Scheinbar ist das aber im IE 6.0 nicht mehr möglich. Auch bei einer anderen HP (skurillerweise einem html-Kurs) klappt es nicht. Der Text läuft einfach unter dem Bild durch.

      Zum Zeilenumbruch: Mir haben nur Leerzeichen gefehlt!

      Warum hast du hinter JEDER Zeile den <br>-tag? Setz' den nur, wenn du einen Zeilenumbruch, unabhängig vom automatischen, erzwingen möchtest.

      Siehe oben. Es gab keinen Zeilenumbruch.

      Bleibt das Problem der ungewollten Zeilenumbrüche...

      Gruß, Oli

  3. Ich hab noch immer das Problem, das die Oberkante von Text und Bild nicht bündig sind.
    Das liegt wohl daran, dass quasi über der ersten Buchstabenzeile nochmal soviel Platz gelassen wird, wie zwischen den einzelnen Zeilen.

    Weiss jemand, wie ich diesen Zwischenraum entfernen kann?

    Danke, Oli