div css & floats

[Verwijderd]

Ik ben een beetje aan het proberen met css etc, om een site zonder tabellen te bouwen.

Nu heb ik al een mooie site gebouwd enzo, maar die gebruikte absolute positionering, nu ben ik het aan het proberen met relative.( vanwege het centreren en automatisch uitrekken)

En dit gaat vrij goed, in IE ziet het er mooi uit, maar in Firefox bakt hij er niks van, zie:

CSS Relative Testsite

Ik heb wat op het forum rondgezocht en daar zie ik veel dingen staan als:
clear: both;

Wat je na een float moet gebruiken, maar als ik dit gebruik gaat de hele layout door de war.

Moet ik nu voor mozilla een apart stylesheet gaan maken? of doe ik het gewoon verkeerd?


Een ander probleem wat ik heb met dezelfde site is dat het hoofd content vak uit moet rekken als er meer content in komt, werkt perfect in IE, ook duwt hij dan netjes de footer naar beneden.

Wederom, dit doet hij in mozilla niet goed.

Maar het probleem is dat de "Side" kolom ook mee moet rekken en even groot als het content vlak moet blijven, is dat mogelijk?

Hiervoor heb ik ook watrondgezocht en wat dingen tegengekomen als "faunhover" o.i.d, maar die truuk schijnt voor mijn situatie niet goed te zijn.


Edit:
De site is 100% W3c compliant, HTML en CSS...

[ Voor 4% gewijzigd door Verwijderd op 18-04-2005 15:55 ]

[JHS]

Het is zoiezo aan te raden om te developpen in FireFox, en dan een aparte stylesheet voor IE te maken, omdat je met FF gelijk een reeks andere browsers bestrijkt en het voor IE makkelijker is om een aparte stylesheet aan te geven.

En een float is te clearen door op het parent element overflow: auto toe te passen . Ik heb op het moment overigens niet echt gekeken naar je source, misschien kom ik daar zo wel aan toe.

[Verwijderd]

overflow:auto heeft er toch mee te maken dat er scrollbalken komen als er meer content in je vak zit dan past?

En het parent element, is dat mijn container waar alles in zit, of gewoon het element boven het andere?

En ja, developen doe ik in MSIE omdat dat gewoon zo'n groot deel van de markt is...ik zal er eens naar kijken of het misschien makkelijker is om te beginnen in FF en daarna voor IE aan te passen, ipv andersom.

[Verwijderd]

Vaak is het ook aan te raden om na een floating div een div van 1px hoog te plaatsen welke je aan beide kanten cleared (clear:both)

[Verwijderd]

Kan iemand uitleggen wat clear: both nu eigenlijk precies doet, want ik kan het met google nou niet echt vinden?

En float, dat is toch zoiets als uitlijnen?

[Sappie]

Dan heb je toch niet echt goed gezocht met google:

clear property: http://www.w3schools.com/css/pr_class_clear.asp

float property: http://www.w3schools.com/css/pr_class_float.asp

Verder heb ik toevallig vandaag nog een 3 kolom layout gepost hier die je, na aanpassen, prima kunt gebruiken voor jouw layout: [rml]Sappie in "[ CSS] 3 Kolommen met in de middelste enk..."[/rml]

Let verder ook op het gebruik van een geldig DTD, want met het DTD dat je nu gebruikt hanteert IE een ander box-model dan FF.

edit:
en gebruik liever ook geen hoofdletters voor je html elementen... en inspringen maakt het geheel stukken overzichtelijker

[ Voor 28% gewijzigd door Sappie op 18-04-2005 16:13 ]

[Verwijderd]

Ik gebruik deze DTD omdat als ik bv HTML strict gebruik, dan kan ik mijn linkjes in het menu geen breedte en hoogte geven!?

Heel raar, maar dan zien ze er smal uit, en krijg ik ze niet breder, zoals nu..


Welk DTD raden jullie aan?


Oh, waarom geen hoofdletters dan? vind ik juist overzichtelijker, van dat inspringen heb je wel gelijk ja..

[ Voor 29% gewijzigd door Verwijderd op 18-04-2005 16:14 ]

[Boelie-Boelie]

Drie kolomslayouts:
http://webhost.bridgew.edu/etribou/layouts/skidoo/
www.positioniseverything.net/piefecta-rigid.html
Of zie deze uitgebreide lijst met variaties op de drie kolomslayout.

[Sappie]

De DTD die je nu gebruikt is gewoonweg niet volledig / geldig. Verder is <a> een inline element. Nofi maar ik zou je nog maar eens beter verdiepen in CSS (met name het box-model) / html.

Verwijderd schreef op maandag 18 april 2005 @ 16:12:
Oh, waarom geen hoofdletters dan? vind ik juist overzichtelijker, van dat inspringen heb je wel gelijk ja..

het gebruik van hoofdletters daarvoor is in bijvoorbeeld XHTML niet toegestaan. Imo kun je met het oog op de toekomst dus beter lowercase gebruiken.

[ Voor 55% gewijzigd door Sappie op 18-04-2005 16:21 ]

[blizt]

Ik zou je vooral aanraden 'ns te gaan lezen
En dan vooral over HTML/CSS ... Dan kan je zelf wel bepalen welk doctype je wilt...

Misschien leuk om te lezen voor je: [rml][ html/alg] XHTML als text/html, wat is het? *[/rml]
Zelf gebruik ik overigens HTML 4.01 Strict.

[JHS]

Dan moet je je a elementen een display: block meegeven. En de overflow: auto; cleart de floats, lees meer via de link die ik je gaf. En het parent element is gewoon het parent element, het element dat de vader/moeder is van het element dat gefloat is.

HTML:

<body><div><p style="float:left;">Blaat</p></div></body>

De div is nu de parent van het gefloate element p.

En ik raad een Strict doctype aan, omdat dat ervoor zorgt dat IE hetzelfde boxmodel hanteert als FF, en nog wat van dat soort zaken.

[Verwijderd]

Ja, ik heb al een boek gekocht , CSS Cookbook (2.1) van o'reilly, alleen staat daar maar heel mager in over het box model.

Ik zal daar nog eens wat over opzoeken.

[ Voor 52% gewijzigd door Verwijderd op 18-04-2005 16:25 ]

[Boelie-Boelie]

Over doctypes:
www.communitymx.com/content/article.cfm?cid=85FEE

Box model:
www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

Menuutje maken m.b.v. een list:
http://css.maxdesign.com.au/listutorial/index.htm

[ Voor 24% gewijzigd door Boelie-Boelie op 18-04-2005 16:25 ]

[Sappie]

Verwijderd schreef op maandag 18 april 2005 @ 16:21:
En Sappie, je zegt dat a een inline element is, ok dat is zo, maar op welke manier kan ik dan een menu maken zoals het er nu uitziet?
Met <span> tags? (die zijn toch ook inline..)

Of dan met een list? (<li>)?


(traag vandaag....)

zoals JHS al aangeeft met "display: block". Semantisch correcter is het uiteraard om je menuutje in een <ul> te zetten ja

[ Voor 62% gewijzigd door Sappie op 18-04-2005 16:24 ]

[Joghert]

Goed streven om de tabellen te vervangen voor css!

Houd moed, je hebt nu een van de lastigste dingen van de css te pakken.
Het is wel goed mogelijk om een css file voor zowel ie als ff te maken. Er zijn wel een aantal verschillen waar je dan rekening mee moet houden:

Centreren:
W3C en ff: zet margin op 0px auto 0px auto
en voor ie: zet text-align van het omvattende element op center

Groottes en meerekken:
IE maakt ieder omvattend element wat kleiner is dan de inhoud net zo groot als de inhoud.
W3C en ff doen dit niet.

Floats
float is niet zozeer uitlijnen. Met float:left zeg je eigenlijk "spaar in het volgende element ruimte uit aan de linker kant, voor dit element."
En met clear zeg je eigenlijk: "Spaar in dit element GEEN ruimte uit, maar begin het onder de elementen die als float staan aangegeven."

Ik begrijp dat je een 3-colummn lay-out wilt met een header erboven. Probeer per colom een div met de inhoud te maken, en daarop de floats goed in te stellen.

[JHS]

Als ik eerlijk ben over hoe je posts overkomen, dan denk ik dat je fundamentele kennis over CSS misschien wat beperkt is . Het lijkt me verstandig om daar een goed boek over te lezen, zoals Cascading Style Sheet - The Definite Guide van Eric Meyer bij O'Reilly . Of (maar liever het eerste) hoop tutorials te lezen op het web. Daarna kan je je mischien wagen aan de specificatie, en begrijp je van het geheel wat meer, waarna dit soort dingen ook veel makkelijker gaan .

[Verwijderd]

OK, heb wat aanpassingen gedaan zoals een strict doctype, en de links display: block gezet.


Maar nu krijg ik de side column niet meer naast de main?
float, left right of clearen werkt nie , in IE!


En mijn kennis is van CSS voldoende, maar dit is gewoon even nieuw (het relative gedoe) dus moet het leren.

site al gebouwd in css (absoluut positie, in een CMS):
www.alternet.nl (mijn werk)


Beste manier om het te leren is de praktijk vind ik...

[ Voor 101% gewijzigd door Verwijderd op 18-04-2005 16:38 ]

[Sappie]

Laat je html en css die je nu hebt gemaakt maar even voor wat het is en ga je zoals we je eerder al aanraadden eerst eens verdiepen in html en css.

float, left right of clearen werkt nie , in IE!

Aan de hand van dit soort opmerkingen maak ik toch echt op dat je maar wat aan het 'prutsen' bent en ook al vind jij het de beste manier om dit in de praktijk te leren, zonder een bepaalde basiskennis kom je er echt niet. We zijn niet te beroerd te helpen, mits je er zelf ook wat effort in stopt. We kunnen je wel de complete oplossing gaan aandragen, maar daar hebben we geen tijd voor en bovendien geen zin in.

[ Voor 65% gewijzigd door Sappie op 18-04-2005 16:38 ]

[blizt]

Verwijderd schreef op maandag 18 april 2005 @ 16:29:
En mijn kennis is van CSS voldoende, maar dit is gewoon even nieuw (het relative gedoe) dus moet het ff leren.

Als je niet weet hoe je een element display:block; zet .... No offence hoor, maar ik zou me toch 'ns wat meer verdiepen.
CSS is op zich niet zo moeilijk, maar ik denk dat je toch nog niet genoeg kennis hebt.

[JHS]

Verwijderd schreef op maandag 18 april 2005 @ 16:29:
En mijn kennis is van CSS voldoende, maar dit is gewoon even nieuw (het relative gedoe) dus moet het ff leren.

Opmerkingen over spans, menus, wat een float doet, inline, block, etcetera spreekt dat tegen, als ik eerlijk ben. Ik kan het fout hebben natuurlijk, maar dan komen dingen bij mij iniedergeval anders over dan je bedoelt.

Beste manier om het te leren is de praktijk vind ik...

Mja, dat ben ik eerlijkgezegd niet met je eens . Je kan wel wat aan lopen prutsen (niet per sé richting jou bedoelt), maar het is toch nodig om gewoon te wéten hoe het werkt met het boxmodel, inline, block, specifity en dat soort zaken. En het gaat gewoon tig keer sneller als je dat gewoon even leest dan dat je na weet ik hoevaak proberen een "trukje" ontdekt. Als je het snapt kan je je stylesheet schrijven en vervolgens kijken naar wat er niet klopt, in plaats van wat te proberen en vervolgens te kijken wat er uitkomt .

[Verwijderd]

Sorry dat ik dit even zo zeg, en echt, no offence, maar ik vind wel dat iedereen die hier een vraag stelt behandeld word alsof hij/zij helemaal niks weet.
Dit is gewoon 1 dingetje waar ik even niet uitkom, dan hoef je niet gelijk te gaan roepen dat ik HTML moet gaan leren.

[RM-rf]

Verwijderd schreef op maandag 18 april 2005 @ 16:38:
Sorry dat ik dit even zo zeg, en echt, no offence, maar ik vind wel dat iedereen die hier een vraag stelt behandeld word alsof hij/zij helemaal niks weet.
Dit is gewoon 1 dingetje waar ik even niet uitkom, dan hoef je niet gelijk te gaan roepen dat ik HTML moet gaan leren.

Daar heb je wat mij betreft gelijk in .. mensen die bepaalde dingen net aangeleerd hebben zouden soms best eens meer geduld moeten kunnen hebben met mensen met wat minder direkte kennis:
Iermand met net wat minder kennis zou daarom ook niet gelijk afgebrand moeten worden als hij iets niet weet

[JHS]

We zeggen niet je er niks van snapt, en het is ook helemaal niet zo dat als je een vraag stelt je behandelt wordt alsof je helemaal niks weet. Zo is het iniedergeval van mijn kant helemaal niet bedoelt . En het ging over CSS leren, niet HTML

Maar in je tweede post zeg je bijvoorbeeld dat je je a niet breder krijgt. Als je had begrepen hoe het zat met inline elementen, had je geweten dat je die geen dimensies kan meegeven, en dat je er dus een blocklevel element van had moeten maken. En bijvoorbeeld je vraag. Een paar minuten zoekwerk had je geleerd dat je een menu in een list "hoort" te stoppen. En juist het inline zijn van spans maken het onmogelijk om daar dimensies aan mee te geven, dus dat was juist niet de oplossing, je zou dan een li kunnen stylen.

En ik bedoel dit écht niet kleinerend, en je zal vast een goed begrip hebben van de meeste dingen, maar omdat er op wat meer gebieden kennenlijk wat begrip mist, lijkt het mij verstandig om nog eens wat te lezen. Dat is gewoon een tip over hoe ik het zou aanpakken. Die kan je links laten liggen, als je denkt dat dat verstandig is.

En nu hou ik erover op. Ik wens je iniedergeval veel success, zal straks misschien nog even naar de source zelf kijken, en als je nog goede vragen hebt, zou ik zeggen dat je ze moet stellen .

edit:

Ik wil toch even nogmaals benadrukken dat ik het écht vriendelijk bedoel . Ik heb natuurlijk ook een tijd aangeprutst en veel moeite gehad met dit soort dingen. En ik heb nog steeds moeite met een hele hoop zaken, er zijn hier een heleboel mensen die veel en veel meer dingen weten dan ik. Vervolgens ben ik toch maar opnieuw gaan lezen, en dat hielp. En dat was niet omdat ik er níks van begreep, maar omdat ik wat fundamentele zaken miste. En daarom raad ik je dus aan om hetzelfde te doen.

Ik heb dus écht niet de fantasie dat ik hier veel of überhaupt echt wat van weet. Ik denk alleen dat door de dingen te doen die ik heb aangeraden je verder gaat komen .

edit:

Overigens vind ik dat je het best sportief en positief opneemt! Success!

[ Voor 26% gewijzigd door JHS op 18-04-2005 16:50 ]

[Verwijderd]

Dat met die <a> die niet breder wou is dus gekomen door een andere DTD, ik was er wel achter gekomen dat een HTML 4.01 strict DTD, dus anders werkt als met de DTD die ik gebruikte, waar ik de link wel gewoon een breedte kon geven, van daardat ik nog nooit een block van een <a> heb hoeven maken.

Maar ik ben nu al veel verder geholpen, ik zal nog even aan mijn baas vragen of hij nog een css boek kan kopen ( deze : http://www.oreilly.com/catalog/css2/toc.html )

[Sappie]

RM-rf schreef op maandag 18 april 2005 @ 16:45:
[...]

Daar heb je wat mij betreft gelijk in .. mensen die bepaalde dingen net aangeleerd hebben zouden soms best eens meer geduld moeten kunnen hebben met mensen met wat minder direkte kennis:
Iermand met net wat minder kennis zou daarom ook niet gelijk afgebrand moeten worden als hij iets niet weet

Ik vind niet dat we in deze kwestie de TS hebben afgebrand (we hadden ook UTFS kunnen gaan roepen). Als ik niet van plan was de TS te helpen dan zou ik hier niet eens posten. Ik ga me echt niet beter voelen door een persoon met minder kennis van zaken de grond in te stampen. Ben zelf ook zo'n persoon geweest (nog geeneens 2 maanden geleden as a matter of fact).
Verder is een bepaalde basiskennis gewoon noodzakelijk en vind ik dat er genoeg links en antwoorden in dit topic zijn voorbijgekomen die de TS op de goede weg kunnen helpen.

Verder, wat JHS zegt: JHS in "div css & floats"

[ Voor 11% gewijzigd door Sappie op 18-04-2005 17:02 ]

[bolleh]

JHS schreef op maandag 18 april 2005 @ 16:36:
[...]
Mja, dat ben ik eerlijkgezegd niet met je eens . Je kan wel wat aan lopen prutsen (niet per sé richting jou bedoelt), maar het is toch nodig om gewoon te wéten hoe het werkt met het boxmodel, inline, block, specifity en dat soort zaken. En het gaat gewoon tig keer sneller als je dat gewoon even leest dan dat je na weet ik hoevaak proberen een "trukje" ontdekt. Als je het snapt kan je je stylesheet schrijven en vervolgens kijken naar wat er niet klopt, in plaats van wat te proberen en vervolgens te kijken wat er uitkomt .

dat is bullshit. dat verschilt gewoon per persoon

naast een aantal dingen op www.w3schools.com heb ik vrijwel nix gelezen over css, ik ben er gewoon mee begonnen en als ik iets even niet weet pak ik gewoon de reference list bij, probeer wat dingen en meestal komt er uit wat ik wil. mischien niet het meest efficiente maar het werkt wel. mijn website heb ik crossbrowser op vrijwel alle browsers en de website waar ik op het moment aan werk is dat ook, plus dat het w3c valid is. als iemand zijn eigen manier van werken heeft hoef je dat niet meteen af te branden omdat jij het zelf niet zo gedaan hebt

als ik een leuk idee krijg qua website oid kijk ik vaak bij de code van andere website, vaak ook van gotters. als ik zie hoe een bepaald iets werk en ik maak er zelf iets anders van...dan leer je een hoop zonder dat je een boek moet lezen. een boek wat je vaak ook maar op 1 manier kan lezen, van begin tot eind. nu kan ik gewoon proberen wat ik wil en wat van toepassing is op mijn situatie

[JHS]

bolleh schreef op maandag 18 april 2005 @ 18:47:
hoef je dat niet meteen af te branden omdat jij het zelf niet zo gedaan hebt

Hoho. Waar brand ik iemand af? Sinds wanneer is het geven van een vriendelijk gebracht, vriendelijk bedoeld, advies afbranden? Vind ik aankomen met "bullshit" eerlijkgezegd minder constructief, maar zo had je het lijkt me niet bedoeld

En ik ben ervan overtuigd dat als je nooit verteld is hoe het zit met specifity, je nóóit echt begrijpt wat je aan het doen bent op dat gebied. En op een gegeven moment kom je jezelf daarop tegen. En dáárom adviseer ik om er gewoon echt wat over te lezen. Natuurlijk hoef je niet alles te lezen over hoe dingen werken, hoe het zit met fonts, etcetera. Maar imo moet je érgens voldoende kennis opdoen om de specificatie te begrijpen en te kunnen hanteren. Daarmee kan je dan uit een heleboel problemen leren, behalve als je tegen een bug aanloopt oid.

Als je een auto moet maken wordt het toch ook niet vreemd gevonden dat je eerst wat moet leren voordat je een auto in elkaar gaat trachten te zetten? Je kan wel wat in elkaar trachtten te zetten, maar als je op een gegeven moment een auto gaat bouwen die snél moet gaan, moet je toch eerst echt wat weten over natuurkundige principes daaromtrent .

En ik hád het juist over de efficientie. Over hoe je mijns inziens zo snel mogelijk bij je doel kan komen. En zo dat je er op een zo lang mogelijke termijn er wat aan hebt. Maargoed, dat is mijn manier. Maar dat weerhoud me er niet van om die aan een ander te adviseren...

[bolleh]

JHS schreef op maandag 18 april 2005 @ 18:57:
[...]
Hoho. Waar brand ik iemand af? Sinds wanneer is het geven van een vriendelijk gebracht, vriendelijk bedoeld, advies afbranden? Vind ik aankomen met "bullshit" eerlijkgezegd minder constructief, maar zo had je het lijkt me niet bedoeld

ook niet echt zo bedoeld maarja bullshit is ook maar gewoon een woord he

En ik hád het juist over de efficientie. Over hoe je mijns inziens zo snel mogelijk bij je doel kan komen. En zo dat je er op een zo lang mogelijke termijn er wat aan hebt. Maargoed, dat is mijn manier. Maar dat weerhoud me er niet van om die aan een ander te adviseren...

mjah maar je vergeet dat het veel hobbyisten vaak niet om de efficientie gaat. ik werk atm aan een website waar ik al behoorlijk wat tijd in heb zitten, maar ik heb er weer wat van geleerd, ik heb er plezier in en de persoon/bedrijf voor wie de website wordt zijn uitermate tevreden. dat gekoppeld aan het feit dat er zowiezo een hoop bezoekers op zullen komen is voor mij al genoeg voldoening. dat ik de website in de helft van de tijd had kunnen maken als ik mijn css kennis beter op peil had gehouden het afgelopen half jaar...tjah dat zal mij een zorg zijn

maar dan maak ik hier dus wel onderscheid tussen de "efficientie developers", die het als baan doen. en de "kunstenaars" die het als hobby doen, omdat ze het leuk vinden

[JHS]

bolleh: Misschien is het inderaad ook wel terecht om daar een onderscheid in te maken, en ik redeneer kennenlijk nogal snel vanuit het ene perspectief . Maar dan nog, ook als kunstenaar kan je niet zonder de elementaire kennis. Tenminste, mijns inziens . Je komt dan teveel tegen, en ook als kunstenaar lijkt het me heel frustrerend om voor de zoveelste keer radeloos rond zitten te kijken wetend wat er niet klopt. En als je dan andere mensen gaat vragen waarom het niet werkt, klopt er iets niet. Dan zou het handig zijn geweest om de elementaire kennis te hebben opgedaan. Misschien gaat het me daar wel het meest om .

Het zijn gewoon twee verschillende stijlen. Ik raad de ene stijl aan, en verwacht toch wel bepaalde elementaire kennis als ik wat tracht uit te leggen .

Maar we gaan enigzins offtopic, alhoewel het wel een interressante discussie is .

[ Voor 11% gewijzigd door JHS op 18-04-2005 19:14 ]

[Verwijderd]

Dit lijkt me een kwestie van de leraar die moet weten WAAROM iets zo werkt, en de leerling hoeft alleen te zorgen dat het zo werkt

[JHS]

En dat is misschien dan een verschil. Ik wil bij álles wat ik doe / leer ook weten wáárom het zo is / het zo werkt. En daar doe ik dan ook mijn best voor. Helaas ben ik daar lang niet altijd toe in staat, maar ik probeer het wel .