divejbba: Mehrere unterschiedlich große Dinge nebeneinander

Hallo,

ich möchte mehrere unterschiedlich große Teile unterschiedlichster Art (Images, Text, ...) nebeneinander auf gleicher Höhe platzieren. Und das nur mit Hilfe von CSS.

Aber da das Bild so groß ist, klebt der Text (Text(1) & Text(2)) rechts unten am Bild dran. hier: http://home.arcor.de/divejbba/test/index.html

Wie bekomme ich das so hin, wie hier? http://home.arcor.de/divejbba/test/museum.html

Hier habe ich das mit Tabellen gemacht, aber das will ich ja nicht mehr.

MfG
divejbba

  1. Hallo,

    Aber da das Bild so groß ist, klebt der Text (Text(1) & Text(2)) rechts unten am Bild dran. hier: http://home.arcor.de/divejbba/test/index.html

    Ein vertical-align:top; für das Bild und die SPAN-Elemente sollte helfen.
    PS: Seit wann hat das IMG-Element ein End-Tag </img>?

    Wie bekomme ich das so hin, wie hier? http://home.arcor.de/divejbba/test/museum.html
    Hier habe ich das mit Tabellen gemacht, aber das will ich ja nicht mehr.

    Das sieht aber sehr nach tabellarischen Daten aus. Dafür ist eine Tabelle _nötig_. DIV-SPAN-Suppen sind _nicht_ besser als Tabellen für das Layout. Trennung von Struktur und Layout bedeutet nicht, dass HTML nur noch zwei Elemente kennen sollte.

    viele Grüße

    Axel

    1. Ein vertical-align:top; für das Bild und die SPAN-Elemente sollte helfen.

      oki, das werde ich mal probieren.

      PS: Seit wann hat das IMG-Element ein End-Tag </img>?

      hmm, ich glaube irgendwo gelesen zu haben, das neuerdings ALLE Tags wieder geschlossen werden müssen. Deswegen hat man doch auch so komische Konstrukte wie diese hier eingeführt "<p />"

      Das sieht aber sehr nach tabellarischen Daten aus. Dafür ist eine Tabelle _nötig_. DIV-SPAN-Suppen sind _nicht_ besser als Tabellen für das Layout. Trennung von Struktur und Layout bedeutet nicht, dass HTML nur noch zwei Elemente kennen sollte.

      O.K. ds mag schon sein. Aber bevor ich nicht weiß wie die dive/span Suppe aussieht, kann ich ja schlecht beurteilen, ob es mit table nicht besser wäre ;-)

      Aber danke für Deine Antwort.

      MfG
      divejbba

      1. Hallo,

        PS: Seit wann hat das IMG-Element ein End-Tag </img>?
        hmm, ich glaube irgendwo gelesen zu haben, das neuerdings ALLE Tags wieder geschlossen werden müssen.

        Tags zu schließen ist etwas anderes als End-Tags zu verwenden. Das IMG-Element ist ein Element ohne weiteren HTML-Inhalt. Es hat nur ein Tag. Alle Informationen zum Image stehen dort drin. In HTML4, welches Du laut Doctype verwendest, sieht das so aus:
        <img src="vignette01.jpg" alt="Vignette">

        In XHTML, wo man alle Tags schließen muss, sähe es so:
        <img src="vignette01.jpg" alt="Vignette" />
        aus. Dann musst Du aber auch den entsprechenden Doctype angeben. In XML könntest Du
        <img src="vignette01.jpg" alt="Vignette"></img>
        schreiben, sollst es aber in XHTML besser lassen.
        http://www.w3.org/TR/xhtml1/#guidelines

        Deswegen hat man doch auch so komische Konstrukte wie diese hier eingeführt "<p />"

        Wo?
        Das P-Element ist nicht leer. Es muss in XHTML zwingend ein End-Tag haben.
        http://www.w3.org/TR/xhtml1/#diffs

        viele Grüße

        Axel

        1. Tags zu schließen ist etwas anderes als End-Tags zu verwenden. ...
          <img src="vignette01.jpg" alt="Vignette">

          In XHTML, wo man alle Tags schließen muss, sähe es so:
          <img src="vignette01.jpg" alt="Vignette" />
          aus. Dann musst Du aber auch den entsprechenden Doctype angeben. In XML könntest Du
          <img src="vignette01.jpg" alt="Vignette"></img>
          schreiben, sollst es aber in XHTML besser lassen.

          Ja, Du hast ja Recht. Ich bin mir dabei immer nicht so sicher. Aber mir ist das mit dem Doctype, End-Tags usw. bei der Entwicklung der Webseiten eigentlich immer egal. Zum Schluss jage ich es ja doch durch den Validator und der meckert immer überall da, wo ich son Schrott geschrieben habe ;-)

          Mir ging es jetzt eigentlich nur um die CSS, weil ich da bis jetzt noch totaler Anfänger bin.

          MfG
          divejbba