Uitklapmenu overlapt div ernaast

Status
Niet open voor verdere reacties.
Annys

Annys

Gebruiker
Lid geworden
28 okt 2008
Berichten
52
Hallo,

Dit is een screenshot van een klein stukje van de website waar ik mee bezig ben:
attachment.php


Nu zien jullie waarschijnlijk al wat mijn probleem is. Ik wil graag het rechter vak (waarin 'welkom' staat) meteen naast het menu hebben. Maar als ik nu op pakketten ga staan in het menu, komt er een uitklapmenu (dat is ook de bedoeling) maar deze valt achter de div met welkom. Ik wil er graag voor zorgen dat deze ervoor valt.
Daarnaast blijft het uitgeklapte menu alleen zichtbaar als ik op het stukje van de knop sta dat binnen de 'eigen div' valt. Dus links van de gele lijn zeg maar.

Ik hoop dat jullie mij kunnen volgen!
Concreet: ik wil de content meteen naast het menu hebben. Daarnaast wil ik dat het menu voor de content valt en dat het menu nog wel op mijn mouseover reageert ook al valt het over de content div heen.

Hier mijn html:
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>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Index</title>

<link href="CSS/CSS.css" rel="stylesheet" type="text/css" />

</head>


<body>

<div id="container">
    
    
    <div id="header" onclick="Index.html" style="cursor:pointer"></div>
    
    
    <div id="zoekbalk">&nbsp;</div>
    
    
    <div id="menu">
      <ul id="nav">

<li id="nav"><a href="Index.html">Home</a></li>

<li><a href="OvertClick.html">Over tClick</a></li>

<li><a href="Pakketten.html">Pakketten</a>

<ul>
<li><a href="Lab.html">Lab</a></li>
<li><a href="Offerte.html">Offerte</a></li>
<li><a href="Facturatie.html">Facturatie</a></li>
<li><a href="Limiet.html">Limiet</a></li>
<li><a href="Orders.html">Orders</a></li>
<li><a href="Status.html">Status</a></li>
<li><a href="Truckmonitor.html">Truckmonitor</a></li>
<li><a href="Management.html">Management</a></li>
<li><a href="Productie.html">Productie</a></li>
<li><a href="Data.html">Data</a></li>
</ul>
</li>

<li><a href="Contact.html">Contact</a></li>
</ul>
</div>


    
    <div id="content">
     <h1> Welkom </h1>
     
      <p><img src="IMAGES/Advertentie.png" style="float:right; padding: 5px;" />      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas sagittis, justo vel semper laoreet, odio ligula pulvinar pede, ut commodo libero lacus vel arcu. Integer hendrerit, mi eget luctus tincidunt, velit lorem convallis nisi, ut tincidunt nulla elit rhoncus nisi. Pellentesque leo. Vivamus lorem. Fusce nec leo. Cras facilisis dui vel mauris. Integer tristique. Suspendisse orci. Cras ornare pede sodales libero. Vestibulum mollis pede ut quam. Integer elementum lectus id justo. Etiam sem arcu, commodo sed, consectetuer nec, pulvinar vitae, quam. Sed tristique rutrum sapien.</p>

<p>Vestibulum venenatis adipiscing enim. Nullam in nisi. Donec scelerisque quam eget augue. Nunc congue interdum magna. Fusce ultricies rhoncus erat. Ut lectus elit, semper a, dignissim ac, luctus eu, leo. Duis non arcu eget quam sagittis condimentum. Aenean ornare congue tortor. Aliquam velit magna, gravida vitae, condimentum eu, imperdiet sit amet, sem. Vestibulum elit. Nullam dolor sapien, imperdiet at, bibendum eget, egestas id, leo. Donec lobortis semper enim. Ut non ipsum id turpis eleifend interdum.


  </div>
    
  <div id="footer"> Jonker Elektrotechnische Bedrijfsautomatiserings b.v. Mors 19 7151MX Eibergen, Tel.: 0545 463000, e-mail:Verkoop@Jonker.nl </div>
</div>
</div>

</body>
</html>

Hier mijn css:
Code: 
@charset "UTF-8";
/* CSS Document */

body{
    background-image:url(CSSIMAGES/BG1.png);
    background-repeat:repeat-x;
    background-color:#000000;
    font-family:"Century Gothic", "arial";
    font-style: normal;    
    font-size: 10px;
    color: #FFFFFF;
}

a {
    font-size: 10px;
    color: #CCCCCC;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #CCCCCC;
}
a:hover {
    text-decoration: none;
    color: #666666;
}
a:active {
    text-decoration: none;
}

#container{
    width: 852px;
    height: 720px;
    margin: 0px auto;
}
#header{
    background-image: url(CSSIMAGES/header_tClick.png);
    background-repeat:no-repeat;
    height: 142px;
    width: 852px;
}
#zoekbalk{
	height: 10px;
	width: 100%;
	clear: both;
}
#tussenruimte{
	width: 100%;
	height: 10px;
	clear: both;
	float: right;
	font-weight: bold;
	text-align: center;
}

#menu{
	padding-top: 5px;
	padding-right: 5px;
	width: 100px;
	height: 500px;
	float: left;
	clear: left;
	z-index: 10;
}
#content{
	position: relative;
	width: 720px;
	height: 500px;
	float: right;
	padding: 5px;
	border: solid 3px;
	border-color: #FFDEAD;
	overflow: auto;
}

#footer{
	position: relative;
	width: 730px;
	height: 20px;
	top: 10px;
	background-color: #B6B6B6;
	border: solid 3px;
	border-color: #FFDEAD;
	clear: both;
	float: right;
	font-weight: bold;
	text-align: center;
	overflow: auto;
}

.style1 {font-size: 10px; 
    font-family:"Century Gothic"
}






#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
}

#nav{
width: 98px;
}

#nav li{
width: 98px;
}

#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}

* html #nav ul{
margin: -23px 0 0 98px;
}

#nav li li{
width: 100px;
}

#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}

* html #nav ul ul{
margin: -23px 0 0 100px;
}

#nav li li li{
width: 140px;
}

#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}

#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}

#nav a:link, #nav a:visited{
background-image:url(CSSIMAGES/welkom01.png);
font-family: "Century Gothic";
color:#FFFFFF;
}

#nav a:hover, #nav a:active{
background-image:url(CSSIMAGES/Welkom02.png);
font-family: "Century Gothic";
color:#FFFFFF;
font-weight:bold;
}

Ik hoop dat iemand hier een oplossing voor weet!

Vriendelijke groet,
Annys
 

Bijlagen

  • Menuoverlapt.png
    Menuoverlapt.png
    52 KB · Weergaven: 93
Zet rond je divjes een border (als test)
border:solid 2px #ff0000;

dan kun je zien welke maatvoering de betreffende div heeft.

:cool:
 
Hmz het wil niet echt lukken dus ik heb nu toch maar het menu gemaakt in Dreamweaver met insert-->spry-->spry menu bar. Het CSS dat dan automatisch gegenereerd wordt pas ik aan en dat werkt wel!

Bedankt voor de hulp!
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan