Sticking Div? help please

A menu bar div is sticking like crazy!!

Page 1 of 1

4 Replies - 1383 Views - Last Post: 19 October 2009 - 07:33 AM

#1 cloudnyn3   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Sticking Div? help please

Post icon  Posted 18 October 2009 - 09:10 AM

Hey there I've been working on http://www.intensity...ologies.com/vb/ for a few days and the menu bar incessantly keeps sticking to the right or left side!

I for the life of me cannot figure out why its doing this >_<

I've tried several different things and even asked a coworker why and he couldn't figure it out either.

Anyway if you could go there and resize your browser you will see what I'm saying.
I've saved the drop down menu's properties in two other stylesheets and used javascript for functionality, I have a main style sheet for my body and content properties, I made a div named goose and used it to control the whole menu bar, it works except that when I position it, it isn't fixed or absolute, it moves with the browser window.

/*
Design by Cl0udnyn3 and Greeneyez(R.I.P)
*/




body {
	margin: 0;
	padding: 0;
	background: #1a1a1a url(images/img01.jpg) repeat-x top center;
	font-size: 13px;
	color: #8C8C8C;
}

body, th, td, input, textarea, select, option {
	font-family: "Arial", "Arial", Arial, Arial, Arial;
}

h1, h2, h3 {
	font-weight: normal;
	color: #F8FBEC;
}

h1 {
	letter-spacing: -2px;
	font-size: 3em;
}

h2 {
	letter-spacing: -1px;
	font-size: 2em;
}

h3 {
	font-size: 1em;
}

p, ul, ol {
	line-height: 200%;
}

blockquote {
	padding-left: 1em;
}

blockquote p, blockquote ul, blockquote ol {
	line-height: normal;
	font-style: italic;
}

a {
	color: #9BDB18;
}

a:hover {
	text-decoration: none;
	color: #E6B715;
}

/* Popup Divs */

#goose {
position: relative;
top: 50px;
right: 20px;
width: 890px;


}

#div1, #div2, #div3 {
	position: absolute;
	top: 231px; 
	width: 180px; 
	color: #91d016; 
	visibility: hidden}

#wrapper {
}
/* Header */

#header {
	width: 860px;
	height: 225px;
		padding-top: 1cm;
	margin: 0 auto;
	background: url(images/introsqr.png) no-repeat center;
}

#header h1, #header p {
	margin: 0;
	color: #9CBC1E;
}

#header h1 {
	padding: 100px 0 0 70px;
}

#header p {
	padding-left: 73px;
	margin-top: -10px;
}
#header a {
	color: #E6B715;
}

/* Page */

#page {
	width: 760px;
	margin: 0 auto;
}

/* Content */

#content {

	float: right;
	width: 480px;
	margin: 0 auto;
	padding-right:20px;
	padding-top: 50px;
}
	
	.summaryBox {
	margin: 0 0 10px 0;
	padding: 0;
	border: 0px solid #999;

	
}
	


	.summaryContent {
	height: 768px;
	margin-left :1px;
	margin-right: 1px;
	margin-bottom :10px;
	padding: 3px;
	background-color: #000000;
	overflow: auto;
	color: #91d016;
}
	
	img.floatRight {
	float:right;

}

	

.post {
	padding: 0 0 20px 0;
}

.title {
	margin: 0;
	padding-bottom: 5px;
	border-bottom: 2px solid #B7D24D;
}

.byline {
	margin: 20px;
	color: #a9cd19;
}

.meta {
	text-align: left;
	color: #646464;
	padding: 10px 10px;
	height: 48px;
	background: url(images/img06.gif) no-repeat left top;
}

.meta .more {
	padding-left: 20px;
}

.meta .comments {
	padding-left: 20px;
}

.meta a {
	color: #003300;
}

/* Sidebar */

#search {
	float: left;
	width: 249px;
}

#search ul {
	margin: 0;
	padding-top: 50px;
	list-style: none;
}

#search li {
}

#search li ul {
	padding: 15px 15px;
}

#search li li {
	border-bottom: 1px dotted #000000;
	padding-left: 15px;
}

#search h2 {
	margin: 0;
	padding: 10px 0 0 40px;
	height: 40px;
	background: url(images/img04.gif) no-repeat left 60%;
}

#search a {
	text-decoration: none;
}


#search a:hover {
}


/* Footer */

#footer {
	clear: both;
	width: 760px;
	height: 40px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	background: url(images/img05.gif) no-repeat left top;
	text-align: center;
	font-size: smaller;
	color: #52640A;
}

#footer a {
	color: #003300;
}



<!DOCTYPE HTML>

<!--
Design By Cloudnyn3 and GreenEyez(R.I.P)
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Intensity-technologies</title>
<meta name="keywords" content="Computer Repair technology" />
<meta name="description" content="Intensity-technologies" />
<link href="default2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="dropdown.css" media="all" rel="stylesheet" type="text/css" />
<link href="default.advanced.css" media="all" rel="stylesheet" type="text/css" />



<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dropdown.js"></script>


</head>
<body>
<div id="goose">

<ul class="dropdown dropdown-horizontal">
	<li><a href="./" class="dir">Home</a>
		<ul>
			<li><a href="./">First Menu</a></li>
			<li><a href="./" >Stuff</a></li>
			<li><a href="./">Stuff</a></li>
		</ul>
	</li>
	<li><a href="./">FAQ's</a></li>
	<li><a href="./" class="dir">Our Services</a>
		<ul>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			
		</ul>
	</li>
	<li><a href="./" class="dir">Technologies</a>
		<ul>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>

		</ul>
	</li>
	<li><a href="./" class="dir">Supporters</a>
		<ul>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
		</ul>
	</li>
	<li><a href="./" class="dir">Company Info</a>
		<ul>
		<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
		</ul>
	</li>
	<li><a href="./" class="dir">News and Forums</a>
		<ul>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
			<li><a href="./">stuff</a></li>
		</ul>
	</li>
	<li><a href="./">Quick Support</a></li>
</ul>
</div>



<div id="wrapper">
<!-- start header -->
<div id="header">

</div>
<!-- end header -->
<!-- start page -->
<div id="page">
	<!-- start content -->
	<div id="content">
		<div class="post">
			<h1 class="title">About Us</h1>
<div class="summaryBox">

</div>
 
<div class="summaryContent">
 </div>
</div>
		   
		</div>
	
	<!-- end content -->
	<!-- start sidebar -->
	<div id="search">
   

		<ul>
			<li>
				<h2>Services</h2>
				<ul>
		   
					<li><a href="index.html" onmouseover="toggleDiv('div1',1)" onmouseout="toggleDiv('div1',0)">About Us</a></li>
					<li><a href="software.html" onmouseover="toggleDiv('div2',1)" onmouseout="toggleDiv('div2',0)">Software management/Installation</a></li>
					<li><a href="#">Small Network Setup</a></li>
					<li><a href="#">Computer/Network Security</a></li>
					<li><a href="#">Custom Computer Builds</a></li>
					<li><a href="#">Computer Password/Data --Recovery</a></li>
					<li><a href="#">Hard Drive And Data Encryption</a></li>
					<li><a href="#">Some Forensic Services</a></li>
					<li><a href="#">Other Services</a></li>

				</ul>
			</li>
			<li>
				<h2>Our Partners</h2>
				<ul>
					<li><a href="#">Put that link here!!</a> (23)</li>
					<li><a href="#">do it here</a> (31)</li>
					<li><a href="#">You'd like it here</a> (31)</li>
					<li><a href="#">How about your site here?</a> (30)</li>
					<li><a href="#">advertise here</a> (31)</li>
					<li><a href="#">put your link here!!</a> (30)</li>
					<li><a href="#">put your website here</a> (31)</li>
					<li><a href="#">You could be here too?!!</a> (28)</li>
					<li><a href="#" title="">Could be you!</a> (31)</li>
				</ul>
			</li>
		</ul>
	</div>
	<!-- end sidebar -->
</div>
</div>
<!-- end page -->
</div>
<div id="footer">
	<p>?Intensity-Technologies  ?  Design by Cl0udnyn3 And Greeneyez.</p>

</div>

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: Sticking Div? help please

#2 tommyflint   User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 679
  • Joined: 24-July 08

Re: Sticking Div? help please

Posted 18 October 2009 - 01:52 PM

I tried looking through your site but i don't understand why you have so many style-sheets for what could be a simple layout using one stylesheet?

tommyflint
Was This Post Helpful? 0
  • +
  • -

#3 cloudnyn3   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 29-July 09

Re: Sticking Div? help please

Posted 18 October 2009 - 05:20 PM

View Posttommyflint, on 18 Oct, 2009 - 12:52 PM, said:

I tried looking through your site but i don't understand why you have so many style-sheets for what could be a simple layout using one stylesheet?

tommyflint


I'm using a prior design and incorporating something my brother made. I attempted to insert everything into a single style sheet but on some of the drop down menus it requires a call to a style sheet. I did inter mingle everything into one style sheet but it was a terrible clusterous mess.

It looks good, just that it won't stop sticking to one side or the other =/

Have any ideas?

also, I'll post all of the style sheets if you'd like =)
Was This Post Helpful? 0
  • +
  • -

#4 MacAnimeGirl   User is offline

  • D.I.C Regular

Reputation: 9
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Re: Sticking Div? help please

Posted 19 October 2009 - 07:22 AM

It looks like the navi is static, it's the other pieces that are moving.

Give me a moment to look it over.
Was This Post Helpful? 0
  • +
  • -

#5 MacAnimeGirl   User is offline

  • D.I.C Regular

Reputation: 9
  • View blog
  • Posts: 282
  • Joined: 30-September 08

Re: Sticking Div? help please

Posted 19 October 2009 - 07:33 AM

If you don't mind me asking...

What's going on the left side of the page? The content seems to be on the right side.

Also, what is the #wmfg tied to?

I don't see it on you're page. I ran you css through the validator and you have alot of errors.

Go here and do direct input. Then copy your css and test it.
http://jigsaw.w3.org/css-validator/

It will tell you the errors that you. It could be one of those error that's causing your issue.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1