text verplaatst bij dropdown menu

Status
Niet open voor verdere reacties.
N

Nilsinater

Gebruiker
Lid geworden
6 jun 2010
Berichten
12
Hallo,
Ik ben bezig met een website (in html en css) ik ben al wat opstakels tegengekomen maar deze krijg ik er niet uit.
Het probleem:
waneer mijn dropdown menu naar beneden komt verschuift de text in mijn pagina. erg vervelend en ik zou dus graag willen dat het menu eroverheen schuift.
Kan iemand mij hiermee helpen?
http://www.nilsderooij.nl Hier staatie

* {
margin-left: 0px;
margin-right: 0px ;
padding:0px;
}

body
{
font: 12px verdana, geneva, sans-serif;
}
ul {
list-style:none;}
li {
width: 200px;
float: left;
}

li:hover {
border: 1px solid grey;
}

li li {
border: 1px solid grey;
background: #525252;
}

a {
color: #FFF;
display:block;
line-height:24px;
text-decoration: none;
text-align: center;
}

a:hover {
background: #9C0;
color: #333;}
ul ul {
display:none;
}
ul li:hover ul {
display:block;
}

<html>
<head><link rel="stylesheet" type="text/css" href="menu_style.css">
</body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Over mij</a>
<ul>
<li><a href="#">Wie ben ik?</a></li>
<li><a href="#">Wat wil ik?</a></li>
<li><a href="#">Wat kan ik?</a></li>
<li><a href="#">Wat zijn mij interesses?</a></li>
</ul>
</li>
<li><a href="#">Studie</a>
<ul>
<li><a href="#">Opleiding</a></li>
<li><a href="#">Cursussen</a></li>
<li><a href="#">Diploma's en Certificaten</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Curriculum Vitae</a></li>
<li><a href="#">Ervaringen</a></li>
</ul>
</li>
</ul>
</body></html>
 
a. De opgegeven site werkt niet zoals jij zegt.
b. Om verschuivingen te voorkomen moet je de menu in een container plaatsen en deze absoluut maken qua positie :
c. De volgende element na je menu is weer "position:relative;"

pseudo code :

.x {
postition:absolute:
left: 0px;
right:0px;
width:0px;
height:0px;
}
<div class="x"><ul><li>test</li></ul></div>
 
Hoi Nils,
Ik zou voordat je verder gaat als allereerste html-code kloppend maken (zie m'n "handtekening" hieronder). De html-validator zegt: 26 Errors, 5 warnings.
Dat kan kloppen: er zit bv. geen geldig Doctype in, er zit geen <meta> met een "charset" in, de <head> begint na de <title>, en ... er zitten verschillende <html>'s, <head>'s en <body>'s in. Terwijl die in een html-pagina maar één keer mogen voorkomen.
Het is een veel-hoofdig en veel-lijvig monstertje geworden: dat kan nooit goed gaan! ;)

De twee stylesheets (voor menu en voor de rest) hebben een aantal stijlregels die op dezelfde elementen slaan, en al of niet verschillend zijn. Als niet verschillend: dan overbodig; als wel verschillend: dan wordt de stijl-eigenschap van het laatste stylesheet gebruikt, en genegeerd wat in het eerste staat (daar dus ook overbodig). Alle stijlregels kunnen gewoon in één stylesheet komen, dah in de <head> aangehaakt wordt (ergens anders mag niet!).

Ook de <div>'s die als Matriosjka's in elkaar schuiven, zijn lang niet allemaal nodig.
Conclusie: voor jou bij het maken is het op deze manier erg verwarrend, en voor browsers bij het vertonen niet minder.

In jouw opzet zal de pagina-structuur moeten worden:
HTML: 
... de Doctype-regel ...
<html>

<head>
   <meta ... de charset-regel ...
   <title>de titel</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
   <div id="menu">
      <ul>
         <li>...</li>
         enz.
      </ul>
   </div>

   <div id="main">
      <p>Pagina nog in ontwikkeling!</p>
   </div>

   <div id="onderschrift">
      <img src="logo.png" widht="165px" height="55">
   </div>
</body>

</html>
Heel simpel: meer heb je voorlopig niet nodig! :)
Met vriendelijke groet,
CSShunter
 
Iedereen bedankt voor jullie reacties!
uiteindelijk heb ik het op kunnen lossen met Z-index door van mijn menu 2 te maken en van de mainpage 1.
toch bedankt voor jullie reacties (ik kwam er niet helemaal uit daarom heb ik op school nog wat navraag gedaan)

Grzz... Nils
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan