Css Positioning

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
cesarcesar
Forum Contributor
Posts: 111
Joined: Mon Oct 18, 2004 3:28 pm

Css Positioning

Post by cesarcesar »

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!!

Code: Select all

<!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>
gully_mi_seh
Forum Newbie
Posts: 14
Joined: Fri Mar 18, 2011 8:48 pm

Re: Css Positioning

Post by gully_mi_seh »

I do not understand clearly your problems try to explain a little bite more...
Post Reply