Overzicht ministeries

Ministerie van Algemene Zaken

Binnenhof 19, Den Haag

Ministerie van Binnenlandse Zaken en Koninkrijksrelaties

Turfmarkt 147 , Den Haag

Ministerie van Buitenlandse Zaken

Bezuidenhoutseweg 67, Den Haag

...

HTML

<ul class="ministeries">
    <li><a class="minaz" href="#minaz">Ministerie van Algemene Zaken</a></li>
    <li><a class="minbzk" href="#minbzk">Ministerie van Binnenlandse Zaken en Koninkrijksrelaties</a></li>
    <li><a class="minbz" href="#minbz">Ministerie van Buitenlandse Zaken</a></li>
    <li><a class="mindef" href="#mindef">Ministerie van Defensie</a></li>
    <li><a class="minez" href="#minez">Ministerie van Economische Zaken</a></li>
    <li><a class="minfin" href="#minfin">Ministerie van Financi&euml;n</a></li>
    <li><a class="minienm" href="#minienm">Ministerie van Infrastructuur en Milieu</a></li>
    <li><a class="minocw" href="#minocw">Ministerie van Onderwijs, Cultuur en Wetenschap</a></li>
    <li><a class="minszw" href="#minszw">Ministerie van Sociale Zaken en Werkgelegenheid</a></li>
    <li><a class="minvenj" href="#minvenj">Ministerie van Veiligheid en Justitie</a></li>
    <li><a class="minvws" href="#minvws">Ministerie van Volksgezondheid, Welzijn en Sport</a></li>
</ul>

<div id="minaz">
    <h2>Ministerie van Algemene Zaken</h2>
    <p>
        Binnenhof 19, Den Haag
    </p>
</div>

<div id="minbzk">
    <h2>Ministerie van Binnenlandse Zaken en Koninkrijksrelaties</h2>
    <p>
        Turfmarkt 147 , Den Haag
    </p>
</div>

<div id="minbz">
    <h2>Ministerie van Buitenlandse Zaken</h2>
    <p>
        Bezuidenhoutseweg 67, Den Haag
    </p>
</div>

<div>
    ...
</div>

Of bekijk html/overzicht-ministeries.html

CSS

.ministeries
{
	background: url(img/denhaag.png);
	height: 500px;
	width: 650px;
	position: relative;
}

.ministeries a
{
	position: absolute;
	width: 0;
	height: 0;
	background: red;
	overflow: hidden;
	padding: 10px 10px 0 0;
	font-size: .8em;
}

.ministeries a:focus, .ministeries a:hover
{
	width: 200px;
	padding: 10px 25px;
	height: auto;
	background: #ddd;
	border: 1px solid #999;
	margin: -1px;
	z-index: 99;
}

.minaz { top: 150px; left: 400px; }
.minbzk { top: 50px; left: 150px; }
.minbz { top: 100px; left: 350px; }
.mindef	{ top: 200px; left: 550px; }
.minez { top: 250px; left: 300px; }
.minfin { top: 300px; left: 50px; }
.minienm { top: 350px; left: 450px; }
.minocw { top: 400px; left: 100px; }
.minszw { top: 450px; left: 250px; }
.minvenj { top: 125px; left: 200px; }
.minvws { top: 225px; left: 500px; }

Of bekijk css/overzicht-ministeries.css

Terug