Textfeld scrollen

DonNemesis

ich würde gerne das scrollverhalten ändern:
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/, ich komm da nicht wirklich weiter. ich hab die #container fixed gesetzt, nun fehlt der footer. frage ist wie bekomm ich den container (den weißen) zum scrollen? die css:

Code

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

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

telekommander

Hm, etwas merkwürdiger Plan,

Klingt nach Iframe, und doch kein Iframe ...

Zunächst war ich etwas verwirrt, weil ich eine [FONT="Courier New"]<textarea>[/FONT], gesucht habe und es 'ne Weile gedauert hat bis ich gepeilt habe was du wirklich willst.

Du solltest davon Abstand nehmen, "position: fixed" ist nix für'n IE 6.0 .
Das der Footer fehlt ist klar weil "fixed" eben "fixed" ist und es nix mehr zum scrollen gibt.
Einem IE6 kann man es über Umwege und "Verbiegungen" beibringen.
Weitere (ungetestete) Möglichkeit wäre eventuell dein "Textfeld" mit "[FONT="Courier New"]overflow: scroll[/FONT]" o. ä. zum scrollen zu bewegen. Dazu brauchst du auch eine Höhenangabe des Containers.

DonNemesis

Danke, es funktioniert!

Code

#content,#contentalt {
    background-color: #FAFCFF;
    border: 1px solid #909090;
    color: #2A2A2A;
    padding: 15px 20px 5px;
width: 60%;
height:    328px;
overflow:scroll;
}

da das in jeder bildschirmauflösung funktionieren soll, habe ich es mit % probiert - width klappt damit, height allerdings nicht. weiss jemand wieso?!

Arno Simon

schau dir dazu mal Positionieren: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets an ;)

da steht zwar nicht die erklärung für obiges verhalten, aber eine lösungsmöglichkeit dazu. stichwort min/max-height/width

vG

Arno

telekommander

Zitat von DonNemesis

da das in jeder bildschirmauflösung funktionieren soll, habe ich es mit % probiert - width klappt damit, height allerdings nicht. weiss jemand wieso?!

... oder das hier: Div 100 Pro

Und weil wir bei "fixed" für'n IE waren, das noch als Lektüre dazu:
Fixed fuer IE6
Fixed fuer IE6

DonNemesis

so ich habs nun soweit hinbekommen. nur ist nun unten ein "durchsichtiger" scrollbalken - da der nicht genutzt wird. kann man den irgendwie ausblenden?

telekommander

Zitat von DonNemesis

so ich habs nun soweit hinbekommen. nur ist nun unten ein "durchsichtiger" scrollbalken - da der nicht genutzt wird. kann man den irgendwie ausblenden?

[FONT="Courier New"]overflow-y: hidden; [/FONT]
bzw.
[FONT="Courier New"]overflow-y: auto; [/FONT]

Bei [FONT="Courier New"]hidden[/FONT] wird der Scrollbalken generell nicht angezeigt, also schlecht bei geringeren oder kleinen Bildschirmauflösungen.
[FONT="Courier New"]auto[/FONT] sollte ihn verfügbar machen, wenn es nötig ist.

Test it ...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Textfeld scrollen

Jetzt mitmachen!