css dropdown menu

Status
Niet open voor verdere reacties.
B

Byakuya

Gebruiker
Lid geworden
3 feb 2010
Berichten
17
ik heb overal gezocht naar een dropdown menu die mijn menu niet verpest maar kan nix vinden en ook geprobeerd met firebug maar hielp ook niet echt

ik zoek een css dropdown menu dat naar onderen scrolt

zoals deze bv

http://www.cssplay.co.uk/menus/drop_definition4.html

ik gebruik alleen html css en ie8

de html

HTML: 
<html>
	<head>
		<title>fotoboek</title>
		<link href="sean.css" rel="stylesheet" type="text/css" />
	</head>
	
	
<body>
	<div class="wrapper">
		<div class="logo"><a href="Home.html"> </a> </div>
		<div class="menu">
			<ul>
				
				<li class="home"><a href="Home.html"><h4>Home </h4></a></li>
				<li class="overons"><a href="sublinks.html">Over ons </a></li>
				<li class="diensten"><a href="diensten.html">Diensten </a></li>
				<li class="dagactiviteiten"><a href="dagactiviteiten.html">Dagactiviteiten </a></li>
				<li class="scholing"><a href="scholing.html">Scholing </a></li>
				<li class="fotoboek"><a class="selected"  href="fotoboek.html">Fotoboek </a></li>
				<li class="vacatures"><a href="vacatures.html">Vacatures </a></li>
				<li class="contact"><a href="contact.html">Contact </a></li>
				<li class="link"><a href="link.html">Link </a></li>
				
			</ul>
		</div>
		
		<div class="contentleft">
			<div class="contentleft1"> </div>
			<div class="contentleft2" > 
				<div class="contentmain">
					<div class="contentmainleft">
						<div class="titel1"> <b>Kirsehir</b></div>
						<div class="divider"> </div> 

						<div class="kir">
						
						</div>
			
					</div>
				</div>
				<div class="contentmain2">
					
					<div class="contentmainright"> 
					
						
					
							
						
					</div>
				</div>
					
					
				
			
				<div class="contentmain2">
					<div class="divider3"> </div>
					<div class="contentmainright"> 
					
						<div class="titel2"> </div>
						<img src="divider2.png" />
						<div class="biber1"> </div>
							
						
					</div>
				</div>
					
					
					
			</div>
			<div class="contentleft3"></div>
			
			
			<div class="footer"> <a href="http://dall.nl" target="_blank">Copyright 2009. Website made by Selim Oruc</a> </div>
					
		</div>		
		
		
		<div class="contentrigth"> <img src="fotos.png"/> </div>
		
	</div>
</body>
</html>

ik weet dat er wat fouten kunnen zijn en wat onoverzichtelijk maar wil alleen bij deze html ff een dropdown doen om te leren

css=

*

{
margin:0px;
padding:0px;
}

body

{
background-color:#f4f4f4;
}

.wrapper

{
width:1010px;

}


.logo a

{
background-image:url(logo.png);
width:457px;
height:145px;
float:right;
margin-right:145px;
}


.menu
{
background-image:url(menu.bg.png);
width:875px;
height:50px;
}

.menu ul li

{
float:left;
height:50px;

}

.menu ul li a
{
color:white;
margin-top:10px;
text-decoration:none;
font-family:"Century Gothic";
font-weight:bold;
height:32px;
padding-top:6px;
text-align:center;
}

.menu ul li a:hover
{
background-image:url(menu.bg1.png);
background-repeat:repeat-x;
height:32px;

}

a.selected
{
background-image:url(menu.bg1.png);
width:5px;
height:32px;
}

.home a
{
width:75px;
}

.overons a
{
width:100px;
}

.diensten a
{
width:95px;
}

.dagactiviteiten a
{
width:145px;
}

.scholing a
{
width:95px;
}

.fotoboek a
{
width:95px;
}

.vacatures a
{
width:110px;
}

.contact a
{
width:90px;
}

.link a
{
width:50px;
}

.contentleft

{
float:left;
}

.contentleft1
{
background-image:url(content1.png);
width:875px;
height:20px;
}

.contentleft2
{
background-image:url(content2.png);
background-repeat:repeat-y;
width:875px;
height:5px;
}

.contentleft3
{
background-image:url(content3.png);
width:875px;
height:20px;
background-repeat:no-repeat;
}

.contentmain1
{
padding-left:120px;
padding-top:120px;
}

.contentmain
{
float:left;
}
.contentmain2
{
float:left;
}
.contentmainleft
{
width:600px;
height:644px;

}




.titel
{
font-size: small;
margin-left:15px;
}

.titel1
{
font-size: small;
margin-left:15px;
}


.divider
{
background-image:url(divider1.png);
width:595px;
height:20px;
}


.contentmainleft .image
{
width: 267px;
height: 334px;
display: block;
float: left;
}

.contentmainleft img
{
border-style:none;
}

.contentmainleft .tekst
{
margin-left: 10px;
}

.contentmainleft .tekst p.first
{
float: left;
}

.contentmainleft ul
{
margin-left: 20px;
width: 300px;
display: block;
}

.contentmainleft ul li
{
margin-left: 20px;
}

.contentmainright

{
width:200px;
float:left;

}

.divider3

{
background-image:url(divider3.png);
width:20px;
height:400px;
float:left;
margin-top:40px;
}


.titel2
{
font-size: small;
margin-left:15px;
}


.recimg

{
background-image:url(foto2.png);
width:187px;
height:235px;
}

.contentrigth
{

}

.tekst
{
margin-left:15px;
}

.footer
{
background-image:url(footer.bg.png);
width:875px;
height:50px;
padding-left:250px;
padding-top:15px;
}

.footer a
{
color:black;
}

.footer a:hover
{
color:white;
text-decoration:none;
}

.sublink1
{
background-image:url(sublinks.bg1.png);
width:214px;
height:20px;
}

.sublink2
{
background-image:url(sublinks.bg2.png);
background-repeat:repeat-y;
width:214px;
height:700px;
}

.sublink3
{
background-image:url(sublinks.bg3.png);
width:214px;
height:20px;
}





.sub ul li a
{
color:white;
text-decoration:none;
font-family:"Century Gothic";
list-style-type:none;
width:205px;
height:30px;
}

.sub ul li a:hover
{
background-image:url(menu.bg1.png);
background-repeat:repeat-x;
height:30px;
}

.sub ul li a h4
{
margin-top:5px;
margin-left:20px;
color:#fff;
}

.sublinks
{
border-top:1px solid white;
}

.divider22

{
background-image:url(divider2.png);
width:210px;
height:20px;
float:right;
margin-top:0px;
}

.divider23

{
background-image:url(divider3.png);
width:20px;
height:400px;
float:right;
margin-top:0px;
}


.kir
{
background-image:url(kirsehir.jpg);
width:482px;
height:540px;
}



h2
{
margin-left:15px;
}


.biber1
{
background-image:url(biber.jpg);
width:200px;
height:195;
}



#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }


#outerImageContainer{ position: relative; background-color: #000; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0;
background:url("loading.gif") no-repeat; height:32px; width:32px; display:none;
}
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 50% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(nextlabel.gif) right 50% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #000; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;
background:url("closelabel.gif") no-repeat; height:22px;
}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

kan iemand me helpen??
 
Om 't maar recht voor z'n raap te zeggen: nee, ik kan je niet helpen :(
Althans: niet met deze code. Maar misschien wel met iets anders.

'n Menu met alleen html en css dat in alle browsers werkt is een van de moeilijkste dingen die er is. De code die jij hebt kan zo te zien onmogelijk werken in IE 6, wat helaas nog door 10-20% van de Nederlanders wordt gebruikt (afhankelijk van welke statistiek je gelooft).
Even zo'n menu maken kun je vergeten. Daarvoor is het absoluut noodzakelijk dat de code helemaal foutloos is. Zo mist er bij jou bijvoorbeeld 'n doctype. Dat betekent dat allerlei dingen anders gaan werken, niet volgens de standaard. Bij 'n alleen css/html-menu is dat dodelijk.

Zo'n menu is hoe dan ook al lastig, maar ik vind de css die jij hebt wel heel erg warrig. 't Lijkt op nogal oude css. Kan ook zijn dat, als ik 't 'n paar uur bestudeer, het wel prima blijkt te zijn.

Dat menu van cssplay is prima. Het werkt met 'n truc waardoor ook IE 6 zonder JavaScript met zo'n menu uit de voeten kan. Alleen is het nadeel dat de uitleg nogal beknopt is, en dat je de code niet kunt downloaden. Die moet je uit de pagina plukken.

Als het je alleen om de werking van zo'n menu met alleen css en html gaat, zonder JavaScript dus, heb ik 'n alternatief menu. Het werkt op exact dezelfde manier als dat van cssplay. Je kunt uitleg en code downloaden. 'n Werkend voorbeeld staat op
http://css-voorbeelden.nl/menu/dynamisch/horizontaal/menu-066.html
't Menu van cssplay is breder als 't opent, maar dat soort dingen kun je eenvoudig aanpassen.
Die code ken ik, want die heb ik zelf geschreven, dus als daar iets mee misgaat kan ik (waarschijnlijk) helpen zonder 't uren te moeten bestuderen (of iemand anders natuurlijk).
Als je geïnteresseerd bent in alleen css/html-menu's staan er op die site trouwens nog meer menu's. Maar voel je natuurlijk vooral vrij om dat menu van mij niet te gebruiken als je liever hiermee doorgaat.
 
Laatst bewerkt:
hmm bedankt ik ga het proberen maar daarvoor wou ik even zeggen

dat ik alleen IE8 gebruik en NotePad++ omdat ik nog nieuw ben leer ik eerst met IE8 te werken en ltr met andere browser

en doctype als ik dat toevoeg verpest het alles dan gaat alles door elkaar drm kan ik het niet gebruiken
 
Laatst bewerkt:
Nee, dat doctype verpest het juist niet, dat lijkt maar zo.
Tot zo'n tien jaar geleden had je de zogenaamde browseroorlog. Elke browsermaker deed maar wat en je moest letterlijk 'n aparte site maken voor elke browser, en vaak ook nog voor 'n bepaalde versie.
Uiteindelijk kwamen browsermakers overeen om zich aan 'n bepaalde standaard te houden. Die wordt door w3c bijgehouden. Maar dan moet je als websitemaker je ook aan die standaard houden, volgens de standaard html en css en zo schrijven.
Om aan te geven dat je dat doet, zet je bovenaan dat doctype neer.

Als je geen doctype neerzet, zeg je in feite dat je pagina minimaal tien jaar oud is, en dat elke browser zelf maar moet bekijken hoe hij er het beste van kan maken. Dat gebeurt dus ook bij jou. Je bekijkt iets in IE 8 zonder doctype. IE 8 'denkt' dan: "Hé, oude bagger, joepie, ik mag m'n gang gaan en 't lekker weergeven zoals ik wil."
Helaas denken IE 6, IE 7, Opera, Firefox, Safari, Google Chrome, enz. dat ook en ziet je pagina er dus in elke browser totaal anders uit. Er kunnen zelfs hele delen van je pagina gewoon verdwijnen.

Als je nu dat doctype toevoegt, gaat IE 8 zich opeens aan de standaard houden. Aan dezelfde standaard als waar de andere browsers zich aan houden. Je weet dan dus redelijk zeker dat het in alle browsers werkt.
Als je het zonder doctype werkend krijgt in IE 8, garandeer ik je dat het niet (goed) werkt in IE 6, IE 7, Opera, Safari, Firefox, enz. Als je het met doctype werkend krijgt in IE 8, is het vrijwel zeker dat het werkt in IE 7, Opera, Safari, Firefox en Google Chrome.
Voor IE 6 moet je vaak nog wat aparte aanpassingen maken, omdat die browser zich niet goed aan de standaard houdt en werkelijk stikvol bugs zit.

Als je 'n nieuwe pagina gaat maken is het eerste dat je dus MOET doen 'n doctype helemaal bovenaan zetten. Als je dat pas later doet, verandert de hele weergave.

Als je dat menu hebt gedownload staat er in de uitleg (en ook in de uitleg online) 'n hele serie hulpmiddelen om makkelijker sites te maken onder het kopje De code aanpassen aan je eigen ontwerp.

Notepad++ is trouwens prima om html en css mee te schrijven!
 
Laatst bewerkt:
ok dankje

maar wat ik niet begrijp is dat mn mentoren een website zonder doctype doen en bij hun lukt alles en bij mij ook ( bijna dan :p) maar dropdown menu lukt nu alleen bij mij bij FF ik weet ook niet waarom maar ik heb het heel anders gedaan gwn met ul en li erbij voegen en zo

maar toch bedankt voor je uitleg heb er zeker heel wat aan gehad :p dank je wel nogmaals
 
oja ff nog een kleine vraag als ik doctype moet gebruiken welke is het beste wnt ik zie dat er verschillende zijn
 
Je kan het beste een Strict-variant nemen, die geeft de beste garanties op dezelfde vertoning in verschillende browsers.
Zie voor de correcte aanroep de link DOCtype hieronder in m'n handtekening.

... maar wat ik niet begrijp is dat m'n mentoren een website zonder doctype doen ...
Klik om te vergroten...
Nou, dat begrijp ik ook helemaal niet! :shocked:
Volgens mij zou een mentor er als eerste op moeten wijzen dat een echte website voldoet aan de html-standaarden. Een webpagina zonder doctype is geen valid html (probeer maar met de html-validator) ...
Stuur de link naar deze reactie maar aan 'm/'r door! ;)

Met vriendelijke groet,
CSShunter
 
Bijkomend voordeel van 'n strict doctype is dat je dan probleemloos kunt overstappen naar de volgende versie van html, zonder dat je je halve site hoeft te overherverbouwen.
Ik snap dat ook niet (van die mentoren). Maar ik heb persoonlijk het idee gekregen dat het onderwijs in websites in Nederland ongeveer 50 jaar achterloopt.
't Zijn vaak leraren die 't erbij doen. Zo'n vier-vijf jaar geleden heb ik werk gezien van 'n 'echte' vakdocent op 'n hbo-opleiding in Amsterdam. Ik veroorloof me enige dichterlijke vrijheid bij de reacties van betreffende leraar, maar inhoudelijk geven ze z'n reacties wel weer.
Doctype? Wat is dat? O, wacht even, dat is geloof ik in de aanbieding bij de Hema deze week.
Afbeeldingen in bmp-formaat. Ja, dan moeten ze maar Internet Explorer gebruiken, kom nou.
Ik begeleidde toen iemand die OS X (mac) gebruikte. Zo liep ik er ook tegenaan, want haar programma's 'werkten niet'. Docent: ja, maar daar kan ik niets aan doen, op 'n Apple kun je nou eenmaal geen sites maken.
En dit was dus eerlijk waar 'n vakdocent in 't bouwen van sites. Je begint 't hoge gebruik van antidepressiva in Nederland ook gelijk te begrijpen.
 
Laatst bewerkt:
oops:o was foutje ze hadden me het nog niet geleerd omdat ik nu alleen met IE werkte was het niet nodig ze hebben me het uitgelegd :D

Dank u wel voor uw hulp en uw tijd ;)
 
Ik wil je niet opzetten tegen je mentoren, maar dit is dus gewoon onzin. Ik zie dat wel vaker als docenten op 'n fout worden betrapt. Dan komen ze met 'n vreemd verhaal waarom 't toch klopt.
Zonder doctype geeft vooral Internet Explorer het op 'n andere manier weer. Het doctype is dus JUIST nodig in Internet Explorer.
Zonder doctype worden bijvoorbeeld marge, padding en border bij de breedte opgeteld.
Met doctype gebeurt dat niet.
Zonder doctype wordt
{width: 100px; margin: 10px; pad;ding: 10px; border: black solid 1px;}
dus 100 + 10 + 10 + 10 + 10 + 1 + 1 = 142 px breed.
Met doctype wordt 't gewoon 100 px breed, omdat margin en zo van de breedte worden afgetrokken.
Dat levert dus, juist in Internet Explorer, 'n compleet andere lay-out op.
Als je dus in IE iets maakt zonder doctype en 't later toevoegt, kun je vrijwel zeker helemaal opnieuw beginnen.
En zo zijn er nog veel meer verschillen.
Maar je mentoren staan niet alleen, helaas. Vorige week 'n docent van 'n cursus html. Tabellen zijn niet verouderd voor de lay-out. Dat was zo, maar nu worden ze weer gebruikt. En dat ging om 'n betaalde cursus. Niet te geloven. (Voor de zekerheid: tabellen voor lay-out wordt al zo'n tien jaar afgeraden...)
De moraal van het verhaal: blijf vooral zelf opletten en vragen stellen. Heel veel docenten weten helaas nauwelijks hoe ze 'n goede site moeten maken.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan