[div] cross-browser layouts

[semicon]

Beste medetweakers ,

Ik probeer nu al twee maanden goede designs te maken met het gebruik van divs.
Er zijn vele voorbeelden te vinden, veel komen ze uiteindelijk altijd weer voor op, A List Apart, en daar is niks mis mee.

Maarnu, ik begrijp, van vele om mij heen en op andere forums, dat divs de toekomst zouden moeten zijn. Het werkt zogenaamd zo makkelijk, en zo mooi met CSS, maar ondertussen.
Ik kom nu echt om van de hacks, om een simplele pagina te maken. Het beste wat ik tot nu heb gemaakt is dan deze: voorbeeld

Wat mijn probleem onder andere is, zijn die hacks (echt te veel hoor) zodat een layout op elke gemiddelde browser (ik bedoel hiermee alleen IE5, 6 FF en Safari) goed te zien zijn, en dat divs zulke rare eigenschappen hebben. Een goed voorbeeld hiervan heb ik gevonden op een site die nota bene mij het voorbeeld moet geven ( http://www.thenoodleincid...als/box_lesson/boxes.html )

Als je van de bovenstaande site bijvoorbeeld een 3 column layout pakt, en ietsje verkleine komt het menu van de zijkant over je hoofdtekst heen! Ik begrijp gewoon niet hoe zoiets kan...

Daarom zou ik zo graag willen weten: Doe ik dat wat fout? Of is de technologie er nog gewoon niet ver genoeg voor (nog niet he)? Waarom zouden divs dan echt zoveel beter zijn, als je eerst een berg hacks moet verzinnen?

Kortom ik heb best veel vragen, maar ik kan nergens echt antwoord krijgen op mn vragen, sites die divs de hemel in prijzen hebben het nooit over de nadelen.

Graag jullie feedback hierover, alle informatie is welkom, want ik weet het dus niet meer

[Verwijderd]

De techniek is zeker niet het probleem. Feit is dat goede layouts bouwen niet bijzonder eenvoudig is. Het is ook geen rocket science, maar als je niet goed weet wat je doet (oftewel de technische achtergrond van CSS en HTML begrijpt) kunnen de effecten in de verschillende browsers erg onvoorspelbaar overkomen.

Oh, en DIVs zijn niet de toekomst. CSS is de toekomst. De elementen waar je het op toepast zijn irrelevant.

Je bent op de goede weg! Je HTML en CSS zien er netjes uit. Als je nu nog niet in staat bent een lekkere layout neer te leggen met alleen CSS, val dan gewoon terug op een TABLE om in grote lijnen te bereiken wat je wilt en ga vanaf daar verder. Het is zonde om je uit het veld te laten slaan door deze problemen. Blijf gewoon expirimenteren en leren en gebruik alleen de CSS die je goed snapt.

[ Voor 5% gewijzigd door Verwijderd op 23-03-2005 09:48 ]

[TeeDee]

Even gauw een aantal puntjes:

id="linkList-level2" afaik werkt zoiets niet? (dus de - in je id)
repeater.... Waarom voor elke repeater... een nieuw ID? Die je kan je toch 1 x gebruiken?

Het is niet moeilijk, alleen even weten hoe of wat.
Persoonlijk heb ik echte hacks niet echt nodig gehad.(*) Ga ook niet meteen te moeilijk doen.

(*) Verder moet je je imho ook een wat kleinere marge maken ivm de browser die je wilt ondersteunen.
Persoonlijk voor mij: IE6 en FF. De rest moet het er maar mee doen.

[BtM909]

Verwijderd schreef op woensdag 23 maart 2005 @ 09:47:


Oh, en DIVs zijn niet de toekomst. CSS is de toekomst. De elementen waar je het op toepast zijn irrelevant.

Ik denk dat TS het een beetje verkeerd uitlegt, aangezien z'n code er behoorlijk netjes uitziet. Ik heb overigens nog wel wat dingen aan te merken over de code:
- Gebruik functie-beschrijvende namen voor je classes en haak niet terug naar p1, p2, etc
- Teveel onnodige tags: ik zie te vaak <div><span>bla</span></div>
- Zoek (nog meer ) naar juist beschrijvende elementen

[Jorick]

Crossbrowser (x)html + css kan, maar dan zijn je mogelijkheden wel beperkt. Wil je wat geavanceerdere layouts dan zul je erg rekening moeten houden met de manier waarop browsers dingen weergeven en dit kost inderdaad tijd. Ik zelf snap het nut wel van (x)html + css wel, alleen ik zelf vind het toch wel erg lastig en veel werk op sites over te zetten die gebaseerd zijn op table layouts. Als je het veel doet dan weet je op een gegeven moment precies hoe welke browser iets rendert en welk gedrag het vertoont. Maar het blijft toch een beetje het verhaal van een standaard te gebruiken met browsers die het verschillend weergeven. En dan kun je wel hard gaan roepen dat IE zuigt en dat firefox het allemaal goed weer geeft, maar het grootste deel van je bezoekers gebruikt IE dus wordt je wel gedwongen hacks en troep te gebruiken als je met standaarden wil werken.

[Verwijderd]

id="linkList-level2" afaik werkt zoiets niet? (dus de - in je id)

Graag een voorbeeld, dat werkt hier wel namelijk.

repeater.... Waarom voor elke repeater... een nieuw ID? Die je kan je toch 1 x gebruiken?

IDs zijn uniek. Kijk is naar het CLASS attribuut van HTML en de CLASS selector van CSS.

[Rowanov]

Ik denk dat het crossbrowser werken met stylesheets echt iets is wat je jezelf moet leren, je moet begrijpen dat elke browser een standaardstyle gebruikt voor attributen als je die niet in je style hebt gedefineerd. Je zal dus die browser op al die punten moeten overrulen. Een punt waardoor je layout vaak de soep in gaat zijn de standaard marges op div's en andere objecten. Wat ik vaak gebruik is:

Cascading Stylesheet:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

Dan kan je bij de elementen die wel een margin en padding moeten hebben deze regel overrulen.

[Verwijderd]

Het komt vooral aan op heel erg veel ermee werken. En dan nog, zijn er situaties waar je wel eventjes vreemd staat te kijken, vooral bij de wat drukkere layouts met veel elementen..

[semicon]

Heel erg bedankt voor de reacties

Ik ben er een stuk duidelijker uit geworden, en ga ook proberen dieper het css gebied te verkennen.
En ik zag dat Anne al had uitgelegd waarom ik verschillende namen had voor ID's, maar ik denk dus dat overgaan op het class element heel niet erg is?
Zolang ik niet met DOM functies gaat werken, maakt dit dan niets uit?

(*) Verder moet je je imho ook een wat kleinere marge maken ivm de browser die je wilt ondersteunen.
Persoonlijk voor mij: IE6 en FF. De rest moet het er maar mee doen.

Ik wou toch nog even snel op TeeDee reageren, in princiepe doe ik dit ook, maar een aantal sites zijn voor een breeder publiek, waarvan een kleine 13% toch via safari zijn weg vindt naam mn sites

[ Voor 36% gewijzigd door semicon op 23-03-2005 11:03 ]

[TeeDee]

Verwijderd schreef op woensdag 23 maart 2005 @ 09:56:
[...]
Graag een voorbeeld, dat werkt hier wel namelijk.

Ik dacht dat dat niet kon Of was dat met underscores voor een class/id?

[...]
IDs zijn uniek. Kijk is naar het CLASS attribuut van HTML en de CLASS selector van CSS.

Ik weet dat ID's uniek zijn, en TS hiervoor het class attribuut moest gebruiken (verwoorde het verkeerd).

semicon schreef op woensdag 23 maart 2005 @ 11:01:
[...]
Ik wou toch nog even snel op TeeDee reageren, in princiepe doe ik dit ook, maar een aantal sites zijn voor een breeder publiek, waarvan een kleine 13% toch via safari zijn weg vindt naam mn sites

Ah, kijk aan Scheelt weer, is "maar" 1 browser erbij

[ Voor 30% gewijzigd door TeeDee op 23-03-2005 11:07 ]

[bolleh]

mijn website die ik in zn huidige vorm 8-9 maanden geleden heb gemaakt is heerlijk crossbrowser:
bolleh.com let niet op de oude updates

waar het om gaat is dat ik de website destijds op mijn pc heb gemaakt en die werkte met de volgende browsers:
IE
mozilla
firefox
opera
safari

nu bezit ik tegenwoordig een mac en op safari, firefox en IE voor de mac doet mijn website het gewoon precies hetzelfde als toen op mijn pc

het is dus zeker mogelijk een goede crossbrowser layout te bouwen zonder van die vreemde hacks. het probleem is vaak hoe je moet beginnen, je hebt een idee maar hoe werk je dat met divs uit, als je je idee in je hoofd om kan zetten naar een layout met divs ben je al over de 50% van het werk heen. soms zul je wat dingen opnieuw moeten doen omdat het in andere browsers niet werkt zoals gedacht maargoed je leert er wel wat van

<edit>
met safari kom je overigens vaak websites tegen die het niet helemaal doen, tekst die niet verschijnt, plaatjes over tekst heen, knoppen die nix doen. erg jammer want zo moeilijk is het imho niet een basic crossbrowser _werkende_ website te bouwen, dat hij er dan overal ook hetzelfde uit moet zien is een ander verhaal

ik heb liever als ik een website heb dat mensen het kunnen lezen maar de layout niet helemaal klopt dan dat ze helemaal niks kunnen lezen

[ Voor 21% gewijzigd door bolleh op 23-03-2005 11:15 ]

[Cubix]

De enige hack die ik gebruik is de Simplified Box Model hack:

code:

* html <selector>   /* this selector recognized by IE only */
{
  width: <value>;   /* total width (only for IE5.x/Win) */
  w\idth: <value>;  /* content width (for other IE) */
}

Hiermee zorg ik dat oude IE browsers toch de juiste box afmetingen krijgen en los ik het probleem op met het niet ondersteunen van min-height.

Verder heb ik echt geen hacks nodig. En ik test op IE5.5, IE6, Firefox en Opera.

[Verwijderd]

Ik dacht dat dat niet kon Of was dat met underscores voor een class/id?

Het klopt dat een van de oudere browsers problemen had met underscores in een CLASS of ID attribuut/selector, maar dat probleem is nu niet echt meer aan de orde. Een hyphen is nooit een probleem geweest.

[T-MOB]

bolleh schreef op woensdag 23 maart 2005 @ 11:10:
mijn website die ik in zn huidige vorm 8-9 maanden geleden heb gemaakt is heerlijk crossbrowser:
bolleh.com let niet op de oude updates

offtopic:
Ziet er sjiek uit! Alleen je menu verdwijnt (in FF en IE als) het venster niet hoog genoeg is. Opera doet het wel goed...

[bolleh]

T-MOB schreef op woensdag 23 maart 2005 @ 12:20:
[...]

offtopic:
Ziet er sjiek uit! Alleen je menu verdwijnt (in FF en IE als) het venster niet hoog genoeg is. Opera doet het wel goed...

klopt, maar daarom heb ik toen ook expliciet gekozen voor een 1024*768 resolutie te ontwikkelen