Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS: Elemente nebeneinander anordnen

Einklappen

Neue Werbung 2019

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

  • CSS: Elemente nebeneinander anordnen

    Hi Leute!

    Ich versuche gerade 3 Bilder mit Text darunter per CSS nebeneinander anzuordnen.
    Meinen Versuch könnt ihr auch da ansehen:
    http://wolfib.wo.funpic.de/

    Ausschnitt des Stylesheets:
    Code:
    div#Home_Cont div {
      display:inline;
    }
    div#Home_Cont p {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 0.7em;
      color: #333333;
    }
    Wenn ich das richtig verstanden habe klappt das mit display:inline. Ich kann zwar z.B. den Text und das Bild nebeneinander anordnen aber die Bilder nebeneinander klappt nicht. Was mach ich da falsch?


  • #2
    machs doch einfach mit einer tabelle
    Code:
    <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>

    Kommentar


    • #3
      Beispiel:
      3 Bilder nebeneinander jeweils 150 Pixel breit und eine Beschreibung (oder Link) unten.
      Code:
      <style type="text/css">
      ul.bld { list-style-type:none;float:left;margin:0;padding:0;width:510px; }
      ul.bld li { float:left;margin:0px 10px 7px 2px;font-size:9px; }
      ul.bld img { display:block;width:150px;height:113px;border:0; }
      </style>
      <ul class="bld">[*][img]bild[/img]Bild1[*][img]bild[/img]Bild2[*][img]bild[/img]Bild3[*][img]bild[/img]Bild4[*][img]bild[/img]Bild5[/list]

      Kommentar


      • #4
        @karl-150:
        Nein bitte keine Tabellen fürs Layout. Bin gerade dabei das umzustellen!

        @DiBo33:
        Ja, mit float:left funktionierts! Aber soweit ich das verstanden habe ist dafür display:inline gedacht oder? Zumindest kann ich damit Bild und Text nebeneinander anordnen.

        Wo sind die CSS Experten?

        Kommentar


        • #5
          wenn du weg von tabellen willst dann benutz <div>s
          da kannst du genau bestimmen wo was sein soll.

          aber die lösung mit float sollte auch passen.

          mfg

          Kommentar


          • #6
            Ich verwende ja divs. Die werden aber untereinander angezeigt!

            Kommentar


            • #7
              probier mal das
              PHP-Code:
              HTML:
                       <
              div id="bild1"> </div>
                       <
              div id="bild2"> </div>

              CSS:
                      
              #bild1
              {
                  
              backgroundtransparent url(*1.jpgtop no-repeat
                  
              positionabsolute
                  
              top10px
                  
              right210px;
              }
                      
              #bild2
              {
                  
              backgroundtransparent url(*2.jpgtop  no-repeat
                  
              positionabsolute
                  
              top10px
                  
              right110px;

              da findest du zwar keine Hilfe aber Anregungen:
              www.csszengarden.com

              Kommentar


              • #8
                Zitat von wolfi_b
                Ja, mit float:left funktionierts! Aber soweit ich das verstanden habe ist dafür display:inline gedacht oder?
                Mitnichten

                Anwendbar auf: Alle außer positionierte Elemente

                also sowohl inline als auch block

                http://css4you.de/float.html


                Zitat von wolfi_b
                Zumindest kann ich damit Bild und Text nebeneinander anordnen.
                Bei deiner Anordnung handelt es sich eindeutig um eine Liste von Elementen, warum also nicht auch eine solche verwenden?

                Kommentar


                • #9
                  Hm aber das sind ja gar keine absolut positionierten Elemente!?

                  Aber das mit der Liste werde ich ausprobieren.

                  Kommentar


                  • #10
                    Zitat von wolfi_b
                    Hm aber das sind ja gar keine absolut positionierten Elemente!?
                    Ja eben, desshalb darfst du ja auch float nutzen.

                    Kommentar


                    • #11
                      Ah jetzt hab ich es verstanden!

                      display: positionierte Elemente
                      float: nicht positionierte Elemente

                      Kommentar


                      • #12
                        Zitat von wolfi_b
                        Ah jetzt hab ich es verstanden!

                        display: positionierte Elemente
                        float: nicht positionierte Elemente
                        Fast:
                        display: positionierte Elemente (und alle anderen)
                        float: nicht positionierte Elemente

                        Kommentar


                        • #13
                          was sind den alle anderen ?

                          Kommentar


                          • #14
                            Zitat von HK
                            was sind den alle anderen ?
                            die nicht positionierte Elemente

                            Kommentar


                            • #15
                              ah ok, denkfehler von mir gerade, sorry

                              Kommentar

                              Lädt...
                              X