HTML and CSS Reference
In-Depth Information
Listing 4-14.
Movie Info Header
<header>
<img src="path/to/movie/photo.jpg" alt="Movie Title" />
<hgroup>
<h2>My Movie Title</h2>
<p>Released: Monday 10th March 2012</p>
</hgroup>
</header>
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">
<div class=”content”>
<p>Hello world, this is my synopsis</p>
</div>
</section>
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">
<h3>Cast List</h3>
<div class=”content”>
<ul class="list scrolling medium">
<li>
<img src="path/to/actor/photo.jpg" alt="Actor Name" />
<p>Actor Name</p>
</li>
</ul>
</div>
</section>
