How I learned to Stop Worrying and Love the inline-block
Transcript of How I learned to Stop Worrying and Love the inline-block
![Page 1: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/1.jpg)
How I Learned to Stop Worrying and Love the
inline-block
by Robert Szaloki
![Page 2: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/2.jpg)
Create a carousel
![Page 3: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/3.jpg)
The carousel<section></section>
![Page 4: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/4.jpg)
List of items<section><ol></ol></section>
![Page 5: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/5.jpg)
Navigation<section><ol></ol>
<button>⟨</button><button>⟩</button>
</section>
![Page 6: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/6.jpg)
The code<!DOCTYPE html><html lang="en-us"><head>...</head><body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr>…
![Page 7: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/7.jpg)
The code<!DOCTYPE html><html lang="en-us"><head>...</head><body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr>…
position:relative
position:absolute;top:0;
bottom:0;height:40px;
margin:auto 0;width:40px;
…
margin:0 40px;
![Page 8: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/8.jpg)
Dimensions
expand
40px 40pxexpand
40pxauto
auto
bottom:0;
top:0;
![Page 9: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/9.jpg)
Carousel item<li>
<strong>....</strong><img><button>...</button><p>...</p>
</li>
![Page 10: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/10.jpg)
Carousel item<li>
<strong>....</strong><img><button>...</button><p>...</p>
</li> display:block
display:inline;max-width:100%
float:left;width:100%
display:inline-block;vertical-align:baseline;
text-align:center;white-space:normal;
box-sizing:border-box;width:25%;
padding:0 10px;
![Page 11: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/11.jpg)
Almost...<!DOCTYPE html><html lang="en-us"><head>...</head><body> <section data-component="carousel"> <button data-carousel-nav="prev">⟨</button> <button data-carousel-nav="next">⟩</button> <ol> <li></li> <li></li> <li></li> … </ol> </section> <hr>…
margin:0 40px;white-space:nowrap;
overflow:hidden;transition:all 0.3s ease-in-out;
![Page 12: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/12.jpg)
How will it move?
<ol> width
text-indent:-[<ol> width]px
![Page 13: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/13.jpg)
DEMO!
https://c9.io/rszaloki_1/carousel/workspace/index.html
![Page 14: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/14.jpg)
Debug mode
![Page 15: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/15.jpg)
But why?
● the <li> elements are now inline elements, so they create a line box
![Page 16: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/16.jpg)
Line box? Line of text!Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac gravida sapien. Nullam tristique congue pharetra. Nullam fringilla pulvinar ipsum in adipiscing. Donec porttitor justo tortor. Sed risus ipsum, porta ac dui vitae, faucibus bibendum purus. Integer congue scelerisque tristique.
Line boxes
<div>Lorem ipsum dolor sit amet, <b>consectetur adipiscing elit. Aenean ac</b> gravida sapien. Nullam tristique congue pharetra.<i>Nullam fringilla pulvinar ipsum in adipiscing.</i>Donec porttitor justo tortor. Sed risus ipsum, porta ac dui vitae, faucibus bibendum purus. Integer congue scelerisque tristique.
</div>
![Page 17: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/17.jpg)
Height of a line box
inline-block<img>
Text
the tallest in the line or the line-height value
vertical-align:top;
![Page 18: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/18.jpg)
But why?
● the <li> elements are now inline elements, so they create a line box
● vertical-align:baseline means, the elements in a line box should align with the parents baseline
![Page 19: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/19.jpg)
vertical-align
● baseline: align to the parents baseline● top: top of the line● middle: Aligns the middle of the element with the
middle of lowercase letters in the parent. (???)● <value>● <percentage>
“The baseline of an 'inline-block' is the baseline of its last line box in the normal flow”
![Page 20: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/20.jpg)
But why?
● the <li> elements are now inline elements, so they create a line box
● vertical-align:baseline means, the elements in a line box should align with the parents baseline
● since the <p> is not in the rendering flow (because it’s floating) the current baseline is the baseline of the button’s text.
● only the inline blocks are in the parent, so they will align nicely
![Page 21: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/21.jpg)
Uhm, wait!
MIND THE GAP
![Page 22: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/22.jpg)
<ol>\n \t <li>...</li>\n \t <li>...</li>\n \t <li>...</li>\n</ol>
I see white spaces!
MIND THE GAP white spaces
![Page 23: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/23.jpg)
HTML is data
● you are not programming in HTML● it’s not a poem, it’s a structured, linked,
semantic data● don’t add white spaces, just for formatting● the DOM is your target, not the View
Source
![Page 24: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/24.jpg)
“Uglify”
<ol><li>...</li><li>...</li><li>...</li>
</ol>
<ol><li>...</li><li>...</li><li>...</li>
</ol>
![Page 25: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/25.jpg)
Add interaction - Javascript
Let’s see the code!
![Page 26: How I learned to Stop Worrying and Love the inline-block](https://reader034.fdocuments.net/reader034/viewer/2022042817/55a25eef1a28abd7718b4619/html5/thumbnails/26.jpg)
Add interaction - Javascript
● use event delegation● use Event.currentTarget and Event.target● use jQuery, but you don’t need jQuery
plugins● define behaviours