HTML and CSS Reference
In-Depth Information
6. <p><a href=""></a> <br> (312) 462-6300</p>
7. </div><!--
9. --><iframe class="col-2-3" src="
2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606" ></iframe>
11. </section>
7. Lastly, we'll want to make sure that both <iframe> elements that reference
Google Maps share the same height. To do this, we'll create a new class, venue-
map , and apply it to each of the <iframe> elements alongside the existing
col-2-3 class attribute value.
The HTML for the <section> element with the class attribute value of
venue-theatre now looks like this:
Click here to view code image
1. <section class="venue-theatre">
3. <div class="col-1-3">
4. <h2>Chicago Theatre</h2>
5. <p>175 N State St <br> Chicago, IL 60601</p>
6. <p><a href=""></a> <br> (312) 462-6300</p>
7. </div><!--
9. --><iframe class=" venue-map col-2-3" src=
11. </section>
Once the venue-map class is applied to each <iframe> element, let's create
the venue-map class rule set within our main.css file. It includes the height
property with a value of 264 pixels.
The venue-map class rule set looks like this:
1. .venue-map {
2. height: 264px;
3. }
We now have a Venue page (see Figure 9.14 ) , complete with maps for the different loca-
tions of our conference.
Search WWH ::

Custom Search