Textfeld scrollen

DonNemesis

ich würde gerne das scrollverhalten ändern und zwar wie folgt:

nicht die gesamte seite soll gescrollt werden, sondern ausschließlich das Textfeld, sprich die Sidebars und der Header bleiben statisch und das Textfeld dynamisch. hat dort jemand ne idee für? Der Blog: http://www.derdierkower.de

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

Jeriko

Naja einfachste Lösung wäre wohl mit entsprechenden position:fixed; Angaben im Stylesheet, da müsste dann aber ein bisschen umgebaut werden.

Die Sache ist aber: Der Inhalt der Sidebars ist länger als die Höhe eines typischen Browserfensters (hier z.B. FF Fullscreen bei 1280x1024) - sprich alles unten wäre dann abgeschnitten. Das willst du doch nicht wirklich, oder?

Gruß Jeriko

DonNemesis

Danke für den Hinweis, ich werds mal testen.

Was die Sidebarlänge angeht: Es ging mir dabei um einen neuen Blog, der aber noch nur local existiert. derdierkower.de war als Layoutbeispiel gedacht. Missverständlich ausgedrückt von mir. Aber trotzdem danke für den Hinweis diesbezüglich.

DonNemesis

ich komm da nicht wirklich weiter. ich hab die variable #container auf fixed gesetzt, nun fehlt allerdings der footer. und die frage ist wie bekomm ich den contentcontainer (den weißen) zum scrollen? http://www.derdierkower.de/test ist die testvariante. hier mal die css:

Code

/* 
Theme Name: WP-Andreas09 l10n
Theme URI: http://www.zyblog.de/2006/01/09/wordpress-theme-wp-andreas09-l10n-version/
Description: A localizable Version of the WP-Andreas09 theme. Localization changes by <a href="http://www.zyblog.de/">Tim Zylinski</a>. Original theme by <a href="http://webgazette.co.uk/">Ainslie Johnson</a>. 
Version: 1.0
Author: Tim Zylinski
Author URI: http://www.zyblog.de/
andreas09 v1.0 (Dec 10th 2005) - An open source template by Andreas Viklund - http://andreasviklund.com. Free to use for any purpose as long as the proper credits are given to the original author.
Ported to WordPress by Ainslie Johnson - Last updated 02/01/06
Changes to allow localization with .mo/.po files by Tim Zylinski - Last updated 09/01/06
*/
/* General Element Styling */
a {
    color: #505050;
     font-weight: bold;
    text-decoration: none;
}


.entry a {
color: #0033cc;
}


.entrytext a {
color: #0033cc;
}


a:hover {
    color: #808080;
    text-decoration: underline;
}


blockquote {
    border: 1px dashed #B0B0B0;
    padding: 5px;
}


body {
    background: #8B8B8B;
    color: #303030;
    font: 76% Verdana,Tahoma,Arial,sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}


div.gallery {
    border-top: 1px solid #BEBFC3;
    margin: 5px 0 10px 0;
    overflow: auto;
    padding: 0px 5px 5px 5px;
}


li.feed {
    background: url(images/rss.gif) no-repeat left top;
    list-style: none;
    padding: 2px 0 8px 20px;
}


ol.commentlist li {
    border: 1px solid #B0B0B0;
    margin-bottom: 10px;
    padding: 10px;
}


ol.commentlist li cite {
    text-transform: capitalize;
}


ol.commentlist li p {
    padding-top: 10px;
}


p {
    line-height: 1.5em;
    margin: 0 0 15px;
    padding: 0px;
    text-align: justify;
}


p {
    text-align: justify;
}


small.tags {
    border: 1px dashed #008000;
    color: #008000;
    display: block;
    font-weight: bold;
    padding: 5px;
    width: 99%;
}


.alignleft {
    float: left;
    text-align: left;
}


.alignright {
    float: right;
    text-align: right;
}


.alt {
    background: #F3F5CC;
}


/* Archives/Links Page List styles */
.archives li, .linkspage li {
    list-style: none;
}


.archives ul.children {
    margin-left: 10px;
    padding-left: 10px;
}


.bottomnavigation {
    border-top: 1px dashed #B0B0B0;
    margin: 30px 0 0 0;
    padding: 5px 0 30px 0;
}


.category {
    border-bottom: 1px solid #B0B0B0;
}


.center {
    text-align: center;
}


/*** Various classes ***/
.clearingdiv {
    clear: both;
    height: 30px;
    width: 1px;
}


.date {
    border-bottom: 1px solid #B0B0B0;
    margin-top: -10px;
    padding-top: 0px;
}


.entrytext {
    padding-top: 0px;
}


.galleryleft {
    float: left;
    padding-bottom: 0px;
    padding-right: 15px;
    text-align: left;
}


.galleryright {
    text-align: justify;
}


.hide {
    display: none;
}


/*** Text format ***/
.intro {
    font-size: 1.1em;
    font-weight: bold;
    letter-spacing: -1px;
}


.large {
    font-size: 1.4em;
}


.left {
    background: #FAFBFC;
    border: 1px solid #B0B0B0;
    float: left;
    margin: 5px 15px 6px 0px;
    padding: 5px;
}


/* Previous/Next Page Navigation */
.navigation {
    border-bottom: 1px dashed #B0B0B0;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
}


.noalign {
    background: #FAFBFC;
    border: 1px solid #B0B0B0;
    margin: 5px 5px 5px 5px;
    padding: 5px;
}


.post {
    margin: 0px;
    padding-bottom: 10px;
    padding-top: 0px;
position: scroll;
}


/*** Comments Display ***/
.postmetadata {
    background: #F3F5CC;
    border: 1px solid #B0B0B0;
    font-size: 0.9em;
    margin: 0px;
    padding: 10px;
}


.right {
    background: #FAFBFC;
    border: 1px solid #B0B0B0;
    float: right;
    margin: 5px 0px 6px 15px;
    padding: 5px;
}


/* Search Form */
.searchform {
    margin: 0;
}


.small {
    font-size: 0.8em;
}


/* Image Display */
.thumbnail {
    background: #FAFBFC;
    border: 1px solid #B0B0B0;
    margin: 0 0 10px 10px;
    padding: 5px;
}


#author {
    border: 1px solid #B0B0B0;
}


/*** comments Form ***/
#comment {
    border: 1px solid #B0B0B0;
    width: 100%;
}


#commentform {
    width: 97%;
}


/*** Main container ***/
#container {
    color: #303030;
    margin: 0;
    min-width: 770px;
    padding: 0;
    text-align: left;
    width: 100%;
position: fixed;
}


#content {
    margin: 0 200px;
}


#content h1,#contentalt h1 {
    border-bottom: 1px solid #B0B0B0;
}


#content h1,#contentalt h1,#contentalt h2 {
    background-color: inherit;
    color: #606060;
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing: -1px;
    margin: 0 0 15px;
    padding: 0;
}


#content h2 {
    color: #000000;
    font-size: 1.6em;
}


/*** Content ***/
#content,#contentalt {
    background-color: #FAFCFF;
    border: 1px solid #909090;
    color: #2A2A2A;
    padding: 15px 20px 5px;
position: scroll;
}


#contentalt {
    margin: 0 200px 0 20px;
}


#email {
    border: 1px solid #B0B0B0;
}


/*** Footer ***/
#footer {
    background: url(images/footerbg.jpg) #8B8B8B top left repeat-x;
    clear: both;
    color: #000000;
    font-size: 0.7em;
    font-weight: bold;
    margin: 0;
    padding: 20px 0;
    text-align: center;
    width: 100%;
}


#footer a {
    color: #000000;
    font-weight: bold;
}


#leftside {
    float: left;
    margin-right: 10px;
}


/*** Sidebar menu ***/
#leftside h2, #rightside h2 {
    border-bottom: 1px solid #BEBFC3;
    font-size: 1.4em;
    margin-top: 10px;
    padding: 5px;
}


#leftside li {
    list-style: none;
}


#leftside ul {
    margin: 0px;
    padding-left: 0px;
}


#leftside ul.box li a {
    background: #F0F0F0;
    border: 1px solid #F0F0F0;
    color: #606060;
    display: block;
    margin-top: 8px;
    padding: 5px 4px 4px 10px;
    position: relative;
    text-transform: capitalize;
    width: 140px;
}


#leftside ul.box li a:hover {
    background: #F8F9FA;
    border: 1px solid #909090;
    color: #303030;
    text-decoration: none;
}


#leftside ul.children li a {
    font-size: 0.8em;
    letter-spacing: 1px;
    margin: 3px 0 2px 10px;
    padding: 4px 2px 2px 8px;
    width: 125px;
}


/*** Sidebars ***/
#leftside,#rightside {
    margin: 0;
    padding: 0 10px 10px;
    width: 165px;
}


/*** Horizontal menu ***/
#mainmenu {
    float: left;
    margin-bottom: 25px;
}


#mainmenu a {
    border-right: 1px solid #F3F100;
    color: #F3F100;
        display: block;
    font-size: 0.7em;
    padding: 11px 10px 10px;
}


#mainmenu a:hover {
    text-decoration: none;
}


#mainmenu li.current_page_item {
    color: #505050;
    text-decoration: none;
}


#mainmenu li.page_item {
    float: left;
    height: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}


#mainmenu ul {
    font-size: 16px;
    margin: 0;
    padding: 0;
}


#page {
    border-bottom: 1px solid #B0B0B0;
    margin-bottom: 10px;
    padding-bottom: 10px;
}


#rightside {
    float: right;
    margin-left: 10px;
}


#rightside img {
    border: 0px;
}


#rightside li {
    list-style: none;
}


#rightside ul {
    margin: 0px;
    padding-left: 0px;
}


#rightside ul.box li a {
    background: #E8E9EA;
    border: 1px solid #B0B0B0;
    color: #606060;
    display: block;
    margin-top: 8px;
    padding: 5px 4px 4px 10px;
    position: relative;
    text-transform: capitalize;
    width: 140px;
}


#rightside ul.box li a:hover {
    background: #F8F9FA;
    border: 1px solid #909090;
    color: #303030;
    text-decoration: none;
}


#rightside ul.children li a {
    font-size: 0.8em;
    letter-spacing: 1px;
    margin: 3px 0 2px 10px;
    padding: 4px 2px 2px 8px;
    width: 125px;
}


#searchbox {
    background: #FAFCFF;
    border: 1px solid #B0B0B0;
    margin: 0 4px 0 0;
    width: 160px;
}


#searchbutton {
    background: #F6F9FE;
    border: 1px solid #B0B0B0;
}


#searchbutton:hover {
    background: #F6F9FE;
    border: 1px solid #848484;
    cursor: pointer;
}


/*** Header section ***/
#sitename {
    color: #0033cc;
    height: 92px;
    margin: 0 20px 10px;
    text-align: center;
}


#sitename h1 {
    font-size: 2.4em;
    padding-top: 20px;
}


#sitename h1 a {
    color: #0033cc;
    letter-spacing: 10px;
    text-decoration: none;
}


#sitename h1,#sitename h2 {
    font-weight: 400;
    margin: 0;
    padding: 0;
}


#sitename h2 {
    font-size: 1.6em;
}


#submit {
    background: #F0F0F0;
    border: 1px solid #B0B0B0;
}


#submit:hover {
    background: #E8E9EA;
    border: 1px solid #848484;
    cursor: pointer;
}


#url {
    border: 1px solid #B0B0B0;
}


/*** Content wrap ***/
#wrap {
    clear: both;
    font-size: 0.9em;
    padding: 0;
}


.pagebar 
    { 
        font: 11px Arial, Helvetica, sans-serif; 
        padding-top: 20px; 
        padding-bottom: 10px; 
        margin: 0px; 
    }


.pagebar a, .pageList .this-page 
    {
        padding: 2px 6px; 
        border: solid 1px #ddd; 
        background: #fff; 
        text-decoration: none;
    }


.pagebar a:visited 
    {
        padding: 2px 6px; 
        border: solid 1px #ddd; 
        background: #fff; 
        text-decoration: none;
    }


.pagebar .break 
    {
        padding: 2px 6px; 
        border: none; 
        background: #fff; 
        text-decoration: none;
    }


.pagebar .this-page 
    {
        padding: 2px 6px; 
        border-color: #999; 
        font-weight: bold; 
        font-size: 13px; 
        vertical-align: top; 
        background: #fff;
    }


.pagebar a:hover 
    {
        color: #fff; 
        background: #0063DC; 
        border-color: #036; 
        text-decoration: none;
    }

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Textfeld scrollen

Jetzt mitmachen!