Inhalt rutscht nach links unter Sidebar

Taschmahal

hallo.
Ich habe folgendes Problem: Wenn mein Inhalt eine gewisse länge hat, rutscht er einfach unter die Sidebar nach links. Dies passiert jedoch nicht bei der Startseite, sondern nur bei Statistischen Seiten. Das Problem hatte ich schonmal, nur mit den Comments, aber da lag es an einem </div> aber diesesmal glaub ich nicht. Kann mir jemand helfen?

Two Mango

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Taschmahal

hat denn keiner irgend eine idee was da falsch sein könnte?:cry:

derpiet

Hi

Es wäre hilfreich wenn du den Code mal posten würdest.

Es kann sich ja keiner ein Bild davon machen ohne ein Beispiel.

Es könnte an nem floatenden Element liegen, an nem Element das gecleart werden muss unc dies falsch gecleart ist und und und

hero-master

Hi Taschmahal :)
das ist alles so ne Suppe, da kommt man irgendwie nicht auf graden Kurs. ;)

Gib dem #content mal ein float:left mit und pack das margin-left da mal weg.
Anonsten könnte es auch an dem HTML liegen, das ist alles recht unordentlich. VErsuch mal dem Inhatl die Videos rauszunehmen und mehrere TExte einzufügen und schau dann ob der Fehler noch da ist.

derpiet

Sehr einfach wäre es mit der Faux Columns Technik zu machen.

Lies dir mal den Link durch.
Damir bekommst du viele solcher kleinen Fehler weg.

hero-master

Er will doch nicht, dass beide Spalten gleich lang werden (bzw so aussehen ;) ), sondern sein Problem ist ja, dass der Inhalt quasi wieder nach links ruthsct (siehe Link "Two Mangos" im ersten Post) :)

derpiet

Also ich gehe davon aus das der Inhalt NICHT unter die Sidebar rutschen soll. Und gehe auch davon aus das er unter der Sidebar nichts mehr hinzufügen möchte, wobei das auch kein Thema wäre, da man ja immer noch in dieses Element irgendwas reinbauen kann.

Von daher wäre es meiner Meinung nach eine schnelle einfache Lösung die auch hilft.

Oder halt schauen ob richtig gefloatet wurde.

hero-master

Faux-Column bedeutet eigentlich nur, dass man dem Elterndiv eine Grafik zuweist, so dass quasi beide Spalten immer so aussehen als ob sie gleich groß sind.
Das hilft ja bei seinem Problem nicht direkt. Wenn du meinst: Schau dir das beispiel bei Faux-columns mal an, wie dort gefloatet wurde, dann geb ich dir recht ;)
Wobei ich dann direkt einen Link zu einem Tut für ein 2-Spalten-Layout beigesteuert hätte, denn so ist das ein wenig verwirrend, denn mit faux-columns direkt hat es ja nichts zu tun:

2-Spalten Layout » CSS-Hilfestellung » tuts.nicogutmann.de

derpiet

Ok mit dem 2 SPaltenlayout gebe ich dir recht, der einfachheithalber her.

Aber ganz normal kann es eh net sein, das der INhalt unter die Sidebar rutscht.
Bei mir is das z.b. nicht der Fall.

Taschmahal

Also ich habe das nicht alles verstanden:oops:

Den Inhalt kann ich nicht posten, da er zu lang ist:-|

Und das mit der Unordnung... Ich weiß nicht, dass meiste ist ja wegen dem Theme, da hab ich ja nicht sooo viel verändert, also kann ich dafür ,glaube ich zumindest, nichts:(

Achja hier noch das CSS:

CSS

/*


Theme Name: Gunmetal DE
Theme URI: http://www.online-resources.de
Description: Zweispaltiges Wordpress Theme <br />Design von <a href="http://www.sixshootermedia.com">Six Shooter Media</a>. <br /> Konvertiert von <a href="http://www.online-resources.de">online-resources.de</a>.
Version: 1.4
Author: Hans Bauer


*/


body {
    background: #FFFFFF;
    font: 1em Trebuchet MS;
    word-spacing: 2px;
    color: #545454;
    margin: 0;
}


* {
    margin: 0;
    padding: 0;
}


a {
    color: #0090E0;
    border-bottom: none;
    text-decoration: none;
    padding: 2px 4px 2px 4px;
}
a:hover {
    border-bottom: 1px dotted #FFFFFF;
    background: #FFFFFF;
}




h2 {
    font: 24px Arial, sans-serif;
    color: #0090E0;
    letter-spacing: -1px;
    font-weight: normal;
    margin: 15px 0 15px 0;
}


h2 a {
    color: #0090E0;
    text-decoration: none;
    border: none;
    padding: 0;
}
h2 a:hover {
    
    color: #CFCFCF;
}
h3 {
    font-size: 1.2em;
    color: #ccc;
    font-weight: normal;
    margin: 15px 0 15px 0;
}
p {
    line-height: 24px;
    margin: 25px 0 25px 0;
}






#lightbox{
        position: absolute;
        left: 0;
        width: 100%;
        z-index: 100;
        text-align: center;
        line-height: 0;
        }


#lightbox a img{ border: none; }


#outerImageContainer{
        position: relative;
        background-color: #fff;
        width: 250px;
        height: 250px;
        margin: 0 auto;
        }


#imageContainer{
        padding: 10px;
        }


#loading{
        position: absolute;
        top: 40%;
        left: 0%;
        height: 25%;
        width: 100%;
        text-align: center;
        line-height: 0;
        }
#hoverNav{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}


#prevLink, #nextLink{
        width: 49%;
        height: 100%;
        background: transparent url(http://k10243-01.s02.xyon-hosting.de/taschmahal/Lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
        display: block;
        }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://k10243-01.s02.xyon-hosting.de/taschmahal/Lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://k10243-01.s02.xyon-hosting.de/taschmahal/Lightbox/images/nextlabel.gif) right 15% no-repeat; }




#imageDataContainer{
        font: 10px Verdana, Helvetica, sans-serif;
        background-color: #fff;
        margin: 0 auto;
        line-height: 1.4em;
        overflow: auto;
        width: 100%
        }


#imageData{        padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;        }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;        }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;        }


#overlay{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90;
        width: 100%;
        height: 500px;
        background-color: #000;
        }










blockquote {
    font-size: 1.2em;
    color: #787878;
    background: url('images/blockquote.gif') no-repeat top left;
    font-family: Georgia, "Times New Roman", Times, serif; margin-left:0; margin-right:150px; margin-top:35px; margin-bottom:35px; padding-left:0; padding-right:0; padding-top:15px; padding-bottom:0
}
#sidebar {
    width: 263px;
    background: url('images/sidebar.jpg') no-repeat top left;
    float: left;
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 20px; 
    padding-bottom: 50px
}
#sidebar p {
    font-size: 0.9em;
}
#sidebar a {
    color: #0090E0;
    border: none;
}
#sidebar a:hover {
    text-decoration: none;
    color: #eee;
    border: none;
}
#sidebar h1 {
    color: #fff;
    font-size: 1.7em;
}
#sidebar h1 a {
    color: #fff;
    text-decoration: none;
    padding: 0;
}
#sidebar img, #sidebar img {
    padding: none;
    background: #000;
    border: 0;
}
#sidebar ul {
    list-style-type: none;


}
#sidebar h1 a:hover {
    text-decoration: none;
}
ol#nav {
    margin: 25px 15px 25px 30px;
    font-size: 1.3em;
}


#nav a {
    display: block;
    margin: none;
    color: #0090E0;
    border: none;
}
ol li {
    margin: 15px 0 15px 0 !important;
    margin: -10px 0;
}
#nav a b {
    float: right;
    display: none;
    color: #0090E0;
}
#nav img, #nav img {
    padding: none;
    background: #000;
    border: 0;
}
#nav a:hover {
    background: none;
    border: none;
    text-decoration: none;
}
#nav a:hover b {
    display: inline;
}


#content {
    background: url('images/content.jpg') no-repeat top left;
    padding: 20px; 
    margin-left: 300px; 
    margin-right: 10%; 
    margin-top: 0; 
    margin-bottom: 0
}


#content ul, #content ul {
    margin: 15px 15px 15px 15px;
    list-style: none;
}
#content ul li, #content ul li {
    margin: 10px 0;
    background: url('images/bp.gif') no-repeat left;; padding-left:15px; 
    padding-right: 0; 
    padding-top: 0; 
    padding-bottom: 0
}




#content ol li, #content ol li {
    margin: 15px 0 15px 0 !important;
    margin: 10px 0;
}
#content img, #content img {
    padding: none;
    background: #000;
    border: 0;
}
.postdata {
    font: 11px Verdana;
    margin: -6px 0 -15px 0;
    color: #777;
}


.postmetadata {
    background: #FFFFFF;
    border-top: none;
    border-bottom: none;
    padding: 5px 10px;
    font: 0.7em;
    line-height: 1.2em;
}


#footer {
    padding: 30px;
    text-align: center;
    border-top: none;
    margin: 50px 0 0 0;
    background: #FFF;
}
    


    
    
/* Comments Styling */
#commentlist li {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid #700000;
}


#commentform {
    margin: 1em 0;
    background: #FFFFFF;
    width: 280px;
}


#commentform textarea {
    background: #F0F0F0;
    border: 1px solid #d6d3d3;
    width: 280px;
}
#commentform textarea:hover {
    background: #F0F0F0;
    border: 1px solid #d6d3d3;
}
#commentform textarea:focus {
    background: #F0F0F0;
    border: 1px solid #939793;
}


#commentform #email, #commentform #author, #commentform #url {
    font-size: 1.1em;
    background: #CCCCCC;
    border: 1px solid #939793;
    width: 280px;
}


#commentform input{
    margin-bottom: 3px;
}


#searchform input{
    background: #CCCCCC;
    border: 1px solid #939793;
}


#sidebar ul li {
    margin: 5px 0 5px 0 !important;
}


#sidebar ul li a {
    color: #0090E0;
}


#sidebar ul {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}






/* addons */


#submit {
    background-image: url(images/submit.jpg);
    border: 0px 0px 0px 0px !important;
}


#side_submit {
    background-image: url(images/submit.jpg) !important;;
    border: 0px 0px 0px 0px !important;
}






.navigation {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 60px;
}


.alignright {
    float: right;
}


.alignleft {
    float: left
}


small.edit {
    font-weight: lighter;
    font-size: 0.5em;
}

Alles anzeigen

EDIT/ ich hab es versucht, mit dem anderen CSS, aber dann sieht es nur noch vermurkst aus...

Taschmahal

Wo muss ich denn das Two Columns CSS in mein CSS einfügen und welchen teil davon?:|

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Inhalt rutscht nach links unter Sidebar

Jetzt mitmachen!