Positioning in the web explained with GIFs • Hacker News Board

Re: Positioning in the web explained with GIFs

#21

Post by jordanlev » Thu, Jan 22, 2015, 5:58 PM UTC

pumpernick wrote: post #7

It's a digestible introduction, but in the real world you'll find that there's a lumbering iceberg underneath. Display, alignment, justification, relative parents, stacking contexts, flow, negative margins, flexbox, transform... all of these interact in... let's say interesting ways, and not consistently across browsers. I wish CSS positioning could be explained with a few GIFs, but moving outside the playground you…

Here is the best explanation I've ever seen (a bit more fleshed out than the OP): http://www.barelyfitz.com/screencast/html-training/css/posit...

And here's another good one that is specific to layouts: http://learnlayout.com/display.html

Re: Positioning in the web explained with GIFs

#22

Post by hamburglar » Thu, Jan 22, 2015, 6:28 PM UTC

barkingcat wrote: post #16

It's a great visual explanation, but the page is full of typos and spelling mistakes that can easily be caught by default spellcheckers. I can issue a pull request with the corrections marked up if you have a git repo somewhere. Unfortunately, the textual errors are detracting from the great message of the page.

Most of the "Don't" points use extremely unclear wording, too. Example: "DON'T: Avoid text being on top of that clickable stuff as it becomes unclickable..." Uh, don't avoid that? A couple are also "DON'T: " which is confusing. Given the audience this is aimed at, those DON'Ts are probably doing more harm than good.

Re: Positioning in the web explained with GIFs

#23

Post by blueblob » Thu, Jan 22, 2015, 6:33 PM UTC

barkingcat wrote: post #16

It's a great visual explanation, but the page is full of typos and spelling mistakes that can easily be caught by default spellcheckers. I can issue a pull request with the corrections marked up if you have a git repo somewhere. Unfortunately, the textual errors are detracting from the great message of the page.

and some that a spellchecker may not catch, such as "brake" instead of "break"

Re: Positioning in the web explained with GIFs

#24

Post by devindotcom » Thu, Jan 22, 2015, 6:57 PM UTC

I appreciate the effort, but I found these animated illustrations confusing. Which part is what? On which sides are they bound? How are they attached? How do they interact? When are the shapes "scrolling" and when are they animating themselves? I like seeing the concepts in action, but I came away with little idea of what the concepts were other than that they were different - well, little more than I started with. More size, context, and interactions would make this vastly more educational, I think.

Re: Positioning in the web explained with GIFs

#25

Post by sandijs » Thu, Jan 22, 2015, 8:09 PM UTC

devindotcom wrote: post #24

I appreciate the effort, but I found these animated illustrations confusing. Which part is what? On which sides are they bound? How are they attached? How do they interact? When are the shapes "scrolling" and when are they animating themselves? I like seeing the concepts in action, but I came away with little idea of what the concepts were other than that they were different - well, little more than I started with. M…

Good point! It actually would be pretty cool also have a working example. I'll keep that in mind for the next posts.

Re: Positioning in the web explained with GIFs

#26

Post by sandijs » Thu, Jan 22, 2015, 8:10 PM UTC

blueblob wrote: post #23

barkingcat wrote: post #16

It's a great visual explanation, but the page is full of typos and spelling mistakes that can easily be caught by default spellcheckers. I can issue a pull request with the corrections marked up if you have a git repo somewhere. Unfortunately, the textual errors are detracting from the great message of the page.

and some that a spellchecker may not catch, such as "brake" instead of "break"

Damn typos. Thanks!