[HTML/CSS] Technieken voor de layout een pagina

[Michali]

Ik ben zelf erg veel bezig met het HTMLiseren van ontwerpen voor websites. Ik ben verder best goed bekend met veel webtechnieken, waaronder XHTML 1.1 een CSS 2.1. Ik weet zo ongeveer wat er mee gedaan kan worden en ik lees ook allerlei websites waarop nieuwtjes worden geplaatst over technieken. De meest gebruikte zijn deze:

-Tabel layout: Hiermee begint vrijwel iedere designer/hobbyist die HTML begint door te krijgen.
-Floating elementen: Na een opheldering schijnen veel mensen hiermee verder te gaan of:
-Absoluut gepositioneerde elementen: deze techniek.

Ik werk hier zelf met aardig creatieve mensen die het niet kunnen laten om lekker te spelen met een ontwerp totdat het er fris en orgineel uitziet.

Als ik de websites zie van veel CSS resources etc, dan heb ik erg het idee dat zij daar nog niet mee te maken hebben gehad. Het maken van een ontwerp in puur CSS zonder tabellen is vrijwel niet te doen, of als het lukt zitten er nog allerlei puntjes aan die niet fijn te krijgen zijn.

Bij het maken van de site via de floating div krijg je vaak het probleem dat ze onder elkaar komen te staan. Dit is te verhelpen maar dan moet je smerige en vreemde technieken gaan gebruiken. Ook heb je niet de controle over hoe hoog zo'n element moet zijn, voor bijvoorbeeld het oprekken met de content.

Bij gepositioneerde elementen krijg je weer problemen dat element over elkaar heen schuiven bij het schalen van de pagina. Dit is iets waar ik als designer geen problemen mee heb, maar een klant vind dat op een of andere manier niet zo leuk.

Het gebruik van een simpele tabel voor het grof indelen van kolommen is vaak de enige uitweg. En als je het mij vraagt een stuk nettere manier dan elementen naast elkaar gaan laten zweven. (floats zijn voor afbeeldingen imo, niet voor layout blokken, het klopt gewoon niet).

Na al dit vraag ik me eigenlijk sterk af waarom er nog geen speciale elementen set in HTML zit die semantisch correct het defineren van de layout mogelijk maakt. Ik ben het met iedereen eens dat tabellen er niet voor gemaakt zijn, maar ik zeg ook dat het gebruik van CSS op de manieren die ik tegenkom, daar kwa smerigheid ver overheen gaan. Dan liever een tabelletje die 3 kolommen defineert dan vreemd elementen plaatsen die naast elkaar zweven. Dit eindigt namelijk altijd in een stuk of 4 div's die genest zijn. Dan heb je met tabellen niet eens zo veel minder code met de css mee gerekent.

Wat denken jullie ervan, oh webdesign guru's

edit:

Typo's

[ Voor 3% gewijzigd door Michali op 15-11-2004 16:48 ]

[BtM909]

Waarschijnlijk loop je met floats tegen OF bugs OF verkeerde interpretatie van floats

Er zijn weinig ontwerpen die je niet met CSS kan maken (wat wel met tabellen goed werkt). Er zijn een aantal sites die voorbeeld codes geven (sommige met smerige hacks), onder andere deze site: http://www.thenoodleincid...als/box_lesson/boxes.html

edit:

Probleem is dat een hoop mensen (wellicht jij ook) nog steeds in table-designs denken. Daar moet je je juist vanaf zetten en proberen om ontwerpen op een andere manier te benaderen.

[ Voor 22% gewijzigd door BtM909 op 15-11-2004 16:50 ]

[Verwijderd]

bedoel je geen (normale) flowing elementen? een hele pagina met floats is vragen om problemen. Bovendien zijn ze daar ook niet voor bedoelt.

En idd, er is weinig dat niet kan met CSS, het enige waar je tegenaanloopt is de soms gebrekkige implementatie en het voorkomen van bugs in bepaalde browsers, maar dit valt imho onder de kinderziektes (hoewel een kind van 5 jaar ondertussen wel gezond zou mogen zijn) en is prima mee te werken als je de beperkingen kent. Sites als die van anne laten prima zien dat je met nette code en css heel veel kan bereiken.

[Michali]

BtM909 schreef op maandag 15 november 2004 @ 16:48:
Waarschijnlijk loop je met floats tegen OF bugs OF verkeerde interpretatie van floats

Er zijn weinig ontwerpen die je niet met CSS kan maken (wat wel met tabellen goed werkt). Er zijn een aantal sites die voorbeeld codes geven (sommige met smerige hacks), onder andere deze site: http://www.thenoodleincid...als/box_lesson/boxes.html

edit:

Probleem is dat een hoop mensen (wellicht jij ook) nog steeds in table-designs denken. Daar moet je je juist vanaf zetten en proberen om ontwerpen op een andere manier te benaderen.

Ja maar schaal die pagina eens. Dat is nog steeds iets waar veel mensen problemen mee hebben. Ik denk persoonlijk niet echt in tabellen. Ik denk wel in vlakken voor de layout. Ik zou eigenlijk veel meer controle willen hebben over wat er met float's of absoluut gepositioneerd element gebeurd. Dit is iets waar ik nog problemen mee heb. Float's zouden bijvoorbeeld niet onder elkaar mogen komen te staan als ik dat niet wil en absoluut gepositioneerde elementen zouden niet over elkaar heen mogen schuiven.

Verder heb ik hier vaak te maken met een 3 koloms layout. De midden kolom is voor de content en de twee aan de randen voor menu's ed. de midden kolom heeft vaak geen achtergrond kleur terwijl deze aan de rechter kant dat wel hebben. Los dat maar een op met CSS. En het moet natuurlijk niet zo zijn dat de designer zich maar moeten aanpassen op wat er mogelijk is, alleen omdat tabellen niet zo netjes zijn.

[Johnny]

Michali schreef op maandag 15 november 2004 @ 16:56:
[...]

Verder heb ik hier vaak te maken met een 3 koloms layout. De midden kolom is voor de content en de twee aan de randen voor menu's ed. de midden kolom heeft vaak geen achtergrond kleur terwijl deze aan de rechter kant dat wel hebben. Los dat maar een op met CSS. En het moet natuurlijk niet zo zijn dat de designer zich maar moeten aanpassen op wat er mogelijk is, alleen omdat tabellen niet zo netjes zijn.

Dan geef je hem toch geen achtergrondkleur?!

Wat is nou je probleem? Op die website staat precies wat je hier beschrijft

[BtM909]

Michali schreef op maandag 15 november 2004 @ 16:56:
[...]

Ja maar schaal die pagina eens. Dat is nog steeds iets waar veel mensen problemen mee hebben. Ik denk persoonlijk niet echt in tabellen. Ik denk wel in vlakken voor de layout. Ik zou eigenlijk veel meer controle willen hebben over wat er met float's of absoluut gepositioneerd element gebeurd. Dit is iets waar ik nog problemen mee heb. Float's zouden bijvoorbeeld niet onder elkaar mogen komen te staan als ik dat niet wil en absoluut gepositioneerde elementen zouden niet over elkaar heen mogen schuiven.

Ik denk dat het tijd wordt voor de NTI cursus "Wat zijn floats en hoe werken ze"

• http://www.positionisever...rticles/float-theory.html
• http://www.complexspiral.com/publications/containing-floats/
• http://www.positioniseverything.net/articles/flow-pos.html
• http://css.maxdesign.com.au/floatutorial/
• http://realworldstyle.com/thumb_float.html

[Michali]

Dan geef je hem geen achtergrond kleur? Ja lekker is dat, dat is juist precies wat ik bedoel. Dan moet ik dus het ontwerp gaan wijzigen omdat het niet mogelijk is met CSS. Het is juist de bedoeling dat de zijbalken een achtergrond kleur hebben en dat er een afbeelding precies aan de onderkant komt, uitgelijnd aan de onderkant van de tekst in de middelste kolom. Dat is vrijwel niet mogelijk met CSS ik heb het vaak geprobeerd.

[BtM909]

Michali schreef op maandag 15 november 2004 @ 17:13:
Dan geef je hem geen achtergrond kleur? Ja lekker is dat, dat is juist precies wat ik bedoel. Dan moet ik dus het ontwerp gaan wijzigen omdat het niet mogelijk is met CSS. Het is juist de bedoeling dat de zijbalken een achtergrond kleur hebben en dat er een afbeelding precies aan de onderkant komt, uitgelijnd aan de onderkant van de tekst in de middelste kolom. Dat is vrijwel niet mogelijk met CSS ik heb het vaak geprobeerd.

Lees ff m'n links door met theorie en laat eens een lay-out zien (zoals je hierboven beschrijft) met tables... Kunnen wij kijken hoe dit op te lossen in true css.

[Michali]

BtM909 schreef op maandag 15 november 2004 @ 17:10:
[...]

Ik denk dat het tijd wordt voor de NTI cursus "Wat zijn floats en hoe werken ze"

Erg grappig maar: ik ken ze allemaal al. Ik ken de technieken al en ik weet precies wat mogelijk is met css. Ik weet ook dat wat ik wil niet uitgelegd wordt in 1 van die documenten. Wat ik wil is:

Dat floating divs en absoluut gepositioneerde elementen niet over elkaar heen schuiven als de pagina te klein geschaald wordt. Verder wil ik content in een zijbalk aan de onderkant van de pagina uitgelijnd hebben. En dit mag, als de pagina niet groot genoeg is, niet over de content er boven uitkomen, dus absoluut positioneren aan de onderkant van de pagina is geen optie. Ik maak wel even een test pagina als je het nog niet begrijpt.

[Verwijderd]

dat is juist een eigenschap van die dingen, als je wilt dat een schroevendraaier spijkert moet je ook niet raar kijken als iemand zegt dat dat niet kan, maar een hamer gebruiken.

Het feit dat je begint over een "3 kolommen" layout, geeft imho al aan dat je teveel in tables denkt

er zijn hier en op andere plaatsen arsenalen aan voorbeelden hoe je kan bereiken wat jij wilt, Het belangrijkste is afstappen van vastgeroeste layout modellen. Een "3 kolommen" layout hoeft helemaal geen 3 even langen kolommen te zijn bijvoorbeeld, alleen maar zo te lijken (ik referereer nu naar de faux columns techniek).

[Michali]

even een linkje: http://www.sarris.nl/layout.html

Eisen zijn dat er twee afbeeldingen in de linker kolom moeten staan. De een helemaal boven uitgelijnt en de andere helemaal onderaan. De afbeeldingen komen gewoon tegen elkaar aan te staan als er te weinig content in de middelste balk zit. Is dit goed te doen in CSS? Als je het weet, graag.

En het argument om af te stappen van een layout model vind ik een beetje onzinnig. Het is en blijft een web pagina en het zijn gewoon bewezen manieren om inhoud georganiseerd in te delen. Je kunt wel alles onder elkaar gaan plaatsen, maar daar wordt het ook net leuker op.

[ Voor 29% gewijzigd door Michali op 15-11-2004 17:59 ]

[crisp]

Michali schreef op maandag 15 november 2004 @ 16:45:
[...]
-Tabel layout: Hiermee begint vrijwel iedere designer/hobbyist die HTML begint door te krijgen.
-Floating elementen: Na een opheldering schijnen veel mensen hiermee verder te gaan of:
-Absoluut gepositioneerde elementen: deze techniek.

Ho. Floating elementen en absoluut gepostioneerde elementen zijn geen aparte 'technieken'; het zijn middelen om met behulp van CSS te positioneren en ze zijn prima door elkaar heen te gebruiken. Je kan hooguit spreken van table-based versus CSS-based, en dat brengt me op:

Na al dit vraag ik me eigenlijk sterk af waarom er nog geen speciale elementen set in HTML zit die semantisch correct het defineren van de layout mogelijk maakt/

Omdat je juist layout van content wilt scheiden. Layout-stuff moet je niet met HTML willen doen, daar is juist CSS voor bedoelt. Semantiek en layout zijn 2 heel verschillende dingen, en juist door die 2 dingen te scheiden beperk je je niet in je mogelijkheden.

[Michali]

crisp schreef op maandag 15 november 2004 @ 18:09:
[...]

Ho. Floating elementen en absoluut gepostioneerde elementen zijn geen aparte 'technieken'; het zijn middelen om met behulp van CSS te positioneren en ze zijn prima door elkaar heen te gebruiken. Je kan hooguit spreken van table-based versus CSS-based, en dat brengt me op:

Ja dat weet ik ook wel, maar ik bedoel het in de zin van technieken voor het opbouwen van de layout. Vaak wordt dan 1 van beide gebruikt en niet door elkaar.

Omdat je juist layout van content wilt scheiden. Layout-stuff moet je niet met HTML willen doen, daar is juist CSS voor bedoelt. Semantiek en layout zijn 2 heel verschillende dingen, en juist door die 2 dingen te scheiden beperk je je niet in je mogelijkheden.

Dan hou je dus een pagina over met een paar headers, en paragraven en mischien een lijstje met links. Het toevoegen van een div element met de functie om hem ergens floatend of absoluut neer te zetten kan dan al niet.

En semantiek en layout hoeven helemaal niet twee verschillende dingen te zijn. Je kunt een betekenis volle manier voor het opbouwen van een layout hebben. Deze is echter nog niet te vinden in HTML.

[ Voor 11% gewijzigd door Michali op 15-11-2004 18:53 ]

[Rowanov]

Kijk ook eens op www.alistapart.com Wordt op een heel goede te begrijpen manier uitgelegd hoe je de inhoud en opmaak kan scheiden en ook hoe je bepaalde effecten met css kan bereiken.

[ Voor 6% gewijzigd door Rowanov op 15-11-2004 18:55 ]

[flashin]

Dus dan heb je je layout op voorhand al wel op tables ingedacht... Met CSS is opzich meer mogelijk dan met tables, maar op een wat andere manier.

[Michali]

Rowanov schreef op maandag 15 november 2004 @ 18:55:
Kijk ook eens op www.alistapart.com Wordt op een heel goede te begrijpen manier uitgelegd hoe je de inhoud en opmaak kan scheiden en ook hoe je bepaalde effecten met css kan bereiken.

Die site ken ik en daarop heb ik alle intresante artikelen doorgelezen. Mijn probleem heeft niet te maken met het scheiden van presentatie en content, en ik weet ook niet waar je dat uit haalt? Ze zeggen er verder overigens ook heel duidelijk dat structuur en content niet te scheiden zijn en dat presentatie en structuur ook niet te scheiden zijn. Daar probeer ik me verder ook voor zover het kan zoveel mogelijk aan te houden.

flashin schreef op maandag 15 november 2004 @ 18:59:
Dus dan heb je je layout op voorhand al wel op tables ingedacht... Met CSS is opzich meer mogelijk dan met tables, maar op een wat andere manier.

Hoezo dat dan? Het ontwerp is door iemand anders gemaakt die geen verstand van HTML heeft dus al helemaal niet van tabellen. En dan moet je niet beginnen je dan maar anders moet gaan ontwerpen, want dat vind ik onzin. Als het probleem zo makkelijk op te lossen in met 1 tabelletje, waarom niet dan? Ik zie het probleem niet zo.

Kijk begrijp me goed. Ik sta hier niet te zeggen dat je voor alle opmaak ineens tabellen moet gebruiken, dat stadium ben ik al voorbij. Ik ben ook het stadium voorbij dat alles op te lossen is met CSS, zo blijkt wel. Als ik voor de layout 1 tabel gebruik als het niet mogelijk is om puur CSS te gebruiken, dan kun je mij echt niet wijsmaken dat het dan moeilijker aan te passen is bij een design update.

[X-Lars]

Michali schreef op maandag 15 november 2004 @ 18:48:
Ja dat weet ik ook wel, maar ik bedoel het in de zin van technieken voor het opbouwen van de layout. Vaak wordt dan 1 van beide gebruikt en niet door elkaar.

Kan.

Dan hou je dus een pagina over met een paar headers, en paragraven en mischien een lijstje met links. Het toevoegen van een div element met de functie om hem ergens floatend of absoluut neer te zetten kan dan al niet.

Bijvoorbeeld een <ul> (is een block-element en) kun je positioneren waar en hoe je maar wilt.

En semantiek en layout hoeven helemaal niet twee verschillende dingen te zijn.

Liever wel Dat biedt allerlei voordelen waar al heel veel over gezegd is (o.a. op dit forum).

Je kunt een betekenis volle manier voor het opbouwen van een layout hebben. Deze is echter nog niet te vinden in HTML.

Je hebt inderdaad soms een extra divje nodig om iets voor elkaar te krijgen.

Conclusie: semantiek is "de betekenisvolle manier voor het opbouwen van een layout", nu nog het juiste gebruik ervan Maar eerlijk is eerlijk: ideaal is het allemaal (nog) niet.

[CH4OS]

Michali schreef op maandag 15 november 2004 @ 16:45:
Bij het maken van de site via de floating div krijg je vaak het probleem dat ze onder elkaar komen te staan. Dit is te verhelpen maar dan moet je smerige en vreemde technieken gaan gebruiken. Ook heb je niet de controle over hoe hoog zo'n element moet zijn, voor bijvoorbeeld het oprekken met de content.

Maar wat let je om spans te gebruiken? Die zijn immers hetzelfde als een div, met alleen die ene (extra) eigenschap, dat je ze gewoon in dezelfde regel kan gaan gebruiken...

crisp schreef op maandag 15 november 2004 @ 18:09:
Omdat je juist layout van content wilt scheiden. Layout-stuff moet je niet met HTML willen doen, daar is juist CSS voor bedoelt. Semantiek en layout zijn 2 heel verschillende dingen, en juist door die 2 dingen te scheiden beperk je je niet in je mogelijkheden.

Ik kan me voorstellen (ik wil dat altijd wel in ieder geval) dat je je CSS (semantisch gezien) ook goed wil hebben...

Verder vraag ik me eigenlijk af, wat er nou echt belangrijker is, voor een website...
Een website, die is zoals de klant dat wilt (als je een webdesign bedrijfje hebt), of dat de site (semantisch gezien) goed is? Nou dan weet ik wel wat ik het belangrijkste vind: de klant, die wil je immers tevreden houden...

[ Voor 44% gewijzigd door CH4OS op 15-11-2004 19:42 ]

[J_Davelaar]

Ik werk sinds kort met CSS maar ben nog geen dingen tegen gekomen die echt niet kunnen. Ik heb er zelf veel baat gehad bij een boek. De titel is nogal algemeen maar maar het ISBN nummer is 1-59059-231-X. Misschien interessant om eens door te nemen.

Het schalen van pagina's lijkt mij niet zo'n probleem. Als je een pagina met tabellen verkleind blijft hij ook niet goed (of niet helemaal zichtbaar).

En wat is er mis met een pagina waarin maar heel weinig staat behalve de tekst en een paar DIV blokken? Is dit niet juist super overzichtelijk en makkelijk?

Volgens mij heb je ook het hele 3 "kolommen" verhaal niet goed mee gekregen. Waarom zou je niet elke kolom een andere kleur kunnen geven? Werk je wel met classes en id's? Die zijn daarvoor gemaakt. Let ook bij het specificeren op dat je het strak regelt want dan kun je je niet vergissen door het gebruiken van dubbele namen.

Cascading Stylesheet:

Niet:
#content {
    background-color: red;
}

Maar:
div#content {
    background-color: red;
}

offtopic:
Het is idd beide 100% correct. Echter... Het 2e werk wel netter en fijner in mijn ervaring. Het was ook meer om aan te geven wat de mogelijkheden zijn en ter illustratie van het class en id idee.

[ Voor 12% gewijzigd door J_Davelaar op 15-11-2004 20:32 . Reden: Offtopic uitleg ]

[CH4OS]

J_Davelaar schreef op maandag 15 november 2004 @ 19:55:

Cascading Stylesheet:

Niet:
#content {
    background-color: red;
}

Maar:
div#content {
    background-color: red;
}

AFAIK is het allebei goed... De een geeft een ID 'in het algemeen' aan, en de ander (div#content) geeft een div aan, die id 'content' heet...

Niet echt veel (boeiend) verschil dus...

Maar dit topic gaat niet over of dat dat goed is ja of nee

[ Voor 14% gewijzigd door CH4OS op 15-11-2004 20:27 ]

[Michali]

J_Davelaar schreef op maandag 15 november 2004 @ 19:55:
Ik werk sinds kort met CSS maar ben nog geen dingen tegen gekomen die echt niet kunnen. Ik heb er zelf veel baat gehad bij een boek. De titel is nogal algemeen maar maar het ISBN nummer is 1-59059-231-X. Misschien interessant om eens door te nemen.

Het schalen van pagina's lijkt mij niet zo'n probleem. Als je een pagina met tabellen verkleind blijft hij ook niet goed (of niet helemaal zichtbaar).

En wat is er mis met een pagina waarin maar heel weinig staat behalve de tekst en een paar DIV blokken? Is dit niet juist super overzichtelijk en makkelijk?

Volgens mij heb je ook het hele 3 "kolommen" verhaal niet goed mee gekregen. Waarom zou je niet elke kolom een andere kleur kunnen geven? Werk je wel met classes en id's? Die zijn daarvoor gemaakt. Let ook bij het specificeren op dat je het strak regelt want dan kun je je niet vergissen door het gebruiken van dubbele namen.

Cascading Stylesheet:

Niet:
#content {
    background-color: red;
}

Maar:
div#content {
    background-color: red;
}

offtopic:
Het is idd beide 100% correct. Echter... Het 2e werk wel netter en fijner in mijn ervaring. Het was ook meer om aan te geven wat de mogelijkheden zijn en ter illustratie van het class en id idee.

sorry hoor, maar heb je dit topic wel doorgelezen. Hier wordt ik nou echt moe van. Als je een beetje had gelezen, was je op een link gekomen http://www.sarris.nl/layout.html dan begrijp je gelijk het probleem. Jij werkt sinds kort met CSS, ik werk er al 3 jaar mee dus ik weet heus wel hoe het werkt.

En ja, het is inderdaad overzichtelijk om divjes netjes te gebruiken, maar als ontwerp niet mogelijk is met divjes, wat moet je dan? Als je het topic had gelezen had je dit geweten.

Verder waarom zou ik elke kolom niet een kleur kunnen geven? Dat kan ik wel, dat heb ik al gedaan Het probleem is alleen dat deze kolommen in CSS niet oprekken met de content. Dit is wel gemakkelijk te doen met een tabelletje. Kijk weer eens in dat linkje, dan begrijp je wat ik bedoel.

Ik heb nog niemand een suggestie zien doen hoe die pagina in puur CSS te maken is. Is het niet mogelijk of doet iemand een poging?

[Michali]

GJ-tje schreef op maandag 15 november 2004 @ 19:38:
[...]
Maar wat let je om spans te gebruiken? Die zijn immers hetzelfde als een div, met alleen die ene (extra) eigenschap, dat je ze gewoon in dezelfde regel kan gaan gebruiken...

Wie zegt dat ik dat niet doe? Ik gebruik altijd CSS voor alles. Alleen het indelen van kolommen mislukt soms. In ieder geval vaak in de ontwerpen die ik naar HTML moet omzetten. Ik zie vaak van de CSS guru sitejes langs komen, maar die zijn kwa ontwerp zo ontzettend simpel. Vaak zijn ze ook absoluut niet schaalbaar, iets waar ik wel altijd mee te maken heb.

Die eigenschap heeft overigens te maken met het feit dat voor een span element display standaard op inline staat en voor een div element staat het standaard op block. Dit kun je gewoon overriden in je stylesheet.

[...]
Ik kan me voorstellen (ik wil dat altijd wel in ieder geval) dat je je CSS (semantisch gezien) ook goed wil hebben...

Verder vraag ik me eigenlijk af, wat er nou echt belangrijker is, voor een website...
Een website, die is zoals de klant dat wilt (als je een webdesign bedrijfje hebt), of dat de site (semantisch gezien) goed is? Nou dan weet ik wel wat ik het belangrijkste vind: de klant, die wil je immers tevreden houden...

Precies! En het zou erg fout zijn als je een mooi ontwerp zou aanpassen alleen omdat het niet mogelijk is te maken zonder een tabelletje. Dan ben je gewoon verkeerd bezig imo. Programeren is nu eenmaal niet altijd 100% volgens de regels werken. Soms is het gewoon een omweggetje zoeken en dan vind ik een tabel helemaal niet zo verkeerd.

[ Voor 7% gewijzigd door Michali op 15-11-2004 21:37 ]

[0528973]

Als ik zo, onder Debian - Gnome - Epiphany kijk, dan is je linkje niet bijster ingewikkeld volgens mij.
is ff kijken

code:

<div>header</div>
<div>
   <div>img top</div>
   <div>img bottom</div>
</div>
<div>content</div>
<div>menu</div>
</div>

gebruik daar wat CSS bij en je moet toch grofweg die opmaak wel voor elkaar krijgen?
Ik ga is ff naar je bron kijken...

[Vae Victis]

http://vae.xs4all.nl/html/three-cols.html
Bug onder IE, tijdens resizen word de 2de image niet goed geplaatst.

Lijkt me toch aardig wat je wilt of niet?

[edit]
zowel firefox als ie hebben een beetje een probleem.
FF - loze ruimte.
IE - plaatje verplaatst niet.
Oplossing - pagina refresh.

[edit2]
http://vae.xs4all.nl/html/three-cols-2.html
bug in ie opgelost.
imgcontent was best overbodig, en was oorzaak bug.

[ Voor 51% gewijzigd door Vae Victis op 15-11-2004 22:50 ]

[Verwijderd]

Wat wil je nou precies horen? Dat het wel correct is om soms html tabellen voor je layout te gebruiken?

Als je het echt "goed" doet, scheid je layout van content, punt. HTML is om je content elementen te benoemen, CSS om het zaakje op te maken. Maar dat is volgens mij al vaak genoeg gezegd.

Dat de huidige browsers op sommige punten CSS niet volgens de standaard interpreteren, tsja das lastig... Mijn ervaring is dat wanneer mensen roepen dat iets niet kan in CSS, zij het 9 van de 10 keer het inderdaad niet kunnen (inclusief ik zelf soms). Vaak kan het wel, maar moet je het even anders benaderen. Het gedoe met kolommen komt vrij vaak voorbij de laatste tijd, maar ook dat is altijd wel op te lossen (zie bijvoorbeeld de link van BtM909).

Hier overigens een site waarop WEL complexe layout mbv CSS gedemonstreerd wordt; www.csszengarden.com.

[ Voor 3% gewijzigd door Verwijderd op 15-11-2004 22:09 . Reden: typfoutje ]

[BtM909]

Michali schreef op maandag 15 november 2004 @ 21:36:
[...]

Je komt een beetje over als een betweter... Als je niet openstaat voor discussies e.d. open dan geen topic... Als je alles zo goed weet, wat is dan het nut van dit topic

Grappige is dat als ik je postings zo doorlees, dat je nog niet eens weet hoe je HTML en CSS goed moet toepassen. Ik zeg niet dat ik alles weet (bij lange na niet), maar zo betwetering doen, terwijl het overkomt alsof je er jack shit vanaf weet

[MarkvE]

Hoezo ga je ervan uit dat jou "probleem" (wat volgens mij helemaal geen probleem is, het is iig vrij simpel op te lossen) niet op te lossen is met CSS?

Het is leuk dat je kennelijk een discussie wilt starten terwijl je alles al weet, maar je moet niet afgeven op iets (CSS, red.) wanneer het je niet lukt.

Wellicht had je beter gewoon een topic kunnen openen met een vraag over je probleem...

[Michali]

Vae Victis schreef op maandag 15 november 2004 @ 21:49:
http://vae.xs4all.nl/html/three-rows.html
Bug onder IE, tijdens resizen word de 2de image niet goed geplaatst.

Lijkt me toch aardig wat je wilt of niet?

[edit]
zowel firefox als ie hebben een beetje een probleem.
FF - loze ruimte.
IE - plaatje verplaatst niet.
Oplossing - pagina refresh.

Goed man. Ik heb het zelf ook een paar keer geprobeerd, maar ik kwam nooit zonder problemen weg. Alleen een tabel geeft me nog een 100% resultaat zoals ik het wil.

[Verwijderd]

Michali schreef op maandag 15 november 2004 @ 22:36:
[...]


Goed man. Ik heb het zelf ook een paar keer geprobeerd, maar ik kwam nooit zonder problemen weg. Alleen een tabel geeft me nog een 100% resultaat zoals ik het wil.

Ik weet zeker dat er hier zat mensen rondlopen die het wel kunnen, maar... je weet de motivatie om te helpen wel op te krikken zeg...

Ik zou zeggen; have fun met je tabel

[Michali]

BtM909 schreef op maandag 15 november 2004 @ 22:04:
[...]

Je komt een beetje over als een betweter... Als je niet openstaat voor discussies e.d. open dan geen topic... Als je alles zo goed weet, wat is dan het nut van dit topic

Sorry als ik een beetje lomp overkom. Je kwam alleen ineens met een aantal linkjes naar zaken waar ik al veel mee bezig ben geweest en waar ik dus al wel veel van af weet. Daarna kwam J_Davelaar ineens met een post die nergens op sloeg en zo nog een paar dingen die niet echt relevant waren. GJ-Jtje nam volgens mij ook ineens aan dat voor alles mogelijk een tabel gebruik, wat zeker niet het geval is.

Ik opende dit topic eigenlijk om aan te geven dat er nog wat verbeterd moet worden aan CSS en HTML.

En ik kan het wel overigens: http://www.promptsoftware.nl Deze heb ik een jaar geleden al weer voor mijn stage bedrijf gemaakt. Ik ben inmiddels een stuk beter geworden. Nog een paar foutjes in Mozilla, maar daar had ik toen niet echt op getest

Grappige is dat als ik je postings zo doorlees, dat je nog niet eens weet hoe je HTML en CSS goed moet toepassen. Ik zeg niet dat ik alles weet (bij lange na niet), maar zo betwetering doen, terwijl het overkomt alsof je er jack shit vanaf weet

En op welke stukjes doel je dan?

[ Voor 21% gewijzigd door Michali op 15-11-2004 22:50 ]

[crisp]

GJ-tje schreef op maandag 15 november 2004 @ 19:38:
[...]
Maar wat let je om spans te gebruiken? Die zijn immers hetzelfde als een div, met alleen die ene (extra) eigenschap, dat je ze gewoon in dezelfde regel kan gaan gebruiken...

In een span kan je geen block-level elementen nesten, en een div kan je net zo goed een display:inline geven. Echter heeft een div naar mijn mening toch ietwat meer semantische betekenis dan een span-element. Een div kan je gebruiken om groepen elementen samen te voegen in een logisch blok.

Verder ontopic: ja, sommige layouts zijn lastig, zeker als je met tabellen in je hoofd aan de opzet van een pagina gaat beginnen. Waarom zou bijvoorbeeld je pagina persé schaalbaar moeten zijn? Is dat nog wel prettig leesbaar op 2048 pixels breedte? Is schaalbaar wel zo heilig? Als webdesigner ben jij degene die de klant moet kunnen informeren over datgene wat op het web usable is en technisch haalbaar. Web is ook geen print, en de designer is niet heilig.
Dan heb ik het nog niet eens over de vele browserbugs en foutieve/tekortschietende CSS implementaties (IE ).
Ik kan daar maar 1 ding over zeggen: ervaring. Veel oefenen, dingen uitproberen en veel lezen. Goed webdesign leer je niet in een avondje of een weekje, en het is geen schande om dan toch maar eens een tabelletje te gebruiken om toch dat effect te krijgen zolang je de fijne kneepjes nog niet onder de knie hebt. Het komt vanzelf wel...

[MarkvE]

Michali schreef op maandag 15 november 2004 @ 22:43:
[...]

En ik kan het wel overigens: http://www.promptsoftware.nl

Weleens aan semantiek gedacht?

Alvorens je HTML de schuld gaat geven; een <ul> voor de menu items doet al wonderen

[Michali]

Ja ja, dat weet ik. Het is alweer een jaar geleden en dit was mijn eerste poging een website zonder tabellen te maken. Erg semantisch is het niet, maar dat was niet de reden waarom ik het neerzette. Het was meer op aan te tonen dat ik wel weet hoe floats werken.

Inmiddels doe ik het op een wat betere manier.

[ Voor 9% gewijzigd door Michali op 15-11-2004 22:56 ]

[X-Lars]

Michali schreef op maandag 15 november 2004 @ 22:43:
[...]
En ik kan het wel overigens: http://www.promptsoftware.nl
[...]
En op welke stukjes doel je dan?

[list]
• Voor elk (sub)menu-item een div gebruiken
• Voor een list een <div class="list-items"> gebruiken

No offence, maar dat is nou precies waar jij in je "scheidt content en layout" mee zit denk ik.

[BtM909]

Kan je misschien eens toelichten waarom je maar altijd floats wilt gebruiken? En waarom je dan tegen tekortkomingen loopt?

[Michali]

X-Lars schreef op maandag 15 november 2004 @ 22:55:
[...]

[list]
• Voor elk (sub)menu-item een div gebruiken
• Voor een list een <div class="list-items"> gebruiken

No offence, maar dat is nou precies waar jij in je "scheidt content en layout" mee zit denk ik.

Michali schreef op maandag 15 november 2004 @ 22:55:
Ja ja, dat weet ik. Het is alweer een jaar geleden en dit was mijn eerste poging een website zonder tabellen te maken. Erg semantisch is het niet, maar dat was niet de reden waarom ik het neerzette. Het was meer op aan te tonen dat ik wel weet hoe floats werken.

Inmiddels doe ik het op een wat betere manier.

[Verwijderd]

Ik opende dit topic eigenlijk om aan te geven dat er nog wat verbeterd moet worden aan CSS en HTML.

Dat of browserimplementatie? Daarnaast ben je onduidelijk, want volgens mij vraag je niet om nieuwe dingen, maar om dingen die al wel mogelijk zijn met CSS en HTML. (Tabellen e.d. zijn in Mozilla bijvoorbeeld geimplementeerd met CSS op enkele dingen na. Net zoals vele andere elementen.)

[Verwijderd]

[q]En ik kan het wel overigens: http://www.promptsoftware.nl[/q]
Even tussendoor offtopic, weet iemand hoe/waarom dit door de xhtml validator van w3c heen glipt
[code]
<center><a target=_top href="http://validator.w3.org/check/referer">
<font size=1 color=red>[Valid XHTML 1.1!]</font></a></center>
[/code]

edit:

"Omdat je proxy dat ervan maakt, eikel..."

[ Voor 44% gewijzigd door Verwijderd op 15-11-2004 23:03 . Reden: dus... ]

[Michali]

BtM909 schreef op maandag 15 november 2004 @ 22:56:
Kan je misschien eens toelichten waarom je maar altijd floats wilt gebruiken? En waarom je dan tegen tekortkomingen loopt?

Ik hoef niet altijd floats te gebruiken. Waar ik vaak op stuit is dat floats onder elkaar komen te staan als de pagina te klein schaalt (als ik ze als kolommen gebruik). Ik kan dan wel een container defineren met een vaste breedte maar dat gaat niet op voor een schaalbare pagina. Een betere manier is dan om die kolommen absoluut te defineren, maar dan schuiven ze wel over elkaar heen.

Mischien is dat ook niet zo'n probleem en moet ik klanten maar gewoon proberen te overtuigen van dat dat niet erg is. Alleen als ik bijvoorbeeld dingen onderin een kolom uitgelijnd wil hebben, dan lukt dat nog niet goed met puur CSS. Vae Victis heeft een goede poging gedaan, verder dan dat zou ik zelf ook niet komen. Mischien dat jij de laatste problemen er uit kan halen?

[Vae Victis]

Michali schreef op maandag 15 november 2004 @ 23:03:
Vae Victis heeft een goede poging gedaan, verder dan dat zou ik zelf ook niet komen. Mischien dat jij de laatste problemen er uit kan halen?

[edit2]
http://vae.xs4all.nl/html/three-cols-2.html
bug in ie opgelost.
imgcontent was best overbodig, en was oorzaak bug.

Enige die er nog overblijft is die in ff, die opzich niet eens zo ernstig is.

[Michali]

Verwijderd schreef op maandag 15 november 2004 @ 23:00:
[...]
Dat of browserimplementatie? Daarnaast ben je onduidelijk, want volgens mij vraag je niet om nieuwe dingen, maar om dingen die al wel mogelijk zijn met CSS en HTML. (Tabellen e.d. zijn in Mozilla bijvoorbeeld geimplementeerd met CSS op enkele dingen na. Net zoals vele andere elementen.)

Nou, wat ik graag zou willen is dit: Een eigenschap waarmee je kunt aangeven dat content niet uit een element mag komen. Dus niet over de rand van het element. Dit gebeurt nog als je bijvoorbeeld een element aan de rechterkant uitlijnt en dan de pagina te klein schaalt. Dit zou zo met een eigenschap voorkomen moeten kunnen worden. Ook zou ik controle willen hebben over het feit of floating element gewrapped mogen worden, dus onder elkaar gezet mogen worden als de pagina te klein schaalt.

Ook lijkt het mij erg handig om een soort van layout elementen set in HTML terug te zien. Net zo'n verbetering als de Navigation List in XHTML 2.0. Vrijwel iedere website heeft een layout en dat hiervoor nog geen gemakkelijke set elementen is vind ik een beetje vreemd. Je kunt dan idd zeggen dat dit een regel breekt voor het scheiden van content en presentatie, maar dat gebeurt ook al als je een div element met id="left-column" toevoegt. Dan liever de regels op een zo semantisch mogelijke manier breken

[Michali]

Vae Victis schreef op maandag 15 november 2004 @ 23:07:
[...]


[...]

Enige die er nog overblijft is die in ff, die opzich niet eens zo ernstig is.

Top, ik moet toegeven dat ik niet had verwacht dat dit zo gemakkelijk opgelost zou zijn. Weet ik dat ook weer.

[crisp]

Michali schreef op maandag 15 november 2004 @ 23:09:
[...]


Nou, wat ik graag zou willen is dit: Een eigenschap waarmee je kunt aangeven dat content niet uit een element mag komen. Dus niet over de rand van het element. Dit gebeurt nog als je bijvoorbeeld een element aan de rechterkant uitlijnt en dan de pagina te klein schaalt. Dit zou zo met een eigenschap voorkomen moeten kunnen worden. Ook zou ik controle willen hebben over het feit of floating element gewrapped mogen worden, dus onder elkaar gezet mogen worden als de pagina te klein schaalt.

min/max-height, min/max-width, overflow en clearing elementen

[ Voor 7% gewijzigd door crisp op 15-11-2004 23:16 ]

[Michali]

min-height en min-width worden toch nog niet goed ondersteund? althans dat is wat ik dacht?

[crisp]

Michali schreef op maandag 15 november 2004 @ 23:16:
min-height en min-width worden toch nog niet goed ondersteund? althans dat is wat ik dacht?

We hebben het over techniek en niet over ondersteuning toch? IE is gewoon een antieke browser...

Daar zijn trouwens ook oplossing voor; zoek maar eens op IE7

[ Voor 12% gewijzigd door crisp op 15-11-2004 23:20 ]

[Michali]

Daar heb je gelijk in ja. Die table-cell zou idd erg handig zijn als het ook in IE zou werken. Doorwerken daar bij Microsoft of laat iedereen lekker overstappen op firefox oid.

[J_Davelaar]

... de midden kolom heeft vaak geen achtergrond kleur terwijl deze aan de rechter kant dat wel hebben. Los dat maar een op met CSS...

Sorry dat ik jou tekst 10x door moet lezen voor ik begrijp wat je nu eigenlijk wil. Gelukkig ben ik niet de enige. Maar het scheelt dat je reactie wel heel duidelijk is als ik wil helpen...