dropdown menu er in verwerken

Door Martijn van H op 17-06-2013 14:05

1.244 views

Beste users,

Ik zou graag een dropdown menu aan mijn htm/html website willen toevoegen maar dit lukt mij niet.
Kan iemand mij hier mee helpen?

Bij deze dan ook mijn index.htm + styles.css

Ik hoor/zie graag jullie reacties.

Alvast bedankt,

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">

<SCRIPT language=JavaScript>
function makeArray() {for (i = 0; i<makeArray.arguments.length; i++)this[i] = makeArray.arguments[i];}

function getFullYear(d) {
var y = d.getYear();
if (y < 1000) {y += 1900};
return y;}

//var zone = "EDT";
var days = new makeArray("Zondag","Maandag","Dinsdag","Woensdag","Donderdag","Vrijdag","Zaterdag");
var months = new makeArray("Januari","Februari","Maart","April","Mei","Juni","July","Augustus","September","Oktober","November","December");

function format_time(t) {

var Day = t.getDay();
var Date = t.getDate();
var Month = t.getMonth();
var Year = t.getFullYear();

timeString = "";
timeString += days[Day];
timeString += ", ";
timeString += " ";
timeString += Date;
timeString += " ";
timeString += months[Month];
timeString += ", ";
timeString += " ";
timeString += Year;
return timeString;}
</SCRIPT>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr><td height="180" valign="top" background="images/headerfill.jpg"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr><td valign="middle" align="center" width="100%"><img name="companyname" src="images/companyname.png" width="1000" height="140" border="0"></td></tr></table></td></tr>

<tr> 
<td height="18" valign="middle" bgcolor="#08088A" class="menutext" nowrap>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="index.htm" class="menutext">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="algemenevoorwaarden.htm" class="menutext">Algemene voorwaarden</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="ontwerpen.htm" class="menutext">Ontwerpen</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="tarieven.htm" class="menutext">Tarieven</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="onderhoud.htm" class="menutext">Onderhoud</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="overons.htm" class="menutext">Over ons</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<a href="links.htm" class="menutext">Links</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="offerte.php" class="menutext">Offerte aanvragen</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="contact.htm" class="menutext">Contact</a> </td></tr>
<tr> 

<td height="22"> 
<table width="100%" border="0" cellspacing="0" cellpadding="5" height="100%">
<tr><td valign="middle" align="right" class="title"> 
<script language=JavaScript><!--d = new Date();document.write(format_time(d));// --></script></td></tr></table></td></tr>
  
<tr><td valign="top"> 
<table width="100%" border="0" cellspacing="0" cellpadding="25" height="100%">
<tr><td valign="top" class="text" height="355">
<p><span class="title">Welkom bij</span> </p>
<p class="text"> tekst.<br>

<br><br> <span class="subtitle">subtitle </span> 

<li class="bullet">1</li>
<li class="bullet">2</li>
<li class="bullet">3</li>
<li class="bullet">4</li>
<li class="bullet">5</li></ul>
<br>

 
</html>

.title 
{font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-weight: bold; 
color: #49452C}


.subtitle 
{font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-weight: bold; 
color: #7C7449}

.bullet 
{list-style-image: url(images/bullet.jpg)}

.text 
{font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
line-height: 19px}

a:hover 
{color: #BD4802; 
text-decoration: none}

.footer 
{font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 10px; 
line-height: normal; 
color: #FFFFFF; 
font-weight: normal; 
text-decoration: none}

.menutext 
{font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-weight: bold; 
color: #FFFFFF; 
text-decoration: none}

.menutext:hover 
{color: #DAD6C0; 
text-decoration: none}

a
{font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 11px; 
color: #5A2301; 
text-decoration: underline}

Ariën

17-06-2013 14:06 gewijzigd op 17-06-2013 14:07

Wat lukt er niet aan, en wat heb je al geprobeerd?

Ook ben ik benieuwd waarom je table's gebruikt, is dat niet een beetje oud?

Martijn van H

17-06-2013 14:11

Beste Aar,

ik heb het volgende geprobeerd:

<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">The Team</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Vision</a></li>
        </ul>
    </li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Cozy Couch</a></li>
            <li><a href="#">Great Table</a></li>
            <li><a href="#">Small Chair</a></li>
            <li><a href="#">Shiny Shelf</a></li>
            <li><a href="#">Invisible Nothing</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a>
        <ul>
            <li><a href="#">Online</a></li>
            <li><a href="#">Right Here</a></li>
            <li><a href="#">Somewhere Else</a></li>
        </ul>
    </li>
</ul>

ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}

Maar hier komt de box niet naar beneden toe als je er met je muis op staat.
Ik ben zelf echt A technisch, dus wat bedoel je met je table's?

Ik heb een template van het internet afgehaald en dit maar eens uitgevouwen en zo stukje bij beetje verder te komen.

Ik hoop op een reactie van je,

Alvast bedankt,

Martijn van H.

Ariën

17-06-2013 14:14 gewijzigd op 17-06-2013 14:16

Table's zijn leuk voor tabulaire overzichten, zoals prijs-overzichten en andere staatjes, niet meer voor het indelen van een layout. Daarvoor hebben we div'jes en CSS.
En als die herhaaldelijke spaties (nbsp) zie, dan gaan mijn vingers toch wel even jeuken.

Maar heb je een voorbeeld die we kunnen bekijken?

Martijn van H

17-06-2013 14:31

Hi Aart,

Zie deze link: http://martijn.lecoutrecht.nl/

Ik hoor graag meer van je,

Alvast bedankt,

Martijn van H.

Ariën

17-06-2013 14:37

Ik zie toch echt een hoop fouten in je HTML.
- Doctype mist.
- Niet valid.
- <ul> tag mist
- onnodige breaks als spaties, je kan je bovenste menu net zo goed met float:left horizontaal positioneren.

Martijn van H

17-06-2013 14:40

Aart,

Bedankt voor je reactie, zoals ik in deel 1 al aangaf ben ik A technisch hierin.
Vandaar ook PHP HULP, hierbij in de hoop dat jij/jullie me kunnen helpen met mijn vraag over het dropdown menu.

Voor de rest ben ik zelf al blij met wat ik heb kunnen doen.

Ik hoop graag dat je me verder kan helpen met het dropdown menu wat ik erin wil verwerken.

Alvast bedankt,

Martijn van H.

Ariën

17-06-2013 14:45

We willen je heus wel helpen, maar het spreekt voor zich dat we geen afhaalbalie zijn.
En je geeft zelf al aan dat je A-technisch bent, dat kan... maar heb je zelf al eens gedacht om eens goed HTML te leren?

Grote kans dat het dan wel lukt, want zonder kennis gaat het niet echt makkelijk lukken....

Martijn van H

17-06-2013 14:48

Nee ik begrijp dat jullie geen afhaalbalie zijn Aart, maar iets geeft een probleem als ik de drop down menu erin verwerkt dat hij niet werkt. Daarbij kunnen jullie me toch wel helpen?

:(

Alvast bedankt,

Martijn van H.

Ariën

17-06-2013 14:50 gewijzigd op 17-06-2013 14:50

Het is trouwens: Aar of Ariën... ;-)

Maar ik heb al wat tips gegeven, heb je die dan al toegepast? En wat wil je nou op je site laten uitklappen? Ik zie een menu bovenaan wat geen list is, en een complete list daaronder.

Wat wil je nou precies....?

Martijn van H

17-06-2013 14:52

Sorry ik dacht dat er Aart stond, ik heb me 0-0 niet op.

Maar ik zou dit willen: http://csswizardry.com/demos/css-dropdown/
Ga op About staan en dan zie je het.

Alvast bedankt,

Martijn van Heumen

Reageren

Inloggen om te reageren