[css] overflow: auto op div met variabele lengte - Softwareontwikkeling

donderdag 30 november 2006 17:12

Acties:

Redder in nood?

Topicstarter

Goedemiddag

Momenteel ben ik bezig met een nieuwe persoonlijke site, waar allemaal leuke dingetjes en foto's van mezelf op moeten komen te staan. Voor deze site maak ik gebruik van html, css, php en mysql, en in de eerste twee zit het probleem

.

Hetgeen ik tot nu toe heb staat op http://www.jasperboere.nl/test2/
De betreffende CSS staat op http://www.jasperboere.nl/test2/styles/darkgrey/style.css

Ik heb voor deze site gekozen voor de volgende opzet met boxen:

• 1 grote box waar alle andere boxen in hangen, gele border
• bovenaan een banner, groene border
• daaronder het menu, blauwe border
• daaronder een div met 2 andere div's, rode border (hier gaat het om!)
• 2 kleine div's met inhoud en foto, witte border
• footer onderaan, groene border

De bedoeling is dat de banner, het menu en de footer constant in beeld blijven, terwijl de middelste div (dus met de rode border) aangepast wordt. Dit lukt allemaal prima

, maar het probleem onststaat wanneer de content van deze box groter wordt dan de pagina. Ik dacht dit op te vangen met een overflow: auto op deze box, maar dat werkt om een of andere reden niet.

De box met de rode border heet #maincontainer, en heeft de volgende attributen:

Cascading Stylesheet:

#maincontainer {
    position: relative;
    width: 780px;
    padding: 5em 2em 0em 2em;
    overflow: auto;
    border: 1px solid red;
    -moz-box-sizing: padding-box;
    }

Ik heb al van alles geprobeerd (absoluut positioneren, hoogtes definiëren, etc) maar ik kom er niet uit. Kan 1 van jullie mij verder op weg helpen?

en zo is het voorspeld!

donderdag 30 november 2006 17:16

Acties:

TeeDee

CQB 241

Content clearen boven je "<div id="bottom">" middels <div style="clear;both;"></div> of iets dergelijks?
Ongetest though, weet niet wat dit voor implicaties heeft voor de rest.

[ Voor 25% gewijzigd door TeeDee op 30-11-2006 17:16 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 30 november 2006 19:08

Acties:

Res-q

Redder in nood?

Topicstarter

Hmm, wat ik heb geprobeerd werkt niet..welke zou ik dan moeten clearen? en: heeft clear niet invloed op floats? Ik zie ff niet waarom dit dan zou moeten werken?

en zo is het voorspeld!

donderdag 30 november 2006 23:32

Acties:

user109731

Voeg eerst eens een doctype toe, zodat browsers niet in quirksmode renderen:

HTML:

<!doctype html>
<html>
<head>
...

Wat je wilt is een hoogte van 100% - x-aantal pixels. Is niet heel makkelijk met CSS, maar is dit niet ongeveer wat je zoekt?

clear word idd gebruikt icm. floats.

vrijdag 1 december 2006 14:59

Acties:

Res-q

Redder in nood?

Topicstarter

Hey, dat ziet er goed uit

. Dat is inderdaad wat ik bedoel, misschien nog wel mooier dan wat ik oorspronkelijk had bedacht (namelijk een scrollbalk naast de div). Even verbouwen, kijken wat het wordt

Thx

en zo is het voorspeld!

zaterdag 2 december 2006 10:57

Acties:

Res-q

Redder in nood?

Topicstarter

Goed, probleem nav bovenstaande tip...

Als de pagina korter is dan de pagina-lengte wordt het witte vlak niet opgevuld tot onderaan..
Geprobeerd: height: 100% van de middelste container en container overal omheen en die centreren, maar dan krijg ik de header en footer weer niet gefixeerd...

Iemand?

en zo is het voorspeld!

zaterdag 2 december 2006 11:54

Acties:

Rowanov

Kop eens wat anders...

Faux-collumns op je body? Dus gewoon een repeterende achtergrond die de illusie wekt dat de kolom doorloopt.

Btw, in zowel FF als IE zie ik geen scrollbalk, op welke pagina dan ook.

maandag 4 december 2006 13:42

Acties:

Res-q

Redder in nood?

Topicstarter

Zou kunnen, ware het niet dat ik mn pagina gecentreerd wil hebben op de pagina, en dus niet van tevoren weet welke resolutie de gebruiker draait, en welke breedte er links en rechts van de pagina benodigd is.

Intussen heb ik deze pagina gevonden: http://www.webreference.com/programming/css_frames/

Hier staat een voorbeeld van hoe ik het wil hebben, maar dat krijg ik dus weer niet voor elkaar met een breedte kleiner dan 100%... Wel in FF, maar in IE maakt ie er dan een zootje van (doordat position: fixed niet ondersteund wordt...)

Ik pruts nog even verder, en sta intussen voor ideeën open

en zo is het voorspeld!

maandag 4 december 2006 14:29

Acties:

TeeDee

CQB 241

Je wil je maincontainer gecentreerd hebben?

Cascading Stylesheet:

body {text-align:center;}

#maincontainer {
    position: relative;
    width: 780px;
    padding: 5em 2em 0em 2em;
    overflow: auto;
    border: 1px solid red;
    -moz-box-sizing: padding-box;
/* toevoeging op je bestaande css */
    margin:auto;
    text-align:left;
    }

[ Voor 12% gewijzigd door TeeDee op 04-12-2006 14:30 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

maandag 4 december 2006 14:42

Acties:

Res-q

Redder in nood?

Topicstarter

Nee, main container centreren lukt wel, maar dat centreren met die opmerking van mij was nav de tip met faux-columns

en zo is het voorspeld!