HTML and CSS Reference
In-Depth Information
6.
<p><a href="http://www.thechicagotheatre.com/">
thechicagotheatre.com</a> <br> (312) 462-6300</p>
7.
</div><!--
8.
9.
--><iframe class="col-2-3"
src="https://www.google.com/maps/
embed?pb=!1m5!3m3!1m2!1s0x880e2ca55810a493%3A0x4700ddf60fcbfad6!
2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606"
></iframe>
10.
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:
1.
<section class="venue-theatre">
2.
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="http://www.thechicagotheatre.com/">
thechicagotheatre.com</a> <br> (312) 462-6300</p>
7.
</div><!--
8.
9.
--><iframe class="
venue-map
col-2-3" src=
"https://www.google.com/maps/embed?
pb=!1m5!3m3!1m2!1s0x880e2ca55810a493%3A0x4700ddf60fcbfad6!
2schicago+theatre!5e0!3m2!1sen!2sus!4v1388701393606"></iframe>
10.
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