float und p

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

  • float und p

    Hallo zusammen,

    habe ein Bild mit float:left. Zusätzlich habe ich einen p-Tag. Ist es möglich, dass der ganze p-Tag um das Bild floatet und nicht nur der darin stehende Text?

    VIELEN DANK!

    strauberry

  • #2
    Hier noch ein Bild für die Veranschaulichung
    Angehängte Dateien

    Kommentar


    • #3

      du hast ein bild mit float: left. du willst den text im p um das bild floaten. soll der text so fließen wie im bild zu sehen, oder soll er rechts vom bild stehen?

      beispielcode?

      gruß
      peter
      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
      Meine Seite

      Kommentar


      • #4
        Der Text floatet wunderbar, das ist genau richtig! Nur die zweite blaue Überschrift ist ebenfalls ein p mit Hintergrund-Grafik (die zwei gelben Linien). Der Text dieses P floatet auch, nur eben die gelben linien nicht.

        <PHP>
        <img src="images/content_unserepraxis_1.jpg" style="float: left; margin-right: 10px; margin-bottom: 10px;" />

        <p class="p_Content_Titel">Lorem ipsum dolor sit amet</p>

        .p_Content_Titel {
        font-size: 12px;
        color: #033357;
        background-image: url(images/content_titel_hintergrund.gif);
        height: 19px;
        margin-bottom: 5px;
        margin-top: 14px;
        }
        </PHP>

        DANKE!

        Kommentar


        • #5
          background-position

          gruß
          peter
          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
          Meine Seite

          Kommentar


          • #6
            Der Hintergrund ist 1 px breit und wird wiederholt. Das ganze soll flexibel sein, sprich ein CSS-Style für Überschriften (blau) und das passt sich dann automatisch an. Das ganze kommt per CMS aus der DB wo ich eben ein Style haben möchte, der das kann.

            Kommentar


            • #7
              wenn du die gelbe linie auch nach rechts einrücken willst, mußt du mit background-position arbeiten. haben denn alle bilder die gleiche breite?

              gruß
              peter
              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
              Meine Seite

              Kommentar


              • #8
                also ich würds erstmal mit

                Code:
                margin-left: xx px;
                versuchen.
                visit bepeppered.net

                Kommentar


                • #9
                  Original geschrieben von cag-live
                  also ich würds erstmal mit
                  Code:
                  margin-left: xx px;
                  versuchen.
                  geht bei ihm nicht, der text soll das bild richtig umfließen (wenn ich strauberry verstanden habe). glaube mittlerweile sogar, dass es für sein problem mit dem hintergrundbild keine lösung gibt.

                  gruß
                  peter
                  Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                  Meine Seite

                  Kommentar


                  • #10
                    Hintergrund des ganzen: die Inhalte verwenden von "Nicht-Profis" :-) in ein WYSIWYG-Feld eingegeben und die Überschriften im Content sollen eben eine doppelte gelbe Linie haben. Das einfachste ist ja, einen Style anzulegen, der das alles automatisch macht, weil der Kunde hier kein Bild einfügen kann (wir nehmen einfach mal DAU an).

                    Deswegen kann ich das auch nicht für jede Linie separat machen sondern brauche einen so flexiblen allgemeinen Style, der das alles automatisch rafft... Es sollen also Text UND Hintergrund umfließen.

                    Kommentar


                    • #11
                      Deswegen kann ich das auch nicht für jede Linie separat machen sondern brauche einen so flexiblen allgemeinen Style, der das alles automatisch rafft... Es sollen also Text UND Hintergrund umfließen.
                      das wird meines erachtens nicht möglich sein, da du in so einem fall mit margin arbeiten musst. das einzige was mir im moment einfällt, wäre ein pfusch. erweiter die bilder rechts um einen z.b. 10px breiten, weissen rand. dann würde das passen. ansonsten

                      gruß
                      peter
                      Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                      Meine Seite

                      Kommentar


                      • #12
                        was sagt etwas gegen einen margin-left im .p_Content_Titel
                        visit bepeppered.net

                        Kommentar


                        • #13
                          Original geschrieben von cag-live
                          was sagt etwas gegen einen margin-left im .p_Content_Titel
                          hast du dir mal das bild angesehen?

                          peter
                          Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                          Meine Seite

                          Kommentar


                          • #14
                            jetzt grad nochmal, hm der Text hat schon nen Rand zum Bild, stimmts?
                            visit bepeppered.net

                            Kommentar


                            • #15
                              jetzt grad nochmal, hm der Text hat schon nen Rand zum Bild, stimmts?
                              ja, durch das margin beim bild. aber ist wüßte keinen weg, wie der doppelte unterstrich als hintergrundbild völlig dynamisch und flexibel das bild mit umfliessen soll. das ginge nur mit margin oder background-position. in beiden fällen müßte die breite und die höhe des bildes bekannt sein, sowie die anzahlen von zeilen, bei denen man damit arbeiten kann. geht wohl nur über einen üblen js-hack.

                              gruß
                              peter
                              Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                              Meine Seite

                              Kommentar

                              Lädt...
                              X