Statische Sidebar

moopoints

Hi,

habe folgendes Problem:
wenn man das Browserfenster verkleinert (so gesehen simuliere ich kleinere Bildschirme) bleibt der Bereich mit den Beiträgen statisch, während die Sidebar ab irgendeinem Punkt runterspringt.
Was muss ich tun, damit die Sidebar statisch bleibt und stattdessen der Textbereich sich dynamisch verkleinert?

Danke!

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

Astrid

Die Werte in der CSS-Datei ändern, z.B. der Sidebar eine fixe Breite geben, dafür den Content in % angeben. Gemäß Deiner Beschreibung scheint es im Moment umgekehrt zu sein.

moopoints

Das klingt schon mal gut. Wie genau kann ich das machen?

Anbei meine Style.css

PHP

/*
Theme Name: Qwilm! deutsch
Theme URI: http://oriol.f2o.org/
Description: Theme hardly based on <a href="http://www.huddletogether.com">huddletogether</a>. This theme was designed by Lokesh and destriped and built by oriol. <br />&Uuml;bersetzung: <a href="http://www.2-blog.net/">Htwo</a>
Version: 0.3
Author: Oriol Sanchez
Author URI: http://oriol.f2o.org/




    This theme was designed Lokesh and redesigned and built by oriol.




    The CSS, XHTML and design is released under GPL:
    http://www.opensource.org/licenses/gpl-license.php






*/








/**********************************************************************************/
body {
    background-color: #fff; 
    font: 13px Arial;
    color: #756b6b;
}
a, a:hover { color: #8ab459; text-decoration: none; }
/********************************************************************************/
#wrapper { padding-left: 30px; }
#mini-nav{
    width: 35px;
    float: left;
    margin: 5px;
    padding-top: 30px;
    position:fixed;
}




#mini-nav img{
    margin:1px;
}
#content {
    width: 550px;
    text-align: left;
    border-top:solid 0px #CED4CA;
    border-bottom:solid 0px #CED4CA;
    border-left:solid 0px #CED4CA;
    border-right:solid 1px #CED4CA;
    float: left;
    margin: 5px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    background-color:#FFFFFF;
}
#sidebar-1 {
    width: 350px;
}
#sidebar-2 {
    width: 190px;
}
#logo {
    width: 140px;
    padding:10px;
        border:solid 1px #CED4CA;
}
#footer {
        width: 450px;
    text-align: center;
    border-top:solid 0px #CED4CA;
    border-bottom:solid 0px #CED4CA;
    border-left:solid 0px #CED4CA;
    border-right:solid 0px #CED4CA;
    float: left;
    margin: 5px;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    background-color:#FFFFFF;
}


/********************************************************************************/
.sidebar {
    text-align: left;
    padding: 20px;
    border-top:solid 0px #CED4CA;
    border-bottom:solid 0px #CED4CA;
    border-left:solid 0px #CED4CA;
    border-right:solid 0px #CED4CA;
    float: left;
    margin: 5px;
    background-color:#FFFFFF;
    font-size: 0.9em;
}
.post {
    border-bottom:solid 1px #DEE4DA;
    padding-top:30px;
    padding-bottom:0px;
}
.post img{
    border: 0px solid #fff;
    padding: 3px;
    margin: 5px;
    }
.post-titulo {
    color:#ACB200;
    margin:0px;
    margin-bottom:2px;
}
.postmeta {
    margin-top: 0;
    padding-top: 1px;
    font-size: 0.9em;
    color: #999;
    }
.comentarios-link{
    padding: 0 0 0 17px;
    background: url(imagenes_qwilm/commentslink.gif) no-repeat center left;
    }
/**********************************************************************************/
/*Tipografia*/
h1,
h2,
h3{    font-family: "Lucida Grande", Tahoma, Arial, sans-serif; }


h1 { text-indent: -9000px; margin: 0; display: none;}
h2 { margin-top: 25px; margin-bottom: 0; font-size: 16px; }
h2 a { color: #63b4cd; }
h3 { font-size: 14px; color: #666; }


p {    line-height: 1.5em;    margin: 1.2em 0; }


ol, ul {
    line-height: 1.5em;
    margin: 1.2em 0 1.2em 2em;
    }
ul li,
ol li{ margin-bottom: 0.2em; }


img, a img{ border:0px;}


a, a:hover { color: #8ab459; text-decoration: none; }
a:hover { color: #777; }


em{
    font-style: normal;
    font-weight: bold;
    color: #ef6c6c;
    }


blockquote {
    margin: 0 20px;
    padding: 0 20px;
    border-left: 4px solid #E8E7D0;
    font-size: 0.9em;
    }


pre{
    display: block;
    margin: 1.0em 1.5em 1.0em 0;
    padding-left: 0.8em;
    border-left: 1px solid #ccc;
    background-color: #eee;
    overflow: auto;
    }


code{font-family: monospace;  font-size: 11px; background-color: #eee;}
pre code{ line-height: 1.3em;}


kbd{
    background-color: #ddd;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    font-size: inherit;
    font-family: inherit;
    padding: 0 3px 2px 4px;
    }


del, del * { text-decoration: line-through; }


.small {
    font-size: 0.9em;
    color: #999;
    }
/***********comentarios***************/


#comment{
    width: 100%
}
.comentarios{
    border:1px solid #DEE4DA;
    background-color: #F3F3F3;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
}
.commentarios li {
    border:1px solid #DEE4DA;
    background-color: #F3F3F3;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
    }
.commentarios li:hover{ background-color: #fff; }


.comentariosmeta {
    margin-top: 0;
    padding-top: 1px;
    font-size: 0.9em;
    color: #999;
    }
.comentariostitulo {
    margin:0px;
    margin-bottom:2px;
}
/*********sidebars***************/
.sidebar h2 {
        text-transform: uppercase;
    display: inline;
    margin: 1.2em 0 0.6em 0;
    padding: 0 10px 0 0;
    color: #63b4cd;
    background: url(imagenes_qwilm/arrow.gif) no-repeat center right;
    font-size: 1.1em;
    }


.sidebar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
.sidebar ul ul {
    margin: 1.0em 0 1.5em 0;
    border-top: 1px solid #dee4da;
    }
.sidebar ul ul li {
    padding: 0 0 0 10px;
    border-bottom: 1px solid #dee4da;
    }
.sidebar ul ul li a {
    display: block;
    margin: 0 0 0 -10px;
    padding: 2px 10px 0 10px;
    }
.sidebar ul ul li a:hover {
    background-color: #f3f3f3;
    }
/****************************/
.linkpermanente{
    padding: 0 0 0 17px;
    background: url(imagenes_qwilm/permalink.gif) no-repeat center left;


}
/**********formularios*********/
input, textarea, select {
    border: 1px solid #C1C0B5;
    background-color: #FAFAF0;
    color: #555;
    font-size: 1em;
    font-family: "Lucida Sans Unicode", Tahoma, Arial, sans-serif;
    }
/*******pagina est�tica*********/
#pagina {
    border-bottom:solid 1px #DEE4DA;
    padding-top:30px;
    padding-bottom:0px;
}
#pagina img{
        border: 0px solid #fff;
    padding: 3px;
    margin: 5px;
    }
.pagina-titulo{
    color: #63B4CD;
    margin:0px;
    margin-bottom:2px;


}
/**********gravatar***************/
.gravatar{
    float:right;


}
/*********Privado-comentarios***************/
.comentarios-autor{
    border:1px solid #B2FF66;
    background-color: #95FFCE;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
}
.comentarios-autor li {
    border:1px solid #B2FF66;
    background-color: #95FFCE;
    padding:5px;
    margin-top:5px;
    margin-bottom:5px;
    }
.comentarios-autor li:hover{ background-color: #fff; }
/**********************************************/
#searchform{
width:100%;


}

Alles anzeigen

moopoints

please help! :)

moopoints

Sehr cool. Jetzt springt die Sidebar wenigstens nicht mehr runter! Danke.

Was ich mir jetzt noch vorgestellt habe, wäre die Möglichkeit, dass beim Verkleinern des Fensters die Sidebar nicht verschwindet, sondern statisch rechts im Fenster bleibt und der Text sich dynamisch verkleinert. Geht das noch irgendwie?

@grafagoggel: was heisst FF?

moopoints

mir ist grad aufgefallen, dass ich meine Signatur falsch verlinkt habe. vielleicht wird das Problem jetzt deutlich?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Statische Sidebar

Jetzt mitmachen!