[css] layout, height 100% & ruimte tussen kolommen

[Tim Schuhmacher]

Ik heb een probleem met een site die ik aan het maken ben.
De volgende pagina ben ik aan het omzetten naar html. Eigenlijk wil ik de hele layout zonder tables maken, dus met css.

Layoutafbeelding

Ik heb de pagina in 3 frames verdeeld - menu, main & footer. De main-pagina bestaat uit 4 kolomen, waarvan de 2e qua hoogte beeldvullend moet zijn. Het heeft lang geduurd voor ik dat voor elkaar had, maar dat is wel gelukt, maar nu is het probleem dat wanneer de werkelijke inhoud in kolom 3 te lang wordt deze gewoon onder de andere kolomen doorgaat - dat is niet de bedoeling.

zoals hier

Is hier een oplossing voor?

Daarnaast zit er een witte ruimte links en rechts van het gele vlak, hoe moet ik die weg krijgen.

[ Voor 0% gewijzigd door Tim Schuhmacher op 08-08-2002 15:50 . Reden: url gewijzigd ]

[shlammod]

links werken niet bij mij

[Tim Schuhmacher]

Apart hier wel namelijk, maar ik heb de de locatie verandert zodat er geen spaties meer in staan - helpt dat?

[shlammod]

Nope.. kan ook door de poort komen misschien? Of omdat ik vanaf hier niet overal bij mag/kan? Kun je ze niet mailen naar me/op een andere manier ergens neerzetten?
Dan kan ik wel ff kijkje nemen

[Tim Schuhmacher]

http://www.agratotaal.nl/test/layout.jpg
&
http://www.agratotaal.nl/test/home7b.html

[Verwijderd]

links werken perfect,... al je margins op nul zetten helpt met dat stukje wit.
height 100% is erg vaag,.. 100% van wat? denkt de browser dan.

[shlammod]

wat ik zo snel kan zien is dat je die <div> waar dat in staat geen breedte en hoogte meegeeft zoals bij de andere <div>'s (id="contentleftleft")
Ligt er ook een beetje aan of je je pagina een bepaalde breedte wilt geven, of dat het altijd 100% breed moet zijn?
Anders zou je het met JavaScript moeten uitlezen en aan de hand daarvan je stylesheet maken (breedte van die <div> neerzetten)

Dat probleem van je witte vlakken heeft te maken met padding/margins lijkt het wel.. ik zit helaas niet achter mijn eigen PC.. kan het dus ook niet voor je uitvogelen nu wat er precies verkeerd is.. Vanavond pas dan

[Tim Schuhmacher]

Ik heb nu overal 'margin:0px;' & 'padding:0px;' staan, maar dat lost de witte tussenruimtes niet op.
En ik heb de div waar de inhoud in staat geen breedte meegegeven, omdat die juist variable moet zijn.

[shlammod]

Ik kijk vanavond als ik tijd heb voor je (width kan ook een percentage zijn, of laten berekenen door javascript. Je weet nl de breedte van de andere divs, en je kunt schermbreedte uitlezen met JS)

[Tim Schuhmacher]

De breedte uitrekenen mbv js lijkt mij nou niet een fraaie oplossing en ik ben bang dat de boel dan nog er onder uitloopt - maar het zou mooi zijn als je er naar kon kijken vanavond.

[Verwijderd]

Tim Schuhmacher schreef op 08 augustus 2002 @ 15:41:
Ik heb nu overal 'margin:0px;' & 'padding:0px;' staan, maar dat lost de witte tussenruimtes niet op.
...

ja okee,.. maar een <div> heeft 4keer een margin en een padding

boven
rechts
onder
links

code:

<div id="realcontenttop">&nbsp;</div>
        <!-- hier komt de echte inhoud! -->
Lorum Ipsum Dolor

Lorem ipsum dolor sit amet,

...

</div>

ahum deze content staat dus NIET in je <div> ??

[shlammod]

Staat in de div die daar weer omheenstaat...

[Tim Schuhmacher]

Overal 'margin:0px 0px 0px 0px;' helpt niets.

code:

<div>
  <div id="realcontenttop">Dit is dus het gele vlak</div>
  <!-- hier komt de echte inhoud! -->
  Dit is dus het witte vlak
</div>

[Verwijderd]

misschien die dan een ID meegeven?

[Verwijderd]

Verwijderd schreef op 08 augustus 2002 @ 16:00:
misschien die dan een ID meegeven? zodat deze ook GEEN padding/margin heeft?

oeps! dubbelsorry

[Tim Schuhmacher]

Nee, dat helpt ook niet. Ik baal er wel van, ik ben er nu al 2 dagen mee bezig

[shlammod]

Ik bekijk rond half 6 nog ff of er iets gebeurd is, anders hoor je morgen weer van mij

[Tim Schuhmacher]

goed - ik hoop dat het lukt

[Verwijderd]

net even die CSS goed doorgekeken en height 100% wordt dus echt niet ondersteund en vertical-align : top ook niet. verder dat probleem met die witte rand is echt een raadsel.

[Tim Schuhmacher]

height:100%; wel volgens Topstyle voor ie5 en deels voor vertical-align : top

(het wordt idd niet door css level1 ondersteund)

[Grom]

CSS is echt krachtig en kan wonderen doen maar bij ondeskundig gebruik kan het ook als een bom je layout verklooien.
Dit hoort, mijn inziens, bij het "beter" css geklungel! NOFI
Gewoon in Topstyle (een perfect hulpmiddel imo) een beetje rotzooien tot je het gewenste effect verkrijgt, meer is het niet (maar begrijp je het ook?).
In dit geval is dat het zelfde als kippevlees met zoveel varkensvleeskruidendmix (scrabbelwoord? Neh vast te weinig woordwaarde!) bestrooien zodat het naar varkensvlees smaakt.
Kijk eens naar je HTML. Er is een verschil tussen een inline element en een block element, wellicht dat dat je een oplossingen geeft.
Je kunt natuurlijk ook gewoon een tabel gebruiken als dat eenvoudiger is.

[Tim Schuhmacher]

Het is de eerste keer dat ik de layout via css wil doen. mbv van topstyle ben in langgenoeg in de weer geweest. Als het volgens jou tot css geklungel hoort, wijs maar even aan waar het probleem ligt.
Het zal misschien een logische oplossing hebben, maar ik zie het niet - daarom mijn vraag hier.

[Hangloozz]

waarom maak je #realcontent ook niet 100% hoog

#realcontent {
height: 100%;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
background:White;
}

Dat van die white space tussen je div's lijkt bijna een bug te zijn..
Ik kan d'r niets over vinden behalve een pagina met div voorbeelden en daar treedt het ook op: klik
De onderste serie hoge div's hebben allemaal diezelfde ruimte tussen de rode en de groene div...vaag

[ Voor 0% gewijzigd door Hangloozz op 09-08-2002 00:30 . Reden: meer info na research ]

[shlammod]

Ik ben er gisteravond nog laat mee aan de slag geweest, maar ik kon niet echt vinden waar je nu de fout in ging. Had ook wel je jpg meegenomen, maar daaruit kon ik niet echt de opmaak opmaken om zelf die div's in orde te krijgen.
't Is me dus niet gelukt helaas

[André]

Ik ben ook even bezig geweest en de enige manier waarop ik die strepen 'wegkreeg' is door de achtergrondkleur van de body op yellow te zetten.

En dat lijkt ook best mooi.

[shlammod]

Zou je eens die jpg kunnen neerzetten met 'guides' erin zodat ik het aan de hand daarvan nog eens zou kunnen doen.

Yogho -> dat had ik ook geprobeerd, alleen da's dan weer niet echt de oplossing die gezocht wordt lijkt me

[Hangloozz]

Yogho schreef op 09 augustus 2002 @ 10:39:
Ik ben ook even bezig geweest en de enige manier waarop ik die strepen 'wegkreeg' is door de achtergrondkleur van de body op yellow te zetten.

En dat lijkt ook best mooi.

as i saide before:
het lijkt een bug, op voorbeelden mbt div's kwam ik het telkens weer tegen, geen enkele site die er over repte though...
Ik ben gisteravond ook nog ff aan het pielen geweest maar wat ik probeerde het had geen invloed.
Het lijkt alsof er een padding van 2px aan de style van die textdiv(realcontent) gegeven wordt..

[André]

Het lijkt inderdaad op een bug. Maar ik zit ook te denken aan "float". Het kan zijn dat daar iets mee is. Want als je op mijn homepage kijkt zie je dat alle div's keurig op elkaar aansluiten (window + titel + content).
En daar word geen gebruik gemaakt van float.

Ik heb inderdaad ook van alles geprobeerd: margins, padding, spacing, border, border-collapse, display, align, enz...

[Hangloozz]

toch heb ik ook geklooit met float zonder resultaat; float eruit, float:left, bij die gele div toegevoegd; nada.

gezocht op google; kwam ik wat sites tegen met float/div trubs in IE5 maar kon d'r nou niet echt uithalen wat de crux was...
Zal nog ff zoeken, misschien dat een guru d'r iets mee kan

[Tim Schuhmacher]

eerst bedankt iig voor de hulp!

shlammod schreef op 09 augustus 2002 @ 10:44:
Zou je eens die jpg kunnen neerzetten met 'guides' erin zodat ik het aan de hand daarvan nog eens zou kunnen doen.

Wat bedoel je hier precies mee?

Dat van een achtergrond er achter doen was ik inmiddels zelf ook op gekomen. Jammer dat dat moet, maar dat is dan niet anders. Maar ik zit dan nog wel met dat andere probleem dat de tekst aan de onderkant onder de andere div's doorloopt.

Zal je net zien dat de eerste layout van mij met css niet kan door een bug en dan toch weer tables moet gebruiken...

[Hangloozz]

Tim Schuhmacher schreef op 09 augustus 2002 @ 11:43:

Maar ik zit dan nog wel met dat andere probleem dat de tekst aan de onderkant onder de andere div's doorloopt.

Tim, mag ik je even wijzen op m'n eerste reply...

[shlammod]

Ik ben van het soort 'eigenwijs en proberen of het toch kan', maar ik bedoelde met guides, lijntjes hoe je pagina zou moeten worden opgebouwd... dus als je tabellen zou gebruiken, hoe die dan lopen.

[Tim Schuhmacher]

Oh sorry - mijn fout. Dat werkt inderdaad! Icm met een achtergrond om de witte tussenruimte te verhullen is het opgelost.

Thnx.

edit:
shlammod - ik zal ze even tekenen
url: Layoutafbeelding

[Grom]

Tim,
Dit heb ik totaal onderschat!
Ik ben nu veel te lang bezig geweest om iets van een oplossing te krijgen.
Die witte ruimte lijkt me ook een bug die te maken heeft met float:left/right.

Ik heb het alleen kunnen oplossen met een stukje JS (let niet op de de JS code, kan veel beter, is maar als voorbeeld).
Wellicht kun je er iets mee.

http://www.technowise.nl/csstabel.html

[Verwijderd]

Ik gooi er ook nog ff een linkje tegenaan:

'CSS Layout Techniques: for Fun and Profit'

http://www.glish.com/css/

HTH

[Tim Schuhmacher]

Jammer dat het niet gelukt is Grom, toch bedankt voor je hulp en ik zal eens naar je link kijken.
Milkman_Dan - die link kende ik, ik heb gebruikt voor mijn site. Daar stond ook dat als je vragen had die kon stellen bij css-discuss . Dit heb ik gedaan en dit was het antwoord:

Hi Tim!
That little white space is something IE5.5 does for no good reason. IE6 does not do it, so it is 'fixed'.

But since IE5.5 is still the dominant browser, that's not good enough. The only way I have found to correct this is to use negative margins on the floats.

Try giving the second left floated column (#contentleft):

margin: 0 -3px 0 0;

and the right floated column (#contentright):

margin: 0 0 0 -3px;

This will fix the problem in IE5.5, but beware! Other browsers (including IE6) will be broken if they see these rules. To use this fix properly you must let only IE5.x/Win see it, and hide it from all other browsers.

This is done through a form of trickery involving the escape character: '\'. Its original form is the 'Tantek Hack', and a newer related form is the 'Simplified Box
Model Hack', both using escapes. I want to write a page covering the new form for my bug site, so I will post an explaination of it seperately, to get more feedback. (I hope)

Ik heb het nog niet getest, maar na dit antwoord vond ik ook nog deze site (wordt ook genoemd op de site die Milkman_Dan noemde). Op die site wordt die 'Simplified Box Model Hack' ook voor gedaan: basic3_touch.html

[Grom]

Damn, ben ik hier even mee bezig!
Ik neem alles terug van wat ik eerder gezegd heb! Ik ben nu ook aan het rotzooien geslagen.
Het lijkt onmogelijk een tabel te maken zoals Tim dat wil met CSS en zonder JS, die moet werken in IE en NS ('witte' randen/vlakken, waar dan ook, zijn niet de bedoeling).
Alleen in IE(6): geen probleem. Alleen in NS(6.2): lijkt te doen.
Maar in beide, met één style sheet: lukt me niet!
Ik heb het niet eens nodig maar wil het gewoon weten. Ik ben nu al uren en uren aan het experimenteren maar kom er niet uit!
(en ik maar denken dat ik redelijk met css kan omgaan )
De tabel moet zowel in IE(6) als in NS(6.2) schermvullend zijn onafhankelijk van de content en zich perfect aanpassen bij een resize.
Dit heb ik nu:
http://www.technowise.nl/csstabel2.html
In de source staan nog enkele remarks.

[Grom]

De link van Milkman_dan ken ik ook. Het antwoord wat je kreeg Tim lijkt me vreemd. Ik gebruik IE 6.0.2600.000IC en het probleem van die whitespace doet zich nog voor bij jouw oplossing met float.
Dit frustreerd me zooooooo!

[Tim Schuhmacher]

Grom, je bent wel fanatiek bezig! Maar het kan natuurlijk wel echt niet mogelijk zijn door een bug - dan ligt het niet aan jouw
http://www.technowise.nl/csstabel2.html - deze doet het goed in ie5.5, ook in ie6? Heb je ook al gebruik gemaakt van 'Simplified Box Model Hack'. Ik weet wel dat dat dan niet een nette oplossing is.

[Grom]

[quote]Tim Schuhmacher schreef op 12 augustus 2002 @ 21:08:
http://www.technowise.nl/csstabel2.html - deze doet het goed in ie5.5, ook in ie6? quote]

Ja ook IE6

Alleen NS doet er vreemd mee.

[Grom]

Part 3, het blijft me bezig houden en ik zal het voor elkaar krijgen.

Ook ik loop nu op tegen de verschillende interpretatie van MOZ en IE van het boxmodel (hier zijn meerder topics over).

Nog even:
- tabel met 4 kolommen waarvan 1,2 en 4 vast in breedte.
- kolom 3 varabel in breedte.
- totale breedte van de tabel:100%.
- onafhankelijk van content inhoud moet de tabel minimaal 100% hoog zijn (vester vullend).
- de hoogte van kolommen 1,2 en 4 moeten meegroeien met de content hoogte en ook minimaal 100% zijn.
(- content hoger dan in venster past = scrollbalk)

Met JS is dit allemaal op te lossen maar dat wil ik niet.

De style-sheet voor de CSS tabel heb ik nu zover dat het werkt in MOZ en IE op één dingetje na.

Zover ik het kan testen blijkt dit:
Voor IE moet ik height:100% zetten voor de div ('content').
Voor MOZ moet ik min-height:100% zetten voor die div ('content').

De hacks heb ik allemaal geprobeert maar leveren geen resultaat.

Ziet iemand hoe dit zou kunnen oplossen met CSS?

IE: http://www.technowise.nl/csstabelie1.html
MOZ: http://www.technowise.nl/csstabelmoz1.html

[Tim Schuhmacher]

Wordt je er niet bijna wanhopig van? Ik kan je er niet mee helpen, dit gaat mij ook boven mn pet. Ik ben iig al blij dat het in IE (en netscape) werkt.

[Grom]

Wanhopig nèh, gefrustreerd is een beter woord.

Ik ben bang dat er geen ander antwoord is dan: JS gebruiken om de style(sheet) aan te passen of de hele css tabel dynamisch maken. Maar ik hou me aanbevolen!

In ieder geval ken ik er weer zo n 4 manieren bij om met css een tabel te maken (zonder JS)en ken ik de beperkingen. positief denken

[Tim Schuhmacher]

hehe, misschien dat je het hier ook kan vragen: http://two.pairlist.net/mailman/listinfo/css-discuss

[Grom]

Ja, ga ik eens proberen tnx.

BTW Tim je zei: "Ik ben iig al blij dat het in IE (en netscape) werkt."
Hoe heb je het nu opgelost dan?

[Grom]

Nog wat zitten denken en experimenteren.
Kon de hack toch misbruiken om het allemaal met één stylsheet aan het werken te krijgen.
Het werkt nu in IE5.5 + en NS6.2.1

Andere browsers zullen wellicht protesteren maar dat kan ik niet testen.

Ben er wel benieuwd naar welke browser/versie combinatie protesteerd.

edit:

BTW dan bedoel ik moderne browsers, NS4.x en IE4.x ga ik niet eens over denken.

http://www.technowise.nl/csstabeliemoz.html

De aanhouder zal winnen

[Tim Schuhmacher]

Grom schreef op 14 augustus 2002 @ 14:43:Ja, ga ik eens proberen tnx.
BTW Tim je zei: "Ik ben iig al blij dat het in IE (en netscape) werkt."
Hoe heb je het nu opgelost dan?

nee ik had een post van jouw eerder verkeerd gelezen - netscape deed nog vreemd. Ik heb er zelf niets meer aan verandert

Grom schreef op 14 augustus 2002 @ 15:26:

edit:
BTW dan bedoel ik moderne browsers, NS4.x en IE4.x ga ik niet eens over denken.

edit:
en dan te bedenkden dat bij mn vader op het werk ze nog ie4 gebruiken!

[Grom]

Ik hoop niet dat die css tabel in ie4 moet kunnen werken.
IE5.5+ en NS6.2.1 (iets anders kan ik niet testen) was al uitdaging genoeg.

http://www.technowise.nl/csstabeliemoz.html

[Tim Schuhmacher]

nee dat hoeft gelukkig niet!