Warum verschiebt sich alles?

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

  • Warum verschiebt sich alles?

    Hallo,

    ich habe mal eine Frage, bezüglich eines HTML Codes:

    Code:
    <div class="imageframe alignleft" style="width: 150px;"><a title="****************" rel="lightbox[pics56]" href="Bildercomingsoon.jpg"><img class="attachment wp-att-86" src="http://Bildadresse.de" alt="****************" width="150" height="150" /></a></div>
    <strong>Alter:</strong> 28
    <strong>Größe:</strong> 36/38
    <strong>Größe:</strong> 181
    <strong>Farbe:</strong> Rot
    <strong>Können:</strong> Bagger fahren
    <strong>Mehr über Bagger 1 erfahren:</strong> <a href="http://baggerbagger1.de">Hier klicken</a>
    
    
    <div class="imageframe alignleft" style="width: 150px;"><a title="****************" rel="lightbox[pics56]" href="Bildercomingsoon.jpg"><img class="attachment wp-att-86" src="http://Bildadresse.de" alt="****************" width="150" height="150" /></a></div>
    <strong>Alter:</strong> 28
    <strong>Größe:</strong> 36/38
    <strong>Größe:</strong> 181
    <strong>Farbe:</strong> Rot
    <strong>Können:</strong> Bagger fahren
    <strong>Mehr über Bagger 1 erfahren:</strong> <a href="http://baggerbagger1.de">Hier klicken</a>
    Aussehen tut das ganze auf meiner Seite dann komischerweise so:

    http://www.abload.de/img/leiderb5t1.jpg

    Aus mir einem völlig unbekannten Grund, verschiebt sich der zweite Block einfach nach rechts. Ich hätte es aber gerne so (habe es mal mit PhotoShop manipuliert):

    http://www.abload.de/img/sosollteesseinh3qv.jpg

    Wie bekomme ich das so hin, bzw. bekomme die komische Verschiebung weg? Meine Versuche, sind alle fehlgeschlagen. Ich sage schon mal vielen Dank!

    Liebe Grüße
    Peter
    Zuletzt geändert von mmoelite; 03.11.2009, 13:13.

  • #2
    Zunächst mal sollten die divs auch wieder geschlossen werden. Und wenn du mit CSS gearbeitet hast, so poste doch bitte den relevanten Code. Ich vermute du hast mit float gearbeitet und nicht sauber gecleared.

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

    Kommentar


    • #3
      Hallo,

      das ist mein kompletter Code. Mehr gibt es nicht an Code :- )

      Ich freue mich auf eure Hilfe und sage schon mal vielen Dank, für die bisherige!

      Kommentar


      • #4
        Dann sollest du, wie ich schon sagte, die divs auch sauber schließen. Das fehlt bei dir.

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

        Kommentar


        • #5
          Vielen Dank, für die Antwort. Ich habe die disvs nun geschlossen:

          Code:
          <div class="imageframe alignleft" style="width: 150px;"><a title="****************" rel="lightbox[pics56]" href="Bildercomingsoon.jpg"><img class="attachment wp-att-86" src="http://Bildadresse.de" alt="****************" width="150" height="150" /></a></div>
          <strong>Alter:</strong> 28
          <strong>Größe:</strong> 36/38
          <strong>Größe:</strong> 181
          <strong>Farbe:</strong> Rot
          <strong>Können:</strong> Bagger fahren
          <strong>Mehr über Bagger 1 erfahren:</strong> <a href="http://baggerbagger1.de">Hier klicken</a>
          [B][COLOR="Red"]</div>[/COLOR][/B]
          
          
          <div class="imageframe alignleft" style="width: 150px;"><a title="****************" rel="lightbox[pics56]" href="Bildercomingsoon.jpg"><img class="attachment wp-att-86" src="http://Bildadresse.de" alt="****************" width="150" height="150" /></a></div>
          <strong>Alter:</strong> 28
          <strong>Größe:</strong> 36/38
          <strong>Größe:</strong> 181
          <strong>Farbe:</strong> Rot
          <strong>Können:</strong> Bagger fahren
          <strong>Mehr über Bagger 1 erfahren:</strong> <a href="http://baggerbagger1.de">Hier klicken</a>
          [B][COLOR="Red"]</div>[/COLOR][/B]
          Jetzt geht es aber leider immer noch nicht?

          Liebe Grüße

          Kommentar


          • #6
            Du hast zwei CSS-Klassen definiert (imageframe alignleft). Gibt es da Zuweisungen. Hast du ein valides HTML-Dokument?

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

            Kommentar


            • #7
              Also meine Seite ist nicht komplett valide. Ich habe zwei CSS-Klassen definiert (imageframe alignleft), weil ich nicht wüsste wie ich es anderst machen sollte?

              Liebe Grüße

              Kommentar


              • #8
                Sinnvoll umgesetzt wären die ganzen
                Code:
                <strong>Attribut:</strong> Wert
                -Paare vermutlich eine Definitionsliste.

                Wie bekomme ich das so hin, bzw. bekomme die komische Verschiebung weg?
                Nachdem du erst mal sinnvollen HTML-Code erstellt hast (s.o.), informierst du dich, wie man Floating wieder aufhebt, Stichwort clear.
                I don't believe in rebirth. Actually, I never did in my whole lives.

                Kommentar


                • #9
                  Zitat von mmoelite Beitrag anzeigen
                  Ich habe zwei CSS-Klassen definiert (imageframe alignleft)
                  Und die zeigst du uns jetzt mal!

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

                  Kommentar


                  • #10
                    Code:
                    <div class="imageframe alignleft" style="width: 150px;"><a title="****************" rel="lightbox[pics56]" href="Bildercomingsoon.jpg"><img class="attachment wp-att-86" src="http://Bildadresse.de" alt="****************" width="150" height="150" /></a></div>
                    <strong>Alter:</strong> 28
                    <strong>Größe:</strong> 36/38
                    <strong>Größe:</strong> 181
                    <strong>Farbe:</strong> Rot
                    <strong>Können:</strong> Bagger fahren
                    <strong>Mehr über Bagger 1 erfahren:</strong> <a href="http://baggerbagger1.de">Hier klicken</a>
                    </div>
                    
                    
                    <div class="imageframe alignleft" style="width: 150px;"><a title="****************" rel="lightbox[pics56]" href="Bildercomingsoon.jpg"><img class="attachment wp-att-86" src="http://Bildadresse.de" alt="****************" width="150" height="150" /></a></div>
                    <strong>Alter:</strong> 28
                    <strong>Größe:</strong> 36/38
                    <strong>Größe:</strong> 181
                    <strong>Farbe:</strong> Rot
                    <strong>Können:</strong> Bagger fahren
                    <strong>Mehr über Bagger 1 erfahren:</strong> <a href="http://baggerbagger1.de">Hier klicken</a>
                    </div>
                    Ich glaube, ich verstehe nicht so recht, was ihr meint.

                    Liebe Grüße

                    Kommentar


                    • #11
                      Du hast den Elementen Klassen verpasst, um sie darüber per CSS ansprechen zu können und sie zu formatieren.
                      Mit der Formatierung hast du ein Problem - wir wissen aber immer noch nicht, wie du die Elemente formatiert hast. Also zeige es uns bitte.
                      I don't believe in rebirth. Actually, I never did in my whole lives.

                      Kommentar


                      • #12
                        Der Code steht in einer Wordpress Seite. In dieser Seite, ist [COLOR="Red"]NUR[/COLOR] der Code den ich gepostet habe :- )

                        Kommentar


                        • #13
                          Im gezeigten Code ist nichts enthalten, was das Verhalten bewirken könnte.

                          Wenn dir der Durchblick fehlt, um zu erkennen, welche Formatierungen sich woher ergeben - dann zeige bitte ein Online-Beispiel.
                          I don't believe in rebirth. Actually, I never did in my whole lives.

                          Kommentar


                          • #14
                            Hier mal das online Beispiel:

                            Bagger Test |

                            Vielen Dank :- )

                            Kommentar


                            • #15
                              Zitat von mmoelite Beitrag anzeigen
                              Hier mal das online Beispiel:

                              Bagger Test |
                              Und wie kommst du jetzt zu der Aussage, in diesem Dokument würde nur das bisschen gezeigter Code drin stehen?
                              Die ist ja definitiv falsch, denn es steht viel mehr drin - u.a. werden auch externe CSS-Ressourcen eingebunden, aus denen sich die Formatierung der Elemente ergibt.

                              Wenn du also bezüglich Wordpress noch so wenig Durchblick hast, dass du nicht durchschaust, wie sich aus den Templates etc. letztendlich ein komplettes Dokument ergibt - dann beschäftige dich damit zuerst.

                              Und anschliessend schaust du dann im CSS nach, wo und wie deine Elemente dort formatiert werden. (Firebug ist bei sowas hilfreich.)
                              Float wird dort verwendet, wie ich schon vermutet hatte - also muss auch gecleart werden, wenn du den aktuellen Effekt nicht willst.
                              Dazu empfiehlt es sich aber, das HTML sinnvoller aufzubauen - Bild und Beschreibung sollten in einem gruppierenden Element stehen, dann lässt sich das besser umsetzten.
                              Und dass statt einem Fliesstextabsatz P eine Definitionsliste die bessere Wahl wäre, sagte ich bereits.
                              I don't believe in rebirth. Actually, I never did in my whole lives.

                              Kommentar

                              Lädt...
                              X