HTML and CSS Reference
In-Depth Information
Figure 8-4.
Final search results view
Styling the Movie View
The movie view is slightly different than the movie list view as it's slightly more
complex. The idea is that you can side-scroll through content using iScroll.
When the content is too long for the size of the viewport, the user can then scroll
down.
In order for the user to understand that there is more content, the width of each
content block has to be smaller than the size of the screen, so the next content
element peaks out a bit from the left- or right-hand side.
We'll also make the poster image animate within the header using CSS. This will
make the view a bit more interesting.
Let's begin by styling the header. Declare a new style just under the
movie-list
style, as shown in the following code.
.movie-header {
position: relative;
overflow: hidden;
height: 20%;
}
This code will position the movie header relative to its parent element and any
absolutely positioned element within it will be contained within the
.movie-
