What am i doing wrong? Cannot figure it out -.-'...

[rootKID]

Okay, i have been working on a solution for alot of time now, and i can still simply not figure out what the ###### is wrong here. So im asking here for a new set of eyes, again -.-'.

 

If you would just see the uploaded picture, you can see the menu does NOT go outside the content area.

This has happened on MANY of my projects when i was trying to integrate a jQuery based menu with help from a few .JS formatted files.

 

This is my style.css code:

* {	margin:0px;	padding:0px;	font-size: 9pt;	font-family:"Trebuchet MS";}body {	color:#000000;	background-color:#AAD491;}#wrapper {	color:#000000;	background-color:#7fc655;	width:900px;	height:auto;	margin:0 auto;	overflow:hidden;}	#header {		width:100%;		height:50px;		background-color:#7FC655;	}		#content {		width:auto;		height:auto;		float:left;	}

This is my menu.css code:

.menu {	width:225px;	height:100%;	font-size:12px;	text-transform:uppercase;	margin:0px;	margin-right:5px;	padding:0px;	background-color:#58a02c;	float:left;}.menu ul.menusm {	background-image:url(pictures/menu/menu_sep.png);	background-position:0 100%;/*X% & Y%*/	background-repeat:repeat no-repeat;	margin:0 auto;	padding:0px;}.menu ul li.ms_top {	display:block;	float:none;	padding:0px;}.menu ul li.last {}.menu ul li a.ms_top {	color:#A9A9A9;	display:block;	font-weight:normal;	margin:0px;	padding:0px 1px;/*TOP & BOTTOM - RIGHT & LEFT*/	text-align:left;	text-decoration:none;}.menu ul li.ms_top {	background-image:url(pictures/menu/menu_sep.png);	background-position:100% 0;/*X% & Y%*/	background-repeat:repeat no-repeat;}.menu ul li.ms_top.ms_last {}.menu ul li a.ms_top span {	color:#000000;	display:block;	margin:0px;	padding:13px 14px 13px 50px;/*Top, Right, Bottom, Left*/	width:158px;}.menu ul li a.ms_top.ms_first span {}.menu ul li#active_menu-nav a.ms_top,.menu ul li a.ms_top.ms_hover,.menu ul li.active a.ms_top,.menu ul li a.ms_top.ms_hover span,.menu ul li.active a.ms_top span {	background-color:#74AD34;	background-position:initial initial;	background-repeat:initial initial;	color:#FFFFFF;	text-decoration:none;}.menu ul li a.ms_top.ms_havesubmenu span {	background-image:url(pictures/menu/menu_r_d_a.png);	background-position:100% 0;/*X% & Y%*/	background-repeat:no-repeat no-repeat;}.menu ul li.active a.ms_top.ms_havesubmenu span {	background-image:url(pictures/menu/menu_r_d_a.png);	background-position:100% 0;/*X% & Y%*/	background-repeat:no-repeat no-repeat;}.menu ul li a.ms_top.ms_havesubmenu.ms_hover span {	background-image:url(pictures/menu/menu_r_d_a.png);	background-position:100% 0;/*X% & Y%*/	background-repeat:no-repeat no-repeat;}.menu ul li a.active,.menu ul li a.ms_hover,.menu ul li a.ms_havesubmenu.active,.menu ul li a.ms_havesubmenu.ms_hover {}.menu ul li ul {	font-size:11px;	font-style:normal;	left:225px;/*Normal: 223*/	line-height:20%;	margin:0px;	padding:0px;	text-transform:uppercase;	top:0;}.menu ul li ul li {	border-bottom-color:#74AD34;	border-bottom-style:solid;	border-bottom-width:1px;	margin:0px;	padding:0px;	z-index: 10000;}.menu ul li ul li.ms_last {	border-bottom-style:none;}.menu ul li ul li a {	background-color:#49901e;	background-position:initial initial;	background-repeat:initial initial;	color:#FFFFFF;/*Normal: 848484*/	/*text-decoration:none;*/	display:block;	margin:0px;	padding:12px 10px;/*TOP & BOTTOM - RIGHT & LEFT*/	width:160px;/*Normal: 160px*/}.menu ul li ul li a span {	color:#FFFFFF;	padding:0px;}.menu ul li ul li.ms_last a {}.menu ul li ul li a.ms_hover {	text-decoration:none;}.menu ul li ul li ul {	left:180px;	top:0;}.menu ul li ul li a.ms_first.ms_havesubmenu.ms_hover,.menu ul li ul li a.ms_first.ms_havesubmenu.active,.menu ul li ul li a.ms_first.ms_havesubmenu.ms_hover span,.menu ul li ul li a.ms_first.ms_havesubmenu.active span,.menu ul li ul li a.active span,.menu ul li ul li a.active,.menu ul li ul li a.ms_hover,.menu ul li ul li a.ms_hover span {	background-color:#74AD34;	background-position:initial initial;	background-repeat:initial initial;	color:#FFFFFF;}.menu ul li ul li a.active span,.menu ul li ul li a.ms_hover span {}.menu * {	z-index:9003;}ul.menusm {	list-style:none;}ul.menusm li {	cursor:pointer;	position:relative;}ul.menusm li a {	position:relative;}ul.menusm li ul {	display:none;	height:auto;	list-style:none;	position:absolute;}ul.menusm li ul li ul {	list-style:none;	position:absolute;}/*======================*//*QUICK JUMPY MENU*//*======================*//*.menu select { margin-bottom: 10px; display: none; font-size: 14px; height:auto; width:100%; }.menu select { width: 100%; height: 30px; padding: 2px 5px 2px 10px ; color: #000; font-size:20px; }*/

This is my index.php file:

<?phprequire_once("include/config.php");require_once("include/core.php");?><!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" />	<link rel="shortcut icon" href="favicon.ico" />	<script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>	<script type='text/javascript' src='js/menu.js'></script>	<link rel="stylesheet" href="style/style.css" type="text/css" />	<link rel="stylesheet" href="style/links.css" type="text/css" />	<link rel="stylesheet" href="style/menu.css" type="text/css" />	<title>Hjem</title></head><body><div id='wrapper'>	<div id='menu' class='menu' style="font-family: 'Open Sans';">		<div id='header'>			<img src="style/pictures/logo.png" />		</div>				<script type='text/javascript' src='js/menu_html_block.js'></script>	</div>		<div id="content">		Content	</div></div></body></html>

This is my menu Javascript File:

document.writeln('<ul class="menusm" id="menu-top-menu">');document.writeln('	<li><a href="index.php"><span>Hjem</span></a></li>');document.writeln('	<li><a href="#" class="menu_navigation"><span>Webshop</span></a>');document.writeln('		<ul>');document.writeln('			<li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln('				<ul>');document.writeln('					<li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln('					<li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln('				</ul>');document.writeln('			</li>');document.writeln('		</ul>');document.writeln('	</li>');document.writeln('	<li><a href="#"><span>Menu</span></a></li>');document.writeln('	<li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln('		<ul>');document.writeln('			<li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln('				<ul>');document.writeln('					<li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln('					<li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln('					<li><a href="#" class="menu_navigation"><span>Menu</span></a></li>');document.writeln('				</ul>');document.writeln('			</li>');document.writeln('			<li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln('				<ul>');document.writeln('					<li><a href="rules.php" class="menu_navigation"><span>Rules</span></a></li>');document.writeln('					<li><a href="faq.php" class="menu_navigation"><span>FAQ</span></a></li>');document.writeln('				</ul>');document.writeln('			</li>');document.writeln('			<li><a href="#" class="menu_navigation"><span>Menu</span></a>');document.writeln('		</ul>');document.writeln('	</li>');document.writeln('</ul>');

I know the code is a bit long, but if you could. Please, any ideas? I am basicly desperate to get this to work! And i can simply NOT figure out what the heck is wrong, and i am almost crying here -.-'...

 

Some ideas? Tips? Would be simply AWSOME! If possible.

 

Thanks ALOT!

 

rootKID

[dsonesuk]

Clue is in #wrapper overflow: setting, you have no non floated content, overflow: hidden will force it to see floated menu element area and adjust to that height, because the submenus are using position: absolute; and top, left properties these are taken beyond the #wrapper boundary, the wrapper can't detect and adjust to the submemu height, as position: absolute; elements are taken out of the flow of the page.

 

also #content is using float so it will merge with menu unless you use clear: both;

[rootKID]

First off, i knew of the content float. But that was my intention, the way i have learned to float back in the school days, my teacher told me to float both items to left (for instance) and then use margin/padding method to design space between the 2 elements.

 

Am i wrong in this Oo?

 

Next solution/question:

 

Im not totally sure what you are telling me here,but lets say i did.

Would your suggestion be to remove the position: absolute; setting for menu items?

 

Like i said earlier, im still figuring it out, i found this example online and re-coded it to my own needs. It still has some flaws in it, but those flaws are what i am trying to fix right now to fit to my needs.

 

So.. Am i getting the solution correct Oo?

[dsonesuk]

Your layout is confusing because you have header within menu?

Foating #content causes it to shrink to content (text images) width wise and height, when you add paragraph text and text reaches right most edge and beyond it will cause #content to fall below menu. Normally you would float the menu left, and place NON floated #content below it, with a left margin slightly larger than menu width, this causes it to move beside the floated menu and stretch to the available width that its parent (#wrapper) would allow, the #content will not now fall below menu, and the left margin will keep text a fixed distance away from menu.

 

The reason you are having the problem is you have little or no content, so the #wrapper bottom edge would be that of total parent menu listitems height, and so if the child submenu go below this height, the overflow: hidden; of #wrapper will hide that part of submenu.

 

Fix: add content greater than menu and submenus, or add a min-height to #wrapper to cover total height of submenus displayed.

[rootKID]

The header is within the menu because it's the reason to be there. I would like the webshop logo/banner to appear right above the menu, looks cooler i think ...

 

And the .menu div is supposed to have a height of auto, this means i cannot give a fixed height to it.

 

And a question, what do you mean by adding the #content higher/greater than menu and sub-menus? Should i use z-index? Or am i getting this wrong again?