My usual troubles with positioning

owosso · November 12, 2007

Positioning is my crux. I can't figure out when and how to utilize relative position and how to get a consistent absolute position. In this site, I cannot get the text of horizontal menu to center veritically within the #navHor. And I cannot get the#address to position itself correctly at the bottom. The text is supposed to be vertically centered between the two black lines, one of which is the bottom of the background image.Here's my site: http://www.adunate.com/indexII.jwr.htmlHere's my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>JWR, Inc., Johnson Creek, WI</title><style type="text/css"><!--#horizontalContainer	{	background-image: url(jwr/abstractII.jpg);	background-repeat: no-repeat;	background-position: center top;		width: 760px;	height: 635px;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;	}#verticalContainer	{	width: 100%;	height: 635px;	position: absolute;	margin-left: -50%;	z-index: 1;	margin-top: -316px;	left: 50%;	top: 50%;	}--></style><link href="jwr.css" rel="stylesheet" type="text/css" /><script type="text/JavaScript"><!--function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}//--></script><style type="text/css"><!--body {	background-color: #7E7E7E;}--></style></head><body onload="MM_preloadImages('jwr/m60stdYellow.png','jwr/HorzBale.png','jwr/Picture10.png')"><div id="verticalContainer"><div id="horizontalContainer">        <div id="navHor">        <p><a href="#">Home</a><span><a href="#">Contact</a></span><span><a href="#">News</a></span><span><a href="#">Employment</a></span></p>    </div>    <div id="header">			<div align="right"><img src="jwr/compactor3.png" alt="compactor" name="compactor" id="compactor" /></div>		<div id="logo"><img src="jwr/logo.gif" alt="jwr, inc. logo" /></div>    </div>        <div id="leftContainer"> <!--Start vertical navigation -->	 <div id="navVert1">       <p align="right"><a href="#">About JWR</a></p>      </div>     <div id="navVert2">       <p align="right"><a href="#" onmouseover="MM_swapImage('compactor','','jwr/m60stdYellow.png',1)" onmouseout="MM_swapImgRestore()">Your Recycling Solutions</a></p>      </div>     <div id="navVert3" onmouseover="MM_swapImage('compactor','','jwr/HorzBale.png',1)">       <p align="right"><a href="#">Waste Solutions</a></p>      </div>     <div id="navVert4">       <p align="right"><a href="#" onmouseover="MM_swapImage('compactor','','jwr/Picture10.png',1)" onmouseout="MM_swapImgRestore()">Product         Specific Solutions</a></p>      </div>     <div id="navVert5">       <p align="right"><a href="#">Industry Specific Solutions</a></p>      </div>     <div id="navVert6">       <p align="right"><a href="#">Service & Installation</a></p>      </div>     <div id="navVert7">       <p align="right"><a href="#">Parts</a></p>      </div>     <div id="navVert8">       <p align="right"><a href="#">Used Equipment</a></p>      </div>    </div><!--Close #leftContainer End verticle navigation -->        <div id="rightContainer"><!--contains #tagline and #statement -->    <div id="tagline">       <h1 align="center">Your Source for Waste & Recycling Solutions</h1>      </div>    <div id="statement">      <h2 align="center">Let us put our experience to work for you to identify a solution that maximizes recycling revenue, minimizes labor and reduces waste costs.</h2>        <p align="center">• Equipment Sales • Installation • Service <br />        • Planned Maintenance • Parts</p>      </div></div>  <!--close #rightContainer -->     <div id="address">          <p>322 N. Watertown Street, P.O. Box 356, Johnson Creek, WI 53038<span>868-699-2848</span><span>FAX: 9220-699-2847</span>        </p>   </div>       <!--close #horizontalContainer -->    <!--close #vertContainer -->  </div></div></body></html>

Here's my CSS:

body {  	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;  	margin: 0px;	padding: 0px;	background-color: #FFFFFF;	font-size: 62.5% /* 16px × 62.5% = 10px */;}p	{ font-size: 1.2em; color: #000000; line-height: 1.6em; }	p span	{ margin-left: 128px; }		a:link, a:visited	{ font-size: 1.2em; color: #000000; text-decoration: none; }	a:hover, a:active { font-size: 1.2em; color: #DE000D; text-decoration: none; }		a:hover {		}	h1	{ color:#DD000B; font-size: 1.8em; font-weight: bold; }	h2	{ color:#000000; font-size: 1.6em; font-weight: bold; line-height: 1.2em; }	h3	{ color:#4700AD; font-size:0.8em; }	#header	{	width: 700px;	height: 170px;	margin-bottom: 0px;	padding-right: 60px;	margin-top: 0px;	margin-right: auto;	margin-left: auto;}	#logo	{	width: 350px;	height: 106px;	left: 45px;	top: 15px;	position: absolute;}		#navHor	{ width: 695px; height: 23px; position: absolute; top: 133px; padding-left: 65px; padding-top: 5px; z-index: 5; background-color: #FFFFFF; padding-bottom: 10px; 	border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #000000; border-bottom-color: #000000;		/* for IE */  filter:alpha(opacity=60);  	/* CSS3 standard */  opacity:0.6;  /* for Mozilla */  -moz-opacity:0.6;  	  }	#leftContainer	{	width: 225px;	height: 432px;	float: left;	margin-top: 0;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;}		#navVert1 {width: 100px; position: relative; left: 75px; top: 45px; height: 10px; }#navVert2 {width: 150px; position: relative; left: 12px; top: 60px; height: 25px; }#navVert3 {width: 125px; position: relative; left: 25px; top: 75px; height: 25px; }#navVert4 {width: 125px; position: relative; left: 15px; top: 92px; height: 25px; }#navVert5 {width: 125px; position: relative; left: 10px; top: 108px; height: 25px; }#navVert6 {width: 100px; position: relative; left: 25px; top: 125px; height: 25px; }#navVert7 {width: 100px; position: relative; left: 30px; top: 140px; height: 25px; }#navVert8 {width: 125px; position: relative; left: 15px; top: 155px; height: 25px; }		#youarehere nav a { background-color: DDDDc2; text-decoration: none; border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #6F6659; }#rightContainer	{	width: 535px;	height: 432px;	float: right;	margin-top: 0;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;}	#tagline	{ width: 480px; height: 25px; position: relative; top: 43px; padding-right: 10px; padding-left: 10px; left: 10px; }		#statement	{ width: 475px; height: 100px; position: relative; top: 265px; padding-right: 20px; padding-left: 20px; left: 1px; }#address	{	width: 710px;	height: 10px;	border-bottom-width: 4px;	border-bottom-style: solid;	border-bottom-color: #000000;	padding-left: 50px;	font-size: 0.9em;	padding-bottom: 5px;	background-color: #FFFFFF;	padding-top: 5px;	position: absolute;	left: 1px;	top: 605px;}	#address span	{ margin-left: 75px;	}#horizontalContainer	{ 	width: 760px;	height: 635px;	margin-top: 0px;	margin-right: auto;	margin-bottom: 0px;	margin-left: auto;	position: relative;	border: 1px solid #000000;	}#verticalContainer	{	width: 100%;	height: 635px;	position: absolute;	margin-left: -50%;	z-index: 1;	margin-top: -317.5px;	left: 50%;	top: 50%;	}

dylan.bathurst · November 13, 2007

http://www.alistapart.com/articles/taminglists/ That article will show you everything you need to know. Instead of using a div then a paragraph and then a span a simple unordered list will do wonders for your markup.

Sign In

My usual troubles with positioning

Recommended Posts

owosso

Link to comment

Share on other sites

dylan.bathurst

Link to comment

Share on other sites

Archived

Browse

Activity