2 Replies - 492 Views - Last Post: 23 July 2014 - 09:00 PM

#1 Saboi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 41
  • Joined: 23-May 07

Static Menu and Overflowing DIV

Posted 23 July 2014 - 01:08 PM

Hello friends,

Below is my code and much of what I would is working. Ofcourse there is room for improvement and I invite suggestions on that.

Please advise how to keep all content in the Content DIV from going above the Header DIV and Top DIV. It goes over when I include an embedded Facebook post in the content DIV.

<html>
<head>
<title>Page Title</title>

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

</title>


</head>

<body bgcolor="blue">

<div id = "wrapper">

	<div id="top">

		<div id = "menuContainer">

			<ul>
				<li><a href="#">Menu 1</a></li>
				<li><a href="#">Menu 2</a></li>
				<li><a href="#">Menu 3</a></li>
				<li><a href="#">Menu 4</a></li>
				<li><a href="#">Menu 5</a>
				<ul>
					<li><a href="#">Sub 1</a></li>
					<li><a href="#">Sub 2</a></li>
					<li><a href="#">Sub 3</a></li>
				</ul>
				</li>
				<li><a href="#">Menu 6</a></li>
				<li><a href="#">Menu 7</a></li>
			</ul>

		</div><!--menuContainer DIV-->

		<div id = "header">

		<h2>Some text here</h2>

		</div><!--End header DIV-->

	</div><!--End of TOP Div-->
	
	<div id="leftMenu">
	
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		
	
	</div>
	
	<div id="content">
	
	<p>Welcome!</p>
	
	
	
	</div><!--End of Content-->

<div id="footer">
	
	<P>&copy Owner, 2014</p>
	
	</div><!--End of footer-->
	
</div><!--End of Wrapper DIV-->

</body>

</html>



body, div, leftMenu, leftMenu ul, leftMenu li
{
	margin:0;
	padding:0;
}

#top
{
	height: 50px;
	position: fixed;
	top: 0px;
}

#wrapper
{
	width: 900px;
	height: 100%;
	background-color: pink;
	margin-left: 200px;
	margin-top: 0px;
}

#header
{
	width: 896px;
	margin: 0px 0px;
	background-color:blue;
	color: white;
	text-align: right;
	padding: 2px 2px 2px 2px;
	float: clear;
	top: 50px;
	padding-top: 20px;	
}

#menuContainer
{
	height: 30px;
	background-color: grey;
	position: fixed;
	width: 900px;
}

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

#menuContainer ul li
{
	text-decoration: none;
	float: left;
	width: 120px;
	border-right: 1px solid black;
	text-align: center;
	position: relative;
	height: 30px;
	line-height: 30px;
}

#menuContainer li ul
{
	position: absolute;
	top: 30px;
	left: 0;
	visibility: hidden;
}

#menuContainer li ul li
{
	float: none;
	/*border-top: 1px solid black;*/
	background-color: yellow;
	border-bottom: 1px solid black;
	border-right: 1px black;
	border-left: 1px black;
}

#menuContainer a
{
	text-decoration: none;
	display: block;
}

#menuContainer li:hover
{
	background-color: maroon;
}

#menuContainer li:hover ul
{
	visibility: visible;
}

#leftMenu 
{	
	width: 150px;
	background-color: grey;
	height: 85%;
	float: left;
	margin-top: 89px;
	margin-left: 0px;
	text-align: justify;
	border: 0;
	padding: 0px;	
	padding-top: 0px;
	
	
}

#leftMenu ul
{
	padding: 0px;
	height: 30px;
	margin:0px;
	
}

#leftMenu a
{
	text-decoration: none;
	display: block;
}


#leftMenu ul li
{
	text-decoration: none;
	list-style: none;
	border-bottom: 2px solid black;
	background-color: yellow;
	border-left: 0px;
	text-align: center;
	display: block;	
	line-height:30px;
}

#leftMenu a:hover
{
	display: block;
	background-color: black;
	height: 30px;
	
}

#Content
{
	background-color: green;
	width: 730px;
	float:left;
	padding-left: 20px;
	height: auto;
	margin-top:89px;
	
}

#footer
{
	clear: both;
	background-color: black;
	height: 30px;
	margin-top:0px;
	/*width: 898px;*/
	/*margin-left: 200px;*/
	color: white;
	text-align: center;
	/*line-height: 30px;*/
}








Is This A Good Question/Topic? 0
  • +

Replies To: Static Menu and Overflowing DIV

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3617
  • View blog
  • Posts: 12,457
  • Joined: 12-December 12

Re: Static Menu and Overflowing DIV

Posted 23 July 2014 - 01:28 PM

Some corrections:

Your page should have a DOCTYPE declaration;
You have an extra closing title-tag;
float: clear is invalid;
The body-tag no longer has a 'bgcolor' attribute, it is obsolete.

But.. you have gone overboard on positioning - fixed, absolutes, and floats. You will struggle to control this page and it will get worse IMO. I recommend that you continue studying css, and css-positioning, and then re-write the page.

http://alistapart.co...positioning-101

This post has been edited by andrewsw: 23 July 2014 - 01:35 PM

Was This Post Helpful? 0
  • +
  • -

#3 Saboi  Icon User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 41
  • Joined: 23-May 07

Re: Static Menu and Overflowing DIV

Posted 23 July 2014 - 09:00 PM

Thanks. Guess you are right, need to go back to the basics. Any quick fix for my problem for now?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1