Anneke vD
04-21-2011, 09:42 PM
Hi!
I hope someone is willing to help me with a CSS problem I have with a horizontal drop down menu. I'm new in this and can need some help!
The following link shows how I would like to have it. However, this only works in firefox and the CSS is a mess...
http://www.dekersenkraam.nl/new/index.html
In short, this is the my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style - kopie2_2.css" rel="stylesheet" type="text/css" />
<title>Kersenboomgaard Rhijnestein</title>
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="../index.html"><b>Home</b></a></li>
<li><a href="../index.html"><b>De boomgaard</b></a>
<ul>
<li><a href="../boomgaard/geschiedenis.html">Toen en nu</a></li>
<li><a href="../boomgaard/kersensoorten.html">Kersensoorten</a></li>
<li><a href="../boomgaard/omgeving.html">Omgeving</a></li>
<li><a href="../boomgaard/terechtanders.html">Terecht Anders</a></li>
</ul>
</li>
<li><a href="../kraam.html"><b>De kraam</b></a></li>
<li><a href="../fotos.html"><b>Foto's</b></a>
<ul>
<li><a href="../fotos/oudedoos.html">Oude doos</a></li>
<li><a href="../fotos/seizoenen.html">Seizoenen</a></li>
<li><a href="../fotos/kersenkraam.html">Kersenkraam</a></li>
</ul>
</li>
<li><a href="../contact.html"><b>Contact</b></a></li>
<li><a href="../gastenboek.html"><b>Gastenboek</b></a></li>
</ul>
</body>
</html>
and this the incomplete CSS:
body {
background-color:#a6bf79;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px 10px;
padding: 0px;
}
.clear{clear:both;}
* {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
text-align: left;
width: 717px;
}
a{
font-size: 12px;
}
p{
margin: 15px 0px;
}
#header {
margin: 0px 0px 0px 0px;
background-image:url(images/header.jpg);
width:717px;
height:288px;
position:relative;
}
#nav, #nav ul {
padding: 5px 0 0 0;
margin: 0;
list-style: none;
}
Can someone please help me with the right CSS, which is working in both Firefox and Explorer?
Thanks in advance,
Anneke
I hope someone is willing to help me with a CSS problem I have with a horizontal drop down menu. I'm new in this and can need some help!
The following link shows how I would like to have it. However, this only works in firefox and the CSS is a mess...
http://www.dekersenkraam.nl/new/index.html
In short, this is the my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style - kopie2_2.css" rel="stylesheet" type="text/css" />
<title>Kersenboomgaard Rhijnestein</title>
</head>
<body>
<div id="container">
<div id="header">
<ul id="nav">
<li><a href="../index.html"><b>Home</b></a></li>
<li><a href="../index.html"><b>De boomgaard</b></a>
<ul>
<li><a href="../boomgaard/geschiedenis.html">Toen en nu</a></li>
<li><a href="../boomgaard/kersensoorten.html">Kersensoorten</a></li>
<li><a href="../boomgaard/omgeving.html">Omgeving</a></li>
<li><a href="../boomgaard/terechtanders.html">Terecht Anders</a></li>
</ul>
</li>
<li><a href="../kraam.html"><b>De kraam</b></a></li>
<li><a href="../fotos.html"><b>Foto's</b></a>
<ul>
<li><a href="../fotos/oudedoos.html">Oude doos</a></li>
<li><a href="../fotos/seizoenen.html">Seizoenen</a></li>
<li><a href="../fotos/kersenkraam.html">Kersenkraam</a></li>
</ul>
</li>
<li><a href="../contact.html"><b>Contact</b></a></li>
<li><a href="../gastenboek.html"><b>Gastenboek</b></a></li>
</ul>
</body>
</html>
and this the incomplete CSS:
body {
background-color:#a6bf79;
color:#000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 10px 10px;
padding: 0px;
}
.clear{clear:both;}
* {
margin: 0px;
padding: 0px;
}
#container {
margin: 0px auto;
text-align: left;
width: 717px;
}
a{
font-size: 12px;
}
p{
margin: 15px 0px;
}
#header {
margin: 0px 0px 0px 0px;
background-image:url(images/header.jpg);
width:717px;
height:288px;
position:relative;
}
#nav, #nav ul {
padding: 5px 0 0 0;
margin: 0;
list-style: none;
}
Can someone please help me with the right CSS, which is working in both Firefox and Explorer?
Thanks in advance,
Anneke