probleem met divs en tables met doctype

[BasieP]

beetje rare topictitel maar ik wist niet goed een naam voor dit probleem..

ik heb van mijn baas een opdrachtje gekregen voor een website, (wat vaker gebeurd )
hij had hier al ideen over en zodoende heeft hij een layout gekocht, en deze naar mij gestuurd..

nu is de layout opzich wel grappig, maar ben ik over de code echt niet te spreken.
ik keek er in en zag dat de doctype al foutief was. ik heb deze correct gemaakt en toen zag ik dat de hele layout het niet meer deed in browsers (wel in IE)

nu is de code zo ranzig dat ik dacht, 'ow ik maak hem ff opnieuw'
maar nu loop ik tegen een aantal dingen aan.

eerst even wat voorbeeldjes:
1: Dit is hoe de pagina er uit moet zien
2: zo ziet ie er uit met goede doctype (non-IE ff kijken)
3: dit is mijn creatie met divs
4: en dit mijn creatie met een table

nu zien jullie het verschil tussen voorbeeld 1 en voorbeeld 2, en als jullie de code van voorbeeld 1 bekijken zullen velen het met mij eens zijn dat dit echt niet kan

voorbeeld 3 geeft mij de volgende problemen:
[list]• ik wil de scrollbalken 'weg' hebben. dwz, zoals in voorbeeld 1, dat ze pas verschijnen als de TEXT er niet meer in past. ipv als de divjes er niet meer in passen (nu)
• in IE doet de layout raar, hoewel allemaal correct gepositioneerde divjes rekent IE blijkbaar dat height-bottom != top oid fixed zie BasieP in "probleem met divs en tables met doctype"



voorbeeld 4 geeft mij de volgende problemen:
[list]• ranzige 'spacer' cellen (waar ik mee kan leven als het maar werkt)
• in IE ziet ie er niet uit, weet nog niet hoe dat komt..



mijn vragen:
[list]• welke van de 2 keuzes is het verstandigst
• hoe fix ik daar de problemen van?
• of kan ik beter de ranzige code uit voorbeeld 1 gebruiken, en alles gewoon in quirks mode laten draaien en hopen dat het in de toekomst blijft werken?
• hoe vertel ik mijn werkgever dat hij moet stoppen met kopen van razige sites?

[ Voor 15% gewijzigd door BasieP op 14-01-2006 10:49 ]

[Boelie-Boelie]

Kun je in je div-versie niet div1 en div2 tot één headerdiv maken, en op dezelfde manier van de footer één div maken? Dus die vlakken verenigen tot een headerachtergrondafbeelding en een footerachtergrondafbeelding?

... w8, ik laat ff zien wat ik bedoel... *prutspruts*
http://home.versatel.nl/b...test/basiep/index_v1.html

[ Voor 14% gewijzigd door Boelie-Boelie op 14-01-2006 07:16 ]

[frickY]

In voorbeeld4 heb je helemaal geen rancige spacing-cellen nodig. Als je het toch in HTML 4.01 Trans. doet kun je gewoon de cellspacing van de table gebruiken omdeafstand tussen de cellen te creeren

Ik zie eigenlijk de moeilijkheid niet zo van dit ontwerp... ook nietom het in XHTML Strict te doen

[ Voor 22% gewijzigd door frickY op 14-01-2006 08:44 ]

[BasieP]

Boelie-Boelie schreef op zaterdag 14 januari 2006 @ 07:15:
Kun je in je div-versie niet div1 en div2 tot één headerdiv maken, en op dezelfde manier van de footer één div maken? Dus die vlakken verenigen tot een headerachtergrondafbeelding en een footerachtergrondafbeelding?

... w8, ik laat ff zien wat ik bedoel... *prutspruts*
http://home.versatel.nl/b...test/basiep/index_v1.html

nu is de hoogte niet meer dynamisch.. maar ik snap het idee om het met plaatjes te doen..
zal even kijken wat ik kan doen.

frickY schreef op zaterdag 14 januari 2006 @ 08:43:
In voorbeeld4 heb je helemaal geen rancige spacing-cellen nodig. Als je het toch in HTML 4.01 Trans. doet kun je gewoon de cellspacing van de table gebruiken omdeafstand tussen de cellen te creeren

Ik zie eigenlijk de moeilijkheid niet zo van dit ontwerp... ook nietom het in XHTML Strict te doen

cellspacing voegt ook spacing toe helemaal boven, en helemaal onderaan, ik heb dus witte randen om mijn pagina heen.
verder hoeft het ook niet xhtml strict, maar ik wil het tenminste transitional html 4


edit:
ik ben er iig achter waarom de layout in IE van voorbeeld 3 (divjes) fout wordwerd weer gegeven..
somehow is IE zo dom mo de POSITIE van een divje aan te passen aan de hand van of er een background-image of een background-color is gespecifieceerd

Cascading Stylesheet:

background-image: url(images/back_monochr.gif); /* gaat fout */

Cascading Stylesheet:

background-color: #6F6F6F; /*gaat goed */

[ Voor 17% gewijzigd door BasieP op 14-01-2006 10:48 ]

[BasieP]

*schop*
iemand een idee? of moet ik echt een pagina maken die overal in quirks draait?

[Sappie]

Het is een lastige layout om te bewerkstelligen met enkel semantische html en css (in het geval dat je geen scrollbar wilt hebben). Ik heb even wat voor je zitten aankloten en denk dat je niet om het gebruik van óf tabellen óf javascript heenkomt. Ik heb een voorbeeldje in elkaar gezet wat gebruik maakt van javascript om 2 backgroundimages te positioneren.

Heb het getest in IE6, Firefox 1.5 en Opera 8.0 en het werkt wel ok. Kijk hier voor het online voorbeeldje: http://tienstra4.flatnet.tudelft.nl/~tom/rein-got/basiep/

misschien heb je er wat aan

edit:
url weer ff valid gemaakt

[ Voor 5% gewijzigd door Sappie op 06-03-2006 20:43 ]

[BasieP]

tnx Sappie, ik ga er zometeen idd maar eens aan de slag met javascripts

moet nog even kijken hoe lastig ik het mezelf wil maken, want heb nog een aantal pagina's met ongeveer gelijke problemen...

maargoed, alles voor het verbeteren van het web

[BasieP]

oke, ff aan't werk geweest, en heb nu dit:

http://basiep.dyndns.org/doclogic/index.php?p=contact
dat werkt redelijk, alleen onder IE word de ruimte tussen de divjes opeens anders als je hem resized

ik vraag me nog altijd af of het wel slim is om divjes + js te gebruiken waar tables het (in FF) native veel beter doen..
probleem is dat IE de table versie (http://basiep.dyndns.org/doclogic/index.php?p=welkom) niet slikt

zou mooi zijn als dat zou werken, dan zou ik van al het gezeur af zijn