Ankündigung

Einklappen
Keine Ankündigung bisher.

css postitionierung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • css postitionierung

    Moin moin,

    ich hole mir aus einer Datenbank ein paar Bilder und einen langen Text. Jetzt würde ich gerne die Bilder links und recht mittels float in dem Text bei der Ausgabe positionieren. Besteht die Möglichkeit dies zu tun, ohne den Text auseinander zu nehmen?
    Ich hoffe meine Frage war deutlich, vielen Dank schonmal.

    Green_of_Dutch

  • #2
    Ja.
    "Dummheit redet viel..Klugheit denkt und schweigt.." [Amgervinus]

    Kommentar


    • #3
      Zitat von Destruction Beitrag anzeigen
      Ja.
      Top, kannste mir nen Stichwort/Lösungsansatz geben wie ich das am besten lösen kann? Danke.

      Kommentar


      • #4
        Zitat von Destruction Beitrag anzeigen
        Ja.
        Ich würde eher zu Nein tendieren - aber vielleicht haben wir die Aufgabenstellung unterschiedlich verstanden.

        @Green_of_Dutch: Bitte mal genauer beschreiben, was du erreichen willst - ggf. mit Beispiel/Bild.
        [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

        Kommentar


        • #5
          Hast doch float selbst genannt?!
          [COLOR="#F5F5FF"]--[/COLOR]
          [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
          [COLOR="#F5F5FF"]
          --[/COLOR]

          Kommentar


          • #6
            Ich habe 3 Bilder und einen Text aus einer Datenbank. Ich möchte also jetzt Die Bilder links und rechts verteilen und dann den Text darum fließen lassen, ohne den Text weiter auseinander zu nehmen.

            also um das float Beispiel nochmal aufzugreifen:

            <img src... float:left>
            Text
            <img src... float:right>
            Text
            <img src... float:left>
            Text

            Es ist aber eben nur ein langer Text und nicht 3 und ich würde diesen ungerne auseinandernehmen. Sprich ich müsste die Bilder irgendwie vorher positionieren und dann den jeweiligen Text drum legen. Ich hoffe das war jetzt eindeutig. Danke

            Kommentar


            • #7
              Zitat von Green_of_Dutch Beitrag anzeigen
              Ich hoffe das war jetzt eindeutig.
              Ja - und damit bleibt's bei der Antwort, Nein, das geht mit den gegenwärtigen Mitteln von HTML und CSS nicht.

              Dir wird nichts anderes übrig bleiben, als den Text aufzuteilen bzw. die Bilder von vornherein darin unterzubringen, wenn du das beschriebene erreichen willst.
              [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

              Kommentar


              • #8
                Zitat von ChrisB Beitrag anzeigen
                Ja - und damit bleibt's bei der Antwort, Nein, das geht mit den gegenwärtigen Mitteln von HTML und CSS nicht.

                Dir wird nichts anderes übrig bleiben, als den Text aufzuteilen bzw. die Bilder von vornherein darin unterzubringen, wenn du das beschriebene erreichen willst.
                Gut gut, weiß ich bescheid. Vielen Dank euch.

                Kommentar


                • #9
                  Es ist aber eben nur ein langer Text
                  Ist auch aus Nutzersicht unsinnig. Absätze gibts nicht nur, weil die so schön aussehen.
                  [COLOR="#F5F5FF"]--[/COLOR]
                  [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
                  [COLOR="#F5F5FF"]
                  --[/COLOR]

                  Kommentar


                  • #10
                    Das ganze wird mit nem CMS gefüllt/bearbeitet, deshalb wollte ich ungerne den Text zerstückeln und nachher wieder zusammenfügen...

                    Kommentar


                    • #11
                      Das erste Problem ist, dass man nicht das Resultat vorhersagen kann. Du kannst aber z. B. die Anzahl der Zeichen in dem Text durch die Anzahl der Bilder teilen und dann in diesem Intervall die Bilder einfügen. Das sollte eigentlich mit Javascript machbar sein. Ist aber für einen Einsteiger vermutlich nicht ganz trivial.

                      Kommentar


                      • #12
                        Ich habe keine Ahnung von JS. Ich werds schon irgendwie anders lösen. Danke.

                        Kommentar


                        • #13
                          Weil mich das auch gerade interessiert hat, hier mal ein rudimentärer Ansatz, der ohne Frameworks funktioniert:

                          Code:
                              
                              var imageList = ["img_1.jpg", "img_2.jpg", "img_3.jpg"]
                              
                              function parseText(obj) {
                                  var str = obj.innerHTML;
                                  
                                  var interval = Math.floor(str.length / imageList.length);
                                  
                                  var parts    = []
                                  
                                  for (var i = 0; i < imageList.length; ++i) {
                                      if (imageList[i]) {
                                          parts[parts.length] = str.substr(i * interval, (i + 1) * interval) + "<img src=\"" + imageList[i] + "\" />";
                                      } else {
                                          //Zu wenige Bilder vorhanden
                                          parts[parts.length] = str.substr(i * interval, (i + 1) * interval);
                                      }
                                  }
                                  
                                  obj.innerHTML = "";
                                  for (i in parts) {
                                      obj.innerHTML += parts[i];
                                  }
                              }
                          </script>
                          </head>
                          <body onload="parseText(document.body)">
                              Das erste Problem ist, dass man nicht das Resultat vorhersagen kann. Du kannst aber z. B. die Anzahl der Zeichen in dem Text durch die Anzahl der Bilder teilen und dann in diesem Intervall die Bilder einfügen. Das sollte eigentlich mit Javascript machbar sein. Ist aber für einen Einsteiger vermutlich nicht ganz trivial.
                          </body>
                          </html>
                          imageList muss vorher statisch oder über php oder sonstwas gefüllt werden. Die Funktion parseText bekommt als Parameter ein Handle auf das Element, bei dem der Text modifiziert werden soll.

                          Kommentar


                          • #14
                            Zitat von xm22 Beitrag anzeigen
                            hier mal ein rudimentärer Ansatz, der ohne Frameworks funktioniert
                            Na ja, „funktioniert“ ist extremst übertrieben.

                            Bei reinem Text mag das noch irgendwie hinhauen - aber sobald sich HTML-Tags darin befinden, wird das kolossal schief gehen.
                            [SIZE="1"]RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?[/SIZE]

                            Kommentar

                            Lädt...
                            X