Float of iets beter in html5, css

Vraag

donderdag 20 september 2018 22:33

Acties:

0Henk 'm!

Mijn vraag: float in css of html5 of iets beters

...
overal gezocht en nu hier

Ik wil vier plaatjes onder elkaar zetten met ernaast tekst.
Wanneer ik Float gebruik in css(style) voor de img lukt het niet om de plaatjes onder elkaar te houden indien de tekst kleiner is dan het plaatje.Ik kan het oplossen door 3x <br> te doen . Wanneer ik height,width float achterin het img element zet doet het het wel goed. Wie weet waarom ?

style
img.one { height: 125px; width: 205px; float: left; }
style
body
<img class="one" src="xxx"> <p> bla bla bla </p>
<img class="one" src="xxx">
<img class="one" src="xxx">
<img class="one" src="xxx">
body...

boven werkt niet bij mij zoals ik wil
maar wanneer ik de plaatjes zo als onder doe weer wel :

<img src="xxx" WIDTH="205" HEIGHT="125" STYLE="float: left;"> <p> bla bla bla </p>

Wie o wie

Alle reacties

donderdag 20 september 2018 22:39

Acties:

0Henk 'm!

ThaPegasus

Probeer er eens DIVs omheen te zetten met 'display: inline-block'. Dat zou je moeten helpen.

donderdag 20 september 2018 22:54

Acties:

0Henk 'm!

slagsleutel

Topicstarter

oei ?

dus <div class= abc> img bla bla </div>

en dan in style #abc { display: inline-block;}

donderdag 20 september 2018 23:11

Acties:

0Henk 'm!

ThaPegasus

#abc verwijst naar een 'id' terwijl je een class gebruikt ik zou dus .id gebruiken, anders werkt het zeker niet

donderdag 20 september 2018 23:14

Acties:

0Henk 'm!

slagsleutel

Topicstarter

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Sjabloon voor HTML5-document</title>
<link rel="stylesheet" href="stijlen.css">
<style>
.img.one {
height: 125px;
width: 205px;
float: left;
display: block-inline;

}
</style>
</head>
<body>
<P>
<IMG SRC="http://w3newbie.com/wp-content/uploads/facebook1.png" ALT="bla bla" WIDTH="105" HEIGHT="125" STYLE="float: left;">
<h3>bla bla </h3>
bla bla bla.</P>
<P STYLE="clear: left;">.</P>

<P>
<IMG SRC="http://w3newbie.com/wp-content/uploads/facebook1.png" ALT="bla bla" WIDTH="105" HEIGHT="125" STYLE="float: left;">
<h3>bla bla </h3>
bla bla bla.</P>
<P STYLE="clear: left;">.</P>

<img class="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
<img class="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
<img class="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
<img class="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>

</body>
</html>

vrijdag 21 september 2018 00:17

Acties:

0Henk 'm!

slagsleutel

Topicstarter

gelezen https://www.handleidinght...electors/selectors04.html
en ga weer wat proberen.
oplossing heb ik nog niet btw

vrijdag 21 september 2018 00:35

Acties:

+5Henk 'm!

Maaark

flexbox

vrijdag 21 september 2018 10:56

Acties:

0Henk 'm!

Klaasvaak

Een heading sluit de huidige paragraag af.

code:

<p>
<img />
<h3></h3>
</p>

wordt dus geinterpreteert als

code:

<p>
<img />
</p>
<h3></h3>
<p></p>

Met een clearfix zou het moeten lukken.

code:

div { overflow: auto; }
img {  float: left; }

<div>
<img />
<h3></h3>
<p></p>
</div>

vrijdag 21 september 2018 13:40

Acties:

+1Henk 'm!

AW_Bos

Waar ga je heen? ☀

slagsleutel schreef op vrijdag 21 september 2018 @ 00:17:
gelezen https://www.handleidinght...electors/selectors04.html
en ga weer wat proberen.
oplossing heb ik nog niet btw

Ik zou liever even zoeken naar een andere tutorial als je echt CSS wilt leren.
Voor de basis en syntax is dit nog wel te doen, maar de tutorial zelf hoort echt in het "museum der webdesign". Ze beschrijven nog Netscape en Internet Explorer 3.0 / 4.0

Waar ga je heen?

vrijdag 21 september 2018 14:35

Acties:

0Henk 'm!

botwood

Kijk eens naar clearfix.
En ik denk dat je er goed aan doet om eens te kijken naar een goede css tutorial. Wellicht een Udemy cursus/ of https://www.codecademy.com/

vrijdag 21 september 2018 16:21

Acties:

0Henk 'm!

slagsleutel

Topicstarter

Eerst dus id en class uitgezocht en nu gedaan wat Klaas Vaak zei en volgens mij werkt het. Dacht/hoopte dat het ook zou werken voor vier img tegelijk, maar helaas niet. Zou het wel mss lukken met ul en il of zo ?
Ga straks even kijken wat er bedoeld wordt met clearfix, flexbox en OVERFLOW. Heb twee boekjes uit de bieb en deze link http://sceneone.nl/tips_tricks/clearfix.php .
Moet lukken toch, met jullie hulp $_/-\o_$

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Sjabloon voor HTML5-document</title>
<style>
#one {
height: 125px;
width: 205px;
float: left;
padding: 3px; }
#xx{ overflow: auto;}
</style>
</head>
<body>
<section id="xx">
<img id="one" src="http://w3newbie.com/wp-content/uploads/massagebanner.png" />
<h3>bla bla </h3>
<p> bla bla bla.</p>
</section>

<section id="xx">
<img id="one" src="http://w3newbie.com/wp-content/uploads/massagebanner.png" />
<h3>bla bla </h3>
<p>bla bla bla.</P>
</section>

<section id="xx">
<img id="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
<img id="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
<img id="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
<img id="one" src="http://w3newbie.com/wp-content/uploads/facebook1.png"/></a> <p>bla bla</p>
</section>

</body>
</html>

vrijdag 21 september 2018 16:44

Acties:

+1Henk 'm!

Harrie_

🔴 🔴 🔴 🔴 🔴

@slagsleutel Aangezien verder niemand anders je erop wijst doe ik het maar even:
Als je je code tussen [code]-tags zet is het allemaal een stuk overzichtelijker.
hier een linkje naar de FAQ.

☀️🔋 18 Panelen | 5,8 kWp | SolarEdge SE6K

vrijdag 21 september 2018 18:17

Acties:

0Henk 'm!

Toxic_Dreams

Goed, ik begrijp wat je wilt, maar om te snappen waarom wat jij wilt niet werkt, zal je toch moeten weten wat de werking van float precies is.

Een floated element, zal eigelijk altijd zolang er plaats voor is, naast een ander element gaan staan. Dit zorgt er dus voor, dat wanneer de tekst niet hoog genoeg is, er nog ruimte is naast de afbeelding, en het volgende floated element daar komt te staan.

Dit zou je op een paar manieren op kunnen lossen:
- De tekst een 'min-height' geven, naar mijn mening niet de beste oplossing, maar het werkt wel, zeker ook omdat je hier de afbeelding een vaste hoogte hebt gegeven.
- Een div / section o.i.d. om elke afbeelding + tekst heen te plaatsen.
- De styling 'clear: left' toepassen op de afbeeldingen.

Zelf zou ik voor optie 2 of optie 3 gaan, afhankelijk van wat ik precies wil. In dit geval zouden beide opties mogelijk zijn.

Ik heb een JSFiddle aangemaakt, met daarin hoe je dit aan zou moeten pakken, zie: https://jsfiddle.net/xToxic/9yrLzvjm/

Overigens, wat afbeeldingen betreft, hier zou ik tenzij je de exacte afmetingen weet van de afbeeldingen geen fixed hoogte of breedte op plaatsen. Hoogstens een max-width en max-height. Ook zijn object-fit nog wel leuke dingen om naar te kijken, of height: 0 + padding-bottom: 100% i.c.m. een background-image ( dit om een ratio te creëren, in dit geval 1:1 ).

Zie: https://www.w3schools.com/css/css3_object-fit.asp
En: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Je gebruikt trouwens ook id's i.p.v. classes. Misschien dat je dat nog even moet doorlezen

Als je nog vragen hebt hoor ik het wel!

[Voor 3% gewijzigd door Toxic_Dreams op 21-09-2018 18:31]

vrijdag 21 september 2018 18:48

Acties:

+2Henk 'm!

Demonitzu

Flexbox is een moderne oplossing ondersteund voor vrijwel alle browsers

vrijdag 21 september 2018 19:22

Acties:

0Henk 'm!

slagsleutel

Topicstarter

zag eerlijk gezegd geen verschil in "class" of "id" alleen dat "id" meer rechten heeft dan " class".

Ben nu een beetje aan het zoeken. tekst moet onder afbeelding komen wanneer scherm klein is maar wil dat maar niet. Eerst wel zonder overflow maar dan kroop de tekst eronder wat ik ook weer niet wilde. Ga vanavond maar weer via ytube overtypen om te zien hoe deze persoon dat doet.
YouTube: How To Make A Website From Scratch - HTML5/CSS3 Responsive Design

Maar eerst nog die JSFiddle https://jsfiddle.net/xToxic/9yrLzvjm/

vrijdag 21 september 2018 19:31

Acties:

0Henk 'm!

Osxy

Holy crap on a cracker

slagsleutel schreef op vrijdag 21 september 2018 @ 19:22:
zag eerlijk gezegd geen verschil in "class" of "id" alleen dat "id" meer rechten heeft dan " class".

Ben nu een beetje aan het zoeken. tekst moet onder afbeelding komen wanneer scherm klein is maar wil dat maar niet. Eerst wel zonder overflow maar dan kroop de tekst eronder wat ik ook weer niet wilde. Ga vanavond maar weer via ytube overtypen om te zien hoe deze persoon dat doet.
YouTube: How To Make A Website From Scratch - HTML5/CSS3 Responsive Design

Maar eerst nog die JSFiddle https://jsfiddle.net/xToxic/9yrLzvjm/

Een ID is uniek, een class mag meerdere elementen op 1 pagina hebben. Daarnaast kan een element meerdere classes hebben (<div class="block big red"></div>) waarmee je dus styling kan combineren.

Voor zo'n scherm afhankelijke breakpoint zijn meerdere wegen naar Rome. O.a. een @media query kan het doen maar ook min-widths.

[Voor 13% gewijzigd door Osxy op 21-09-2018 19:35]

"Divine Shields and Hearthstones do not make a hero heroic."

vrijdag 21 september 2018 19:42

Acties:

0Henk 'm!

slagsleutel

Topicstarter

_{Scherm afhankelijk breakpoint} = tekst moet onder afbeelding komen wanneer scherm klein is maar wil dat maar niet. Eerst wel zonder overflow maar dan kroop de tekst eronder wat ik ook weer niet wilde

vrijdag 21 september 2018 20:03

Acties:

0Henk 'm!

Toxic_Dreams

slagsleutel schreef op vrijdag 21 september 2018 @ 19:42:
_{Scherm afhankelijk breakpoint} = tekst moet onder afbeelding komen wanneer scherm klein is maar wil dat maar niet. Eerst wel zonder overflow maar dan kroop de tekst eronder wat ik ook weer niet wilde

Dan moet je een media query gebruiken.

Cascading Stylesheet:

.image {
  float: left;
  width: 50%;
}
.textblock {
  float: left;  
  width: 50%;
}
@media (max-width: 767px) {
  .image {
    width: 100%;
  }
  .textblock {
    width: 100%;
  }
}

zaterdag 22 september 2018 16:19

Acties:

0Henk 'm!

slagsleutel

Topicstarter

@media heb ik gevonden. Invoegen allemaal is weer een ander probleem

Ik heb iig nu wel die site van de Ytube uitleg voor elkaar gekregen. Heb twee uur zitten turen waarom die icoontjes maar niet wilde verschijnen. Probleem was dat ik had scr getypt ipv src

Moet lukken zo.

zaterdag 22 september 2018 17:00

Acties:

0Henk 'm!

RM-rf

1 2 3 4 5 7 6 8 9

slagsleutel schreef op zaterdag 22 september 2018 @ 16:19:
@media heb ik gevonden. Invoegen allemaal is weer een ander probleem
Ik heb iig nu wel die site van de Ytube uitleg voor elkaar gekregen. Heb twee uur zitten turen waarom die icoontjes maar niet wilde verschijnen. Probleem was dat ik had scr getypt ipv src

Het kan erg behulpzaam zijn om en editor te gebruiken met syntax highlighting, en evt. ook foutcontrole ( en ook bv htmllint toe te passen: https://www.npmjs.com/package/htmllint-cli)

Een groot deel van iedere ontwikkelaar zijn fouten, zal zulke kleine dingen zijn en die telkens weer zelf puur op zicht te moeten debuggen kan lastig zijn en je veel tijd kosten.

De basis moet je nog steeds zelf leren door veel te oefenen, maar zulke hulpmiddelen kunnen die weg wel prettiger maken

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 27 september 2018 16:35

Acties:

0Henk 'm!

gitaarwerk

Grid, of flexbox heeft nog een fijne bijkomstigheid. Als je met inline block werkt, kun je witruimtes aan een kant overhouden, die je alleen kan weghalen met hacky oplossingen of elementen aan elkaar te plakken. Grid/Flexbox zijn beter bedoeld voor deze dingen, en je kunt er ook meer mee. Ze hebben wel beide een flinke learning curve, maar het is het wel waard.

CSS-tricks heeft een prima referentie artikel hierover. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox wordt nu redelijk ondersteund.

donderdag 27 september 2018 19:37

Acties:

+1Henk 'm!

R4gnax

gitaarwerk schreef op donderdag 27 september 2018 @ 16:35:
Flexbox wordt nu redelijk ondersteund.

Waar komt die 'redelijk' vandaan?
Ontwikkel je nog voor een dood platform als IE 9 of zo?

Afgezien van een paar kleine gotchas in IE 11 waar je heel goed omheen kunt werken -- Als je de foute cases überhaupt al tegenkomt, wat bij gemiddeld gebruik vrij gelimiteerd zal zijn. -- is flex box zeer goed ondersteund.

[Voor 10% gewijzigd door R4gnax op 27-09-2018 19:37]

donderdag 27 september 2018 21:32

Acties:

0Henk 'm!

slagsleutel

Topicstarter

Hoe krijg je je tekst naast een plaatje met flex

.flex-container {display: flex;flex-direction: column;}

<div class="flex-container">
<div>plaatje1</div> <p> tekst bij plaatje 1 komt er nu onder</p>
<div>plaatje2</div> <p> tekst bij plaatje 2 komt er nu onder</p>
ect ect.

of moet alles weer in het vakje wat je gecreeerd hebt met flex benoemd worden.

[Voor 13% gewijzigd door slagsleutel op 27-09-2018 21:36]

donderdag 27 september 2018 21:40

Acties:

0Henk 'm!

Osxy

Holy crap on a cracker

slagsleutel schreef op donderdag 27 september 2018 @ 21:32:
Hoe krijg je je tekst naast een plaatje met flex

.flex-container {display: flex;flex-direction: column;}

<div class="flex-container">
<div>plaatje1</div> <p> tekst bij plaatje 1 komt er nu onder</p>
<div>plaatje2</div> <p> tekst bij plaatje 2 komt er nu onder</p>
ect ect.

of moet alles weer in het vakje wat je gecreeerd hebt met flex benoemd worden.

Door het gebruik van een paragraph (<p>) zal een browser standaard line-breaks toepassen.

"Divine Shields and Hearthstones do not make a hero heroic."

donderdag 27 september 2018 22:34

Acties:

0Henk 'm!

gitaarwerk

R4gnax schreef op donderdag 27 september 2018 @ 19:37:
[...]

Waar komt die 'redelijk' vandaan?
Ontwikkel je nog voor een dood platform als IE 9 of zo?

Afgezien van een paar kleine gotchas in IE 11 waar je heel goed omheen kunt werken -- Als je de foute cases überhaupt al tegenkomt, wat bij gemiddeld gebruik vrij gelimiteerd zal zijn. -- is flex box zeer goed ondersteund.

Er zijn zat edge cases. Maar ja, als je de coolblue website bouwt met een hoop oudere browsers, dan moet je daar inderdaad polyfills voor hebben die niet altijd ten goede komen van je renderperformance. Maar dat is een ander verhaal :-)

Goed, ze komen wel voor, maar blijven edge cases.

vrijdag 5 oktober 2018 23:26

Acties:

0Henk 'm!

Ed Vertijsment

Wellicht dat ik nog iets kan aanvullen, zo niet dan goeie poging.

Er zijn grofweg 3 manieren om een horizontale layout toe te passen.

Floats
Flexbox
CSS Grid

En dan heb je nog inline-block, maar tenzij je weet wat je doet en een reden hebt om het te gebruiken kun je dat beter links laten liggen (dat is slechts mijn mening).

Floats

Float is de oudste manier, en in zekere maten het meest getest. Het idee is dat je blokken van een bepaalde grote direct achter elkaar "aansluit". Op het moment dat de beschikbare ruimte minder is dan de gevraagde ruimte wordt het volgende element naar onder geduwd, dit het "wrapping".

Als je floats gebruikt kijkt de browser naar de breedte van nodes, of iets "wrapped" is ondergeschikt aan de grootte.

Floats hebben een groot nadeel, ze hebben namelijk geen effect op de hoogte van de container, hierdoor zul je in veel gevallen "clearfixes" nodig hebben.

Flexbox

Flexbox is een alternatieve benadering en is sinds Internet Explorer 11 vrij goed ondersteund (en daarmee veilig te gebruiken), de laatste browser wil in uitzonderlijke gevallen nog wel een capriolen uithalen dus het is wel aan te raden altijd goed te testen op dit platform.

Het idee van Flexbox is dat je over 1 dimensie (row (horizontaal) of column (verticaal)) een "constraint" toepast. Je zegt tegen de browser hoe de directe "child elements" uitgelijnd moeten worden en dat heeft ALTIJD voorrang boven de afmetingen van deze elementen. Het meest voorkomende scenario van Flexbox is aan de browser vertellen dat iets altijd horizontaal moet staan. Toch kan je ook (met flex-direction en flex-wrap) andere flows bedenken, dit is iets complexer maar het eerste is gemakkelijk te leren.

CSS Grid

CSS grid gaat en stapje verder dan Flexbox, het is niet of matig ondersteund in Internet Explorer 11 en als je deze moet ondersteunen kan je dit beter links laten liggen.

CSS Grid werkt net zoals Flexbox met constraints. Het is van ondergeschikt belang hoe groot een element is. Als er een beperking wordt opgelegd door het grid gaat dat voor. Het verschil met Flexbox is dat CSS Grid over 2 dimensies werkt, kolommen, en rijen waarin "cellen" worden gedefineerd.

Cellen hebben op basis van het grid een positie, breedte en hoogte. Het staat je vrij om een node binnen het grid aan een willekeurige cel toe te wijzen. De node krijgt dan de positie, breedte, en hoogte van deze cel.

CSS grid is ontzettend krachtig maar helaas niet voor iedereen te gebruiken. Mocht je Internet Explorer 11 niet te hoeven ondersteunen is dit waarschijnlijk de beste oplossing.

inline(-block)

Nog even wat extra uitleg over inline-block, Inline blok werkt (soms) omdat elementen op een tekst regel worden uitgelijnd. Hierin wordt er naar whitespace geluisterd als tekst wat in onverwachte spacing issue kan resulteren.

Inline block is naar mijn mening onvoorspelbaarder dan floats en de scope van de hacks om het te fixen is vaak groten dan de clearfix bij floats. Vandaar dat ik dit niet adviseer.

[Voor 4% gewijzigd door Ed Vertijsment op 05-10-2018 23:30]

dinsdag 9 oktober 2018 00:28

Acties:

0Henk 'm!

R4gnax

Ed Vertijsment schreef op vrijdag 5 oktober 2018 @ 23:26:
En dan heb je nog inline-block, maar tenzij je weet wat je doet en een reden hebt om het te gebruiken kun je dat beter links laten liggen (dat is slechts mijn mening).

(...)
Floats hebben een groot nadeel, ze hebben namelijk geen effect op de hoogte van de container, hierdoor zul je in veel gevallen "clearfixes" nodig hebben.

Floats hebben nog een groot nadeel: je kunt blokken op dezelfde horizontale lijn niet onderling verticaal uitlijnen. Dat is iets wat je met inline-block wel kunt.

Overigens zijn er heel makkelijke manieren om het witruimte-probleem bij inline-blocks op te lossen. Een mooie en betrouwbare truc is om op je grid-container gebruik te maken van een custom font waar de white-space characters een zgn. horizontal advance van 0 krijgen en vervolgens op de kolom-elementen weer het normale body-font terug te zetten.

Zo'n font is meestal zo klein dat je het makkelijk als data-uri kunt embedden.

Maar goed; heden ten dage zou ik noch float noch inline-block gebruiken voor horizontale layout.
Flex of grid; dat is het nu.

[Voor 9% gewijzigd door R4gnax op 09-10-2018 00:31]

dinsdag 9 oktober 2018 11:19

Acties:

0Henk 'm!

Ed Vertijsment

R4gnax schreef op dinsdag 9 oktober 2018 @ 00:28:
Overigens zijn er heel makkelijke manieren om het witruimte-probleem bij inline-blocks op te lossen. Een mooie en betrouwbare truc is om op je grid-container gebruik te maken van een custom font waar de white-space characters een zgn. horizontal advance van 0 krijgen en vervolgens op de kolom-elementen weer het normale body-font terug te zetten.

Nog makkelijker is de font-size op 0 zetten. Probleem is dat de scope van deze hacks vrij groot is door alle inherited properties. Bij float/clear is die scope kleiner en nog beperkter bij flexbox/grid.

Inline-block is handig voor bepaalde toepassingen. Maar het is niet geschikt om grotere layouts mee op te zetten.

dinsdag 9 oktober 2018 19:48

Acties:

0Henk 'm!

R4gnax

Ed Vertijsment schreef op dinsdag 9 oktober 2018 @ 11:19:
Nog makkelijker is de font-size op 0 zetten.

Dat werkt niet betrouwbaar in op Webkit en Blink gebaseerde browsers, wanneer deze op een aziatische locale ingesteld zijn. Deze hanteren in dat geval veelal een afgedwongen minimum font-size in de renderer van 3 of 4 px. (Om het nog leuker te maken: mogelijk geeft de getComputedStyle DOM API op dat moment nog steeds wel een actieve font-size van 0 terug...)

Ed Vertijsment schreef op dinsdag 9 oktober 2018 @ 11:19:

Inline-block is handig voor bepaalde toepassingen. Maar het is niet geschikt om grotere layouts mee op te zetten.

Ik heb er nochtans zeker 7 jaar lang complexe website designs mee op kunnen leveren die overal robuust werken. Voordat flex-box een ding was kon je er fantastische cross-browser layouts bouwen. Destijds werkte het zelfs onder IE 6 en 7 nog perfect, zonder allerlei uitzonderingen te hoeven inbouwen.

En met een stuk minder onvoorspelbaarheid dan een layout op basis van floats...

[Voor 62% gewijzigd door R4gnax op 09-10-2018 19:56]

woensdag 10 oktober 2018 10:17

Acties:

0Henk 'm!

Ed Vertijsment

R4gnax schreef op dinsdag 9 oktober 2018 @ 19:48:
[...]

Dat werkt niet betrouwbaar in op Webkit en Blink gebuseerde browsers, wanneer deze op een aziatische locale ingesteld zijn. Deze hanteren in dat geval veelal een afgedwongen minimum font-size in de renderer van 3 of 4 px. (Om het nog leuker te maken: mogelijk geeft de getComputedStyle DOM API op dat moment nog steeds wel een actieve font-size van 0 terug...)

Tja, custom fonts worden ook niet altijd ingeladen op systemen met toegankelijkheid software voor bijvoorbeeld dyslexie. Bottom line: geen van deze oplossingen is perfect.

R4gnax schreef op dinsdag 9 oktober 2018 @ 19:48:
[...]

Ik heb er nochtans zeker 7 jaar lang complexe website designs mee op kunnen leveren die overal robuust werken. Voordat flex-box een ding was kon je er fantastische cross-browser layouts bouwen. Destijds werkte het zelfs onder IE 6 en 7 nog perfect, zonder allerlei uitzonderingen te hoeven inbouwen.

En met een stuk minder onvoorspelbaarheid dan een layout op basis van floats...

Ik twijfel er niet over of je er hele gave layouts mee op kan bouwen. Maar ik zou tegenwoordig niemand meer aanraden om er op die manier mee te gaan werken tenzij ze weten wat ze doen en in welke uitzondering je het wel wilt.

woensdag 10 oktober 2018 19:27

Acties:

0Henk 'm!

R4gnax

Ed Vertijsment schreef op woensdag 10 oktober 2018 @ 10:17:

ik zou tegenwoordig niemand meer aanraden om er op die manier mee te gaan werken tenzij ze weten wat ze doen en in welke uitzondering je het wel wilt.

Ik ook niet. Enige wat ik zeg is dat het vroegâh echt makkelijker was om er spul mee te bouwen dan met float.
Tegenwoordig doe je dit natuurlijk allemaal met flex of grid.

donderdag 11 oktober 2018 19:02

Acties:

0Henk 'm!

FalconerHG

R4gnax schreef op donderdag 27 september 2018 @ 19:37:
[...]

Waar komt die 'redelijk' vandaan?
Ontwikkel je nog voor een dood platform als IE 9 of zo?

Afgezien van een paar kleine gotchas in IE 11 waar je heel goed omheen kunt werken -- Als je de foute cases überhaupt al tegenkomt, wat bij gemiddeld gebruik vrij gelimiteerd zal zijn. -- is flex box zeer goed ondersteund.

Hangt helemaal van je doelgroep af. Ik werk oa aan een website waar veel medewerkers van financiele instellingen op komen, en die zitten inderdaad vaak op IE. Welliswaar 11, maar daar is de flex box support nou niet bepaald daverend.

Is IE11 een heel beperkt deel van je doelgroep, dan is flex heel fijn.

donderdag 11 oktober 2018 19:23

Acties:

0Henk 'm!

R4gnax

FalconerHG schreef op donderdag 11 oktober 2018 @ 19:02:
daar is de flex box support nou niet bepaald daverend.

Oh? Beschrijf eens. Wat zijn dan volgens jou de echt moeilijke bugs waar je tegenaan loopt in IE 11?
Er zijn er nl. maar weinig die echt problematisch zijn.

donderdag 11 oktober 2018 19:30

Acties:

0Henk 'm!

FalconerHG

Ik ben vooral geen fan van hoe IE11 kolom breedte berekent. Ik zie regelmatig kolommen die niet dezelfde gutter space hebben, en kolommen die niet netjes even breed zijn als de hoeveelheid content verschilt. En dan ook weer niet bij alle browser widths, dus lastig te tracken.

Voor de werking van de site maakt het nagenoeg nooit een verschil, maar de OCD designer in mij kan er slecht tegen.

zaterdag 13 oktober 2018 13:48

Acties:

0Henk 'm!

Ed Vertijsment

R4gnax schreef op woensdag 10 oktober 2018 @ 19:27:
[...]

Ik ook niet. Enige wat ik zeg is dat het vroegâh echt makkelijker was om er spul mee te bouwen dan met float.
Tegenwoordig doe je dit natuurlijk allemaal met flex of grid.

Maar zou je nog steeds inline-block gebruiken in moderne websites waar je geen flex of grid kan gebruiken (gewoon uit interesse)? Ik zou dan toch echt voor floats gaan.

FalconerHG schreef op donderdag 11 oktober 2018 @ 19:30:
Ik ben vooral geen fan van hoe IE11 kolom breedte berekent. Ik zie regelmatig kolommen die niet dezelfde gutter space hebben, en kolommen die niet netjes even breed zijn als de hoeveelheid content verschilt. En dan ook weer niet bij alle browser widths, dus lastig te tracken.

Voor de werking van de site maakt het nagenoeg nooit een verschil, maar de OCD designer in mij kan er slecht tegen.

CSS maakt zelden verschil voor de werking van de website

maar dit is een bekend probleem van IE11 en kan vaak makkelijk gefixt worden met wat extra flex parameters als flex-basis, de initiële values lijken namelijk niet altijd goed gezet te worden (in bepaalde situates).

Dit is IMO echter geen reden om flex links te laten liggen, dit is zo gefixt.

zondag 14 oktober 2018 18:45

Acties:

0Henk 'm!

R4gnax

FalconerHG schreef op donderdag 11 oktober 2018 @ 19:30:
kolommen die niet netjes even breed zijn als de hoeveelheid content verschilt

Dat is dan ook hoe flex box werkt.
De flex-grow en flex-shrink factoren worden toegepast om aan de containter constraints te voldoen, nadat de flex-basis de start-opstelling bepaald heeft. En wanneer flex-basis op auto staat, dan wordt die start-opstelling bepaald door width, min-width en max-width.

Dus afwijkende content levert bij gelijke grow en shrink, afwijkende kolommen.

[Voor 7% gewijzigd door R4gnax op 14-10-2018 18:47]

dinsdag 16 oktober 2018 23:10

Acties:

0Henk 'm!

FalconerHG

CSS maakt zelden verschil voor de werking van de website maar dit is een bekend probleem van IE11 en kan vaak makkelijk gefixt worden met wat extra flex parameters als flex-basis, de initiële values lijken namelijk niet altijd goed gezet te worden (in bepaalde situates).

Dit is IMO echter geen reden om flex links te laten liggen, dit is zo gefixt.

Daar zal ik eens induiken dan.

Pagina: 1

Reageer

Cookies op Tweakers

Onderwerpen

Vraag

Alle reacties