[css] hoogte div's

[Mayco]

Eerst en vooral, ik weet dat de hele search overloopt van de css/hoogt div's vragen, maar om een of andere manier willen die methodes niet werken (ook google geeft veel, maar nooit een werkende oplossing)

Ik heb een veelvoorkomende indeling, namelijk

code:

======== Header ========
-----|
-----|
-Nav-|       Main       
-----|
-----|
======== Footer ========

Nu is het dus zo dat de achtergrond van nav niet doorloopt tot tegen de footer, maar al stopt waar de inhoud stopt.

Voor de duidelijkheid heb ik een testcase opgezet: http://users.skynet.be/maycosplace/test/test.html (blauw is een afbeelding maar dat is niet van belang in de testcase)

Ik heb die layout met in gedachten dat met crtl + en crtl - alles heel mooi aanpast (dus altijd em's gebruikt).

De methode die inhoud om een achtergrondafbeelding te gebruiken valt af, het menu moet groter worden als het font groter word (crtl +).

Hopelijk heeft iemand een oplossing hiervoor...

css: http://users.skynet.be/maycosplace/test/stylesheet.css

[Verwijderd]

http://alistapart.com/articles/fauxcolumns

[Mayco]

Verwijderd schreef op 29 juli 2004 @ 10:53:
http://alistapart.com/articles/fauxcolumns

die ken ik, dat is die methode met de achtergrondafbeelding

[Verwijderd]

Dan maak je toch een iets groter plaatje, bijvoorbeeld als het menu standaard iets rond de 200 px breed is een plaatje van 500px?

[Mayco]

het probleem is dat die fauxcolumns werkt door de achtergrond in een container div te zetten, en als ik daar dus een te grote afbeelding inzet, dan loopt die door in de main div. als ik die achtergrond gewoon direct in nav zet, dan heb ik hetzelfde probleem dat het niet doorloopt.

[Verwijderd]

Is de inhoud wel is korter dan de navigatie?

[Mayco]

ja, die is soms ook korter, anders kon ik de background-color de kleur geven van de nav, en de main op white, maar aangezien de main soms korter is gaat dat dus niet.

[Spruit_elf]

dan zetje main {height: 100%; background: #kleur} oid en de inhoud van main in een extra div.
weet niet of het werkt, tis maar een idee

anders main {min-height:x px}

[Mayco]

hmm, gaat ook niet werken, want dan zou het evengoed werken door de nav-div op 100% te zetten, en dat gaat niet

de min-height lijkt me ook niet echt een goed idee, ik zou het eventueel in em's kunnen doen zodat de layout nog meeveranerd als de fonts veranderen, maar dan nog is het maar een hardcoded omweg...

edit: nu ik over die min-height denk gaat dat ook niet gaan, main is variabel, dus de hoogt verschilt telkens, en het is niet mooi om een gigantisch wit gat te hebben als de main maar weinig is...

[ Voor 25% gewijzigd door Mayco op 29-07-2004 13:20 ]

[zubauza]

HTML:

<div id="header">[header]</div>

<div id="container" style="background-color: #deb5e5;">

<div id="navigatie" style="float: left; width: 200px;">[navigatie]</div>

<div id="main" style="background-color: #fff; margin-left: 200px; border-left: 1px solid #b05ccf;">[blah]</div>

</div>

<div id="footer" style="clear: left;">[footer]</div>

zoiets?

[Mayco]

idd, maar nu is het net omgekeerd, als de nav groter is dan de main, dan loopt de nav maar door tot het einde van de main...

[Mayco]

wat ook kan is om div's de css-property display: table-cel; mee te geven, werkt prachtig in FF, helaas bakt IE er niets van...

[Verwijderd]

http://glish.com/css/9.asp

Ik heb er nog niet echt mee gespeeld maar het lijkt in de buurt te komen.

[Mayco]

hmm, nee, dat is gewoon een float, niet echt wat ik bedoel... als de rechterkant te veel text bevat dan loopt die terug tot onder de linkerbox, wat dus het menu moet worden... is niet wat ik bedoel.

het beste is die display: table-cel; maar dan dus iets dat ook IE begrijpt (ben redelijk kwaad nu op dat stuk browser)

[Verwijderd]

Als je nou is 'display:table' gebruikte voor Mozilla, Opera en Safari en voor IE een aanpassing van dit scriptje: http://www.saila.com/attic/sandbox/set-height.html gebruikt. Zou dat niet werken?

[Mayco]

mjah, dan moet ik wel een andere pagina sturen als het IE is (iets wat ik niet graag doe), maar ik hou die url zeker in mijn bookmarks!

[Verwijderd]

Hoezo een andere pagina sturen naar IE? Ik volg je niet meer...

[Mayco]

bij firefox mag dat scriptje toch niet worden uitgevoerd, dus moet IE toch een andere pagina krijgen want IE moet dat script wel uitvoeren... niet? ook krijgen firefox en verwanten toch een ander css toegeschoteld (die met de display: table-cel;)?

edit: verduidelijking, ik kan niet dezelfde css gebruiken omdat ie bij de table-cell de divs niet naast elkaar zet, moest IE nu die divs naast elkaar zetten, dan kon ik gewoon dat scriptje in IE runnen en dat was het, maar IE moet nu ook een anders stylesheet krijgen zonder die table-cel's.

[ Voor 39% gewijzigd door Mayco op 29-07-2004 19:20 ]

[Verwijderd]

Dan gebruik je toch:

code:

* html div#blaat{ /* styles */ }

... voor Internet Explorer? Ik zie nog steeds het probleem niet. Vooral het gebruiken van 2 pagina's klinkt wel heel complex en lijkt een beetje op microsoft.com

[Verwijderd]

test ook eens verschillende DOCTYPE tags voor je start-HTML-tag, browsers hebben 2 verschillende modi voor het renderen van HTML, quirks-mode en standards-compliant.
misschien dat dat je probleem oplost
zie http://www.alistapart.com/articles/doctype/ voor voorbeelden
qoute van die site:

DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win

/me resc tikt eerst en bekijkt dan pas de source van je test pagina

[ Voor 35% gewijzigd door Verwijderd op 29-07-2004 19:32 ]

[Mayco]

Verwijderd schreef op 29 juli 2004 @ 19:22:
Dan gebruik je toch:

code:

* html div#blaat{ /* styles */ }

... voor Internet Explorer? Ik zie nog steeds het probleem niet. Vooral het gebruiken van 2 pagina's klinkt wel heel complex en lijkt een beetje op microsoft.com

idd, en dat wil ik nu ook niet, maar hoe kan ik er voor zorgen dat IE wel een script uitvoert, maar FF niet? dan moet ik toch twee verschillende pagina's hebben?

[Verwijderd]

Check gewoon voor IE. Een redelijk simpele is bijvoorbeeld:

code:

if(document.all)

... er zijn er vast meer en die voeg je dan allemaal toe met && en je hebt een redelijk veilige check voor IE.

[zubauza]

gozer gebruik gewoon een table met 2 td'tjes dan zijn we allemaal tevreden

[Mayco]

dat van die check's voor IE, is dus door javascript, maar dat gebruik ik liever niet (alsook tabellen, het is mss wel makkelijker om het ff zo te doen, maar het probleem komt dan voor dat de navigatie niet zo handig is met text-browsers (wat ik dus echt wel vaak gebruik).
Ik denk dat de mooiste oplossing is om de display:table-cell; te gebruiken voor niet-IE-browsers en de vorige methode te gebruiken voor IE ([rml]zubauza in "[ css] hoogte div's"[/rml]). Met een useragentscan in php wordt dan de goede page doorgestuurd. Niet de mooiste maar wel een bruikbare oplossing... (ik maak liever twee css'en dan javascript, ik doe er alles voor om dat te vermijden)