letters met menu eronder maken

defietser · 18 jul 2010

Dat is toch niet zo moeilijk als je de bron gevonden hebt zie je toch in de head de naam van het css bestand hier is dat style.css.
Dus de plaats van de stylesheet is hier

Code:

<link rel="stylesheet" type="text/css" href="style.css">

Hier zie je dus dat de stylesheet in de root(hoofdmap) staat "href=style.css"
Om die nu te zien hoef je gewoon het adres in te geven:
http://www.defietser.net/djeric/style.css
Dan copy en paste
Mvg
Defietser

djeric · 18 jul 2010

defietser zei:
Om die nu te zien hoef je gewoon het adres in te geven:

ok nooit geweten dat het zo simpel was.

defietser zei:
Dan copy en paste
Mvg
Defietser

gedaan en geupload

heb alle pagina's gevalideert met de css validator.

de css op alle pagina's zijn allemaal goed:thumb:

met de html validator zijn alle pagina's goed, behalve deze pagina:

http://members.home.nl/ebosmannetjes/artiesten.html

de pagina waar we nu mee bezig zijn.

ik snap heel die fouten niet.
ze geven alles in t rood aan, en er staat een hoop engelse text eronder waar ik 20% van snap.

ik weet niet over welke fouten hun het hebben maar het zijn er een paar in die code van dat menu van die alfabet letters.

wat gaat er nu fout?????

defietser · 19 jul 2010

Ik heb de pagina een nieuw doctype gegeven

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

En de fouten er uitgehaald. Deze link eens door de W3C validator halen http://www.defietser.net/djeric/
Valideer via een URI

daarna alles terug copieeren van mijn site voor de nieuwe code te verkrijgen.
Mvg
Defietser

djeric · 19 jul 2010

defietser zei:
daarna alles terug copieeren van mijn site voor de nieuwe code te verkrijgen.
Mvg
Defietser

als ik dit doe, dan ga ik juist fouten krijgen.
plaatjes werken niet meer. en ik zie dat je dan een andere extencie gebruikt als waar ik dan de plaatjes hebt staan. klopt ook wel. want je hebt de plaatjes er niet bij gezet en zal alles op jou site met een rode kruis moeten te zien zijn.

neem ik nu de hele bron code over, dan neem ik ook de extencies over zoals jij ze erin hebt staan.
ik overschrijf mij oude bestand met deze nieuwe bestand en upload alles.

dan gaat t mis, en vind je toch weer fouten.

maar ik ben al slim geweest om die extencies aan ta passen zodat alles wel goed werkt.

heb nogmaals me oude code vergelijkt met jou nieuwe code (ik bewaar altijd een kopie van alles) en heb de fouten eruit kunnen halen die niet overeen kwamen.

volgens de html en de css validators zijn alle pagina's (inclusief artiesten.html) foutloos:d:thumb:

misschien in t vervolg makelijker om de html en de css hier te plaatsen ipv via jou site.

voor mij maakt t veel makelijker en kan ik beter overzicht krijgen wat er fout gaat, of veranderd is.

Maar goed me stappen tot zover zijn nu klaar.

ik neem aan dat ik verder alles af kan maken tot aan de z

nog geen idee of me dat goed lukt, maar de resultaat van nu, heb ik als reserve kopie gehouden.

djeric · 26 jul 2010

djeric zei:
Maar goed me stappen tot zover zijn nu klaar.

ik neem aan dat ik verder alles af kan maken tot aan de z

nog geen idee of me dat goed lukt, maar de resultaat van nu, heb ik als reserve kopie gehouden.

Nou ben toch bezig geweest een paar dagen, maar het lukt niet zoals het moet zijn.

Ik krijg alle letters wel naarst elkaar, maar dan gaat het goed mis in de browser. De letters verplaatsen zich automatisch over het hoofdmenu heen.

Bij een andere scherm resolutie staan de letters op een andere plaats, en niet meer netjes tussen de bestaande hoofdmenu in.

hoe krijg ik het voorelkaar om netjes, abcdefghijklmnopqrstuvwxyz op een rij te zetten tussen de 2 hoofdmenu's in ?
zonder dat bij een resolutie verandering de letters ergens over mijn hoofdmenu beland.

ik ben nu weer standaard begonnen met de volgende html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
    <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript"> 
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</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 id="Letters">
<div id="apDiv1" onmouseover="MM_showHideLayers('apDivA','','show')" onmouseout="MM_showHideLayers('apDivA','','hide')"><a>A</a></div>
<div id="apDiv2" onmouseover="MM_showHideLayers('apDivB','','show')" onmouseout="MM_showHideLayers('apDivB','','hide')"><a>B</a></div>
<div id="apDiv3" onmouseover="MM_showHideLayers('apDivC','','show')" onmouseout="MM_showHideLayers('apDivC','','hide')"><a>C</a></div>
<div id="apDiv4" onmouseover="MM_showHideLayers('apDivD','','show')" onmouseout="MM_showHideLayers('apDivD','','hide')"><a>D</a></div>
<div id="apDiv5" onmouseover="MM_showHideLayers('apDivE','','show')" onmouseout="MM_showHideLayers('apDivE','','hide')"><a>E</a></div>
 
<div id="apDivA" onclick="MM_showHideLayers('apDivA','','hide')" onmouseover="MM_showHideLayers('apDivA','','show')" onmouseout="MM_showHideLayers('apDivA','','hide')">
 A<br>
    <a href="alwin.html" target="_blank">Alwin</a><br>
  
</div>
 
<div id="apDivB" onclick="MM_showHideLayers('apDivB','','hide')" onmouseover="MM_showHideLayers('apDivB','','show')" onmouseout="MM_showHideLayers('apDivB','','hide')">B<br>
 
<a href="bzb.html" target="_blank">Band zonder Banaan</a></div>
 
 
<div id="apDivC" onclick="MM_showHideLayers('apDivC','','hide')" onmouseover="MM_showHideLayers('apDivC','','show')" onmouseout="MM_showHideLayers('apDivC','','hide')">C<br>
 
Nog geen artisten op deze letter<br>
 
</div>
 
 
<div id="apDivD" onclick="MM_showHideLayers('apDivD','','hide')" onmouseover="MM_showHideLayers('apDivD','','show')" onmouseout="MM_showHideLayers('apDivD','','hide')">D<br>
 
<a href="djpatrick.html" target="_blank">Dj Patrick</a><br>
<a href="dedeurzakkers.html" target="_blank">De Deurzakkers</a>
</div>
 
<div id="apDivE" onclick="MM_showHideLayers('apDivE','','hide')" onmouseover="MM_showHideLayers('apDivE','','show')" onmouseout="MM_showHideLayers('apDivE','','hide')">E<br>
 
Nog geen artisten op deze letter<br>
</div>
 
</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">laatste update: 18-7-2010</h2>
        
</body>
</html>

en de volgende css:

Code:

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; 

}
/* alles met betrekkng tot apresski Artiesten alfabet*/

#apDiv1 {
	position:relative;
	width:28px;
	height:40px;
	z-index:1;
	left: 0px;
	top: 0px;
	font-size: 36px;
	font-weight: bolder;
	text-align: center;
	visibility: visible;
}

#apDiv2 {
	position:absolute;
	width:28px;
	height:40px;
	z-index:2;
	left: 32px;
	top: 0px;
	font-size: 36px;
	font-weight: bolder;
	text-align: center;
}
#apDiv3 {
	position:absolute;
	width:28px;
	height:40px;
	z-index:3;
	left: 64px;
	top: 0px;
	font-size: 36px;
	font-weight: bolder;
	text-align: center;
}
#apDiv4 {
	position:absolute;
	width:28px;
	height:40px;
	z-index:4;
	left: 96px;
	top: 0px;
	font-size: 36px;
	font-weight: bolder;
	text-align: center;
}
#apDiv5 {
	position:absolute;
	width:28px;
	height:40px;
	z-index:5;
	left: 128px;
	top: 0px;
	font-size: 36px;
	font-weight: bolder;
	text-align: center;
}

#Letters {
	height: 40px;
	position: relative;
	width: 600px;
	margin-left: 200px;
}

/* namen van artiesten*/
#apDivA {
	position:absolute;
	width:auto;
	height:auto;
	z-index:100;
	visibility: hidden;
	left: 0px;
	top: 38px;
	border: 1px solid #009;
}
#apDivB {
	position:absolute;
	width:auto;
	height:auto;
	z-index:102;
	visibility: hidden;
	left: 32px;
	top: 38px;
	border: 1px solid #009;
}
#apDivC {
	position:absolute;
	width:auto;
	height:auto;
	z-index:103;
	visibility: hidden;
	left: 64px;
	top: 38px;
	border: 1px solid #009;
}
#apDivD {
	position:absolute;
	width:auto;
	height:auto;
	z-index:104;
	visibility: hidden;
	left: 96px;
	top: 38px;
	border: 1px solid #009;
}
#apDivE{
	position:absolute;
	width:auto;
	height:auto;
	z-index:105;
	visibility: hidden;
	left: 128px;
	top: 38px;
	border: 1px solid #009;
}
#Letters  a:link {
	color: #000;
	text-decoration: none;
}
#Letters a:hover {
	color: #F00;
}
#Letters a:visited {
	color: #000;
}
#Letters a:active {
	color: #000;
}

p.s. reacties met html/css voorbeeld. graag hierin weergeven, is makelijker, en overzichtelijker dan via een website.

defietser · 27 jul 2010

Laatste voorbeeld.
Heb er al de letters in geplaatst van A tot Z.
Bij de artiesten de letter Z geplaatst.
Je kan alles eens bekijken op http://www.defietser.net/djeric/

Hieronder de html

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
    <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="welkom">
<img alt="welkom" src="images/welkom.jpg" width="400" height="104">
 
</div>
    <ul class="navigatie">
  <li><a title="Index pagina" href="index2.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>
        
        
<!-- Hier begint het Alfabeth-->
   
<div id="Letters"><!-- Begin div letters -->
<div id="apDiv1" onmouseover="MM_showHideLayers('apDivA','','show')" onmouseout="MM_showHideLayers('apDivA','','hide')"><a>A</a></div>
<div id="apDiv2" onmouseover="MM_showHideLayers('apDivB','','show')" onmouseout="MM_showHideLayers('apDivB','','hide')"><a>B</a></div>
<div id="apDiv3" onmouseover="MM_showHideLayers('apDivC','','show')" onmouseout="MM_showHideLayers('apDivC','','hide')"><a>C</a></div>
<div id="apDiv4" onmouseover="MM_showHideLayers('apDivD','','show')" onmouseout="MM_showHideLayers('apDivD','','hide')"><a>D</a></div>
<div id="apDiv5" onmouseover="MM_showHideLayers('apDivE','','show')" onmouseout="MM_showHideLayers('apDivE','','hide')"><a>E</a></div>
<div id="apDiv6" onmouseover="MM_showHideLayers('apDivF','','show')" onmouseout="MM_showHideLayers('apDivF','','hide')"><a>F</a></div>
<div id="apDiv7" onmouseover="MM_showHideLayers('apDivG','','show')" onmouseout="MM_showHideLayers('apDivG','','hide')"><a>G</a></div>
<div id="apDiv8" onmouseover="MM_showHideLayers('apDivH','','show')" onmouseout="MM_showHideLayers('apDivH','','hide')"><a>H</a></div>
<div id="apDiv9" onmouseover="MM_showHideLayers('apDivI','','show')" onmouseout="MM_showHideLayers('apDivI','','hide')"><a>I</a></div>
<div id="apDiv10" onmouseover="MM_showHideLayers('apDivJ','','show')" onmouseout="MM_showHideLayers('apDivJ','','hide')"><a>J</a></div>
<div id="apDiv11" onmouseover="MM_showHideLayers('apDivK','','show')" onmouseout="MM_showHideLayers('apDivK','','hide')"><a>K</a></div>
<div id="apDiv12" onmouseover="MM_showHideLayers('apDivL','','show')" onmouseout="MM_showHideLayers('apDivL','','hide')"><a>L</a></div>
<div id="apDiv13" onmouseover="MM_showHideLayers('apDivM','','show')" onmouseout="MM_showHideLayers('apDivM','','hide')"><a>M</a></div>
<div id="apDiv14" onmouseover="MM_showHideLayers('apDivN','','show')" onmouseout="MM_showHideLayers('apDivN','','hide')"><a>N</a></div>
<div id="apDiv15" onmouseover="MM_showHideLayers('apDivO','','show')" onmouseout="MM_showHideLayers('apDivO','','hide')"><a>O</a></div>
<div id="apDiv16" onmouseover="MM_showHideLayers('apDivP','','show')" onmouseout="MM_showHideLayers('apDivP','','hide')"><a>P</a></div>
<div id="apDiv17" onmouseover="MM_showHideLayers('apDivQ','','show')" onmouseout="MM_showHideLayers('apDivQ','','hide')"><a>Q</a></div>
<div id="apDiv18" onmouseover="MM_showHideLayers('apDivR','','show')" onmouseout="MM_showHideLayers('apDivR','','hide')"><a>R</a></div>
<div id="apDiv19" onmouseover="MM_showHideLayers('apDivS','','show')" onmouseout="MM_showHideLayers('apDivS','','hide')"><a>S</a></div>
<div id="apDiv20" onmouseover="MM_showHideLayers('apDivT','','show')" onmouseout="MM_showHideLayers('apDivT','','hide')"><a>T</a></div>
<div id="apDiv21" onmouseover="MM_showHideLayers('apDivU','','show')" onmouseout="MM_showHideLayers('apDivU','','hide')"><a>U</a></div>
<div id="apDiv22" onmouseover="MM_showHideLayers('apDivV','','show')" onmouseout="MM_showHideLayers('apDivV','','hide')"><a>V</a></div>
<div id="apDiv23" onmouseover="MM_showHideLayers('apDivW','','show')" onmouseout="MM_showHideLayers('apDivW','','hide')"><a>W</a></div>
<div id="apDiv24" onmouseover="MM_showHideLayers('apDivX','','show')" onmouseout="MM_showHideLayers('apDivX','','hide')"><a>X</a></div>
<div id="apDiv25" onmouseover="MM_showHideLayers('apDivY','','show')" onmouseout="MM_showHideLayers('apDivY','','hide')"><a>Y</a></div>
<div id="apDiv26" onmouseover="MM_showHideLayers('apDivZ','','show')" onmouseout="MM_showHideLayers('apDivZ','','hide')"><a>Z</a></div>

<!-- Hier eindigt het Alfabeth -->






<!-- Hieronder staan de artiesten-->
<div id="apDivA" onclick="MM_showHideLayers('apDivA','','hide')" onmouseover="MM_showHideLayers('apDivA','','show')" onmouseout="MM_showHideLayers('apDivA','','hide')"> A<br>
<a href="alwin.html" target="_blank">Alwin</a><br></div>

<div id="apDivB" onclick="MM_showHideLayers('apDivB','','hide')" onmouseover="MM_showHideLayers('apDivB','','show')" onmouseout="MM_showHideLayers('apDivB','','hide')">B<br>
<a href="bzb.html" target="_blank">Band zonder Banaan</a></div>


<div id="apDivC" onclick="MM_showHideLayers('apDivC','','hide')" onmouseover="MM_showHideLayers('apDivC','','show')" onmouseout="MM_showHideLayers('apDivC','','hide')">C<br>
Nog geen artisten op deze letter<br></div>

<div id="apDivD" onclick="MM_showHideLayers('apDivD','','hide')" onmouseover="MM_showHideLayers('apDivD','','show')" onmouseout="MM_showHideLayers('apDivD','','hide')">D<br>
<a href="djpatrick.html" target="_blank">Dj Patrick</a><br>
<a href="dedeurzakkers.html" target="_blank">De Deurzakkers</a>
</div>

<div id="apDivE" onclick="MM_showHideLayers('apDivE','','hide')" onmouseover="MM_showHideLayers('apDivE','','show')" onmouseout="MM_showHideLayers('apDivE','','hide')">E<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivF" onclick="MM_showHideLayers('apDivF','','hide')" onmouseover="MM_showHideLayers('apDivF','','show')" onmouseout="MM_showHideLayers('apDivF','','hide')">F<br>
Nog geen artisten op deze letter<br>
</div>
<!-- Hier tussen komen de andere artietsen -->

<div id="apDivZ" onclick="MM_showHideLayers('apDivZ','','hide')" onmouseover="MM_showHideLayers('apDivZ','','show')" onmouseout="MM_showHideLayers('apDivZ','','hide')">Z<br>
Nog geen artisten op deze letter<br>
</div>
<!-- Einde artiesten -->

</div><!-- Einde div letters -->
      
        
        <p id="fotos" style="text-align: center; clear: both;"><img id="links" src="images/1.jpg" alt="Foto 1" width="300" height="225"><img id="rechts" src="images/2.jpg" alt="Foto 2" width="300" height="225">
    <img src="images/3.jpg" alt="Foto 3" width="300" height="225">
</p>
        
        
        <h2 id="updatecenter">last update: 27-6-2010</h2>
        
</body>
</html>

En hier de css

Code:

body { 

background : url(images/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;
	background-color : #9cc;
	color : #333;
	list-style : none;
	float : left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 1em;
	margin-left: 0;
} 

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 : black; 

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; 

background : #00c; 

color : #ff0; 

} 

#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; 

} 
/* alles met betrekking tot apresski Artiesten alfabet*/

#apDiv1 {
	position:relative;
	width:20px;
	height:30px;
	z-index:1;
	left: 0px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
	visibility: visible;
}

#apDiv2 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:2;
	left: 22px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv3 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:3;
	left: 44px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv4 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:4;
	left:66px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv5 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:88px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv6 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 110px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv7 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:132px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv8 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 154px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv9 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 176px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv10{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:198px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv11 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 220px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv12{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 244px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv13 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 266px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv14 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 288px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv15 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:310px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv16 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 332px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv17{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 354px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv18 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 376px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv19 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 398px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv20 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 420px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv21 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 444px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv22 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 466px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv23{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 488px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv24{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 510px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv25 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 532px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv26 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 554px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}


#Letters {
	height: auto;
	position: relative;
	width: 575px;
	margin-left: auto;
	margin-right: auto;
}

/* namen van artiesten*/
#apDivA {
	position:absolute;
	width:auto;
	height:auto;
	z-index:100;
	visibility: hidden;
	left: 0px;
	top: 28px;
	border: 1px solid #009;
}
#apDivB {
	position:absolute;
	width:auto;
	height:auto;
	z-index:102;
	visibility: hidden;
	left: 22px;
	top: 28px;
	border: 1px solid #009;
}
#apDivC {
	position:absolute;
	width:auto;
	height:auto;
	z-index:103;
	visibility: hidden;
	left: 44px;
	top: 28px;
	border: 1px solid #009;
}
#apDivD {
	position:absolute;
	width:auto;
	height:auto;
	z-index:104;
	visibility: hidden;
	left: 66px;
	top: 28px;
	border: 1px solid #009;
}
#apDivE{
	position:absolute;
	width:auto;
	height:auto;
	z-index:105;
	visibility: hidden;
	left: 88px;
	top: 28px;
	border: 1px solid #009;
}
#apDivF{
	position:absolute;
	width:auto;
	height:auto;
	z-index:105;
	visibility: hidden;
	left: 110px;
	top: 28px;
	border: 1px solid #009;
}
/* Hiertussen komen de andere artiesten */

#apDivZ{
	position:absolute;
	width:200px;
	height:auto;
	z-index:105;
	visibility: hidden;
	left: 554px;
	top: 28px;
	border: 1px solid #009;
}



#Letters  a:link {
	color: #000;
	text-decoration: none;
}
#Letters a:hover {
	color: #F00;
}
#Letters a:visited {
	color: #000;
}
#Letters a:active {
	color: #000;
}

Als het je nu niet lukt weet ik het ook niet meer.
In feite wel
Mvg
Defietser

djeric · 27 jul 2010

defietser zei:
Als het je nu niet lukt weet ik het ook niet meer.
In feite wel
Mvg
Defietser

hoi defietser.

zet je scherm resolutie eens op 800x600 en bekijk de volgende link:

http://www.defietser.net/djeric/

in internet explorer 8 (32bits)

dan zie je exact wat ik ook zie.

de letters van het alfabet staan nu dwars door de linker en rechter blauwe menu heen. dit mag niet.

bekijk dan eens bv naar de link met "informatie" of "evenementen" je ziet dat deze netjes met een kleinere scherm resolutie toch binnen de 2 hoofd menu's blijven (gecentreerd)

zelfs al maak je het scherm zo klein dan schuift nog alles netjes naar onderen. maar t blijft netjes uit zien.

alleen de opmaak van die alfabet letters ziet er echt zeer goed en nejes uit. en is precies wa ik wil.

heb ook meteen boven staande code + html overgenomen. maar hellaas de weergave met een anderescherm resolutie gaat niet goed.
is er dan een stuje html code dat er dan ergen ontbreekt?
of er aan moet toevoegen?
waar zit dan de fout?

defietser · 28 jul 2010

Ik heb dit voorbeeld gemaakt aan de hand van Uw html en css.
Heb alles op mijn pc geplaatst door het feit dat je uw site vloeiend hebt gemaakt neemt die het gehele scherm in beslag dus heb ik dat tussen de 2 menus geplaatst en heb ik nog ruimte over.

De div letters is relative geplaatst en daarin zijn de apdivs absoluut gepositioneerd de een naast de ander. Moeten absoluut gepositioneerd zijn om te kunnen werken met onmouseover="MM_showHideLayers

De div letters word door deze css in de midden van ieder scherm gezet:

Code:

#Letters {
	height: auto;
	position: relative;
	width: 575px;
	margin-left: auto;
	margin-right: auto;
}

Je zal de afmetingen van apdivs in de css die betrekking heeft op dit alfabeth moeten verkleinen zodat het gehele alfabeth past tussen uw 2 menus, maar op een groter scherm zullen die niet mee groeien.
Ik heb ze gisteren van font-size:34px; naar font-size:18px; gebracht omdat ook bij mij het gehele alfabeth er niet tussen kon en zal je die nog wat moeten verkleinen zodat op uw scherm er tussen staan.
Alsook alle andere waarden aanpassen zodat alles terug mooi aaneen sluit.
Ik zelf ben er enkele uurtje zoet mee geweest zodus ik wens je veel sterkte toe

djeric · 28 jul 2010

defietser zei:
Je zal de afmetingen van apdivs in de css die betrekking heeft op dit alfabeth moeten verkleinen zodat het gehele alfabeth past tussen uw 2 menus, maar op een groter scherm zullen die niet mee groeien.
Ik heb ze gisteren van font-size:34px; naar font-size:18px; gebracht omdat ook bij mij het gehele alfabeth er niet tussen kon en zal je die nog wat moeten verkleinen zodat op uw scherm er tussen staan.
Alsook alle andere waarden aanpassen zodat alles terug mooi aaneen sluit.
Ik zelf ben er enkele uurtje zoet mee geweest zodus ik wens je veel sterkte toe

dus met andere woorden:

Ik moet er voor zorgen dat de letters bij een kleine scherm/reolutie van bv 800x600 de alfabet letters netjes tussen de 2 menu's komen te staan? en dat dan vervolgens andere gebruikers met een grote scherm en hoge scherm resolutie bv 1280x800 de letters in het mini moeten zien?

vind het beetje raar dat nergens iets bestaat dan van een code dat hij zowel de linker kant van het menu als de rechterkant niet overlapt.

Op deze manier maak ik het best lastig om door te gaan, want zal nooit pfect uit komen te zen voor iedere gebruiker.

ik zat iets te twijfelen over de css.

namelijk:

#inhoud {

margin : 0 12.5em;

}

hiermee stel je dan toch iets van een plaats in waar alles komt te staan?

of iets met bv:

text-align : center;

aan toe te voegen ergens?

of moet alles in de html van die letters tssen <center> en </center> komen te staan???

hoewel deze laaste optie dus niet toepasbaar is in html strict.

djeric · 30 jul 2010

of is het niet mogelijk??????

zonder reactie weet ik ook niets

vind het jammer als sommige bezoekers de letters doorelkaar zien in het menu. (bij 800x600 scherm resolutie)

is ook niet echt de bedoeling.

kun je wel zeggen maak ze kleiner dan gebeurt dat niet.

snap ik wel, maar dan hebben mensen met hogere scherm resolutie en grotere schermen meer problemen met het bekijken van deze letters, omdat ze te klein zijn.

dus hoe los ik t nu op dat t voor beide gebruiks vriendelijk blijft???????

defietser · 31 jul 2010

Een website maken met een vaste breedte bv 900 px of 1000 px dan krijgt U scrollbars maar ik niet omdat mijn scherm breder is. U moet een keuze maken ik niet.
Je vroeg om een oplossing voor die letters ik geef U die toch. En nu is het weer iets anders zet die letters dan verticaal ik weet het ook niet meer.
Mvg
Defietser

djeric · 1 aug 2010

defietser zei:
U moet een keuze maken ik niet.
Je vroeg om een oplossing voor die letters ik geef U die toch. En nu is het weer iets anders zet die letters dan verticaal ik weet het ook niet meer.
Mvg
Defietser

hoi de fietser.

Wat jij hebt gemaakt ziet er wel heel erg netjes en goed uit. echt top werk:thumb::d

maar toen ik het ging bekijken in een kleinere scherm resolutie ging het goed mis. de letters kwamen dwars door een menu te staan. dit is niet echt de bedoeling lijkt mij.

ik begrijp dat jij een andere scherm/resolutie gebruikt maar toch zoek ik enkel alleen een oplossing nu zodat het voor iedereen het netjes eruit komt te zien.

ik ben elders hier op helpmij (misschien dat je dat nog weet) bezig geweest met een vraag van hoe ik nu een website kan bouwen die voor idereen (of de meeste) gebruikers gebruiks vriendelijk is. dus dat alles wat word weergegeven voor iedreen het zelfde is. niet iedereen gebruikt de zelfde schermen/resoluties en browsers. daarom door al deze verschillen, ben ik opnieuw begonnen met de website en wil alles stap voor stap gaan maken, met behulp van hier op helpmij.
(tevens is deze forum daar voor)

Door alle hulp en stap voor stap uitleg, begrijp en weet ik steeds meer.

alleen nu met de pagina met de alfabet letters, is het enige probleem dat het niet voor iedereen goed zichtbaar is. bij een kleinere scherm resolutie/scherm komen de letters dwars in het menu te staan.

dat is het enige wat ik eruit wil hebben.

Ik zat ff te denken dan, moet alles misschien in een tabel komen te staan van deze letters? en evt bij een kleinere scherm/resolutie dat er dan scrolbars komen, als het niet anders kan.

mij gaat het erom, dat iedereen deze pagina kan bekijken zonder problemen. en dat die alfabet letters gewoon horizontaal staan.

want het geen wat je tot nu toe hebt gedaan/gemaakt met die alfabet letters ziet er super netjes en goed uit.:thumb: ben je al enorm dankbaar voor je inzet hulp en tips die je me hebt gegeven.

ik hoop dat je voor deze letters nog een oplossing kan vinden bij kleinere schermen/reoluties en dat het resultaat ongeveer het zelfde blijft als voor iedereen die deze pagina bekijkt. (desnoods idd met scrolbars als t niet anders mogelijk is)

defietser · 2 aug 2010

ik hoop dat je voor deze letters nog een oplossing kan vinden bij kleinere schermen/reoluties en dat het resultaat ongeveer het zelfde blijft als voor iedereen die deze pagina bekijkt. (desnoods idd met scrolbars als t niet anders mogelijk is)

De html en css van de letters heb je nu werk dat eens verder alleen uit Ik heb je toch enkele hints gegeven in vorige post.

Een website maken met een vaste breedte bv 900 px of 1000 px dan krijgt U scrollbars . U moet een keuze maken ik niet.

Voor mij stopt het hier straks moet ik nog de gehele site bouwen.
Mvg
Defietser

Poppoll · 2 aug 2010

Hi fietser,
cc DJ
De moed niet opgeven, je bent er bijna.
Maak een copy van het css bestand en noem het style800.css
In style800.css wijzig je de lettergrootte en padding voor de letters zodat die bij deze resolutie passen.
In de head voeg je na:

Code:

 <link rel="stylesheet" type="text/css" href="style2.css">

dit script in:

Code:

<script type="text/javascript">
  if (screen.width < 1024)
  
    link = document.getElementsByTagName( "link" )[ 0 ]; 
    link.href = "style800.css";
</script>

Als men nu de site bekijkt met een resolutie minder dan 1024 (normaal 800) dan wordt style800 geladen.

Nadeel: Als er veel artiesten komen te staan onder een letter, heeft men een scroll probleem.
Maar een resolutie 800*600 wordt heden bijna niet meer gebruikt.

PP

djeric · 2 aug 2010

Poppoll zei:
Nadeel: Als er veel artiesten komen te staan onder een letter, heeft men een scroll probleem.
Maar een resolutie 800*600 wordt heden bijna niet meer gebruikt.

PP

maar het menu klopt ook helemaal. heb vandaag ff alles eens geupload. en een screenshot gemaakt van wat het probleem nu is.

zie bijlage hieronder:

Dit zie je bij een scherm relutie van 800x600

defietser · 2 aug 2010

@ Poppoll
Als je U geroepen voelt kan je alles afhalen van http://www.defietser.net/djeric/
Het voorbeeld die daar nu staat is nu nog te groot voor een resolutie van 800px breed gezien het plaatje dat djeric toont de letters nog in het menu staan.
Ik zie het niet zitten om die nu aan te passen dat het past in die 800px en er dan nog eens de css aan te passen voor een scherm breedte van 1024 px. En dan is er die vriend die nog een groter scherm heeft en dan staan die letters er daar weer oh zo kleintjes in het midden van het scherm.
Hij heeft zijn website fluid gemaakt dus vult iedere schermbreedte en het menu past zich aan de breedte aan (em) breed scherm breed menu.
Het probleem is eenvoudig de persoon in kwestie moet de moeite doen om de css te bestuderen en kijken hoe iedere apdiv is gestyled is dan hij kan die zelf de css aanpassen, hij heeft alles wat hij nodig heeft zie mijn post van 28 juli 2010 08:58 met wat uitleg.
Hij moet alleen de css bestuderen en de html aanpassen voor zijn artiesten.
Voor mij is het een beetje te veel werk sorry.
Veel suc6
Defietser

Poppoll · 2 aug 2010

@Defietser
cc DJ
Kijk hier eens met een 800*600 resolutie: fotoweben.be/tabber/index2.htm [niet meer beschikbaar]
Kijk daarna met een hoger resolutie, je zal zien dat dit in beide gevallen werkt.

Ik blijf er echter bij dat mijn eerste oplossing (met tabs) beter is bij een lage resolutie.
Zie hier fotoweben.be/tabber/index1.htm [niet meer beschikbaar]

Bij een resolutie 800*600 moet je dit eens doen in beide versies:
muis over de letter A, ik heb daar 20 items ingezet, bij deze resolutie heb je een scroll probleem! in versie 1( index2)

PP

djeric · 2 aug 2010

defietser zei:
Hij moet alleen de css bestuderen en de html aanpassen voor zijn artiesten.
Voor mij is het een beetje te veel werk sorry.
Veel suc6
Defietser

ik zie niet in wat ik aan moet passen.

zie de uitleg niet..........

ik begrijp html en css niet als ik een serie codes krijgt maar niet erbij wordt verteld hoe en wat die code's doen.
een deel begrijp ik dan wel, maar het is een moelijke stuk.

misschien als iemand het wel begrijpt het even kan afmaken en vervolgens ook kan toelichten worden we allemaal (ikzelf) wijzer van.

ik ben niet zo van "ik wil een website en jullie bouwen hem voor mij inelkaar" nee dat is onzin!

ik ben gewoon ruim 8 jaar bezig om eidenlijk eens een goede site te bouwen, en het lukte me steeds vrij aardig goed door alle hulp hier op helpmij te vragen.

met steeds stukjes voorbeeld, uitleg en fouten die verbeterd worden begrijp ik het langzamerhand wel.
alleen zoals nu kom ik geen stap verder.

ik heb de site geupload met de volgende html:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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>
    <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
  with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</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>
        
<!-- Hier begint het Alfabeth-->
   
<div id="Letters"><!-- Begin div letters -->
<div id="apDiv1" onmouseover="MM_showHideLayers('apDivA','','show')" onmouseout="MM_showHideLayers('apDivA','','hide')"><a>A</a></div>
<div id="apDiv2" onmouseover="MM_showHideLayers('apDivB','','show')" onmouseout="MM_showHideLayers('apDivB','','hide')"><a>B</a></div>
<div id="apDiv3" onmouseover="MM_showHideLayers('apDivC','','show')" onmouseout="MM_showHideLayers('apDivC','','hide')"><a>C</a></div>
<div id="apDiv4" onmouseover="MM_showHideLayers('apDivD','','show')" onmouseout="MM_showHideLayers('apDivD','','hide')"><a>D</a></div>
<div id="apDiv5" onmouseover="MM_showHideLayers('apDivE','','show')" onmouseout="MM_showHideLayers('apDivE','','hide')"><a>E</a></div>
<div id="apDiv6" onmouseover="MM_showHideLayers('apDivF','','show')" onmouseout="MM_showHideLayers('apDivF','','hide')"><a>F</a></div>
<div id="apDiv7" onmouseover="MM_showHideLayers('apDivG','','show')" onmouseout="MM_showHideLayers('apDivG','','hide')"><a>G</a></div>
<div id="apDiv8" onmouseover="MM_showHideLayers('apDivH','','show')" onmouseout="MM_showHideLayers('apDivH','','hide')"><a>H</a></div>
<div id="apDiv9" onmouseover="MM_showHideLayers('apDivI','','show')" onmouseout="MM_showHideLayers('apDivI','','hide')"><a>I</a></div>
<div id="apDiv10" onmouseover="MM_showHideLayers('apDivJ','','show')" onmouseout="MM_showHideLayers('apDivJ','','hide')"><a>J</a></div>
<div id="apDiv11" onmouseover="MM_showHideLayers('apDivK','','show')" onmouseout="MM_showHideLayers('apDivK','','hide')"><a>K</a></div>
<div id="apDiv12" onmouseover="MM_showHideLayers('apDivL','','show')" onmouseout="MM_showHideLayers('apDivL','','hide')"><a>L</a></div>
<div id="apDiv13" onmouseover="MM_showHideLayers('apDivM','','show')" onmouseout="MM_showHideLayers('apDivM','','hide')"><a>M</a></div>
<div id="apDiv14" onmouseover="MM_showHideLayers('apDivN','','show')" onmouseout="MM_showHideLayers('apDivN','','hide')"><a>N</a></div>
<div id="apDiv15" onmouseover="MM_showHideLayers('apDivO','','show')" onmouseout="MM_showHideLayers('apDivO','','hide')"><a>O</a></div>
<div id="apDiv16" onmouseover="MM_showHideLayers('apDivP','','show')" onmouseout="MM_showHideLayers('apDivP','','hide')"><a>P</a></div>
<div id="apDiv17" onmouseover="MM_showHideLayers('apDivQ','','show')" onmouseout="MM_showHideLayers('apDivQ','','hide')"><a>Q</a></div>
<div id="apDiv18" onmouseover="MM_showHideLayers('apDivR','','show')" onmouseout="MM_showHideLayers('apDivR','','hide')"><a>R</a></div>
<div id="apDiv19" onmouseover="MM_showHideLayers('apDivS','','show')" onmouseout="MM_showHideLayers('apDivS','','hide')"><a>S</a></div>
<div id="apDiv20" onmouseover="MM_showHideLayers('apDivT','','show')" onmouseout="MM_showHideLayers('apDivT','','hide')"><a>T</a></div>
<div id="apDiv21" onmouseover="MM_showHideLayers('apDivU','','show')" onmouseout="MM_showHideLayers('apDivU','','hide')"><a>U</a></div>
<div id="apDiv22" onmouseover="MM_showHideLayers('apDivV','','show')" onmouseout="MM_showHideLayers('apDivV','','hide')"><a>V</a></div>
<div id="apDiv23" onmouseover="MM_showHideLayers('apDivW','','show')" onmouseout="MM_showHideLayers('apDivW','','hide')"><a>W</a></div>
<div id="apDiv24" onmouseover="MM_showHideLayers('apDivX','','show')" onmouseout="MM_showHideLayers('apDivX','','hide')"><a>X</a></div>
<div id="apDiv25" onmouseover="MM_showHideLayers('apDivY','','show')" onmouseout="MM_showHideLayers('apDivY','','hide')"><a>Y</a></div>
<div id="apDiv26" onmouseover="MM_showHideLayers('apDivZ','','show')" onmouseout="MM_showHideLayers('apDivZ','','hide')"><a>Z</a></div>
<!-- Hier eindigt het Alfabeth -->
 
 
 
 
 
 
<!-- Hieronder staan de artiesten-->
<div id="apDivA" onclick="MM_showHideLayers('apDivA','','hide')" onmouseover="MM_showHideLayers('apDivA','','show')" onmouseout="MM_showHideLayers('apDivA','','hide')"> A<br>
<a href="alwin.html" target="_blank">Alwin</a><br></div>
 
<div id="apDivB" onclick="MM_showHideLayers('apDivB','','hide')" onmouseover="MM_showHideLayers('apDivB','','show')" onmouseout="MM_showHideLayers('apDivB','','hide')">B<br>
<a href="bzb.html" target="_blank">Band zonder Banaan</a></div>
 
 
<div id="apDivC" onclick="MM_showHideLayers('apDivC','','hide')" onmouseover="MM_showHideLayers('apDivC','','show')" onmouseout="MM_showHideLayers('apDivC','','hide')">C<br>
Nog geen artisten op deze letter<br></div>
 
<div id="apDivD" onclick="MM_showHideLayers('apDivD','','hide')" onmouseover="MM_showHideLayers('apDivD','','show')" onmouseout="MM_showHideLayers('apDivD','','hide')">D<br>
<a href="djpatrick.html" target="_blank">Dj Patrick</a><br>
<a href="dedeurzakkers.html" target="_blank">De Deurzakkers</a>
</div>
 
<div id="apDivE" onclick="MM_showHideLayers('apDivE','','hide')" onmouseover="MM_showHideLayers('apDivE','','show')" onmouseout="MM_showHideLayers('apDivE','','hide')">E<br>
Nog geen artisten op deze letter<br>
</div>
 
<div id="apDivF" onclick="MM_showHideLayers('apDivF','','hide')" onmouseover="MM_showHideLayers('apDivF','','show')" onmouseout="MM_showHideLayers('apDivF','','hide')">F<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivG" onclick="MM_showHideLayers('apDivG','','hide')" onmouseover="MM_showHideLayers('apDivG','','show')" onmouseout="MM_showHideLayers('apDivG','','hide')">G<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivH" onclick="MM_showHideLayers('apDivH','','hide')" onmouseover="MM_showHideLayers('apDivH','','show')" onmouseout="MM_showHideLayers('apDivH','','hide')">H<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivI" onclick="MM_showHideLayers('apDivI','','hide')" onmouseover="MM_showHideLayers('apDivI','','show')" onmouseout="MM_showHideLayers('apDivI','','hide')">I<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivJ" onclick="MM_showHideLayers('apDivJ','','hide')" onmouseover="MM_showHideLayers('apDivJ','','show')" onmouseout="MM_showHideLayers('apDivJ','','hide')">J<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivK" onclick="MM_showHideLayers('apDivK','','hide')" onmouseover="MM_showHideLayers('apDivK','','show')" onmouseout="MM_showHideLayers('apDivK','','hide')">K<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivL" onclick="MM_showHideLayers('apDivL','','hide')" onmouseover="MM_showHideLayers('apDivL','','show')" onmouseout="MM_showHideLayers('apDivL','','hide')">L<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivM" onclick="MM_showHideLayers('apDivM','','hide')" onmouseover="MM_showHideLayers('apDivM','','show')" onmouseout="MM_showHideLayers('apDivM','','hide')">M<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivN" onclick="MM_showHideLayers('apDivN','','hide')" onmouseover="MM_showHideLayers('apDivN','','show')" onmouseout="MM_showHideLayers('apDivN','','hide')">N<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivO" onclick="MM_showHideLayers('apDivO','','hide')" onmouseover="MM_showHideLayers('apDivO','','show')" onmouseout="MM_showHideLayers('apDivO','','hide')">O<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivP" onclick="MM_showHideLayers('apDivP','','hide')" onmouseover="MM_showHideLayers('apDivP','','show')" onmouseout="MM_showHideLayers('apDivP','','hide')">P<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivQ" onclick="MM_showHideLayers('apDivQ','','hide')" onmouseover="MM_showHideLayers('apDivQ','','show')" onmouseout="MM_showHideLayers('apDivQ','','hide')">Q<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivR" onclick="MM_showHideLayers('apDivR','','hide')" onmouseover="MM_showHideLayers('apDivR','','show')" onmouseout="MM_showHideLayers('apDivR','','hide')">R<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivS" onclick="MM_showHideLayers('apDivS','','hide')" onmouseover="MM_showHideLayers('apDivS','','show')" onmouseout="MM_showHideLayers('apDivS','','hide')">S<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivT" onclick="MM_showHideLayers('apDivT','','hide')" onmouseover="MM_showHideLayers('apDivT','','show')" onmouseout="MM_showHideLayers('apDivT','','hide')">T<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivU" onclick="MM_showHideLayers('apDivU','','hide')" onmouseover="MM_showHideLayers('apDivU','','show')" onmouseout="MM_showHideLayers('apDivU','','hide')">U<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivV" onclick="MM_showHideLayers('apDivV','','hide')" onmouseover="MM_showHideLayers('apDivV','','show')" onmouseout="MM_showHideLayers('apDivV','','hide')">V<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivW" onclick="MM_showHideLayers('apDivW','','hide')" onmouseover="MM_showHideLayers('apDivW','','show')" onmouseout="MM_showHideLayers('apDivW','','hide')">W<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivX" onclick="MM_showHideLayers('apDivX','','hide')" onmouseover="MM_showHideLayers('apDivX','','show')" onmouseout="MM_showHideLayers('apDivX','','hide')">X<br>
Nog geen artisten op deze letter<br>
</div>

<div id="apDivY" onclick="MM_showHideLayers('apDivY','','hide')" onmouseover="MM_showHideLayers('apDivY','','show')" onmouseout="MM_showHideLayers('apDivY','','hide')">Y<br>
Nog geen artisten op deze letter<br>
</div>
 
<div id="apDivZ" onclick="MM_showHideLayers('apDivZ','','hide')" onmouseover="MM_showHideLayers('apDivZ','','show')" onmouseout="MM_showHideLayers('apDivZ','','hide')">Z<br>
Nog geen artisten op deze letter<br>
</div>
<!-- Einde artiesten -->
 
</div><!-- Einde div letters -->


 
        
        
		<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 heb de volgende css:

Code:

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;
	background-color : #9cc;
	color : #333;
	list-style : none;
	float : left;
	margin-top: 0;
	margin-right: 10px;
	margin-bottom: 1em;
	margin-left: 0;
} 

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 : black; 

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; 

background : #00c; 

color : #ff0; 

} 

#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; 

} 
/* alles met betrekking tot apresski Artiesten alfabet*/

#apDiv1 {
	position:relative;
	width:20px;
	height:30px;
	z-index:1;
	left: 0px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
	visibility: visible;
}

#apDiv2 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:2;
	left: 22px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv3 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:3;
	left: 44px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv4 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:4;
	left:66px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv5 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:88px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv6 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 110px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv7 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:132px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv8 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 154px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv9 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 176px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv10{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:198px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv11 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 220px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv12{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 244px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv13 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 266px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv14 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 288px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv15 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left:310px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv16 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 332px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv17{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 354px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv18 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 376px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv19 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 398px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv20 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 420px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv21 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 444px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv22 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 466px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv23{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 488px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv24{
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 510px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv25 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 532px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}
#apDiv26 {
	position:absolute;
	width:20px;
	height:30px;
	z-index:5;
	left: 554px;
	top: 0px;
	font-size:18px;
	font-weight: bolder;
	text-align: center;
}


#Letters {
	height: auto;
	position: relative;
	width: 575px;
	margin-left: auto;
	margin-right: auto;
}

/* namen van artiesten*/
#apDivA {
	position:absolute;
	width:auto;
	height:auto;
	z-index:100;
	visibility: hidden;
	left: 0px;
	top: 28px;
	border: 1px solid #009;
}
#apDivB {
	position:absolute;
	width:auto;
	height:auto;
	z-index:102;
	visibility: hidden;
	left: 22px;
	top: 28px;
	border: 1px solid #009;
}
#apDivC {
	position:absolute;
	width:auto;
	height:auto;
	z-index:103;
	visibility: hidden;
	left: 44px;
	top: 28px;
	border: 1px solid #009;
}
#apDivD {
	position:absolute;
	width:auto;
	height:auto;
	z-index:104;
	visibility: hidden;
	left: 66px;
	top: 28px;
	border: 1px solid #009;
}
#apDivE{
	position:absolute;
	width:auto;
	height:auto;
	z-index:105;
	visibility: hidden;
	left: 88px;
	top: 28px;
	border: 1px solid #009;
}
#apDivF{
	position:absolute;
	width:auto;
	height:auto;
	z-index:106;
	visibility: hidden;
	left: 110px;
	top: 28px;
	border: 1px solid #009;
}
#apDivG {
	position:absolute;
	width:auto;
	height:auto;
	z-index:107;
	visibility: hidden;
	left: 132px;
	top: 28px;
	border: 1px solid #009;
}
#apDivH {
	position:absolute;
	width:auto;
	height:auto;
	z-index:108;
	visibility: hidden;
	left: 154px;
	top: 28px;
	border: 1px solid #009;
}
#apDivI {
	position:absolute;
	width:auto;
	height:auto;
	z-index:109;
	visibility: hidden;
	left: 176px;
	top: 28px;
	border: 1px solid #009;
}
#apDivJ {
	position:absolute;
	width:auto;
	height:auto;
	z-index:110;
	visibility: hidden;
	left: 198px;
	top: 28px;
	border: 1px solid #009;
}
#apDivK {
	position:absolute;
	width:auto;
	height:auto;
	z-index:111;
	visibility: hidden;
	left: 220px;
	top: 28px;
	border: 1px solid #009;
}
#apDivL {
	position:absolute;
	width:200px;
	height:auto;
	z-index:112;
	visibility: hidden;
	left: 242px;
	top: 28px;
	border: 1px solid #009;
}
#apDivM {
	position:absolute;
	width:auto;
	height:auto;
	z-index:264;
	visibility: hidden;
	left: 264px;
	top: 28px;
	border: 1px solid #009;
}
#apDivN {
	position:absolute;
	width:auto;
	height:auto;
	z-index:114;
	visibility: hidden;
	left: 286px;
	top: 28px;
	border: 1px solid #009;
}
#apDivO {
	position:absolute;
	width:auto;
	height:auto;
	z-index:115;
	visibility: hidden;
	left: 308px;
	top: 28px;
	border: 1px solid #009;
}
#apDivP {
	position:absolute;
	width:auto;
	height:auto;
	z-index:116;
	visibility: hidden;
	left: 330px;
	top: 28px;
	border: 1px solid #009;
}
#apDivQ {
	position:absolute;
	width:auto;
	height:auto;
	z-index:117;
	visibility: hidden;
	left: 352px;
	top: 28px;
	border: 1px solid #009;
}
#apDivR {
	position:absolute;
	width:auto;
	height:auto;
	z-index:118;
	visibility: hidden;
	left: 374px;
	top: 28px;
	border: 1px solid #009;
}
#apDivS {
	position:absolute;
	width:auto;
	height:auto;
	z-index:119;
	visibility: hidden;
	left: 396px;
	top: 28px;
	border: 1px solid #009;
}
#apDivT {
	position:absolute;
	width:auto;
	height:auto;
	z-index:120;
	visibility: hidden;
	left: 418px;
	top: 28px;
	border: 1px solid #009;
}
#apDivU {
	position:absolute;
	width:auto;
	height:auto;
	z-index:121;
	visibility: hidden;
	left: 440px;
	top: 28px;
	border: 1px solid #009;
}
#apDivV {
	position:absolute;
	width:auto;
	height:auto;
	z-index:122;
	visibility: hidden;
	left: 462px;
	top: 28px;
	border: 1px solid #009;
}
#apDivW {
	position:absolute;
	width:auto;
	height:auto;
	z-index:123;
	visibility: hidden;
	left: 484px;
	top: 28px;
	border: 1px solid #009;
}
#apDivX {
	position:absolute;
	width:auto;
	height:auto;
	z-index:124;
	visibility: hidden;
	left: 506px;
	top: 28px;
	border: 1px solid #009;
}
#apDivY {
	position:absolute;
	width:auto;
	height:auto;
	z-index:125;
	visibility: hidden;
	left: 528px;
	top: 28px;
	border: 1px solid #009;
}
#apDivZ {
	position:absolute;
	width:auto;
	height:auto;
	z-index:126;
	visibility: hidden;
	left: 550px;
	top: 28px;
	border: 1px solid #009;
}



#Letters  a:link {
	color: #000;
	text-decoration: none;
}
#Letters a:hover {
	color: #F00;
}
#Letters a:visited {
	color: #000;
}
#Letters a:active {
	color: #000;
}

djeric · 2 aug 2010

Poppoll zei:
@Defietser
cc DJ
Kijk hier eens met een 800*600 resolutie: http://fotoweben.be/tabber/index2
Ik blijf er echter bij dat mijn eerste oplossing (met tabs) beter is bij een lage resolutie.

dit werkt wel goed.

alleen wat dan de fietser heeft gemaakt vind ik mooier uit zien. en was eigenlijk ook mij bedoeling.

mij idee is:

mensen zoeken in het menu naar een artiest en komen dan uit bij die pagina met die artiest.
dat is het doel.

Poppoll · 2 aug 2010

DJ
Oké zoek het verder zelf maar uit.

PP

letters met menu eronder maken

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Bijlagen

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Gebruiker

Wij waarderen jouw privacy