How I learned to Stop Worrying and Love the inline-block
0 likes448 views
The document describes how to build an inline-block carousel component in HTML and CSS. It explains how to structure the component with sections and lists, and style the list items as inline-blocks to create a line box effect for the carousel items. JavaScript is then added to enable navigation between items by translating the line box on click of previous/next buttons. The document provides the full code for the component and encourages cleaning up whitespace between elements for proper rendering.
![How will it move?
<ol> width
text-indent:-[<ol> width]px](https://image.slidesharecdn.com/frontendmeetup2013-08-06-140704091835-phpapp02/85/How-I-learned-to-Stop-Worrying-and-Love-the-inline-block-12-320.jpg)
How I learned to Stop Worrying and Love the inline-block
- 1. How I Learned to Stop Worrying and Love the inline-block by Robert Szaloki
- 6. 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>
- 7. 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;
- 11. 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;
- 12. How will it move? <ol> width text-indent:-[<ol> width]px
- 14. Debug mode
- 15. But why? ● the <li> elements are now inline elements, so they create a line box
- 16. 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>
- 17. Height of a line box inline-block <img> Text the tallest in the line or the line-height value vertical-align:top;
- 18. 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
- 19. 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”
- 20. 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
- 21. Uhm, wait! MIND THE GAP
- 22. <ol>n t <li>...</li>n t <li>...</li>n t <li>...</li>n </ol> I see white spaces! MIND THE GAP white spaces
- 23. 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
- 25. Add interaction - Javascript Let’s see the code!
- 26. Add interaction - Javascript ● use event delegation ● use Event.currentTarget and Event.target ● use jQuery, but you don’t need jQuery plugins ● define behaviours