Better HTML and CSS for the examples

And give the h1 tags a "title" id. The exampleparser.py script uses that as the example title in the index page.
This commit is contained in:
Éric Lemoine
2012-10-20 21:43:34 +02:00
parent b000c052e3
commit 1e0b43dd00
4 changed files with 51 additions and 13 deletions

View File

@@ -12,8 +12,14 @@
width: 100%;
height: 100%;
}
#shortdesc {
display: none;
#text {
position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
}
.overlay {
display: none;
@@ -37,7 +43,6 @@
padding: 5px;
}
/* Popup CSS generated with http://cssarrowplease.com/ */
.arrow_box {
@@ -73,14 +78,22 @@
<title>Overlay example</title>
</head>
<body>
<div id="shortdesc">Demonstrates Overlays.</div>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<div id="map">
<!-- Clickable label for Vienna -->
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
<!-- Popup -->
<div class="overlay arrow_box" id="popup"></div>
<div id="text">
<h1 id="title">Overlay example</h1>
<div id="shortdesc">Demonstrates Overlays.</div>
<div id="docs">
<p>See the
<a href="overlay-and-popup.js" target="_blank">overlay-and-popup.js source</a>
to see how this is done.</p>
</div>
</div>
</div>
<div id="tags">overlay, popup, mapquest, openaerial</div>
<script src="loader.js?id=overlay-and-popup" type="text/javascript"></script>
</body>
</html>