HTML5 Video Gallery with jQuery, Defining the CSS rules

Now that we’re ready to create our layout with the HTML and CSS, I want to bring up a sketch. I always recommend doing a sketch of any interactive project. This gives us a chance to sort of figure out what the layouts are going to be and sort of figure out some of the me a sure ments.

Now in the introduction video, we saw that our outermost container for this video gallery is going to be liquid or fluid. Meaning it can stretch to whatever width is available on the computer screen or any mobile device.

Now even though the outermost container is going to be liquid, I do want to have some measurements on the inside of the container. So on the very top and bottom of the container, I want to keep a padding of 25pixels and on the left-hand side I want to keep a padding of a 115 pixels.

This is going to make sure that none of the thumbnails are going to overlap the left-hand filmstrip graphic that we created inside of Photoshop, so as that graphic tiles vertically on the left- hand side, we don’t want the thumbnails to.


Please enter your comment!
Please enter your name here