Seiteninhalt ragt über den Content-Bereich hinaus

    Hallo,
    auf meiner Wordpress-Seite habe ich das Problem, dass mein Seiteninhalt über den eigentlichen Contentbereich hinausragt. Leider konnte ich bisher keine Lösung finden. Ich weiß nicht mehr weiter und bitte um eure Hilfe.
    Wenn ich einen Beitrag schreibe habe ich darunter eine doppelte horizontale Linie. Jetzt ist es bei einigen Seiten vorgekommen, dass ich nicht einfach Text und Bilder in den visuellen Editor eingegeben habe, sondern Html-Code in den Texteditor eingegeben habe. Nun passiert folgendes: Die doppelte horizontale Linie bleibt oben und der ganze Inhalt ragt darüber hinaus. Es wäre nett wenn ihr euch das mal anschauen könntet.

    Hier der Link.

    Danke!

    Zitat von Mr.Mo

    Bei den oberen drei Containern geht im oberen Bereich nen Strich durch !


    An welcher Stelle?

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

    Hallo,

    die Linien sind der untere Rahmen des article-Containers mit der id="post-110". Der Rahmen ist in der style.css unter ".site-content article" mit "border-bottom: 4px double #EDEDED" eingetragen.

    Eigentlich sollte der Rahmen unterhalb der 6 darin enthaltenen div mit der Klasse "box_2" erscheinen. Also unter den 6 Bohnen-Angeboten.

    Allerdings sind die 6 div gefloatet und damit aus dem Textfluss genommen. Dadurch hat das article-Element keinen Inhalt mehr und der Rahmen wird noch oben verschoben.

    Den Rahmen zu entfernen würde das Problem nur verstecken, aber nicht lösen.

    Da hiflt nur der alte Merksatz weiter "Wer floatet MUSS auch clearen."

    Du musst also an geeigneter Steller ein "clear" einfügen. Am geschicktesten ist wahrscheinlich ein clearfix für das article-Element zu vergeben. Das musst du halt ausprobieren.

    Du kannst in die style.css ja mal folgendes eintragen:

    Gruss

    MrMurphy

    4 Mal editiert, zuletzt von MrMurphy (15. August 2015 um 00:04)

    Hört sich gut an. Das clear könnte ich doch in meinem css schnipsel eintragen nicht ? Wie müsste der Befehl lauten ?
    Das hab ich bisher da drin stehen:

    .box_2 {

    width: 180px;
    height: 220px;
    position: relative;
    float: left;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 10px;
    margin: 0px 20px 20px 0px;
    background-color: none;
    overflow: hidden;
    }

    Hallo

    Zitat

    Das clear könnte ich doch in meinem css schnipsel eintragen nicht ?

    Nein.

    Ich habe meinen vorigen Beitrag grade erweitert, das hat sich mit deiner Antwort überschnitten.

    Du musst entweder dem umgebenden Container (also dem article-Element mit der id="post-110") ein Clearfix mit auf den Weg geben. Die Lösung habe ich im vorigen Beitrag nachträglich beschrieben.

    Oder du musst unterhalb der 6 div aber innerhalb des article ein weiteres Element einfügen und dem per CSS ein clear verpassen. Inhaltsleere Container zu erstellen um das Layout zu beeinflussen ist aber schlechter Stil und sollte vermieden werden.

    Gruss

    MrMurphy

    Achso, Ok.
    Ich hab den Code eingefügt und es funktioniert. Ganz schön komplex. Ich habe nun mehrere solcher Beiträge, nämlich von diesen 6 Produkten die Unterseiten und wahrscheinlich kommen auch noch mehr dazu. Soll ich dann für jeden Post den Code in die css einfügen, (die wird aber ganz schön lang) oder gibt es eine elegantere Lösung?

    Hallo

    Zitat

    gibt es eine elegantere Lösung?

    Ja. Mein Beispiel wirkt sich auf alle article mit der "id=post-110" direkt aus.

    Außerdem auf alle Elemente, welche die Klasse class="clearfix" bekommen.

    Du kannst also jeweils den umgebenden Containern gezielt die Klasse clearfix zuweisen.

    Allerdings solltest du dich mit den Grundlagen von float, clear und clearfix beschäftigen.

    Für das clearfix gibt es unterschiedliche Inhalte, die nicht bei jeder Konstellation funktionieren, sondern manchmal sogar zu zusätzlichen Problemen führen.

    Mit meiner clearfix-Lösung hatte ich zwar noch keine Probleme und sie wird auch im Internet als zuverlässig beschrieben. Das heißt aber nicht, dass sie immer funktioniert.

    Gruss

    MrMurphy

    Hallo Mr.Murphy,

    vielen Dank für deine Ausführungen. Ich habe es jetzt folgendermaßen gemacht:

    Ich habe den Post in einen Div gesetzt und die Klasse clearfix zugewiesen.

    In der css steht folgendes:

    .clearfix::before,
    .clearfix::after {
    content: " ";
    display: table;
    }
    .clearfix::after {
    clear: both;
    }
    .clearfix {
    *zoom: 1;
    }

    Funktioniert wunderbar siehe hier. Danke dafür.

    Jetzt habe ich das gleiche für einen anderen Post gemacht der auch gefloatete Boxen enthält. Hier habe ich das Problem, dass die Boxen in der ersten Reihe versetzt erscheinen. Keine Ahnung woran es liegt.

    Wäre für einen Tipp dankbar.

    Gruß

    Mo

    2 Mal editiert, zuletzt von Mr.Mo (16. August 2015 um 22:06)