Problems with <div>

cacoder · #1 21-Aug-2008, 02:11

Hi,

I am trying to develop a website that follows the layout shown in the attached jpg. I am having difficulty positioning the sub-menu. The CSS and HTML code is available at the links below:

master.css: http://utilitybase.com/paste/8115
index.html: http://utilitybase.com/paste/8119

Any help would be appreciated.

CACoder.

blakekl · #2 05-Feb-2009, 15:10

First of all, your container div is 25 px too small to contain everything. You have it's width set to 1050, but the graphic specifies a total width of 1075. Try putting both menu and submenu inside a containing div called menu or something. Then, float both elements left.

MisterChucker · #3 25-Mar-2009, 13:29

You have probably found a solution to your problem by now, but this might be helpful to you in the future.

For a live demo, visit http://misterchucker.com/structure_demo_19042

demo.html

HTML Code:

<html>
<head>
<title>Structure Demonstration</title>
<link rel="stylesheet" type="text/css" href="default_structure.css" />
<link rel="stylesheet" type="text/css" href="default_colors.css" />
<script type="text/javascript" src="demo_functions.js"></script>
</head>
<body>

<div class="pageSection">
	<div class="sectionContent">
		<div class="contentColumn" style="width: 225px;">
			<div class="columnModule"
			     style="height: 175px;"
			     onmouseover="color_0(this)"
			     onmouseout="color_1(this)">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>logo</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
			<div class="popupModule"
			     id="sub_menu"
			     style="height: 150px; width: 225px; margin-left: 225px; background-color: #CED;"
			     onmouseover="color_0(this); show(get('sub_menu'))"
			     onmouseout="color_2(this); hide(get('sub_menu'))">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>sub menu</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
			<div class="columnModule"
			     style="height: 150px;"
			     onmouseover="color_0(this); show(get('sub_menu'))"
			     onmouseout="color_1(this); hide(get('sub_menu'))">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>main menu</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
			<div class="columnModule"
			     style="height: 125px;"
			     onmouseover="color_0(this)"
			     onmouseout="color_1(this)">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>empty</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
			<div class="columnModule"
			     style="height: 100px;"
			     onmouseover="color_0(this)"
			     onmouseout="color_1(this)">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>misc</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
		</div><!-- end contentColumn -->
		<div class="contentColumn" style="width: 850px;">
			<div class="columnModule"
			     style="height: 450px;"
			     onmouseover="color_0(this)"
			     onmouseout="color_1(this)">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>content</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
			<div class="columnModule"
			     style="height: 100px;"
			     onmouseover="color_0(this)"
			     onmouseout="color_1(this)">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>content icons</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
		</div><!-- end contentColumn -->
	</div><!-- end sectionContent -->
</div><!-- end pageSection -->

<div class="pageSection">
	<div class="sectionContent">
		<div class="contentColumn" style="width: 1075px;">
			<div class="columnModule"
			     style="height: 50px;"
			     onmouseover="color_0(this)"
			     onmouseout="color_1(this)">
				<div class="moduleHeader"></div>
				<div class="moduleContent">
					<div>empty</div>
				</div>
				<div class="moduleFooter"></div>
			</div>
		</div><!-- end contentColumn -->
	</div><!-- end sectionContent -->
</div><!-- end pageSection -->

</body>
</html>

default_structure.css

CSS Code:

body {
	margin: 0;
	padding: 0;
	}

.pageSection {
	text-align: center;
	clear: left;
	}

.sectionContent {
	width: 1075px;
	margin: 0 auto 0 auto;
	}

.contentColumn {
	float: left;
	margin-right: 0;
	}

.columnModule {
	}

.popupModule {
	position: absolute;
	display: none;
	}

.moduleHeader,
.moduleFooter {
	width: inherit;
	height: 4px;
	font-size: 0px;
	}

.moduleFooter {
	margin-bottom: 0;
	}

.moduleContent {
	padding-top: 4px;
	padding-bottom: 4px;
	text-align: left;
	}

.moduleContent div {
	margin-left: 8px;
	margin-right: 8px;
	}

default_colors.css

CSS Code:

body {
	background-color: #FFF;
	}

.columnModule {
	background-color: #BAE0E3;
	}

demo_functions.js

Code:

function get (id)
{
	return document.getElementById(id);
}
function color (obj, r, g, b)
{
	obj.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
}
function color_0 (obj)
{
	color(obj, 51, 153, 255);
}
function color_1 (obj)
{
	color(obj, 186, 224, 227); 
}
function color_2 (obj)
{
	color(obj, 204, 238, 231); 
}
function show (obj)
{
	obj.style.display = 'block';
}
function hide (obj)
{
	obj.style.display = 'none';
}

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Recent problems with antivirus programmes	steven_symantec	Member Announcements, Advertisements & Offers	3	14-Feb-2008 22:22
Problems while burning CD's	netnut	Computer Software Forum - Windows	16	18-Jan-2008 00:45
Challenge problems plz help plz	crazyABOUTyou	C++ Forum	3	24-Apr-2007 11:32
Chaintech Geforce 5600 FX problems	bartster74	Computer Hardware Forum	8	04-May-2004 14:16
Chaintech GeForce FX 5600xt Problems	Brymat	Computer Hardware Forum	14	22-Feb-2004 16:45

Problems with <div>

Re: Problems with <div>

Re: Problems with <div>