Antworten auf deine Fragen:
Neues Thema erstellen

Layout der index.php zerschossen und ich weiß nicht warum

dn3d_fanboy

Aktives Mitglied

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

Noch nicht viel geschrieben

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

Aktives Mitglied

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

Noch nicht viel geschrieben

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

Aktives Mitglied

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

Aktives Mitglied

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.
 
Zuletzt bearbeitet:

By3o

Noch nicht viel geschrieben

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

Aktives Mitglied

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!
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben