Okee, ik zit hier met een probleem waar ik met mijn CSS kennis niet 1 2 3 uitkom.
Het volgende is het geval :
Ik heb een pagina met 1 DIV die gecentreerd is, genaamd 'Container'.
Hierin staan enkele DIVs gepositioneerd zodat je links een verticale balk hebt en rechtsbovenin een balk en daaronder een content. Een relatief standaard layout dus.
Ik heb aan de linkerkant een navigatie staan met submenus. De submenus zijn logischerwijs DIVs die ik hidden of visible maak en dat werkt ook gewoon.
De submenus heb ik genest in de DIV met de content, dit in verband met de verticale positionering ten opzichte van de navigatie links.
In de DIV met de content staat natuurlijk ook een boel tekst (met kopjes e.d.)
Wat er nu dus gebeurd als ik het submenuutje laat zien (d.m.v. de navigatie links) is dat de content zelf naar beneden gedrukt wordt, wat natuurlijk niet de bedoeling is.
Met alleen de z-index alleen kom ik er dus niet (wat ik dus hoopte). Ben ook aan het stoeien geweest met display:block. Het vervelende is ook dat alles relatief gepositioneerd moet worden (aangezien alles gecentreerd is door die container div). Maar tot nu heeft niets geholpen
Ik zal even wat stukjes code plaatsen ter verduidelijking.
HTML
(bla is de organisatie waar het omgaat ... toch slim om dat even te verbergen)
Het stuk waar het om gaat is dus alles binnen de div met class 'content'. (just to be sure)
Ik maak overigens even gebruik van het style attribuut om even te testen. Als ik het werkend heb, wordt het natuurlijk even netjes in een externe CSS geplaatst. (heb daar al eerder meteen opmerkingen naar mijn hoofd geslingerd gekregen, vandaar
)
Relevante CSS
Sorry voor de lap code en het vern%#ken van de layout
Anyway, ik puzzel/pruts zelf ook nog even verder.
Alvast bedankt voor degene die de moeite hebben genomen mijn lange verhaal te lezen
Het volgende is het geval :
Ik heb een pagina met 1 DIV die gecentreerd is, genaamd 'Container'.
Hierin staan enkele DIVs gepositioneerd zodat je links een verticale balk hebt en rechtsbovenin een balk en daaronder een content. Een relatief standaard layout dus.
Ik heb aan de linkerkant een navigatie staan met submenus. De submenus zijn logischerwijs DIVs die ik hidden of visible maak en dat werkt ook gewoon.
De submenus heb ik genest in de DIV met de content, dit in verband met de verticale positionering ten opzichte van de navigatie links.
In de DIV met de content staat natuurlijk ook een boel tekst (met kopjes e.d.)
Wat er nu dus gebeurd als ik het submenuutje laat zien (d.m.v. de navigatie links) is dat de content zelf naar beneden gedrukt wordt, wat natuurlijk niet de bedoeling is.
Met alleen de z-index alleen kom ik er dus niet (wat ik dus hoopte). Ben ook aan het stoeien geweest met display:block. Het vervelende is ook dat alles relatief gepositioneerd moet worden (aangezien alles gecentreerd is door die container div). Maar tot nu heeft niets geholpen
Ik zal even wat stukjes code plaatsen ter verduidelijking.
HTML
code:
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
| <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Div test</title>
<link href="css/bla.css" rel="stylesheet">
<script src="js/menu.js"></script>
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo"><a href="index.htm">[img]"images/logo.gif"[/img]</a></div>
<div id="nav_vacatures" class="nav_vacatures" onmouseover="ShowMenu('nav_vacatures','subnav_vacatures'); StopTimer();"
onmouseout="StartTimer();"></div>
<div id="nav_overbla" class="nav_overbla" onmouseover="ShowMenu('nav_overbla','subnav_overbla'); StopTimer();"
onmouseout="StartTimer();"></div>
<div class="nav_nieuwsbrief" onmouseover="this.className='nav_nieuwsbrief_over'; HideMenu(currentimage,currentmenu);"
onmouseout="this.className='nav_nieuwsbrief';"></div>
<div class="nav_contact" onmouseover="this.className='nav_contact_over';"
onmouseout="this.className='nav_contact';"></div>
</div>
<div class="top">test</div>
<div class="content">
<div id="subnav_vacatures" style="position:relative: top: 0px; left: 0px;" onmouseover="StopTimer();";
onmouseout="StartTimer();">
<a href="#">Vacatureoverzicht</a><br>
<a href="#">Arbeidsvoorwaarden</a><br>
<a href="#">Open sollicitaties</a><br>
<a href="#">Procedures</a></div>
<div id="subnav_overbla" class="submenu subnav_overbla" onmouseover="StopTimer();"; onmouseout="StartTimer();">
<a href="#">Organisatie</a><br>
<a href="#">Werken bij bla</a></div>
Normale tekst en content etc. </div>
</div>
<br>
</body>
</html> |
(bla is de organisatie waar het omgaat ... toch slim om dat even te verbergen)
Het stuk waar het om gaat is dus alles binnen de div met class 'content'. (just to be sure)
Ik maak overigens even gebruik van het style attribuut om even te testen. Als ik het werkend heb, wordt het natuurlijk even netjes in een externe CSS geplaatst. (heb daar al eerder meteen opmerkingen naar mijn hoofd geslingerd gekregen, vandaar
)Relevante CSS
code:
1
2
3
4
5
6
7
8
| div.content {
position:relative;
top: 0px;
left: 0px;
float:right;
width:535px;
background-color: #FFFFFF;
} |
Sorry voor de lap code en het vern%#ken van de layout
Anyway, ik puzzel/pruts zelf ook nog even verder.
Alvast bedankt voor degene die de moeite hebben genomen mijn lange verhaal te lezen
[ Voor 48% gewijzigd door 1st_Ro op 03-02-2004 11:48 ]
/u/84896/crop57cfbb3a599bb_cropped.png?f=community)