HTML and CSS Reference
Listing 4-14. Movie Info Header
<img src="path/to/movie/photo.jpg" alt="Movie Title" />
<h2>My Movie Title</h2>
<p>Released: Monday 10th March 2012</p>
This will create the markup for a header that can be presented differently using
CSS, depending on the orientation of the device. You use the hgroup to group
the release date info, which shouldn't be contained in the h2 element.
Listing 4-15 shows the synopsis block, which will simply contain text. There is a
div with a class of content surrounding the content within a block but excluding
the main header. This is so that the content can scroll, but the header remains in
view at all times.
Listing 4-15. Synopsis Block
<section class="block" id="block-synopsis">
<p>Hello world, this is my synopsis</p>
Listing 4-16 shows the cast block. From the designs, the cast list should be
scrollable within its block; however, the header should remain at the top at all
times. This block also shows that the lists will be standardized to reduce the
amount of bloat in the CSS.
Listing 4-16. Cast Block
<section class="block" id="block-cast">
<ul class="list scrolling medium">
<img src="path/to/actor/photo.jpg" alt="Actor Name" />