Smiley: Bildergalerie (mit float) im DIV Container positionieren

Hallo Forum,

ich finde Rahmen mit Text unter den Bildern ganz praktisch und hab mir dazu folgendes CSS gebaut:

ul.img {
 background-color: #CCCCCC;
 list-style: none;
 padding:5px;
 border-right: 1px solid #666666;
 border-bottom: 1px solid #666666;
 border-top: 1px solid #e9e9e9;
 border-left: 1px solid #e9e9e9;
 -moz-border-radius:8px;
}
.img li {
 font-size: 0.8em;
 text-align: center;
}
.img li img {
 border:none;
}
.links {
 float:left;
 width: auto;
 margin:0 0.5em 0.3em 0;
}
.rechts {
 float:right;
 width: auto;
 margin:0 0 0.3em 0.5em;
}
In HTML werden die Bilder folgendermaßen aufgerufen:

<ul class="img links"><li><a href="url()" target="_blank">
<img src="pfad" width="67" height="74"></a>
<br>Text 1</li></ul>

<ul class="img links"><li><a href="url()" target="_blank">
<img src="pfad" width="63" height="74"></a>
<br>Text 2</li></ul>

Das sieht auch ganz gut aus und die Bilder werden schön hintereinander aufgereiht. Auch die Links funktionieren. Aber ...
Die ganze Galerie möchte ich in einem DIV Container haben.
Das CSS dafür lautet:

.content {
 background-color: #e9ffe9;
 text-align: left;
 font-size: 1em;
 padding: 1em;
 margin: 0.5em 0.1em 0.5em 0.1em;
 border: 2px solid #6EBD80;
 -moz-border-radius: 8px;
}

Aufgerufen in HTML wird er mit

<div class="content">

Dann kommt die oben genannte Bildergalerie mit vielen <ul .... ></ul> hintereinander weg.

</div>

Leider liegt die Bildergalerie jetzt nicht in dem .content Rahmen. Sowohl IE als auch FF zeichnen mir einen leeren .content Rahmen und die Bilder liegen unabhängig vom DIV Rahmen darüber.
Wie kriege ich die Bilder in den DIV Rahmen und bringe den DIV Rahmen dazu, sich in Höhe und Breite anzupassen - abhängig von der Anzahl der Bilder ?
Hat jemand dazu eine Idee ? Dazu muss ich sagen, ich bin noch Newbi bei CSS und die Seite ist auch noch nicht im Netz, sodass man sie sich leider noch nicht ansehen kann.

  1. Hi,

    Leider liegt die Bildergalerie jetzt nicht in dem .content Rahmen.

    leider bezieht die Berechnung von height:auto gefloatete Inhaltselemente nicht mit ein, sofern das Element selbst nicht gefloatet ist. Das hatten wir aber schon ein paar (Dutzend) mal.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Hi Cheatah,

      vielen Dank für Deine schnelle Antwort aber...

      Hi,

      Leider liegt die Bildergalerie jetzt nicht in dem .content Rahmen.

      leider bezieht die Berechnung von height:auto gefloatete Inhaltselemente nicht mit ein, sofern das Element selbst nicht gefloatet ist.

      ??? Was heißt das ? Bitte bedenke .. ich bin CSS Newbi.

      Das hatten wir aber schon ein paar (Dutzend) mal.

      Ich bin gerade eben Forumsmitglied geworden und konnte leider noch nicht alle Beiträge lesen. Sorry.

      Cheatah

      1. Hi Smiley!

        leider bezieht die Berechnung von height:auto gefloatete Inhaltselemente nicht mit ein, sofern das Element selbst nicht gefloatet ist.
        ??? Was heißt das ? Bitte bedenke .. ich bin CSS Newbi.

        Das du .content auch floaten musst, damit der Rahmen um die eingeschlossenen gefloateten Objekte angezeigt wird.

        Das hatten wir aber schon ein paar (Dutzend) mal.
        Ich bin gerade eben Forumsmitglied geworden und konnte leider noch nicht alle Beiträge lesen. Sorry.

        Das ist schlecht. Bei uns ist es Pflicht zumindest das Archiv des laufenden Jahres auswendig zu kennen.

        MfG H☼psel

        --
        "It's amazing I won. I was running against peace, prosperity, and incumbency."
        George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
        Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
        1. Hi Smiley!

          leider bezieht die Berechnung von height:auto gefloatete Inhaltselemente nicht mit ein, sofern das Element selbst nicht gefloatet ist.
          ??? Was heißt das ? Bitte bedenke .. ich bin CSS Newbi.

          Das du .content auch floaten musst, damit der Rahmen um die eingeschlossenen gefloateten Objekte angezeigt wird.

          Na, das ist doch noch mal ne Antwort, mit der ich auch was anfangen kann. Danke !

          Das hatten wir aber schon ein paar (Dutzend) mal.
          Ich bin gerade eben Forumsmitglied geworden und konnte leider noch nicht alle Beiträge lesen. Sorry.

          Das ist schlecht. Bei uns ist es Pflicht zumindest das Archiv des laufenden Jahres auswendig zu kennen.

          Ups, wo bin ich denn hier gelandet ?

          MfG H☼psel

          1. Hi Smiley!

            Na, das ist doch noch mal ne Antwort, mit der ich auch was anfangen kann. Danke !

            Wie wär´s mal mit ´ner Frage nach dem Warum! :)

            Ups, wo bin ich denn hier gelandet ?

            Das frage ich mich seit meiner Geburt.

            MfG H☼psel

            --
            "It's amazing I won. I was running against peace, prosperity, and incumbency."
            George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
            Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
      2. hi,

        ??? Was heißt das ?

        Was "heißen" diese vielen unnötigen Fragezeichen?

        Bitte bedenke .. ich bin CSS Newbi.

        Wenn du selber weißt, dass du noch ein lückenhaftes Wissen hast - dann bemühe dich bitte auch, es soweit wie möglich selbstständig zu erweitern.

        Ich bin gerade eben Forumsmitglied geworden und konnte leider noch nicht alle Beiträge lesen. Sorry.

        Das verlangt auch keiner.
        Aber es gibt sowohl in selfhtml ein sehr gutes Kapitel über CSS, als auch hier für das Forum eine Suchfunktion.

        So, und jetzt denke über Cheatahs Aussage bitte noch mal etwas intensiver nach:

        leider bezieht die Berechnung von height:auto gefloatete Inhaltselemente nicht mit ein, sofern das Element selbst nicht gefloatet ist.

        Ersterer Teil besagt, wo dein Problem liegt, und der zweite nennt eine Möglichkeit, wie du das umgehen kannst.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. hi,

          ??? Was heißt das ?

          Was "heißen" diese vielen unnötigen Fragezeichen?

          Bitte bedenke .. ich bin CSS Newbi.

          Wenn du selber weißt, dass du noch ein lückenhaftes Wissen hast - dann bemühe dich bitte auch, es soweit wie möglich selbstständig zu erweitern.

          OK - an dieser Fragestellung habe ich ca. 16 h bisher ohne Erfolg gearbeitet. Ich habe www.thestyleworks.de, www.css4you.de und http://de.selfhtml.org/ intensiv gelesen und konnte mein Problem dennoch nicht lösen. Meinst Du, dass ich dann das Recht habe, meine Frage im Forum zu posten ohne mich belehren lassen zu müssen ?

          Ich bin gerade eben Forumsmitglied geworden und konnte leider noch nicht alle Beiträge lesen. Sorry.

          Das verlangt auch keiner.
          Aber es gibt sowohl in selfhtml ein sehr gutes Kapitel über CSS, als auch hier für das Forum eine Suchfunktion.

          Selfhtml hat mir wie gesagt keine Lösung liefern können und auch die Suchfunktion, die ich natürlich auch zuerst genutzt habe, half mir nicht weiter.

          So, und jetzt denke über Cheatahs Aussage bitte noch mal etwas intensiver nach:

          leider bezieht die Berechnung von height:auto gefloatete Inhaltselemente nicht mit ein, sofern das Element selbst nicht gefloatet ist.

          Ersterer Teil besagt, wo dein Problem liegt, und der zweite nennt eine Möglichkeit, wie du das umgehen kannst.

          Tut mir leid, nein! Ich habe überhaupt kein height:auto benutzt. Welches sind gefloatete Inhaltselemente in meinem Beispiel? Wenn es die Bilder sind, warum sagt er dann nicht "Bilder". Wenn es das "<ul>" ist, warum sagt er es dann nicht. So verstehe ich es jedenfalls nicht. Und welches Element meint er, das selbst nicht gefloatet ist ? Das <img>, <li> oder das <ul> Element?
          Setzt ihr beide bei Newbi nicht vielleicht etwas viel voraus ?

          Nichts für ungut und noch einmal herzlichen Dank an Hopsel. Er hat mir wirlich geholfen und seinen Tipp - wie wär es mal mit der Frage nach dem warum - habe ich auch richtig verstanden.

          gruß,
          wahsaga

          1. Hi Smiley!

            [...] Meinst Du, dass ich dann das Recht habe, meine Frage im Forum zu posten ohne mich belehren lassen zu müssen ?

            Du wirst von uns nicht belehrt, du bekommst wertvolle Tipps.

            Tut mir leid, nein! Ich habe überhaupt kein height:auto benutzt.

            Wenn du für ein Element keine Höhe angibst, wie groß wird es dann werden?

            Welches sind gefloatete Inhaltselemente in meinem Beispiel?

            Diejenigen, für die du float mit einem Wert belegst.

            Wenn es die Bilder sind, warum sagt er dann nicht "Bilder". Wenn es das "<ul>" ist, warum sagt er es dann nicht.

            Weil er so mit einer Wortgruppe alle Möglichkeiten abdecken kann. Außerdem hilft eine generelle Aussage viel mehr.

            So verstehe ich es jedenfalls nicht.

            Wieso nicht?

            Und welches Element meint er, das selbst nicht gefloatet ist ? Das <img>, <li> oder das <ul> Element?

            Das Element, welches alle anderen enthält, um die ein Rahmen entstehen soll und für welches du einen Rahmen definiert hast.

            Setzt ihr beide bei Newbi nicht vielleicht etwas viel voraus ?

            Sind doch nur Grundlagen.

            Nichts für ungut und noch einmal herzlichen Dank an Hopsel.

            Bitte schön. Aber bitte bitte verstehe doch, dass du verstehen musst, warum float die Elemente aus dem normalen Textfluss heraushebt.
            So gesehen habe ich mehr Schaden als Nutzen angerichtet. [1]

            Er hat mir wirlich geholfen und seinen Tipp - wie wär es mal mit der Frage nach dem warum - habe ich auch richtig verstanden.

            Ja, aber nachgefragt hast du noch nicht. :)

            [1] Wobei "Nutzen anrichten" eine sehr schöne Phrase ist. Muss ich mir merken. :)

            MfG H☼psel

            --
            "It's amazing I won. I was running against peace, prosperity, and incumbency."
            George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
            Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
          2. hi,

            Tut mir leid, nein! Ich habe überhaupt kein height:auto benutzt.

            Hast du einen Wert für height angegeben?
            Nein? Dann _ist_ der Wert auto, weil das der Default ist.

            Welches sind gefloatete Inhaltselemente in meinem Beispiel?

            Die, für die _du selber_ die Eigenschaft float angegeben hast vielleicht? Das solltest du doch wohl wenigstens wissen können, meinst du nicht?

            Wenn es die Bilder sind, warum sagt er dann nicht "Bilder". Wenn es das "<ul>" ist, warum sagt er es dann nicht. So verstehe ich es jedenfalls nicht.

            Dann verstehst du offenbar selber nicht, was du tust.

            Und welches Element meint er, das selbst nicht gefloatet ist ? Das <img>, <li> oder das <ul> Element?

            Das Element, von dem er vorher sprach - das, dessen height auf auto steht, und mit dem du nach deiner eigenen Problembeschreibung das Problem hattest.

            Setzt ihr beide bei Newbi nicht vielleicht etwas viel voraus ?

            Wir setzen vor allem die Fähigkeit zum Nachdenken voraus.
            Es ist nicht Cheatahs Art, jedem Frager eine auf sein individuelles Problem zugeschnittene Antwort zu servieren.
            Aber eine allgemeine Antwort, kombiniert mit darüber Nachdenken, führt in der Regel auch zum Ziel.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }