Pagina's: [1] |   Omlaag

Auteur Topic: overflow  (gelezen 1619 keer)

0 leden en 2 gasten bekijken dit topic.

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
overflow
« Gepost op: 07-09-2010, 10:59 »

Wanneer er in een wrapper bijvoorbeeld, een floated genestelde div zit, waardoor wrapper niet meerekt, wat is dan de beste oplossing? Ik gebruik nu voor wrapper overflow:hidden. Overigens voor iedere DIV die zelf geen float heeft... Hij blijft zichtbaar op de site, terwijl de regel dan zou zijn dat hij niet wordt weergegeven. Althans, dat lees ik. Ik heb pagina's gemaakt dankzij dit boek en los het altijd op met overflow:hidden. Wellicht is dat niet de beste oplossing...


Of is het beter een element te plaatsen met clear:float?
Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re: overflow
« Reactie #1 Gepost op: 07-09-2010, 11:29 »

Als je wat uitgebreider informatie hierover wilt lezen ga dan naar http://www.waalweb.nl/blog/css-layouts-met-block-formatting-context

Overflow: hidden toegepast op een element met een vaste afmeting zal de content die niet past in dat element verbergen. Ik ben het met je eens dat het niet duidelijk genoeg blijkt uit de informatie in het boek op pag. 211 dat het hier gaat om een element met een vaste afmeting.

Een blocklevel element zonder vaste hoogte (bijv. #wrapper) zal standaard niet meerekken met zijn floated children. Maar geef #wrapper een overflow: hidden en hij rekt wel mee. Logisch? Tja :-) Eigenlijk is #wrapper met deze eigenschap geen 'echt' blocklevel element meer, dus negeert het andere elementen met float niet meer (zoals een block element standaard wel doet). Dus rekt ie mee.

Waarmee het dus niet zozeer zit in de specifieke eigenschappen van overflow: hidden, want als je in plaats daarvan een float aan #wrapper geeft dan zie je dat dat ook werkt. Alleen doet float meer, de specifieke eigenschappen daarvan zorgen bovendien dat #wrapper links of rechts gaat staan. Terwijl de specifieke eigenschappen van overflow: hidden alleen werken als er sprake is van een vaste hoogte, en die heeft #wrapper niet.

In het artikel waarnaar ik hierboven verwijs staat een opsomming van de eigenschappen die je voor dit soort oplossingen kunt gebruiken. Waarbij iedere oplossing dus weer zijn eigen specifieke eigenschappen heeft.

Hoop dat je hier wat aan hebt.

« Laatste verandering: 07-09-2010, 11:30 door Frances »
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re: overflow
« Reactie #2 Gepost op: 07-09-2010, 14:49 »

Je bedoelt dat overflow:hidden dus de beste oplossing is. Ik heb je artikel uitgevoerd in DW. Ja, dit begreep ik al gelukkig. Kwam ik tegen tijdens het bouwen van de sites.

Clear, zorgt ervoor dat andere floated elements, ook worden gecleart. Wat betekent dat de inhoud van de middenkolom, onder de linkerkolom valt/doorloopt, mits de middenkolom door haar inhoud hoger wordt dan de linkerkolom.
Met overflow hidden is dat niet het geval.

Wat ik begrijp is display: inline of block. Maar nog niet inline-block... wat kan ik hiermee precies en wanneer gebruik je dat?


In je voorbeeld:

"#wrapper rekt in IE mee met de rode kolom terwijl die in alle andere browsers uitsteekt.."  ... bedoel je dat die rode kolom uitsteekt? Hoe op te lossen voor andere browsers? Ik heb geen problemen met andere browsers, wanneer het in IE goed wordt weergegeven... overflow:hidden?

Met andere woorden, zonder overflow:hidden rekt de wrapper met de linkerkolom in IE mee, maar in andere browsers steekt hij er boven uit.... Uhm.. in IE, zonder overflow:hidden, steekt hij er ook onder uit, wanneer linkerkolom meer inhoud heeft dan wrapper.....

Misschien zie ik iets over het hoofd....
Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re: overflow
« Reactie #3 Gepost op: 08-09-2010, 18:55 »

Met inline-block kunnen blocklevel elementen naast elkaar komen te staan terwijl je er wel een width, height en margins aan kunt geven. En aan inline elementen kan je met inline-block een width en een height en margins geven terwijl ze wel naast elkaar blijven staan.

Zodra bijv. #wrapper een width heeft, zie IE dat als toegevoegde BFC (zie artikel). En gedraagt #wrapper zich als zodanig. Voor de andere browsers moet je voor datzelfde effect een eigenschap kiezen uit het rijtje uit het artikel. Overigens, overfow: hidden is niet altijd de beste oplossing, welke je kiest uit het rijtje hangt af van de situatie ter plekke.
« Laatste verandering: 08-09-2010, 19:03 door Frances »
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re: overflow
« Reactie #4 Gepost op: 08-09-2010, 21:36 »

Vermoedde ik al..

Dan zou mijn volgende vraag wel eens beantwoord mee kunnen worden.

Ik heb al zoveel profijt van je boek gehad, maanden later……
Ik zoek alleen nog de beste oplossingen nu ik ben aangekomen bij het maken van meer complexere pagina-indelingen, en liquide instellingen.

-----------

Wanneer je 3 columns naast elkaar hebt, dan kan je de eerste float:left geven, de rechter uiteraard float:right. De middenkolom geen float en width. Ik wil nu in de middenkolom 2 divs onder elkaar hebben en 2 naast elkaar, als een soort vierkant gesplitst in 4 divs.

Er zijn diverse oplossingen;

1) Ik geef de ene div op rij 1 (even makkelijk gezegd), float:left, de ander komt er naast te staan. Hetzelfde voor rij 2.

2) Of de tweede div een float right, maar dan krijg je weergaveverschillen. Of ook een float: left…..

3) Ik gebruik voor de middenkolom position:relative en de 4 divs daarin een position met absolute.

De hamvraag…. Kan je dus met inline-block 2 divs naast elkaar zetten zonder gebruik van float en position? Of geeft dat problemen?

Is het handig of onnodig om bij divs met postition ook een float te geven? In welke situatie zou dat uitkomen of moeten?

In je boek zeg je een Element met een width geen border en padding te geven. Wanneer ik die divs toch een border wil geven, wat is dan de oplossing, want stel dat daarin alleen een plaatje inkomt en 3 P-tags?
Ik zie geen oplossing in het geven van een border aan een van die elementen binnen die div, zodat die div toch een border krijgt…..

Tot slot, De afstanden, zoals margins en posities bij relative/absolute, kan je die in een site gemaakt in %, beter in px geven of ook in %?

Alvast bedankt!


Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re: overflow
« Reactie #5 Gepost op: 15-09-2010, 21:04 »

Met eigenschap inline kan je elementen naast elkaar plaatsen maar je kunt niet aangeven dat ze links of rechts komen te staan. Dat is dus een flink verschil met float.

In jouw plannetje is het belangrijk of de breedte en hoogte van 4 divjes gelijk blijft.

Position: absolute icm float is niet logisch, liefst float en anders position: absolute.

Position: relative icm float komt wel voor als je (klein)kinderen in die div absoluut wilt positioneren tov die div.

Border icm met width is geen probleem maar wordt bij elkaar opgeteld en in oudere IE browsers niet, dus dat kan problemen geven, hoewel, het moment is wel aangekomen om daar geen rekening mee te houden :)

Bij een elastic layout heb je de beste zoom als je alle afmetingen, ook de padding en margins, in ems doet, nadeel is dat al die tussenruimtes ook beeldschermruimte gebruiken, dus lezer moet eerder scrollen. Maar jij vraagt naar % of px. Dat hangt echt af wat je wilt met je layout, wil je dat die tussenruimtes relatief zijn aan de beschikbare ruimte of wil je dat ze een vaste afmeting hebben?
« Laatste verandering: 15-09-2010, 21:06 door Frances »
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re: overflow
« Reactie #6 Gepost op: 15-09-2010, 22:57 »

Duidelijk.

Rest nog een vraag; Is het beter wanneer je 2 divs naast elkaar hebt, de ene float left en de ander float right te geven, of 1x float left zodat de ander er naast komt?

Met 3 kolommen weet ik het...... :P

Ik houd gelukkig geen rekening meer met IE6 en lager....
Vreemd is wel dat Firefox regelmatig problemen geeft met o.a lijsten.. en dat de problemen op internet niet eens te vinden is.... en ik heb toch echt gezocht op tientallen pagina's..... incl W3C.

Wat is jouw bekend hierover?
Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re: overflow
« Reactie #7 Gepost op: 16-09-2010, 21:44 »

Als je 2 divs naast elkaar wilt voldoet het om één van beide een float te geven, beide kan ook maar beter alles dat overbodig is niet ingeven.
Als je het niet laten kan: beide een float: left dan sluiten ze naast elkaar links aan, beide float: right dan sluiten ze naast elkaar rechts aan, eentje left en eentje right dan staat er -afhankelijk van beschikbare breedte- meer of minder ruimte tussen beide.

Wat voor problemen bedoel je met lijsten in FF? 

 
Gelogd

Tony

  • Nieuw lid
  • *
  • Offline
  • Berichten: 47
Re: overflow
« Reactie #8 Gepost op: 17-09-2010, 14:08 »

Op http://www.eboogle.nl/ zie je rechts een genummerde lijst. het lijkst alsof de Auteur onder de titel een andere inspringing heeft, of meer ruimte van links.

De fotos zien er ook anders uit.... in FireFox, namelijk lelijker...

De site is nog in ontwikkeling overigens....
« Laatste verandering: 17-09-2010, 14:10 door Tony »
Gelogd

Frances

  • Beheerder
  • Junior lid
  • *****
  • Offline
  • Berichten: 61
Re: overflow
« Reactie #9 Gepost op: 21-09-2010, 10:29 »

Lekker ingewikkelde site om mee te beginnen :-)

Bekijk eens een lijstitem met Firebug (een FF Addon), dan kan je in de 'lade' die opent precies zien welke CSS welk element beïnvloedt, door met je rechtermuis op het element te gaan staan en dan te kiezen voor 'Element inspecteren'.

Als je in de HTML-code in de lade met je muis over de <p> in het lijstitem heen gaat, zie je in de pagina zelf de box ingekleurd worden, zo kan je zien wat de padding is. Je ziet dan ook dat de link erboven diezelfde padding niet heeft.

Overigens, die p-tag voor de auteur's naam vind ik niet echt mooi. Ik gebruik liever <cite></cite> hoewel dat straks in HTML5 weer niet lijkt te gaan mogen voor een persoonsnaam. Omdat ik nog geen alternatief weet blijf ik dit nog maar even gebruiken.

Maar goed, ik zie dus niets raars in FF. Dikke kans dat IE afwijkt :-)

Wat betreft de kwaliteit van de foto's, zie ik het goed dat je afbeelding eigenlijk heel groot is en dat je die met CSS verkleint? Oeps... das niet erg fraai! Je gebruikt zo veel onnodige bandbreedte, en daarbij, Photoshop verkleint echt mooier dan een browser. Maar daar kan heel goed de oorzaak liggen.
Gelogd
Pagina's: [1] |   Omhoog