CSS content met scrollbar - Softwareontwikkeling

zondag 22 april 2007 18:27

Acties:

Verwijderd

Topicstarter

Ik ben een site aan het ontwerpen *knip* met alleen maar div's in plaats van tabellen of frames.

Ik loop echter tegen het volgende probleem aan: als ik in de content een lange tekst heb, moet er een scrollbar komen in de div waar de tekst in staat. Dus het menu aan de linkerkant moet niet scrollen. (Klik eens op wie zijn wij). Nu dacht ik het volgende:

code:

CSS:
#tekst{
overflow-y: auto;
}

Maar dit werkt om de een of andere reden niet.
Ik denk dat het komt doordat ik de content-div geen hoogte mee kan geven, aangezien ik wil werken met een vaste footer. Na heel veel topics gelezen te hebben ben ik tot de volgende CSS gekomen:

code:

html, body {
background: url('images/achtergrond.bmp');
font-family:Verdana;
color:#1B447C;
font-size:12px;
text-align: center;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height:100%;
}

#container {
background: url('images/back.jpg');
background-repeat: repeat-y;
text-align: left; 
margin: 0 auto; 
width: 799;
border: solid 0px black;
height:100%;
}

#header{
background-image:url("images/kop2.JPG");
height:145;
}

#topmenu{
background-color: #00427E;
height: 20px;
border-top: 2px solid white;
border-bottom: 2px solid #CC071E;
}

#content {
text-align:justify;
}

#tekst{
width: 649;
padding:30 30 30 30;
float: right;
}

#menu{
width:150px;
margin: 0px;
padding: 20 10 10 10;
float:left;
text-align: left;
}

#footer {
text-align: center;
font-size:9;
height:17;
clear: both; 
border-top: solid 1px #BE9E54;
background-color: #FFFFFF;
position:absolute;
bottom:0px;
width:799;
}

Zoals je ziet scrollt de hele pagina nu en loopt de tekst door de footer heen. Dit kan natuurlijk niet de bedoeling zijn.

Hoe krijg ik het voor elkaar dat ALLEEN de div tekst een scrollbalk krijgt?

[ Voor 23% gewijzigd door Verwijderd op 22-04-2007 19:12 ]

zondag 22 april 2007 18:39

Acties:

Creepy

Tactical Espionage Splatterer

En wat heb je zelf al geprobeerd? Wat lukte daar niet precies mee? Zou je je daarnaast nog kunnen beperken tot een kleine test case en alleen de relevante CSS?

En gelijk ook even een move naar Programming. Zie Waar hoort mijn topic?

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

zondag 22 april 2007 18:46

Acties:

daniëlpunt

monkey's gone to heaven

overflow: auto;

zondag 22 april 2007 19:15

Acties:

Verwijderd

Topicstarter

Creepy schreef op zondag 22 april 2007 @ 18:39:
En wat heb je zelf al geprobeerd? Wat lukte daar niet precies mee? Zou je je daarnaast nog kunnen beperken tot een kleine test case en alleen de relevante CSS?

En gelijk ook even een move naar Programming. Zie Waar hoort mijn topic?

Sorry, had zelf inderdaad al het een en ander geprobeerd. Onder andere bij de tex div een overflow (op zowel auto als scroll als visible), net als in de content-div. Als ik een overflow: auto in de text-div zet, geeft ie wel een scrollbalk, maar die blijft grijs, en kan je dus niet gebruiken. Dit komt denk ik doordat de content-div automatisch hoger wordt naarmate er meer tekst in staat. Deze div zou dus eigenlijk een maximale hoogte moeten hebben...

Heb ook geprobeerd om de container-div een overflow te geven, maar dan scrollen ook de header en de footer mee. Dit werkt dus ook niet.

[ Voor 7% gewijzigd door Verwijderd op 22-04-2007 20:38 ]

zondag 22 april 2007 20:50

Acties:

daniëlpunt

monkey's gone to heaven

je moet wel een vaste hoogte opgeven voor de #tekst en die een overflow geven.

zondag 22 april 2007 21:13

Acties:

Verwijderd

Topicstarter

super-muffin schreef op zondag 22 april 2007 @ 20:50:
je moet wel een vaste hoogte opgeven voor de #tekst en die een overflow geven.

Kan ik dan misschien met een javascriptje de hoogte van het scherm bepalen, zodat ik #tekst als hoogte kan meegeven: (hoogte_scherm - header - footer)? Zou dat gaan werken? Want dat zou betekenen dat de footer ook altijd onderaan het scherm staat...

zondag 22 april 2007 21:58

Acties:

Verwijderd

Topicstarter

Ik heb het nu als volgt gedaan:

Ik roep in de body een onLoad functie getHeight() aan.

code:

javascript:

function getHeight(){
h = screen.availHeight-145-17-24;
document.getElementById('tekst').style.height = h+"px";
}

Hierin zijn 145 = header, 17 = footer, 24 = navigatiebalk.

Echter is de content nu nog steeds te lang. Als ik er ongeveer (iets meer dan) 100 px afhaal is ie goed. Maar volgens mij geeft ie de hoogte zonder werkbalken (met de aanroep screen.availHeight), toch???
Heb nu ook geprobeerd om de eerste pixel in het scherm van bovenaf aan te geven met screen.availTop, maar die geeft een 'undefined' terug...

[ Voor 12% gewijzigd door Verwijderd op 23-04-2007 09:05 ]

maandag 23 april 2007 23:11

Acties:

Verwijderd

Topicstarter

subtiele *kick*

zaterdag 26 mei 2007 22:01

Acties:

Verwijderd

Topicstarter

Ik heb het inmiddels voor elkaar met onderstaande CSS. (Ook handig voor mensen die er niet uit komen...)
Echter werkt het alleen in IE, niet in Firefox. Iemand enig idee hoe dit komt en hoe het op te lossen is?

De CSS:

Cascading Stylesheet:

html {
    height:100%; 
    max-height:100%; 
    padding:0; 
    margin:0; 
    border:0; 
    font-size:12px; 
    font-family:Verdana;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ 
    }
/****************************************************************************/
body {
    height:100%; 
    max-height:100%; 
    overflow:auto; 
    padding:0; 
    margin:0; 
    border:0;
    background:url(images/achtergrond.bmp);
    }
/****************************************************************************/
#containerindex{
    position:absolute;
    height:100%;
    width:799; 
    left:50%; 
    margin-left:-400px; 
}
#containerindex img{
    border:0px;
}
/****************************************************************************/
#containermain{
    position:absolute;
    height:100%;
    width:799; 
    left:50%; 
    margin-left:-400px; 
    background: url(images/back_main.jpg);
}
/****************************************************************************/
#container{
    position:absolute;
    height:100%;
    width:799; 
    left:50%; 
    margin-left:-400px; 
    background: url(images/back.jpg);
}
/****************************************************************************/
#contentindex {
    display:block; 
    position:absolute; 
    z-index:3; 
    top:150px; 
    bottom:52px; 
    margin-left:-399; 
    left:50%; 
    padding: 0 0 0 0;
    }

* html #contentindex {
    top:0; 
    bottom:0; 
    height:100%;
    width:800;
    border-top:169 solid #fff; 
    border-bottom:20px solid #fff;
    overflow:auto;
    float:left;
    }

zondag 27 mei 2007 04:15

Acties:

DamadmOO

Verwijderd schreef op zondag 22 april 2007 @ 21:58:
Echter is de content nu nog steeds te lang. Als ik er ongeveer (iets meer dan) 100 px afhaal is ie goed. Maar volgens mij geeft ie de hoogte zonder werkbalken (met de aanroep screen.availHeight), toch???
Heb nu ook geprobeerd om de eerste pixel in het scherm van bovenaf aan te geven met screen.availTop, maar die geeft een 'undefined' terug...

Voor die hoogte kan je dit gebruiken in je css:

Cascading Stylesheet:

div#portal {
  height: expression(document.body.clientHeight - 189 + "px");
  overflow-x: hidden;
}

Pagina: 1

Reageer