djeric
Gebruiker
- Lid geworden
- 22 nov 2006
- Berichten
- 955
hallo.
ik wil op deze pagina: "http://members.home.nl/ebosmannetjes/artiesten.html"
onder de titel van de pagina (dus onder de text "apresski artiesten"
letters plaatsen van het alfabet. dus van a tm z...
bij een mouse over moet de letter verkleuren en bij het klikken op de letter verschijnt er onder een menu met alle artiesten namen die beginnen met die letter.
vandaaruit kan ik op een artiest klikken en srcolt hij automatisch naar de artiest die ik net hebt aangeklikt.
maar het lukt mij niet om dit te maken.
voorbeeld:
ik heb alle apresski artiesten erop staan en ben op zoek naar "gebroeders ko" ik kijk in de rij van de alfabet naar de letter "G" en ga er met de muis erop staan. de letter krijgt nu bv een rode kleur.
Dan klik ik op die letter en er verschijnt een lijst met alle namen die beginnen met de letter "G"
en zoek naar de "gebroeders ko" ik klik op die naam en kom direct daarna hier onder op de pagina uit bij de "gebroeders ko" en zo met alle artiesten namen.
wat later kan ik dan verder met de artiesten om daar de info neer te zetten. maar als 1e moet die alfabet menu kunnen werken.
maar hoe maak je een menu in dat alfabet en krijg je de juiste manier van mouse over en kleur in html strict + evt css ???
mijn html voor de pagina "artiesten" is momenteel:
en de css:
ik wil op deze pagina: "http://members.home.nl/ebosmannetjes/artiesten.html"
onder de titel van de pagina (dus onder de text "apresski artiesten"
letters plaatsen van het alfabet. dus van a tm z...
bij een mouse over moet de letter verkleuren en bij het klikken op de letter verschijnt er onder een menu met alle artiesten namen die beginnen met die letter.
vandaaruit kan ik op een artiest klikken en srcolt hij automatisch naar de artiest die ik net hebt aangeklikt.
maar het lukt mij niet om dit te maken.
voorbeeld:
ik heb alle apresski artiesten erop staan en ben op zoek naar "gebroeders ko" ik kijk in de rij van de alfabet naar de letter "G" en ga er met de muis erop staan. de letter krijgt nu bv een rode kleur.
Dan klik ik op die letter en er verschijnt een lijst met alle namen die beginnen met de letter "G"
en zoek naar de "gebroeders ko" ik klik op die naam en kom direct daarna hier onder op de pagina uit bij de "gebroeders ko" en zo met alle artiesten namen.
wat later kan ik dan verder met de artiesten om daar de info neer te zetten. maar als 1e moet die alfabet menu kunnen werken.
maar hoe maak je een menu in dat alfabet en krijg je de juiste manier van mouse over en kleur in html strict + evt css ???
mijn html voor de pagina "artiesten" is momenteel:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content=" skihut,Feesten,Partys,Muziek,Informatie,Apresski,Verhuren,Feestcafé,Diskjockey,Drive in show,Tirol,Oostenrijk,Boekingen,Sneeuw,Schuim party,Ambiance">
<meta name="description" content="Wat is een skihut? Lees op deze site daar meer over.">
<title>Wat is een skihut? Lees op deze site daar meer over.</title>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="welkom">
<img alt="welkom" src="index/welkom.jpg" width="400" height="104">
</div>
<ul class="navigatie">
<li><a title="Index pagina" href="index.html">home</a></li>
<li><a title="Informatie over een skihut." href="informatie.html">Informatie</a></li>
<li><a title="Stuur een email." href="mailto:skihutinfo@ziggo.nl">contact</a></li>
<li><a title="Apresski artiesten." href="artiesten.html">artiesten</a></li>
<li><a title="vacatures in een skihut." href="vacatures.html">vacatures</a></li>
<li><a title="Skihutten in Nederland." href="skihut.html">skihut nederland</a></li>
<li><a title="Apresski dj's." href="dj.html">dj's</a></li>
<li><a title="Sorry pagina niet actief." href="forum.html">---</a></li>
<li><a title="Skihutten in het buitenland" href="buitenland.html">skihut buitenland</a></li>
<li><a title="Sorry pagina niet actief." href="cd.html">---</a></li>
</ul>
<ul class="navigatie rechts">
<li><a title="Sorry pagina niet actief." href="downloads.html">---</a></li>
<li><a title="Apresski evenementen." href="evenementen.html">evenementen</a></li>
<li><a title="Sorry pagina niet actief." href="ontoer.html">---</a></li>
<li><a title="Apresski drankjes" href="drankjes.html">apresski drankjes</a></li>
<li><a title="Sorry pagina niet actief." href="sponsers.html">---</a></li>
<li><a title="Sorry pagina niet actief." href="drivein.html">---</a></li>
<li><a title="Beluister hier naar de apresski radio" href="javascript:void(0)" onclick="open('http://www.radio538.nl/web/show/id=675518','miniwin','width=320,height=280')">muziek speler</a></li>
<li><a title="schrijf in mijn gastenboek" href="http://apresskihutinfo.mygb.nl">gastenboek</a></li>
<li><a title="Sorry pagina niet actief." href="links.html">---</a></li>
<li><a title="Sorry pagina niet actief." href="vragen.html">---</a></li>
</ul>
<h1 id="home">Apresski artiesten</h1>
</div>
<a id="menu"></a>
<div id= "artiesten">
<h2>
<a href="#a">A</a>
<a href="#b">B</a>
<a href="#c">C</a>
<a href="#d">D</a>
<a href="#e">E</a>
<a href="#f">F</a>
<a href="#g">G</a>
<a href="#h">H</a>
<a href="#i">I</a>
<a href="#j">J</a>
<a href="#k">K</a>
<a href="#l">L</a>
<a href="#m">M</a>
<a href="#n">N</a>
<a href="#o">O</a>
<a href="#p">P</a>
<a href="#q">Q</a>
<a href="#r">R</a>
<a href="#s">S</a>
<a href="#t">T</a>
<a href="#u">U</a>
<a href="#v">V</a>
<a href="#w">W</a>
<a href="#x">X</a>
<a href="#y">Y</a>
<a href="#z">Z</a>
</h2>
</div>
<p id="fotos" style="text-align: center; clear: both;">
<img id="links" src="div/1.jpg" alt="Foto 1" width="300" height="225">
<img id="rechts" src="div/2.jpg" alt="Foto 2" width="300" height="225">
<img src="div/3.jpg" alt="Foto 3" width="300" height="225">
</p>
<h2 id="updatecenter">last update: 27-6-2010</h2>
</body>
</html>en de css:
PHP:
body {
background : url(index/achtergrond.jpg);
}
ul.navigatie {
font-family : verdana, Arial, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
width : 12em;
border-right : 1px solid #666;
padding : 0;
margin : 0 10px 1em 0;
background-color : #9cc;
color : #333;
list-style : none;
float : left;
}
ul.rechts {
float : right;
margin : 0 0 1em 10px;
}
ul.navigatie li {
margin : 0;
border-top : 1px solid #003;
}
ul.navigatie li a {
display : block;
padding : 2px 2px 2px 4px;
border-left : 10px solid #990000;
border-right : 1px solid #69c;
border-bottom : 1px solid #369;
background-color : #000099;
color : #c0c0c0;
text-decoration : none;
width : 100%;
}
ul.rechts {
margin : 0 0 1em 10px;
}
html > body ul.navigatie li a {
width : auto;
}
ul.navigatie li a:hover {
border-left : 10px solid #006600;
border-right : 1px solid #69c;
border-bottom : 1px solid #369;
background-color : #ffff00;
color : #ff1493;
}
div#welkom {
text-align : center;
}
#inleiding {
color : #330000;
font-weight : bold;
font-size : 1.6em;
}
h1#home {
color : maroon;
font-size : 1.5em;
text-align : center;
}
p#fotos {
clear : both;
text-align : center;
}
img#links {
float : left;
}
img#rechts {
float : right;
}
div#tip {
color : blue;
clear : both;
float : left;
width : 45%;
}
h2#homeupdate {
color : #003366;
margin : 0;
float : left;
}
h2#updatecenter {
color : #003366;
margin : 0;
text-align : center;
}
div#teller {
float : right;
}
p#stealth {
margin : 0;
}
table {
text-align : center;
border : 5px outset black;
background : silver;
margin : 0 auto;
}
tr#kop {
height : 30px;
font-size : 1.1em;
font-weight : bold;
color : #c0c0c0;
background : #c30;
}
tr#kop td {
width : 200px;
}
tr {
height : 40px;
color : #CCff00;
background : #000;
}
#inhoud {
margin : 0 12.5em;
}
h1#kop1 {
color : maroon;
font-size : 1.5em;
text-align : center;
}
#inf1 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf2 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf3 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
h1#kop2 {
color : maroon;
font-size : 1.5em;
text-align : center;
}
#inf4 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf5 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
#inf6 {
color : #330000;
font-weight : bold;
font-size : 1.3em;
}
h1#nederland {
color : maroon;
font-size : 1.5em;
text-align : center;
}
h1#drankjes {
color : maroon;
font-size : 1.5em;
text-align : center;
}
#artiesten {
margin : 0 12.5em;
}
)
