Antworten zum Thema „Layout der index.php zerschossen und ich weiß nicht warum“

dn3d_fanboy · 28.08.2014

Hallo,
ich brauche nochmal eure Hilfe.
Es geht wieder um diese Seite:
Wie ihr beim runterscrollen auf der Startseite feststellen werdet, ist das komplette Layout der Beiträge dort zerschossen.
Da ich gestern etliche Änderungen durchgeführt habe, kann ich auch nicht mehr nachvollziehen, was den Fehler verursacht. Alle neu installierten Plugins habe ich schon deinstalliert.

Und in der CSS finde ich auch keinen Fehler. Vielleicht könnt ihr mir helfen.

Hier der CSS-Code der Beitragsübersicht:

CSS:

/* --- CONTENT BLOGUEBERSICHT --- */

#wrapper    {position: relative;
            margin: 0 auto;
            margin-top: -50px;
            margin-bottom: 100px;
            width: 930px;
            min-height: 700px;
            padding: 20px 15px 20px 15px;
            background: rgba(255,255,255,0.3);
            z-index: 10;}
           
.heading1        {font-family: "Jockey One", sans-serif;
                font-size: 30px;
                font-weight: bold;
                letter-spacing: 0px;
                word-spacing: 3px;
                color: #932828;
                border: none;
                margin: 0 0 15px 0;
                text-shadow: 2 0 1px rgba(255,255,255,0.6);}

    /* --- Sidebar ---*/
   
#sidebar    {width: 230px;
            min-height: 600px;
            background: rgba(255,255,255,0.5);
            float: right;
            margin-right: 5px;
            padding: 20px 10px;
            -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.8);
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.8);}
           
    .kategorien, .archiv, .suche, .about, .ligen-pokale, .historisches, .send-news   
                                    {margin-bottom: 10px;
                                    border-bottom: 1px solid #c53b3b;
                                    padding-bottom: 7px;}
   
    .kategorien h2, .archiv h2, .suche h2, .about h2, .ligen-pokale h2, .historisches h2   
                        {font-family: "Jockey One", sans-serif;
                        font-size: 22px;
                        font-weight: normal;
                        letter-spacing: -1px;
                        word-spacing: 3px;
                        color: #c53b3b;
                        border: none;
                        margin: 0 0 5px 0;}
                       
    .kategorien ul, .archiv ul, .about ul, .ligen-pokale ul, .historisches ul, .send-news ul
                            {margin-left: 10px;
                            margin-top: 5px;}
   
    .kategorien ul li a, .archiv ul li a, .about ul li a, .ligen-pokale ul li a, .historisches ul li a, .send-news ul li a
                                    {font-family: "Exo 2", sans-serif;
                                    font-size: 18px;
                                    text-decoration: none;
                                    color: #932828;
                                    background: none;
                                    margin-bottom: 7px;
                                    padding: 0 3px 0 3px;}
                                   
    .kategorien ul li a:hover, .archiv ul li a:hover, .about ul li a:hover, .ligen-pokale ul li a:hover, .historisches ul li a:hover, .send-news ul li a:hover
                                                {color: #f2f2f2;
                                                background-color: #932828;
                                                -moz-transition: all 0.7s ease-in;
                                                -webkit-transition: all 0.7s ease-in;
                                                -o-transition: all 0.7s ease-in;
                                                transition: all 0.7s ease-in;}
                                               
    .
           

/* --- BLOGEINTRAEGE index.php --- */           

#recent-posts     {padding: 0;
                list-style-type: none;
                position: relative;
                width: 640px;
                margin-right: 25px;  /* Abstand zur Sidebar */
                float: left:
                }
               
#recent-posts  li    {float: left;
                width: 190px;
                min-height: 290px;
                max-height: 290px;
                background: rgba(255,255,255,0.5);
                margin-right: 20px;
                margin-bottom: 20px;
                padding: 5px;
                overflow: hidden;}
               
#recent-posts  li:hover    {-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                        box-shadow: 0 0 5px 0 rgba(0,0,0,1);
                        -moz-transition: all 0.3s ease-in;
                        -webkit-transition: all 0.3s ease-in;
                        -o-transition: all 0.3s ease-in;
                        transition: all 0.3s ease-in;}       

                       
#recent-posts  li:first-child    {float: left;
                            width: 630px;
                            min-height: 190px;
                            background: rgba(255,255,255,0.5);
                            margin: 0 0 20px 0;
                            padding: 5px;
                            overflow: hidden;}
                                                                               
#recent-posts  li:nth-child(3n+4) {float: left;
                                width: 190px;
                                min-height: 290px;
                                background: rgba(255,255,255,0.5);
                                margin: 0 0 20px 0;
                                padding: 5px;
                                overflow: hidden;}

                               
#recent-posts  li h1    {font-family: "Jockey One", sans-serif;
                    font-size: 32px;
                    font-weight: normal;
                    letter-spacing: -2px;
                    color: #7e7e7e;
                    margin-bottom: 0px;}

#recent-posts  li h2    {font-family: "Jockey One", sans-serif;
                    font-size: 30px;
                    font-weight: normal;
                    letter-spacing: -2px;
                    line-height: 0.9;
                    color: #7e7e7e;
                    margin-bottom: 0px;}

#recent-posts  li h3    {font-family: "Jockey One", sans-serif;
                    font-size: 28px;
                    font-weight: normal;
                    letter-spacing: -2px;
                    color: #7e7e7e;
                    margin-bottom: 0px;}

#recent-posts  li h4    {font-family: "Jockey One", sans-serif;
                    font-size: 24px;
                    font-weight: normal;
                    letter-spacing: -2px;
                    color: #7e7e7e;
                    margin-bottom: 0px;}

#recent-posts  li h5    {font-family: "Jockey One", sans-serif;
                    font-size: 22px;
                    font-weight: normal;
                    letter-spacing: -1px;
                    color: #7e7e7e;
                    margin-bottom: 0px;}

#recent-posts  li h6    {font-family: "Jockey One", sans-serif;
                    font-size: 20px;
                    font-weight: normal;
                    letter-spacing: -1px;
                    color: #7e7e7e;
                    margin-bottom: 0px;}

#recent-posts  li p    {font-family: "Open Sans", sans-serif;
                    font-size: 14px;
                    color: #000;
                    margin-bottom: 10px;}

#recent-posts  li strong    {font-weight: bold;}

#recent-posts  li a    {font-family: "Exo 2", sans-serif;
                    font-size: 15px;
                    text-decoration: none;
                    color: #f34a4a;
                    background: rgba(242,242,242,0.3);
                    padding: 0 3px 0 3px;}

#recent-posts  li a:hover    {color: #f2f2f2;
                        font-variant: small-caps;
                        background-color: #f34a4a;
                        -moz-transition: all 0.9s ease-in;
                        -webkit-transition: all 0.9s ease-in;
                        -o-transition: all 0.9s ease-in;
                        transition: all 0.9s ease-in;}
                       
#recent-posts  li a.title    {font-family: "Jockey One", sans-serif;
                        font-size: 30px;
                        font-weight: normal;
                        letter-spacing: -2px;
                        color: #7e7e7e;
                        margin-bottom: 0px;
                        text-decoration: none;
                        background: none;
                        padding: 0 0 0 0;}
                       
#recent-posts  li a.title:hover    {text-decoration: underline;
                                font-variant: normal;
                                background-color: none;
                                -moz-transition: none;
                                -webkit-transition: none;
                                -o-transition: none;
                                transition: none;}
                               
#recent-posts  li p.blogmeta    {font-family: "Open Sans", sans-serif;
                            font-size: 10px;
                            color: #f34a4a;
                            margin-bottom: 5px;}
                           
#recent-posts  li p.blogmeta a    {font-family: "Exo 2", sans-serif;
                            font-size: 11px;
                            font-weight: bold;
                            font-variant: small-caps;
                            color: #f34a4a;
                            text-decoration: underline;
                            background: none;
                            padding: 0 2px;}
                           
#recent-posts  li p.blogmeta a:hover    {font-variant: normal;
                                    text-decoration: none;
                                    color: #932828;
                                    -moz-transition: all 0.7s ease-in;
                                    -webkit-transition: all 0.7s ease-in;
                                    -o-transition: all 0.7s ease-in;
                                    transition: all 0.7s ease-in;}

#recent-posts  li img    {display: none;}

Und die index.php:

PHP:

<?php get_header(); ?>
   
    <div id="wrapper">
   
        <?php get_sidebar(); ?>
   
        <ul id="recent-posts">
           
            <?php if(have_posts()): while ( have_posts() ): the_post(); ?>
            <li>
                <h2><a class="title" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
               
                <p class="blogmeta"><?php the_time('d.m.Y'); ?> von <?php the_author_posts_link(); ?> in <?php the_category(', '); ?> -
                <?php comments_popup_link('0 Kommentare', '1 Kommentar', '% Kommentare', '', 'Kommentare geschlossen'); ?></p>
               
                <?php the_content('[...mehr]'); ?>
            </li>
            <?php endwhile; else: ?>
            <li>
                <h2>Es sind leider keine Beitr&auml;ge vorhanden.</h2>
            </li>   
            <?php endif; ?>
           
        </ul>
       
        <div class="clearfix"></div>
       
    </div>   

<?php get_footer(); ?>

Wie erwähnt, ich finde den Fehler leider nicht und hoffe ihr könnt mir mit den Angaben etwas helfen.

Besten Dank schonmal im Voraus.

salow · 28.08.2014

hello,
das problem ist, dass der inhalt deiner liste unterhalb der sidebar mit "einsortiert". umschließ deine liste mit einem container, der nicht größer ist als 700px. dann sollte
es klappen. =)

lg
sandra

dn3d_fanboy · 28.08.2014

Ich habe dem <ul id="recent-posts"> Tag ja schon eine Breite von 640px gegeben und bisher funktionierte das auch einwandfrei. Deshalb bin ich gerade ratlos.

Da ich gestern noch ein paar Plugins installiert habe, habe ich die auch schon deaktiviert, leider ohne Erfolg.

By3o · 28.08.2014

moin,
nimm mal das margin von #recent-posts li:nth-child(3n+4) raus, dann bappen die Container nicht mehr aneinander.
#recent-posts musst Du ändern in ul#recent-posts, dann dürfte es wieder passen.

LG

ps.: bitte Rückmeldung ob es klappt

dn3d_fanboy · 28.08.2014

Das Margin muss schon drinnen bleiben, denn das sorgt dafür, dass es richtig aussieht (wie oben, neben der Sidebar).

Leider bringt ul#recent-posts auch nichts, was mich ehrlich gesagt auch gewundert hätte, da mMn es exakt dasselbe ist.

dn3d_fanboy · 28.08.2014

Jetzt habe ich sogar einen Wrapper drumgezogen, aber es funktioniert immer noch nicht. Ich werde hier noch bekloppt.

[EDIT]
OK, ich habe den Übeltäter gefunden.
Irgendwie zerhaut das Plugin "Free Counter" das Layout. Nach der Deaktivierung sieht alles wieder normal aus.

[EDIT 2]
Leider zu früh gefreut, der Fehler ist wieder da. Ich krieg die Krise.

By3o · 28.08.2014

hallo,
im Firebug zeigt sich, daß #recent-posts nicht angesprochen wird.
Daher war meine Vermutung, daß die ul vorangesetzt werden muss.
Möglicherweise liegt es an diesem kleinen Tippfehler
#recent-posts {padding: 0;
list-style-type: none;
position: relative;
width: 640px;
margin-right: 25px; /* Abstand zur Sidebar */
float: left: <--------------- DOPPELPUNKT
}

ps.: wollte eine Beispielgrafik anhängen, das scheint hier ja nur noch via Link möglich *grummel*

dn3d_fanboy · 28.08.2014

By3o schrieb:
hallo,
im Firebug zeigt sich, daß #recent-posts nicht angesprochen wird.
Daher war meine Vermutung, daß die ul vorangesetzt werden muss.
Möglicherweise liegt es an diesem kleinen Tippfehler
#recent-posts {padding: 0;
list-style-type: none;
position: relative;
width: 640px;
margin-right: 25px; /* Abstand zur Sidebar */
float: left: <--------------- DOPPELPUNKT
}

ps.: wollte eine Beispielgrafik anhängen, das scheint hier ja nur noch via Link möglich *grummel*

Oh Mann, das war´s. Manchmal sieht man auch vor lauter Bäumen den Wald nicht mehr.

Vielen Dank!