Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

Float of iets beter in html5, css

Pagina: 1
Acties:

Onderwerpen

Vraag


  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
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


  • ThaPegasus
  • Registratie: februari 2006
  • Laatst online: 22:25
Probeer er eens DIVs omheen te zetten met 'display: inline-block'. Dat zou je moeten helpen.

  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
oei ?

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

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

  • ThaPegasus
  • Registratie: februari 2006
  • Laatst online: 22:25
#abc verwijst naar een 'id' terwijl je een class gebruikt ik zou dus .id gebruiken, anders werkt het zeker niet :)

  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
<!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>

  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
gelezen https://www.handleidinght...electors/selectors04.html
en ga weer wat proberen.
oplossing heb ik nog niet btw
:)

  • Maaark
  • Registratie: juli 2008
  • Laatst online: 01:07
flexbox

  • Klaasvaak
  • Registratie: maart 2010
  • Laatst online: 21:38
Een heading sluit de huidige paragraag af.
code:
1
2
3
4
<p>
<img />
<h3></h3>
</p>
wordt dus geinterpreteert als
code:
1
2
3
4
5
<p>
<img />
</p>
<h3></h3>
<p></p>

Met een clearfix zou het moeten lukken.
code:
1
2
3
4
5
6
7
8
div { overflow: auto; }
img {  float: left; }

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

  • AW_Bos
  • Registratie: april 2002
  • Laatst online: 02:20

AW_Bos

Waar ga je heen? ☀

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 :o

Waar ga je heen?


  • botwood
  • Registratie: november 2017
  • Laatst online: 18-06 10:54
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/

  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
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>

  • Harrie_
  • Registratie: juli 2003
  • Niet online

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


  • Toxic_Dreams
  • Registratie: september 2016
  • Laatst online: 20:33
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]


  • Demonitzu
  • Registratie: augustus 2012
  • Niet online
Flexbox is een moderne oplossing ondersteund voor vrijwel alle browsers

  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
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/

  • Osxy
  • Registratie: januari 2005
  • Laatst online: 21:24

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."


  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
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 d:)b

  • Toxic_Dreams
  • Registratie: september 2016
  • Laatst online: 20:33
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 d:)b
Dan moet je een media query gebruiken.

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.image {
  float: left;
  width: 50%;
}
.textblock {
  float: left;  
  width: 50%;
}
@media (max-width: 767px) {
  .image {
    width: 100%;
  }
  .textblock {
    width: 100%;
  }
}

  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
@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 :*) 8)7

Moet lukken zo. (y)

  • RM-rf
  • Registratie: september 2000
  • Laatst online: 23-06 13:16

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 :*) 8)7
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


  • gitaarwerk
  • Registratie: augustus 2001
  • Niet online
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.

  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 19:21
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]


  • slagsleutel
  • Registratie: april 2018
  • Laatst online: 09-12-2020
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]


  • Osxy
  • Registratie: januari 2005
  • Laatst online: 21:24

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."


  • gitaarwerk
  • Registratie: augustus 2001
  • Niet online
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.

  • Ed Vertijsment
  • Registratie: juli 2014
  • Laatst online: 22:38
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]


  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 19:21
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]


  • Ed Vertijsment
  • Registratie: juli 2014
  • Laatst online: 22:38
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.

  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 19:21
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]


  • Ed Vertijsment
  • Registratie: juli 2014
  • Laatst online: 22:38
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.

  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 19:21
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.

  • FalconerHG
  • Registratie: december 2011
  • Laatst online: 29-03 09:13
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.

  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 19:21
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.

  • FalconerHG
  • Registratie: december 2011
  • Laatst online: 29-03 09:13
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. :)

  • Ed Vertijsment
  • Registratie: juli 2014
  • Laatst online: 22:38
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.

  • R4gnax
  • Registratie: maart 2009
  • Laatst online: 19:21
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]


  • FalconerHG
  • Registratie: december 2011
  • Laatst online: 29-03 09:13
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


Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Microsoft Xbox Series X LG CX Google Pixel 5a 5G Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True