Thursday, February 4, 2010

Section 5.23. Take myPod for another test drive










5.23. Take myPod for another test drive


Ahhh... much better. Visitors can see all the available pictures at a glance. They can also tell which photos go with each city more easily. Now we need to find a way to link from each thumbnail to the corresponding large image.


Wait a sec, don't you think you're pulling a fast one? The images used to be on top of each other; now they're side by side.



5.23.1. Right; but remember the <img> element is an inline element.


In other words, we didn't "pull anything." Because <img> is an inline element, it doesn't cause linebreaks to be inserted before and after the element is displayed. So, if there are several images together in your HTML, the browser will fit them side by side if the browser window is wide enough.


The reason the larger photos weren't side by side is because the browser didn't have room to display them next to each other. Instead, it displayed them on top of each other. A browser always displays vertical space before and after a block element, and if you look back at the screenshots, you'll see the images are right on top of each other with no space in between. That's another sign <img> is an inline element.













No comments: