[CSS]scrollbar en centreren mbv div

[Verwijderd]

Hallo,

Ik zit met een klein probleempje.
Ik heb een opmaak gemaakt mbv css.
Dit is allemaal uiteindelijk gelukt.
Ik maak gebruik van position="absolute" omdat ik erachter ben gekomen dat ik alle div's hierdoor goed opelkaar kan laten aansluiten en dat het ook in Opera IE en FF hetzelfde eruit ziet.

Mijn probleem is de scrolbar van div content.
Deze wilt niet onderaan de pagina stoppen.
Ik heb de rechter scrollbar uitgezet omdat je dan een beetje hetzelfde effect krijgt als met frames dat het menu altijd zichtbaar is en de bovenkant ook.

Mijn andere probleem is dat ik het geheel niet in het midden uitgecentreerd krijg.

Ik heb hier een link

Zou iemand mij verder willen helpen met het oplossen?

Hier mijn CSS code (misschien niet de beste oplossing maar het werkt wel voor mij).

Cascading Stylesheet:

/* CSS Document */
html, body {
    margin: 0;
    padding: 0;
    overflow-y:hidden;
    height: 100%;
}

#container {
    margin-left: auto;
    margin-right: auto;
}

#topanimation {
    background: #5a5a5a;
    position: absolute;
    top: 0px;
    left: 150px;
    width: 452px;
    height: 250px;
    text-align:center;
    }

#navigation {
    background: #aaa;
    position: absolute;
    top: 250px;
    left: 0px;
    width: 150px;
    }

#contenttop {
    background: #FF33CC;
    position: absolute;
    top: 250px;
    left: 150px;
    height: 40px;
    width: 450px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    }
    
#content {
    background: #5a5a5a;
    position: absolute;
    top: 291px;
    left: 150px;
    width: 450px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    overflow-y:auto;
    overflow-x:none;
    height: 100%;
    }

#rightanimation {
    background: #ccc;
    position: absolute;
    top: 250px;
    left: 602px;
    width: 148px;
    border-top: 1px solid #000;
    }

[Rowanov]

Height 100% geeft de hoogte van je complete browser venster aan, daarom valt er een stuk buiten beeld.

Iets in het midden centreren met behulp van een container om het zootje dat gecentreerd moet worden kans als volgt:

Cascading Stylesheet:

body {
  text-align: center;
}
#container-id{
  width: 700px; /* dit ontbrak in je code */
  margin: 0 auto;
  text-align: left;
}

[ Voor 9% gewijzigd door Rowanov op 27-04-2006 17:19 . Reden: koffie nodig ]

[Verwijderd]

Na het aanpassen cetreerd het jammer genoeg nog niet.

100% is dus van de hele browser, hoe pak ik dan het het stuk wat er binnen valt?

[crisp]

Dit is precies de reden waarom je geen absolute positioning moet gebruiken als het niet noodzakelijk is, maar je hebt een dilemma hier. Het w3c boxmodel maakt het praktisch onmogelijk dit voor elkaar te krijgen. Met absolute positioning zou je nog wel top: 291px; bottom: 0px; op kunnen geven zonder height, maar dat snapt IE weer niet:

Cascading Stylesheet:

#content {
    position:absolute;
    top: 291px;
    bottom: 0px;
    background: #5a5a5a;
    margin-left: 150px;
    width: 450px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    overflow-y:auto;
    overflow-x:none;
}

In-flow moet je gaan werken met (-moz-)box-sizing en IE in quirksmode dwingen:

Cascading Stylesheet:

#container {
    position: relative;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    padding-top: 291px;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
}

#content {
    background: #5a5a5a;
    margin-left: 150px;
    width: 450px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    overflow-y:auto;
    overflow-x:none;
    height: 100%;
}

(meteen je centrering gefixed )

Een alternatief zou kunnen zijn je content-div geen hoogte geven en achteraf met javascript aan de hand van de beschikbare hoogte de juiste height toekennen.

[ Voor 12% gewijzigd door crisp op 27-04-2006 17:14 ]

[Verwijderd]

Hoi Crisp,

Dankje voor de oplossing werkt echt als een trein .
Het centreren werkt zowel in IE als FF dus echt een goeie.
De scrollbar staat in FF ook op de goeie plaats alleen in IE nog niet.

Hier een scherm van FF
Hier een scherm van IE

Sorry maar de oplossing met javascript gaat denk ik toch wel iets boven mijn pet.

Hoplijk is dit ook op te lossen voor in IE met CSS?

[ Voor 5% gewijzigd door Verwijderd op 27-04-2006 19:33 ]

[Verwijderd]

Misschien moet ik toch maar afzien van een scrollbar op een andere plaats binnen mijn site, Of niet?
Wellicht is de beste crossbrowser toch op deze manier:

Cascading Stylesheet:

html, body {
    margin: 0;
    padding: 0;
    background-color:#000000
    }

body {
    font: 100% verdana sans-serif;
    }

p, h1 {
    font-size: 1em;
    }

#container {
    background-color: #5a5a5a;
    position: relative;
    width: 750px;
    margin: 0 auto;
    padding-bottom: 0px;
    }
 
#topanimation {
    text-align:center;
    }

#topanimation img {
    vertical-align: bottom;
    }

#navigation {
    border-right: 1px solid #000;
    float: left;
    width: 140px;
    padding: 1px 5px;
    }

#content {
    margin-left: 150px;
    margin-right: 148px;
    padding: 1px 5px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    }

#rightanimation {
    width: 138px;
    float: right;
    padding: 1px 5px;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    }

HTML:

 <div id="container">
      <div id="topanimation">
        [img]"top.jpg"[/img]
      </div>
      <div id="navigation">
        <ul>
          <li>profiel
          </li>
        </ul>
      </div>
      <div id="rightanimation">

        <p>
          rightanimation
        </p>
      </div>
      <div id="content">
        <h1>
          content tekst
        </h1>content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
        content<br>
      </div>
    </div>

[ Voor 23% gewijzigd door Verwijderd op 28-04-2006 11:25 ]