veysie
14 October 2014, 16:27
Hallo
Een vriendin van me is een site aant maken en we hebben problemen met het menu programma!
Als je erop gaat zie je de 4 datums maar bij de laatste datum zou er nog een uitsprong moeten zijn met de onderverdeling. Nu dit lukt totaal niet.
Ook als we het venster verkleinen verkleint het menu niet goed mee.
Hopelijk kunnen jullie helpen.
We zijn alle2 beginnend site makers :)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Wortegemsen Feesten - home</title>
<meta charset="UTF-8">
<meta name="description" content="Wortegemsen Feesten">
<meta name="keywords" content="vedettenparade, sneukeltocht, feesten, Wortegem">
<meta name="author" content="Lindsey">
<link href="design.css" rel="stylesheet" type="text/css" >
<link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<img class="wortfeest" src="images/banner.jpg" alt="wortegemsenfeesten">
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="programma.html">programma</a>
<ul>
<li><a href="nachtvddjs.html">9 mei 2015</a></li>
<li><a href="sneukeltocht.html">10 mei 2015</a></li>
<li><a href="euromundi.html">16 mei 2015</a></li>
<li><a href="dolledag.html">17 mei 2015</a>
<ul>
<li><a href="vedettenparade.html">vedettenparade</a></li>
<li><a href="straattheater.html">straattheater</a></li>
<li><a href="citroenworp.html">citroenworp</a></li>
</ul></li>
</ul>
</li>
<li><a href="fotos.html">foto's</a></li>
<li><a href="sponsors.html">sponsors</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<div id="center">
<section>
<h1>Wortegemsen Feesten</h1>
<p>Wortegemsen Feesten is aan zijn 40ste editie toe.
Ook dit jaar hebben we voor u een mix aan optredens.
Alle info vindt u op deze site.</p>
<br>
</section>
</div>
<footer>
<p><strong>Wortegemsen Feesten</strong> - vzw Ons Dorp - Processiestraat, Wortegem-Petegem - info@wortegemsenfeesten.com</p>
</footer>
</body>
</html>
CSS:
body{background-color:rgb(87,198,61);
font-family: 'Cousine', monospace ;
margin:0px;}
img.wortfeest{
position:relative;
width:100%;
margin: 0 auto;
}
img.vedet{
position:relative;
width:100%;
margin: 0 auto;
}
nav{
position:relative;
width:100%;
font-family: 'Cousine', monospace;
background-color:rgb(213,123,26);
height:60px;
line-height:60px;
z-index:10;}
nav ul{
list-style:none;
width:80%;
margin: 0 auto;
padding:0;
text-align:center;}
nav ul li{
position: relative;
display:inline-block;
width:200px;
font-size:18px;}
nav ul li:hover{
background-color:rgb(254,237,0);
color:rgb(213,123,26);}
nav ul li ul{
display:none;
position:absolute;
}
nav ul li:hover ul{
display:block;
width:auto;
padding:0;
background-color:rgb(254,237,0);}
nav ul li ul li:hover{background-color:rgb(213,123,26);}
nav ul li ul li ul, nav ul li ul li ul li{
display:none;
position:absolute;
}
nav ul li ul li:hover ul{
display:block;
width:auto;
padding:0;}
nav ul li ul li:hover ul li{
display:block;
padding:0;
background-color:purple;}
nav ul li ul li ul li:hover{background-color:blue;}
nav ul li a{color:rgb(254,237,0); text-decoration:none; margin: 0 auto;}
nav ul li:hover a{color:rgb(213,123,26);}
nav ul li ul li a{font-size:14px;}
nav ul li ul li:hover a{color:rgb(254,237,0);}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
h1{color: rgb(235,123,10);
text-align:center;
font-size:250%;}
h2,h3{color: rgb(254,237,0);}
p{ font-weight: normal;}
/*positie, daarna vaste breedte(1200px) voor computerscherm*/
div#center{position:relative;
width:1200px;
margin:0px auto 0px auto;
box-shadow: 0px 3px 10px #040505;
text-align:center;}
section{
position:absolute;
width:1100px;
padding:30px;
background-color:green;
margin-top:30px;
}
footer{
position:fixed;
bottom:0px;
width:100%;
background-color: rgb(56,124,40);
font-family:"Ludica Console", "Courier New", monospace;
color: white;
text-align: center;
height:40px;}
Een vriendin van me is een site aant maken en we hebben problemen met het menu programma!
Als je erop gaat zie je de 4 datums maar bij de laatste datum zou er nog een uitsprong moeten zijn met de onderverdeling. Nu dit lukt totaal niet.
Ook als we het venster verkleinen verkleint het menu niet goed mee.
Hopelijk kunnen jullie helpen.
We zijn alle2 beginnend site makers :)
index.html
<!DOCTYPE html>
<html>
<head>
<title>Wortegemsen Feesten - home</title>
<meta charset="UTF-8">
<meta name="description" content="Wortegemsen Feesten">
<meta name="keywords" content="vedettenparade, sneukeltocht, feesten, Wortegem">
<meta name="author" content="Lindsey">
<link href="design.css" rel="stylesheet" type="text/css" >
<link href='http://fonts.googleapis.com/css?family=Cousine:400,700' rel='stylesheet' type='text/css'>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<img class="wortfeest" src="images/banner.jpg" alt="wortegemsenfeesten">
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="programma.html">programma</a>
<ul>
<li><a href="nachtvddjs.html">9 mei 2015</a></li>
<li><a href="sneukeltocht.html">10 mei 2015</a></li>
<li><a href="euromundi.html">16 mei 2015</a></li>
<li><a href="dolledag.html">17 mei 2015</a>
<ul>
<li><a href="vedettenparade.html">vedettenparade</a></li>
<li><a href="straattheater.html">straattheater</a></li>
<li><a href="citroenworp.html">citroenworp</a></li>
</ul></li>
</ul>
</li>
<li><a href="fotos.html">foto's</a></li>
<li><a href="sponsors.html">sponsors</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<div id="center">
<section>
<h1>Wortegemsen Feesten</h1>
<p>Wortegemsen Feesten is aan zijn 40ste editie toe.
Ook dit jaar hebben we voor u een mix aan optredens.
Alle info vindt u op deze site.</p>
<br>
</section>
</div>
<footer>
<p><strong>Wortegemsen Feesten</strong> - vzw Ons Dorp - Processiestraat, Wortegem-Petegem - info@wortegemsenfeesten.com</p>
</footer>
</body>
</html>
CSS:
body{background-color:rgb(87,198,61);
font-family: 'Cousine', monospace ;
margin:0px;}
img.wortfeest{
position:relative;
width:100%;
margin: 0 auto;
}
img.vedet{
position:relative;
width:100%;
margin: 0 auto;
}
nav{
position:relative;
width:100%;
font-family: 'Cousine', monospace;
background-color:rgb(213,123,26);
height:60px;
line-height:60px;
z-index:10;}
nav ul{
list-style:none;
width:80%;
margin: 0 auto;
padding:0;
text-align:center;}
nav ul li{
position: relative;
display:inline-block;
width:200px;
font-size:18px;}
nav ul li:hover{
background-color:rgb(254,237,0);
color:rgb(213,123,26);}
nav ul li ul{
display:none;
position:absolute;
}
nav ul li:hover ul{
display:block;
width:auto;
padding:0;
background-color:rgb(254,237,0);}
nav ul li ul li:hover{background-color:rgb(213,123,26);}
nav ul li ul li ul, nav ul li ul li ul li{
display:none;
position:absolute;
}
nav ul li ul li:hover ul{
display:block;
width:auto;
padding:0;}
nav ul li ul li:hover ul li{
display:block;
padding:0;
background-color:purple;}
nav ul li ul li ul li:hover{background-color:blue;}
nav ul li a{color:rgb(254,237,0); text-decoration:none; margin: 0 auto;}
nav ul li:hover a{color:rgb(213,123,26);}
nav ul li ul li a{font-size:14px;}
nav ul li ul li:hover a{color:rgb(254,237,0);}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
h1{color: rgb(235,123,10);
text-align:center;
font-size:250%;}
h2,h3{color: rgb(254,237,0);}
p{ font-weight: normal;}
/*positie, daarna vaste breedte(1200px) voor computerscherm*/
div#center{position:relative;
width:1200px;
margin:0px auto 0px auto;
box-shadow: 0px 3px 10px #040505;
text-align:center;}
section{
position:absolute;
width:1100px;
padding:30px;
background-color:green;
margin-top:30px;
}
footer{
position:fixed;
bottom:0px;
width:100%;
background-color: rgb(56,124,40);
font-family:"Ludica Console", "Courier New", monospace;
color: white;
text-align: center;
height:40px;}