Archief - xHTML: lay-out diarree bij eerste keer laden & in IE

gegroet allemaal, na een lange periode

bon, to the point: we zijn momenteel bezig aan onze case op school; een site die over jezelf moet gaan, aan de hand van een metafoor...

de mijne: http://cmdstud.khlim.be/~rvanderven/cases.html

even wat uitleg over de structuur: het zijn allemaal div's op elkaar, met aparte div's, afbeeldingen en tekst erin...

nu, de pagina is xhtml valid (zie onderkant site), maar bij het laden staan die div's bovenaan meestal compleet verkeerd. natuurlijk op moment van schrijven weer niet, dus heb voorlopig geen screen... ook de anchor "index.html#top" werkt niet, nadat ik de pagina xhtml-valid heb gemaakt. iemand die een beetje aan de code uit kan, en direct het probleem ziet, toevallig?

en nog iets, maar niet zo erg: de pagina is COMPLEET onherkenbaar in internet explorer (ook al is ie xhtml-valid )... de kleuren van bgcolor en afbeeldingen komen niet overeen (afbeeldingen zijn png24, ligt misschien daaraan?), de div's staan verkeerd, et cetera. nu, de case moet alleen zichtbaar zijn in FF, dus niet zo'n probleem, maar als iemand een paar oplossingen kan noemen; altijd welkom

dank bij voorbaat,
joy

*edit* toch screen kunnen maken: http://www.lowgrav.net/fucked.gif

Haal om te beginnen die lompe table met TD width="*" eens weg en werk dan eens met DIVs zoals het hoort (met margin: auto; vb. om de onderliggende DIVs te centreren). En dat PNG en IE niet goed samengaan is een algemeen gekend feit eigenlijk... In IE 7 zou dat achter de rug moeten zijn, maar dat is wel nog ff wachten dus.

BTW Heb je die PNGs in Photoshop bewaard? Ik heb nl. ooit ook eens een bug met PhotoShop en PNG24-bit ondervonden. Saven als GIF zorgde voor de correcte achtergrondkleur, maar saven in PNG zorgde steeds voor een lichtjes andere kleur dan in PS gespecifieerd in de resulterende file - en 'k zou begot ook niet weten waarom dat het geval was (maar als je dat probleem enkel in IE en niet in FF hebt zal het daar wel niet aan liggen).

nja ok die table mag eigenlijk niet, maar zou dat écht iets met het div-probleem te maken hebben?

en wist k ni van png.. is idd in photoshop gesaved, en werkt perfect in FF...

schone site overigens

Was uw trashbin ni goed? oO

zabulus zei:

Was uw trashbin ni goed? oO

Klik om te vergroten...

Nee, verre van zelfs

Ik denk dat je het concept van webstandaarden in het algemeen verkeerd begrepen hebt. Laat me even enkele van jouw misvattingen proberen te ontkrachten.

1. Eén van de belangrijkste doelstellingen van webstandaarden is het scheiden van opmaak (CSS), structuur (XHTML) en behaviour (DOM-scripting). Je gebruikt XHTML nog steeds voor layout, getuige daarvan zijn bijvoorbeeld break rules om whitespace te forceren. XHTML dient enkel voor structuur, opmaak staat daar volledig los van.

2. Je denkt je layout te kunnen verbeteren door je XHTML te laten valideren. Wrong. Gevalideerde XHTML betekent dat de structuur juist werd aangewend, en er geen fouten werden gemaakt door bijvoorbeeld tags niet af te sluiten en dergelijke. Je layout loopt mis wanneer je gezondigd hebt tegen CSS, of CSS niet correct werd geïnterpreteerd door de browser. IE6 bevat nogal wat verkeerde CSS intepretaties. Dat ge je dan oplossen in CSS, al dan niet aan de hand van een CSS hack.

3. Je gebruikt tabellen voor opmaak, kijk maar ne de hoofdtabel (om alles te centreren vermoed ik). Een tabel dient voor de tabulaire data weer te geven, bijvoorbeeld een personeelslijst. Niet voor opmaak doeleinden. De opmaak van een tabel kan je controleren met CSS, een tabel zelf is geen opmaaktag. Er bestaan trouwens geen opmaaktags, want XHTML is zoals eerder gezegd een structuurtaal. Nu heb je pure tagsoup.

4. Kijk bijvoorbeeld naar de namen van je div's, die zeggen structureel gezien niets. Gebruik header tags (<h1>,<h2>,...) voor titels, paragraph tags (<p>) voor paragrafen enz. Niet voor alles een div'je om opmaak te forceren. CSS is er voor ontwerpers en developers, maak er dan ook gebruik van.

5. Je zou in feite in staat moeten zijn om een volledig ander ontwerp te kunnen maken zonder ook maar één letter van je XHTML te veranderen. XHTML is er enkel voor structuur. Laat ik het voorbeeld van CSS Zen Garden aanhalen. De ontwerper kan geen letter veranderen aan de XHTML, maar dient een volledig nieuw ontwerp op te bouwen in CSS. En bekijk de entries maar eens, dan zie je dat dat perfect mogelijk is.

5. Wanneer je een website bouwt, is er maar één iets wat constant door je hoofd moet gaan (buiten inspiratie):
- XHTML = STRUCTUUR
- CSS = OPMAAK
- DOM-SCRIPTING = BEHAVIOUR

Jouw ontwerp is wel héél ok. Knap werk.