menu maken die 15 links weer geeft.

Status
Niet open voor verdere reacties.

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.

ik weet vele bassis begrippen van html al wel, maar het lukt me niet om een goede menu te maken.

ben wel het een en ander aan t leren en zoeken, maar vind gewoon niet een goede manier.

ik zit met mijn website: http://www.skihutinfo.tk met het probleem dat het menu door vele browsers niet goed wordt weer gegeven. (in ie8 bv wel)

nu heb ik in dat menu 15 verschillende pagina's staan. die ieder apart moeten worden weergegeven.
Maar ondersteunt bv door firefox slecht, ze staan uitelkaar en klopt niet wat je ziet.

kortom, tijd voor een nieuwe code en de begrippen van css en html te leren.

maar me vraag:

ik wil dan een menu maken die 15 links bevat van verschillende pagina's
het liefst horizontaal in beeld
en geliever dat je de 15 verschillende links direct ziet staan in dat menu. (bv een soort tabel met mouse over.)

dat laaste probeer ik nog een beetje uit te vissen.

heb nog niet echt een site gezien, die een duidelijk voorbeeld geeft van een menu wat mij wel schikt. een drop down lijkt mij niets, omdat dit de linken vooraf verstopt en ik dan een titel moet geven aan dat menu.


iemand een idee waar ik goede (simpele) menu's kan maken????

tenzij iemand zecht dat het beter is een dropdown te maken.

al begrijp ik dan niet dat iedereen weet wat er onder de knoppen dan zit.
bv voor fotos te bekijken moet je eerst vooraf op een item klikken. hoe weet men dat die dan op dat item moet klikken als hij/zij fotos wilt zien???

vandaar kies ik voor een menu dat zichtbaar is
 
Laatst bewerkt:
hallo.

ik weet vele bassis begrippen van html al wel, maar het lukt me niet om een goede menu te maken.

ben wel het een en ander aan t leren en zoeken, maar vind gewoon niet een goede manier.

ik zit met mijn website: http://www.skihutinfo.tk met het probleem dat het menu door vele browsers niet goed wordt weer gegeven. (in ie8 bv wel)


nu ben ik al bezig geweest met een menu te maken. en het ziet er al wel beter uit.

zie>>>http://members.home.nl/ebosmannetjes/index1.htm

alleen heb dan 20 menu items aangemaakt.

nu wil ik eigenlijk 10 items links hebben staan en 10 items rechts.

maar wel zo dat het voor iedere browser type goed wordt weergegeven.

geen idee hoe dat moet:confused:

straks wil ik dan de inhoud precies in het midden uit laten komen. nu staat de tekst bv niet naarst het menu maar erboven.

zie bron code in browser.
 
Laatst bewerkt:
Hallo,

Nou, dat is 'n verschil! Als ik het goed begrijp begin je in feite min of meer opnieuw. Dat wil zeggen: de inhoud kan natuurlijk grotendeels hetzelfde blijven, maar de code.
Als dat zo is, lijkt me dat 'n prima idee, want die oude site is heel erg moeilijk te 'renoveren'. Sneller en makkelijker is gewoon opnieuw te doen.

Ik weet niet hoe veel of hoe weinig je al weet, dus mogelijk zeg ik dingen die je al weet, maar dat is beter dan 't helemaal missen.
Als je wilt dat je site er in alle browsers hetzelfde uit gaat zien, moet je vanaf het begin heel goed op 'n aantal dingen letten. Als je site 't in Internet Explorer goed doet, wil dat absoluut niet zeggen dat hij ook in andere browsers goed werkt.
Het best kun je 'n site maken in Firefox, Opera, Google Chrome of Safari. Als hij daarin werkt, werkt hij meestal ook wel in IE. Omgekeerd is dat niet zo.
Firefox is 't makkelijkste, want die heeft de meeste hulpmiddelen voor 't maken van 'n site.

Dat menu zoals jij het wilt is prima in orde te krijgen. Tien links, tien rechts en de tekst, afbeeldingen, of wat dan ook in het midden.

Wat je het beste kunt doen is eerst de belangrijkste onderdelen in orde krijgen. Dat zijn dan bij jou de header, het menu links en rechts en de tekst daartussenin. De Tip van de dag en zo die komen later wel.
Als je eerst die belangrijke dingen goed hebt en steeds blijft controleren in de validator (zie verderop), kun je geleidelijk aan dingen gaan toevoegen en zie je gelijk als 't misgaat.
Ik zou je trouwens aanraden om ook Safari, Opera, Firefox en Google Chrome te installeren, als je die nog niet hebt, om ook daarin te kunnen testen.
Het menu wat je nu hebt werkt in ieder geval in alle browsers goed.

Om te beginnen zou ik even alle JavaScript eruit halen. Die kan later weer terug, maar dan weet je zeker dat die geen problemen veroorzaakt.

Om de pagina er in alle browsers hetzelfde uit te laten zien, moeten eerst alle fouten die erin zitten uit de code. Om dat te kunnen doen is het nodig dat er 'n doctype bovenin staat. Vervang de
HTML:
<html>
<head>
bovenaan door
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">
Dit moet helemaal bovenaan staan, er mag zelfs geen spatie of lege regel boven staan.
Het doctype vertelt de browsers welke versie van html en zo het is. Ik zou 'n strenge (strict) nemen, dat is in het begin even wat lastiger omdat je sommige dingen als <font> niet meer mag gebruiken, maar uiteindelijk is het veel minder werk. (In plaats van bij elke <h> <font> op te geven, kun je dat met css op 1 centrale plaats met 1 regel opgeven. Minder werk en als je 'n ander kleurtje wilt hoe je maar op 1 plaats te wijzigen).
lang="nl" vertelt zoekmachines, spraakbrowsers, enz. dat 't 'n Nederlandstalige site is.
De charset vertelt de browser welk alfabet hij moet gebruiken, zodat je geen vraagtekens krijgt in plaats van letters met accenten, dat soort dingen.

Dit menu gebruikt css. Het grote voordeel daarvan is dat je dat later in een centraal bestand op kunt slaan, wat dan voor alle pagina's bruikbaar is. Je hoeft dan dus niet meer op elke pagina apart veranderingen aan te brengen. (Dit klopt niet helemaal, maar om 't even wat simpel te houden). Hetzelfde geldt voor de andere dingen die met de lay-out te maken hebben: heel veel wat je nu maakt, kun je zonder meer op andere pagina's gebruiken.
Daarom is de eerste pagina vaak wat meer werk, maar dat verdien je later dik terug met wat je uitspaart aan latere pagina's.

Goed, de JavaScript is er even uit. De nieuwe kop staat bovenaan.
Als je nu de code door de validator haalt op http://validator.w3.org/
ga je 'n serie fouten zien. Die moet je van boven naar beneden (in die volgorde!) gaan herstellen. Als je 'n fout bovenaan repareert, zijn er vaak 'n hele reeks lagere ook verdwenen, vandaar.
Als je bepaalde fouten niet begrijpt even vragen, want die validator is niet geschreven door briljante schrijvers. Er is soms geen touw aan vast te knopen aan hun beschrijvingen van fouten.

Als je dat hebt gedaan, dan kan daarna het menu goed worden neergezet en de inhoud in het midden. Dat is dan eigenlijk niet zoveel werk meer, maar eerst moet de basis in orde zijn.

Daarna kunnen dan geleidelijk aan de Tip van de dag enz. weer terug, waarbij voortdurend in de validator en andere browsers gekeken moet worden of 't goed gaat.

Als dat JavaScript er even (tijdelijk) uit is en je dit bovenaan hebt gezet,
 
Laatst bewerkt:
Wat je het beste kunt doen is eerst de belangrijkste onderdelen in orde krijgen. Dat zijn dan bij jou de header, het menu links en rechts en de tekst daartussenin



Als je dat hebt gedaan, dan kan daarna het menu goed worden neergezet en de inhoud in het midden. Dat is dan eigenlijk niet zoveel werk meer, maar eerst moet de basis in orde zijn.

,



dit is dan ook me vraag:(

krijg het niet voorelkaar om het menu links en rechts te krijgen en de inhoud in het midden laten uitkomen.

website: http://members.home.nl/ebosmannetjes/index1.htm (zonder menu))werkt goed in ie8 en firefox 3'

mijn menu code:

<STYLE ..>
<!--
#navigatie {
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}

#navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}

#navigatie ul li {
margin: 0;
border-top: 1px solid #003;
}

#navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navigatie ul li a {
width: auto;
}

#navigatie ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
-->
</STYLE>

<div id="navigatie">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="informatie.htm">Informatie</a></li>
<li><a href="mailto:skihutinfo@ziggo.nl">contact</a></li>
<li><a href="artiesten.htm">apresski artiesten</a></li>
<li><a href="vacatures.htm">vacatures</a></li>
<li><a href="skihut.htm">skihut (nl)</a></li>
<li><a href="dj.htm">apresski dj's</a></li>
<li><a href="forum.htm">apresski forum</a></li>
<li><a href="skihutdiv.htm">skihut (div)</a></li>
<li><a href="cd.htm">apresski cd's</a></li>
<li><a href="downloads.htm">downloads</a></li>
<li><a href="evenementen.htm">evenementen</a></li>
<li><a href="ontoer.htm">Skihut on toer</a></li>
<li><a href="drankjes.htm">dranken/cocktails</a></li>
<li><a href="sponsers.htm">Sponsers</a></li>
<li><a href="drivein.htm">drive in shows</a></li>
<li><a 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 href="http://apresskihutinfo.mygb.nl">gastenboek</a></li>
<li><a href="links.html">links</a></li>
<li><a href="vragen.htm">help</a></li>
</ul>
</div>
 
Voorbeeldje:

Code:
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Sunday, September 20, 2009 22:37:33 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  content="korte beschrijving van de pagina">
<meta name="keywords"  content="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" content="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 #container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}

#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}

#top h1
{
padding: 0;
margin: 0;
}

#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}

#rightnav
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}

#content
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
border:solid 2px #ff0000;
}
</style>
<style type="text/css" media="screen">

<!--
.navigatie {
font-family: verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
width: 12em;
border-right: 1px solid #666;
padding: 0;
margin-bottom: 1em;
background-color: #9cc;
color: #333;
}

.navigatie ul {
list-style: none;
margin: 0;
padding: 0;
}

.navigatie ul li {
margin: 0;
border-top: 1px solid #003;
}

.navigatie ul li a {
display: block;
padding: 2px 2px 2px 4px;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body .navigatie ul li a {
width: auto;
}

.navigatie ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
-->
</style>
</head>

<body >


<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">

<div class="navigatie">
<ul>
<li><a href="index.html">home</a></li>
<li><a href="informatie.htm">Informatie</a></li>
<li><a href="mailto:skihutinfo@ziggo.nl">contact</a></li>
<li><a href="artiesten.htm">apresski artiesten</a></li>
<li><a href="vacatures.htm">vacatures</a></li>
<li><a href="skihut.htm">skihut (nl)</a></li>
<li><a href="dj.htm">apresski dj's</a></li>
<li><a href="forum.htm">apresski forum</a></li>
<li><a href="skihutdiv.htm">skihut (div)</a></li>
<li><a href="cd.htm">apresski cd's</a></li>
</ul>
</div> 


<a href="http://css.maxdesign.com.au/floatutorial/tutorial0911.htm">link naar uitleg deze opbouw</a>
</div>


<div id="rightnav">

<div class="navigatie">
<ul>
<li><a href="downloads.htm">downloads</a></li>
<li><a href="evenementen.htm">evenementen</a></li>
<li><a href="ontoer.htm">Skihut on toer</a></li>
<li><a href="drankjes.htm">dranken/cocktails</a></li>
<li><a href="sponsers.htm">Sponsers</a></li>
<li><a href="drivein.htm">drive in shows</a></li>
<li><a 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 href="http://apresskihutinfo.mygb.nl">gastenboek</a></li>
<li><a href="links.html">links</a></li>
<li><a href="vragen.htm">help</a></li>
</ul>
</div>


</div>
<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="footer">
Footer
</div>
</div>

</body>

</html>

:cool:
 
t wordt me toch te ingewikkeld.

de bassis snap ik
vele dingen kan ik wel aanpassen.

maar grotendeels wordt het toch compleet chinees voor me.

ik denk dat ik me vraag opnieuw begin en gewoon van a naar z werk.

toch bedankt voor je tip.

bewaar me berichten en bekijk ze geregelt terug. :thumb:
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan