Merijnbosma
Gebruiker
- Lid geworden
- 7 jun 2011
- Berichten
- 189
Hallo,
Ik ben bezig met een website (beginnende fase) maar krijg de menubalk niet goed in de header naast het logo. Het menu staat er wel maar de vervolgens valt de css van een paar divs samen. De div header houd zijn css tot de menubalk begint en dan pakt ie de css van de div # group die eronder staat, volgens mij heb ik de divs goed gescheiden maar zal wel iets doms over het hoofd zien, Ik ben al tijden niet met dit werk bezig geweest en dat zal er dan ook wel vanaf spatten
Hier onder de html en daaronder de css, zoals ik al zei staan er nog veel fouten in en dingen die half af zijn etc etc etc. Belangrijkste is eerst de menubalk. Maar natuurlijk is het niet erg als iemand andere fouten ziet en verbeterd
En de css
Ik ben bezig met een website (beginnende fase) maar krijg de menubalk niet goed in de header naast het logo. Het menu staat er wel maar de vervolgens valt de css van een paar divs samen. De div header houd zijn css tot de menubalk begint en dan pakt ie de css van de div # group die eronder staat, volgens mij heb ik de divs goed gescheiden maar zal wel iets doms over het hoofd zien, Ik ben al tijden niet met dit werk bezig geweest en dat zal er dan ook wel vanaf spatten
Hier onder de html en daaronder de css, zoals ik al zei staan er nog veel fouten in en dingen die half af zijn etc etc etc. Belangrijkste is eerst de menubalk. Maar natuurlijk is het niet erg als iemand andere fouten ziet en verbeterd
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<title>Het Appèl van Twente</title>
<meta charset="utf-8"><meta>
<link rel="stylesheet" type="text/css" href="avt-resp3.css">
</head>
<body>
<div id="attempt">
<div id="header"><img class="logo" src="Avt_Logo.jpg" alt="** PLEASE DESCRIBE THIS IMAGE **"></div>
<div id="attemp1">
<ul class="menu">
<li class="menu"><a class="menu" href="">Missie, Visie en Doel</a></li>
<li class="menu"><a class="menu" href="">Wat doet Appèl van Twente?</a></li>
<li class="menu"><a class="menu" href="">Partners</a></li>
<li class="menu"><a class="menu" href="">Voorbeeldprojecten</a></li>
<li class="menu"><a class="menu" href="">Nieuws</a></li>
<li class="menu"><a class="menu" href="">Contact</a></li>
</ul>
</div>
</div>
<div id="group"></div>
<div class="welkom" id="group">
<h4>Welkom bij Het Appèl van Twente</h4>
<p>Het Appèl van Twente is een groep van ervaren, op elkaar ingewerkte specialisten op het gebied van de ontwikkeling van groene ruimte met een maatschappelijke meerwaarde in stad en land.</p>
<a class="lees" href="">Lees verder</a></div>
<div id="group">
<div class="left">
<h4>Missie</h4>
<p>De missie van het Appel van Twente is de kansen benutten om samen de ruimte in stad en land tot grotere bloei te brengen, te vergroenen en te verduurzamen. Wij doen een appèl op de samenleving in Twente, om te verbinden, om samen een transitie te bewerkstelligen, ieder vanuit eigen kracht en op deze manier nieuwe uitdagingen aan te gaan en kansen te grijpen.</p>
<a class="lees" href="">Lees verder</a></div>
<div class="middle">
<h4>Doel</h4>
<p>Het doel van het Appèl van Twente is om de relatie tussen mens en haar natuurlijke omgeving te versterken voor een duurzame samenleving. Dit wil zij bereiken door:</p>
<a class="lees" href="">Lees verder</a></div>
<div class="right">
<h4>Visie</h4>
<p>Onze visie hierachter is de sterke behoefte van mensen aan contact met de natuurlijke leefomgeving. Mensen zijn zich steeds meer bewust van de voortschrijdende verschraling van de natuur en willen er iets tastbaars, zichtbaars en voelbaars aan doen. Maar met wie, wat en hoe? Het Appèl van Twente heeft kennis en ervaring om hier de juiste richting en inhoud aan te helpen geven.</p>
<a class="lees" href="">Lees verder</a></div>
</div>
<div id="group">
<div class="left">
<h4>Doel</h4>
<p>Het doel van het Appèl van Twente is om de relatie tussen mens en haar natuurlijke omgeving te versterken voor een duurzame samenleving. Dit wil zij bereiken door:</p>
<ul>
<li>
<p>Gezamenlijk plannen</p>
<p>Door het bevorderen van integrale planning met burgers, gebruikers en andere belanghebbende partijen ontstaat een groter maatschappelijk bewustzijn, participatie en daadkracht voor meer en duurzamer groen in de ruimtelijke ordening. Met als resultaat een eigentijdse variant van tuinsteden en tuindorpen.</p>
</li>
</ul>
</div>
<div class="middle">
<h4>Doel</h4>
<p>Het doel van het Appèl van Twente is om de relatie tussen mens en haar natuurlijke omgeving te versterken voor een duurzame samenleving. Dit wil zij bereiken door:</p>
</div>
<div class="right">
<h4>Wat doet het Appel van Twente?</h4>
<ul>
<li>CONCREET ADVIES EN BEGELEIDING - KWALITEIT VAN IDEE TOT UITVOERING</li>
<li>PARTICIPATIE - SOCIAAL RENDEMENT!</li>
<li>Social Return on Investment</li>
</ul>
</div>
</div>
</body>
</html>En de css
Code:
body {
background-color : #effbef;
background-image : url('');
}
#menu {
width : 100%;
}
ul.menu {
list-style-type : none;
background-image : url();
height : 80px;
margin : auto;
}
div.attempt {
width : 25%;
float : left;
}
div.attempt1 {
width : 70%;
float : right;
}
li.menu {
float : right;
}
ul a.menu {
background-image : url();
background-repeat : no-repeat;
background-position : right;
padding-right : 10px;
padding-left : 10px;
display : block;
line-height : 80px;
text-decoration : none;
font-size : 16px;
color : #000;
}
ul a.menu :hover {
color : #FFF;
}
#header {
background-color : #fff;
width : 100%;
margin : 0;
padding : 0;
}
div.welkom {
background-color : #E6F8E0;
width : 930px;
margin-left : auto;
margin-right : auto;
margin-top : 15px;
padding : 15px;
box-shadow : 5px 5px 10px #CEECF5;
border : solid 2px;
border-radius : 25px;
border-color : #fff;
}
#group {
width : 960px;
margin-left : auto;
margin-right : auto;
position : relative;
}
a.lees a:link {
text-decoration : none;
color : #000;
}
a.lees a:hover {
text-decoration : underline;
color : #000;
}
div.left {
background-color : #fff;
float : left;
height : 280px;
display : inline-block;
width : 280px;
padding : 15px;
margin-top : 15px;
box-shadow : 5px 5px 10px #CEECF5;
border : solid 0;
border-color : #fff;
border-radius : 25px;
}
div.middle {
background-color : #fff;
height : 280px;
display : inline-block;
float : left;
width : 280px;
margin-top : 15px;
margin-left : 15px;
padding : 15px;
box-shadow : 5px 5px 10px #CEECF5;
border : solid 0;
border-radius : 25px;
border-color : #fff;
}
div.right {
background-color : #fff;
float : left;
height : 280px;
display : inline-block;
width : 280px;
margin-top : 15px;
margin-left : 15px;
padding : 15px;
box-shadow : 5px 5px 10px #CEECF5;
border : solid 0;
border-color : #81F781;
border-radius : 15px;
}
