Drop down van site

Status
Niet open voor verdere reacties.
W

webpagedesigner

Gebruiker
Lid geworden
18 feb 2010
Berichten
94
Ik heb weer een mooie site gevonden met diverse dropdowns

http://www.cssmenumaker.com/drop_down_css_menu.php

Mijn code werkt niet
Wie kan me zeggen wat ik moet doen om het werkent te krijgen

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">
<!-- 
.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;} 
-->
</style>
<title>Untitled</title>
</head>
<body>

</body>
</html>
 
Laatst bewerkt door een moderator:
Het werkt bij mij ook niet, want de html mist :D
Oftewel: daar is zo niets van te zeggen (hoewel ik zo wel even ga raden).
'werkt niet': wat bedoel je? Vliegt het niet? Zaait het geen doperwten? Is het gewoon lui en wil het in bed blijven liggen? Oftewel: 'n iets minder vage omschrijving zou handig zijn.
Toch even proberen. Ik zie .menu :hover met 'n spatie voor de :hover. Op meerdere plaatsen. Voor :hover mag geen spatie staan, dan werkt het niet. Dus het moet .menu:hover zijn, aan elkaar.
Idem ul :hover -> ul:hover, enz.

Overigens is je doctype niet compleet. Dit moet zijn:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Veel beter is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Het laatste geeft je 'n foutmelding bij valideren als je verouderde (al tien jaar afgeraden) tags gebruikt. In html5, wat momenteel wordt ingevoerd, kunnen die tags niet meer worden gebruikt, dus je bespaart je heel veel ombouwwerk als je ze nu al niet meer gebruikt.
 
srry

ik snap helemaal niet wat u bedoelt

ik gebruik HTML Kit
Ik werk met de nieuwste internet explore 7 geloof ik
ik heb windows vista, erg interessant :p

Nou nu mijn vraag, dat DOCTYPE staat automatische in html kit

Ik heb een beetje verstand van HTML, ik snap alleen de kleuren in dit script

Hoe kan ik <a href="naam.htm aanroepen in dit menu, dat was de volgende vraag die ik wou stellen

Alvast bedankt
 
Ah, ik snap het.
Wat betreft dat doctype: ik ken htmlkit niet, maar dat staat redelijk goed bekend. Ik neem aan dat je dan ergens kunt instellen dat het doctype wordt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">, met het tweede deel. 'n Onvolledig doctype geeft in sommige gevallen verschillen in weergave tussen verschillende browsers.

Ik heb even wat gedownload vanaf die site die je noemt (die trouwens prima menu's maakt). Dan krijg je 'n html-bestand en 'n css-bestand.
Wat jij hier hebt gepost is alleen de css. En daar zitten dus fouten in: die spatie voor :hover. Die moet er echt uit, anders werkt dat gewoon niet.

Daarnaast heb je van die site 'n html-bestand gekregen. Ik ken htmlkit niet, maar dat bestand moet je dus op een of andere manier openen in htmlkit. En in dat bestand ga je de <a href wijzigen. Dat kan niet in de css.

De html bevat de links en zo, de <a href
De css is om te zorgen dat het menu er goed uitziet en dat het werkt.

Als 't nou werkt als die spatie voor :hover weg is, prima. Als 't dan nog niet werkt, dan moet je hier de html én de css neerzetten, of 'n link geven naar waar het online staat.
 
Beste mr.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<style type="text/css">
<!-- 
.bg {background: url(images/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}

.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}

.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 

.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;} 
-->
</style>
<title>Untitled</title>
</head>
<body>

</body>
</html>


Dit is dus css

Ik zie ontsettend veel wat u noemt
Ik kreeg een gezipt bestand die ik hier niet naar toe kan verwijzen


http://www.cssmenumaker.com/builder/menu_info.php?menu=007

Dit is het bestand dat u moet downloaden om het zip binnen te halen
 
Laatst bewerkt door een moderator:
Ik had iets staan, maar ik begin even helemaal opnieuw.
Als ik dat menu van jou download, dan zie ik dat daar 'n php-bestand in zit. php kán niet werken in je eigen computer, dat werkt alleen maar waar je je site hebt staan, op 'n server. En niet alle servers ondersteunen php, dus zelfs als je het online zet is het nog niet zeker dat het werkt.
(Je kunt ook zelf 'n server installeren op je computer, maar dat is weer 'n verhaal apart.)

Los daarvan zitten er fouten in je css. menu :hover en ul :hover kúnnen niet werken, omdat er 'n spatie voor :hover staat. Dat móét zijn: menu:hover en ul:hover, zonder spatie.

Ik kan dat menu wel gaan downlaoden (en dat heb ik ook gedaan, om het even te bekijken), maar dat menu werkt prima.
Als het bij jou niet werkt, komt dat omdat php bij jou op je eigen computer niet werkt. En het werkt hoe dan ook niet vanwege die spaties voor :hover.
Je hebt dus kans dat het gewoon werkt als je het online zet (mits je die spatie voor :hover weghaalt, en mits je hoster php ondersteunt).

Als het niet werkt als je die spatie hebt weggehaald en als het online staat, dan is echt 'n link naar waar het online staat nodig.
Als ik die zip download en ga bekijken, dat zit ik de code van die menumakers te bekijken, niet jouw code. En de code van dat menu is prima. Dus als die spatie weg is en het staat online en het werkt nog niet, dan is er iets mis met jouw code, en dan is echt jouw volledige code nodig. Oftewel: 'n link naar waar die online staat.

Ik kan me voorstellen dat dit vreselijk ingewikkeld klinkt als je net begint, en dat is ook wel zo. Misschien kun je 'n ander menu kiezen waarin geen php-bestanden zitten. Dat kun je namelijk wel gewoon op je eigen computer gaan bewerken en draaiend krijgen. En als 't dan niet lukt kun je hier wel simpel álle css en html neerzetten.
 
Laatst bewerkt:
bedankt voor uw moeite

ik zoek wel verder....

zo'n menu lijkt me helemaal wat, helaas heb ik er nog niet echt verstand van

alleen van de html, gedeelte


bedankt
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan