Jump to content

Recommended Posts

http://sb.cesarvillaca.com/footer-bug.html (code at the bottom)

 

I have been trying like crazy to get the positioning of this nav correct. I need to get each of the navs to position exactly over their respective links. So the white "Products" word (over state) should sit exactly over the purple "Products" link. It should stick in the correct position on screen resolution change too. This nave will be localized too so more letter should be able to be added to each line of the pop-ups and still stick in its spot. These are all the issues I am having. PLEASE HELP! I have spent soooo much time on this and its driving me crazy!!

 

<!DOCTYPE html>
<html>

<head>

<title></title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="imagetoolbar" content="no"/>
<meta name="robots" content="index,follow,archive"/>

<style type="text/css" title="">
body { 
	font-family: Arial, Helvetica, sans-serif;
	line-height: 115%; 
	font-size:10px;
	background-color: #000000;
	height:100%;
	color:#FDB813;
}

.auto-width {
	display:-moz-inline-stack;
	display:inline-block;
	zoom:1;
	*display:inline;
}

#footer-container {
	background-color:#000;
	height:420px;
}

#footer{
	margin:0 auto; 
	width:980px; 
	background-color:#000;
}

#footer-nav {
	margin:30px 0 0 0px;
	width:980px;
	position:relative;
}

.fnpc {
	position:absolute;
	display:none;
	top:0px;
	left:19px;
	z-index:10;
}

.fnp {
	border:1px solid #555555; 
	background-color:#252526;
	color:#888888;
	text-align:left;
	padding:10px;
	position:relative;
	z-index:10;
	top:-34px; 
	left:0px;
}

.fto {
	border-top-style:none;
	border-right-style:solid;
	border-bottom-style:solid;
	border-left-style:solid;
	border-width:1px;
	border-color:#555555;
	background-color:#252526;
	position:absolute; 
	bottom:-1px; 
	left:0px; 
	z-index:11;
}

.fnc {
	font-size:10px;
	color:#ffffff;
	padding:10px;
	height:15px;
	cursor:pointer;	
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

</head>

<body>

<!-- Footer Starts Here. Everything Below should be stuck in an include. -->
<div id="footer-container" style="margin-top:200px;">

<div id="footer">

	<div id="footer-nav">

		<div style="float:left; margin-right:50px;">

			<div id="fnp-container-Products" class="fnpc">
				<div id="fnp-Products" class="fnp auto-width">
					<a href="" class="">Aaaaaaa bbbbbb</a><br>
					<a href="" class="">Baaaaaa bbbbbb</a><br>
					<a href="" class="">Caaaaaa bbbbbb</a><br>
					<a href="" class="">Daaaaaa bbbbbb</a><br>
					<a href="" class="">Eaaaaaa bbbbbb</a><br>
					<a href="" class="">Faaaaaa bbbbbb</a><br>
				</div>
				<div id="footnav-Products" class="fto">
					<div class="fnc auto-width">Products</div>
				</div>
			</div>

			<a href="" class="footer-nav-link footer-Products">Products</a>

			<script type="text/javascript">
			<!--
			$('.footer-Products').mouseenter(function() {
				$('.fnpc').hide();
				$('#fnp-container-Products').show();
				$("#fnp-container-Products").css({ 
					"top":  $("#fnp-Products").height() + "px", 
					"left":  $("#fnp-Products").height() + "px" 
				});
			});
			//-->
			</script>

		</div>
		<div style="float:left; margin-right:50px;">

			<div id="fnp-container-Solutions_Center" class="fnpc">
				<div id="fnp-Solutions_Center" class="fnp auto-width">
					<a href="" class="">Aaaaaaa bbbbbb ccccc</a><br>
					<a href="" class="">Baaaaaa bbbbbb ccccc</a><br>
					<a href="" class="">Caaaaaa bbbbbb ccccc</a><br>
					<a href="" class="">Daaaaaa bbbbbb ccccc</a><br>
					<a href="" class="">Eaaaaaa bbbbbb ccccc</a><br>
					<a href="" class="">Faaaaaa bbbbbb ccccc</a><br>
				</div>
				<div id="footnav-Solutions_Center" class="fto">
					<div class="fnc auto-width">Solutions Center</div>
				</div>
			</div>

			<a href="" class="footer-nav-link footer-Solutions_Center">Solutions Center</a>

			<script type="text/javascript">
			<!--
			$('.footer-Solutions_Center').mouseenter(function() {
				$('.fnpc').hide();
				$('#fnp-container-Solutions_Center').show();
				$("#fnp-container-Solutions_Center").css({ 
					"top":  $("#fnp-Solutions_Center").height() + "px", 
					"left":  $("#fnp-Solutions_Center").height() + "px" 
				});
			});
			//-->
			</script>

		</div>

	</div>

</div>

</div>

<script type="text/javascript">
<!--
$('.fnpc').mouseleave(function() { 
$('.fnpc').hide();
});
//-->
</script>

</body>
</html>

Link to comment
https://forums.phpfreaks.com/topic/231056-css-positioning/
Share on other sites

Uhm i have a feeling you are using javascript to set the inline style for the div in question.

 

right now it's

display: block; top: 69px; left: 69px;

change the script to make it:

display: block; top: 69px; left: 0px;

that way it we sit right underneath you top button

 

But if i am honest the menu doesn't look very nice in markup, maybe a have a look at the suckerfish menu.

Link to comment
https://forums.phpfreaks.com/topic/231056-css-positioning/#findComment-1189422
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.