knut: bilder nebeneinander

Hallo,
ich möchte in css oder html bilder nebeneinander stellen.
Die Bilder sollen aber nach unten ausgereichtet werden.
Wichtig dabei ist dass ich keine festen Positionswerte eingeben darf,
außer vielleicht der abstand zu den Bildern.

Z.B. so:
..............xxxxx
xxxx..........xxxxx
xxxx...xxx....xxxxx
xxxx...xxx....xxxxx 3 Bilder nach unten ausgerichtet und nebeneinander (die Punkte einfach wegdenken).

Früher habe ich es mit einer Tabelle gelößt.
Da ich aber baierefreie Seiten machen will, darf ich eine Tabelle für grafische zwecke nicht mißbrauchen.

  1. Hallo,

    wenn sie einfach untereinander stehen sollen gib display:block an oder einfach ganz normal per <br/> oder <p></p>

    1. Hi,

      wenn sie einfach untereinander stehen sollen

      Was genau verstehst du an "nebeneinander" denn nicht?

      *scnr*

      MfG ChrisB

      1. Hi ChrisB,

        Hi,

        wenn sie einfach untereinander stehen sollen

        Was genau verstehst du an "nebeneinander" denn nicht?

        Die frage sollte lauten, welchen Teil von

        ich möchte in css oder html bilder nebeneinander stellen.
        Die Bilder sollen aber nach unten ausgereichtet werden.
        Wichtig dabei ist dass ich keine festen Positionswerte eingeben darf,

        hast du wie interpretiert? Ich versteh nur Bahnhof.

        ..............xxxxx
        xxxx..........xxxxx
        xxxx...xxx....xxxxx
        xxxx...xxx....xxxxx

        Und was diese darstellung klarmachen soll verstehe ich noch weniger.

        Grüße,
        Engin
         GYRO

        1. Hi,

          ..............xxxxx
          xxxx..........xxxxx
          xxxx...xxx....xxxxx
          xxxx...xxx....xxxxx

          Und was diese darstellung klarmachen soll verstehe ich noch weniger.

          Bilder (oder sonstige im Fluss befindliche Elemente) unterschiedlicher Hoehe nebeneinander, auf der selben Grundlinie ausgerichtet.

          MfG ChrisB

          1. Hi ChrisB,

            ..............xxxxx
            xxxx..........xxxxx
            xxxx...xxx....xxxxx
            xxxx...xxx....xxxxx

            Und was diese darstellung klarmachen soll verstehe ich noch weniger.

            Bilder (oder sonstige im Fluss befindliche Elemente) unterschiedlicher Hoehe nebeneinander, auf der selben Grundlinie ausgerichtet.

            Ist doch schon der default Wert, wenn man es ncht anders macht, das z.b. Bilder nebeneinander Gelistet werden, wenn kein Zeilen umbruch
            erzwungen wird.

            Grüße,
            Engin
             GYRO

            1. Aber nicht wenn eine Tabelle dabei ist.

  2. Hi,

    ich möchte in css oder html bilder nebeneinander stellen.

    "In CSS oder HTML" gibt es nicht.

    Es gibt nur Inhalte in HTML, deren gewuenschte Darstellung per CSS empfohlen wird.

    Die Bilder sollen aber nach unten ausgereichtet werden.

    http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align

    Wichtig dabei ist dass ich keine festen Positionswerte eingeben darf,
    außer vielleicht der abstand zu den Bildern.

    Entweder ganz absolut positioniert, oder gar nicht. "Normale Ausrichtung im Fluss, aber Abstaende per absoluter Positionierung" - sowas gibt es nicht.

    Nutze margin fuer Abstaende.

    MfG ChrisB

    1. Hallo,
      hat leider keine Auswirkung.
      Ich hatte vergessen zu erähnen dass das Bild neben einer Tabelle stehen muss.

  3. Hallo,
    ich habe ein Fehler gemacht das Bild muss neben einer Tabelle sein.

    1. Hi,

      ich habe ein Fehler gemacht das Bild muss neben einer Tabelle sein.

      Interessant, und?

      (Moechtest du nach dem gefragt haben, was sich mit der CSS-Eigenschaft float erreichen laesst?
      Gut, nehmen wir an, du haettest das getan - dann kannst du dich ja jetzt mal ueber dieses Stichwort informieren.)

      MfG ChrisB

      1. geht leider nicht.

        1. Hi,

          geht leider nicht.

          Glaubst du wirklich, dass du hier irgendwie weiterkommst, wenn du immer nur solche weitgehend gehaltsfreien Kurzstatements von dir gibst, anstatt mal vernuenftige Problembeschreibungen zu liefern?

          MfG ChrisB

          1. Hallo,
            ich habe jetzt float eingebaut
            <img style="float: right" src="bild1.gif" width="42" height="48">
            Das Ergebniss ist dass die Tabelle ganz links ist und das Bild ganz rechts. Außerdem sind die nach oben ausgerichtet.

            1. <div>
              <img style="float: right; vertical-align:bottom;" src="bild1.gif" width="42" height="48"><img style="float: right; vertical-align:bottom;"  src="bild2.gif" width="20" height="25">
              <table width="200" border="1">
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                  <td>&nbsp;</td>
                </tr>
              </table></div>
              Irgendwas mache ich falsch.

              1. Hi knut,

                Irgendwas mache ich falsch.

                Du hast ein float problem.

                Entwirr doch mal das Gestrüpp und ordne es richtig an,
                erst die Tabelle, die nicht in einem div stecken muss, stattdessen packst du deine
                Bilder in ein div und lässt dieses mal nach links floaten, zur not floatest du
                noch die Tabelle nach Links, bzw. du floatest nur die Tabelle nach Links und setzt das div mit
                den Bildern einfach daneben (ohne, vllt. auch mit float), wenn das nicht funktioniert probierst du...

                Falls du die Variante mit "alles floaten" anwendest, schliesse ich gegebenenfalls folge fragen wie
                "float 'zerreisst' Design" mit diesem Kapitel aus.

                Grüße,
                Engin
                 GYRO

              2. Hi,

                Irgendwas mache ich falsch.

                Ja. Du solltest Deine Tabelle links floaten und im Quelltext vor die Bilder setzen, die Bilder mit einem DIV gruppieren und dieses über margin-left auf Abstand halten. Schau Dir mal http://andrealenzing.de/koepfe.html an - das Menü ist positioniert und die Überschrift gefloatet. Die Bilder könnten auch unterschiedliche Höhen haben und würden dann pert Default an der Grundlinie ausgerichtet.

                freundliche Grüße
                Ingo

                1. Hallo,
                  es klappt schon besser, ich die Bilder sind auch richtig ausgerichtet,
                  aber nicht zur Grundlinie die bei der Tabelle ist, sonder zur Grundlinie des größten Bildes. Wenn das Problem noch gelößt wäre, wäre euch sehr dankbar.

                  <table width="200" border="1" style="float:left">
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <td>&nbsp;</td>
                    </tr>
                  </table>
                  <div style="float: left">
                  <img style="margin-left:150px" src="bild1.gif" width="42" height="48"><img vertical-align:bottom;"  src="bild2.gif" width="20" height="25">
                  </div>

                  1. Hi,

                    es klappt schon besser, ich die Bilder sind auch richtig ausgerichtet,
                    aber nicht zur Grundlinie die bei der Tabelle ist, sonder zur Grundlinie des größten Bildes.

                    <table width="200" border="1" style="float:left">...
                    </table>
                    <div style="float: left">
                    <img style="margin-left:150px" src="bild1.gif" width="42" height="48">

                    Der Div-Container um die Bilder bildet natuerlich einen eigenen Block, auf dessen Grundlinie die Bilder nun ausgerichtet werden - und die Hoehe dieses Containers wird durch das hoechste Bild bestimmt ...

                    MfG ChrisB

                    1. Ich hatte schon mehrere Varianten ausprobiert.
                      Auch wenn ich einen div block um die Tabelle und den Bilder lege(den alten entferne) kommt immer dass selbe Ergebniss.
                      <div style="float:left">
                      <table width="200" border="1" style="float:left">
                      <tr>
                      <td>&nbsp;</td>
                      </tr>
                      <tr>
                      <td>&nbsp;</td>
                      </tr>
                      <tr>
                      <td>&nbsp;</td>
                      </tr>
                      </table>
                      <img src="bild1.gif" width="42" height="48" align="baseline" style="margin-left:10px"><img vertical-align:bottom;" src="bild2.gif" width="20" height="25">
                      </div>
                      Wenn ich style="float:left" aus dem Table-Tag entferne, sind die Bilder auf der nächsten Zeile.
                      Auch hatte ich div durch p ersetzt und auch da kommt nicht das erwünschte Ergebniss.

                      1. Habe es jetzt hinbekommen.
                        "float" für zum Holzweg, es geht mit "display: inline".
                        Wenn ich bedenke wie ich hier von jemannd angemacht wurde der auf "float" geschworen hatte... lol

                        1. Hi knut,

                          Habe es jetzt hinbekommen.
                          "float" für zum Holzweg, es geht mit "display: inline".
                          Wenn ich bedenke wie ich hier von jemannd angemacht wurde der auf "float" geschworen hatte... lol

                          *PLONK

                          Grüße,
                          Engin
                           GYRO

                          1. Hi knut,

                            Habe es jetzt hinbekommen.
                            "float" für zum Holzweg, es geht mit "display: inline".
                            Wenn ich bedenke wie ich hier von jemannd angemacht wurde der auf "float" geschworen hatte... lol

                            *PLONK

                            Grüße,
                            Engin
                            GYRO

                            Du solltest auch vorher deine Lösung prüfen bevor du hier falsche Lösungen gibst!

                            1. Hi knut,

                              Du solltest auch vorher deine Lösung prüfen bevor du hier falsche Lösungen gibst!

                              Du solltest dir bei einer Problembeschreibung Mühe geben, diese verständlich und nachvollziehbar zu gestalten.

                              Wenn du willige helfer zum raten ermutigst, dann bleibt einem ja nichts anderes übrig.

                              Grüße,
                              Engin
                               GYRO

                    2. Außer viel Müll haben deine Tipps nix gebracht!