dropdown menu er in verwerken
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,
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>
<a href="index.htm" class="menutext">Home</a> |
<a href="algemenevoorwaarden.htm" class="menutext">Algemene voorwaarden</a> |
<a href="ontwerpen.htm" class="menutext">Ontwerpen</a> |
<a href="tarieven.htm" class="menutext">Tarieven</a> |
<a href="onderhoud.htm" class="menutext">Onderhoud</a> |
<a href="overons.htm" class="menutext">Over ons</a> |
<a href="links.htm" class="menutext">Links</a> |
<a href="offerte.php" class="menutext">Offerte aanvragen</a> |
<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>
<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>
<a href="index.htm" class="menutext">Home</a> |
<a href="algemenevoorwaarden.htm" class="menutext">Algemene voorwaarden</a> |
<a href="ontwerpen.htm" class="menutext">Ontwerpen</a> |
<a href="tarieven.htm" class="menutext">Tarieven</a> |
<a href="onderhoud.htm" class="menutext">Onderhoud</a> |
<a href="overons.htm" class="menutext">Over ons</a> |
<a href="links.htm" class="menutext">Links</a> |
<a href="offerte.php" class="menutext">Offerte aanvragen</a> |
<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>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.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}
{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}
Ook ben ik benieuwd waarom je table's gebruikt, is dat niet een beetje oud?
Gewijzigd op 17/06/2013 14:07:23 door - Ariën -
ik heb het volgende geprobeerd:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
<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>
+
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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;
}
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.
En als die herhaaldelijke spaties (nbsp) zie, dan gaan mijn vingers toch wel even jeuken.
Maar heb je een voorbeeld die we kunnen bekijken?
Gewijzigd op 17/06/2013 14:16:34 door - Ariën -
Zie deze link: http://martijn.lecoutrecht.nl/
Ik hoor graag meer van je,
Alvast bedankt,
Martijn van H.
- Doctype mist.
- Niet valid.
- <ul> tag mist
- onnodige breaks als spaties, je kan je bovenste menu net zo goed met float:left horizontaal positioneren.
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.
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....
:(
Alvast bedankt,
Martijn van H.
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....?
Gewijzigd op 17/06/2013 14:50:45 door - Ariën -
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
In dat geval haal je je oude code weg, en bouw je het stap voor stap in :-)
Gewijzigd op 17/06/2013 15:16:58 door - Ariën -
in me .css of in me .html?
Martijn van H op 17/06/2013 15:17:10:
Waar moet ik beginnen?
Deze site legt mooi uit waar/wanneer je dingen met HTML regelt, of met CSS
http://sceneone.nl/
Kijk zeker naar "Positionering"