✔ Inhalt scrollen aber wie.

[mennepaul]

Hallo,
ich habe folgendes Template benutzt
http://www.intensivstation.ch/files/templates/2/template-1-3col.html

bekomme es aber nicht hin das der Inhalt zum scrollen geht, wenn der Inhalt für die Seite zu lang wird.
Was mache ich falsch?

 

[Maik]

Hi,

grundsätzlich gibt es zwei Möglichkeiten, damit der Inhalt in einer DIV-Box gescrollt werden kann:

1. Die Box mit einer festen Höhen und der overflow-Eigenschaft auszeichnen.
   
   
2. Die Box im Anzeigebereich positionieren, also mit Positionsangaben nach oben und unten belegen, und ebenfalls die overflow-Eigenschaft auf die Box anwenden - siehe hierzu das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken.

 

[mennepaul]

Ich bekomme es einfach nicht hin

Hier mal der CSS Code. Finde einfach nicht was ich umstellen muß.

body {
background-color: #FFFFFF;
font-size: 12px;
font-family: Verdana;
color:#000000;
padding:0;
margin:0;
}
a {color: #006600;}

h1 {
font-size: 16px;
background-color: #FFFFFF;
padding:5px 15px;
margin:0;
text-align: center;
}

h2 {
font-size:12px;
font-weight: bold;
padding: 5px 10px;
margin:0px;}

img.download {vertical-align:middle;}

/* ----------container zentriert das layout-------------- */
#container {
width: 900px;
margin-bottom: 10px;
margin:0 auto;
background-color: #FFFFFF;
}

/* ----------banner for logo-------------- */
#banner {
background-color: #FFFFFF;
text-align: center;
padding: 0px;
margin: 0px;
}
#banner img {padding:5px 0px;}

/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0;
margin: 0 200px;
}
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}

p, pre{
padding: 5px 10px;
margin:0;
}

/* --------------left navigavtion------------- */
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}
#right {
float: right;
width: 200px;
margin: 0;
padding: 0;
}
/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: center; }

/* -----------hoirzontal Navi--------------------------- */

.bevelmenu{
margin: 0;
width: auto;
background-color: #FFFFFF;
text-align: center; /*set value to "right" for example to align menu to the right of page*/
font-family: Verdana;
font-size: 12px;
font-weight: bold;
padding-top: 6px;
padding-right: 0;
padding-bottom: 6px;
padding-left: 0;
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: #FFFFFF;
background-color: #006600;
}

.bevelmenu li a:hover{
color: #006600;
background-color: #FFFFFF;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}

/* -----------vertikales Navi--------------------------- */
.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#FFFFFF; /*light dark dark light*/
background-color: #006600;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: #006600;
background-color: #FFFFFF;
}

/*Grundlegene Elemente zur Positionierung von Bildern im Text mit nötigen Abständen zum Text*/
.img-left {
float:left;
margin-right:0.5em;
margin-bottom: 0.25em;
}
.img-right {
float:right;
margin-left:0.5em;
margin-bottom: 0.25em;
}

/* --------------div links und rechts------------- */
#links {
float: left;
width: 250px;
margin: 0px;
padding: 0px;
}
#rechts {
float: right;
width: 250px;
margin: 0;
padding: 0;
}
.clear {
clear:left;
}

 

[Maik]

Ich hab dir doch die zwei Lösungswege genannt, und dafür, dass du es nicht hinbekommst, antwortest du hier aber ganz schön fix und klatscht den CSS-Code ohne jegliche "Gehversuche" deinerseits hier rein, so dass ich die starke Vermutung hab, dass du es noch nicht mal versucht hast.

Wenn der Inhalt in der Box #content gescrollt werden soll, dann nimm mal dieses Stylesheet:

/* aus */
div#content {
min-height:600px;
height:expression(this.scrollHeight > 600 ? "auto":"600px");
}

/* wird */
div#content {
height:600px;
overflow:auto;
}

 

[mennepaul]

Das hatte ich schon probiert, deshalb bin ich ja am verzweifeln.

Habe dann auch einen waagerechten scrollbalken den ich aber nicht haben möchte.

Danke

 

[Maik]

Versuch es mal hiermit:

#content {
background-color: #ffffff;
padding: 0;
/* margin: 0 200px; */ /* auskommentiert = deaktiviert */
}
div#content {
height:600px;
overflow:auto;
}

 

[mennepaul]

Super das haut hin. Richtig klasse. Wäre ich nie drauf gekommen.

Schönen Dank