Jump to content

Css Positioning Issues


soozyq
 Share

Recommended Posts

I have just started trying to use CSS and have decided to stop using tables. I thought I had the code correct but I keep running into issues such as the images moving in different browsers, the background image moving when I minimise the screen. I am very new to all of this and would appreciate any input anyone can give.

 <!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=utf-8" /><title>Home</title><!--																--><script type="text/javascript"><!--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_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_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><link href="css/olgasite.css" rel="stylesheet" type="text/css" /></head><body onload="MM_preloadImages('images/home_up.gif','images/about_down.gif','images/projects_down.gif','images/contact_down.gif')"><div id="container">  <div id="header">	<div id="home_down"></div>	<div id="home_up"></div>	<div id="about_down"></div>	<div id="about_up"></div>	<div id="projects_down"></div>	<div id="projects_up"></div>	<div id="contact_down"></div>	<div id="contact_up"></div>	<div id="banner">	  <div align="right"><img src="images/banner.gif" width="300" height="120" /></div>	</div>  </div>  <div id="mainBody">	<div id="left_panel">	<div align="left">	  <div id="mainImage"><img src="images/home_images.gif" width="250" height="250" /></div>	</div>	</div>	<div id="rightPanel">	  <div id="mainText"><span class="mainBody">text removed.</span></div>	</div>  </div>  <div id="footer">	<p class="footer">--text removed--</p>	<p class="footer">--text removed--</a></p>  </div></div></div></body></html>

Here is the CSS

 @charset "utf-8";/* CSS Document */body {	font: "Century Gothic"	background: 	margin: auto /*it's good practice to zero the margin and padding of the body element to account for different browser defaults*/	padding: 0;	text-align:center /* this centers the container in IE5* browsers. The text is then set to the left aligned default in the #container selector*/	color:#FFF	}#container {	width:780px;	height:580px;	z-index:1;	margin: 0 auto;	background-image: url(../images/background.gif);	background-attachment: scroll;	background-repeat: no-repeat;	background-position: center 120px;	border-top-width: 1px;	border-right-width: 1px;	border-bottom-width: 1px;	border-left-width: 1px;	border-top-style: hidden;	border-right-style: hidden;	border-bottom-style: hidden;	border-left-style: hidden;}#header {	position:absolute;	width:780px;	height:120px;	z-index:1;	left: 226px;	background-color: #FFF;	top: 15px;}#home_down {	position:absolute;	width:100px;	height:60px;	z-index:1;	left: 0px;	top: 0px;}#about_down {	position:absolute;	width:100px;	height:60px;	z-index:2;	left: 100px;	top: 0px;}#home_up {	position:absolute;	width:100px;	height:60px;	z-index:2;	left: 0px;	top: 60px;}#about_up {	position:absolute;	width:100px;	height:60px;	z-index:3;	left: 100px;	top: 60px;}#projects_down {	position:absolute;	width:100px;	height:60px;	z-index:4;	left: 200px;	top: 0px;}#projects_up {	position:absolute;	width:100px;	height:60px;	z-index:5;	left: 200px;	top: 60px;}#contact_down {	position:absolute;	width:100px;	height:60px;	z-index:6;	left: 300px;	top: 0px;}#contact_up {	position:absolute;	width:100px;	height:60px;	z-index:7;	left: 300px;	top: 60px;}#banner {	position:absolute;	width:360px;	height:120px;	z-index:8;	left: 414px;	top: 0px;	padding: 0 20px 0 0;	visibility: visible;}#mainBody {	position:absolute;	width:780px;	height:380px;	z-index:2;	left: 225px;	top: 135px;	background-image: url(images/background.gif);	font-family: "Century Gothic";	font-size: 95%;	font-style: normal;	line-height: normal;	font-weight: normal;	font-variant: normal;	text-transform: none;	color: #333;}#left_panel {	position:absolute;	width:320px;	height:380px;	z-index:1;	float: left;	margin:margin-left :auto;	border: s;	left: 0px;	top: 1px;}#rightPanel {	position:absolute;	width:400px;	height:300px;	z-index:2;	left: 321px;	top: 0px;	padding-right: 40px;	padding-left: 20px;	padding-top: 60px;	padding-bottom: 20px;}.footer_link {	font-family: "Lucida Console", Monaco, monospace;	font-size: 85%;	font-style: normal;	line-height: normal;	font-weight: normal;	font-variant: normal;	text-transform: none;	color: #666;}#mainText {	position:absolute;	width:417px;	height:280px;	z-index:1;	text-align: justify;	left: 3px;	font-size: 95%;	visibility: visible;}#mainImage {	position:absolute;	width:250px;	height:250px;	z-index:1;	left: 50px;	top: 61px;	float: left;	margin-left: 1%;	right: auto;}#footer {	position:absolute;	width:740px;	height:80px;	z-index:1;	left: 227px;	top: 514px;	background-color: #FFF;	font-family: "Lucida Console", Monaco, monospace;	color: #666;	font-style: normal;	text-align: right;	font-size: 82%;	line-height: normal;	font-weight: normal;	font-variant: normal;	text-transform: none;	white-space: normal;	letter-spacing: normal;	word-spacing: normal;	margin-top: 0px;	margin-right: auto;	margin-bottom: auto;	margin-left: 0px;	padding-top: 0;	padding-right: 20px;	padding-bottom: 0;	padding-left: 20px;}

I would appreciate any help. Thanks in advanceSooz

Link to comment
Share on other sites

Number one rule: use a strict doctype:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">That will normalize your code over all modern browsers - develop in one, test in a few just in case, and you'll notice a big improvement in consistency.

Link to comment
Share on other sites

Just as I thought. You're going to have to think of a different way of laying out the site. position: absolute is only trouble when it comes to laying out pages.The most tried and proven way is using the float property with margins and padding.This is a simple example of how to use the float property:http://w3schools.com/css/tryit.asp?filename=trycss_float6

Edited by Ingolme
Link to comment
Share on other sites

Just as I thought. You're going to have to think of a different way of laying out the site. position: absolute is only trouble when it comes to laying out pages.The most tried and proven way is using the float property with margins and padding.This is a simple example of how to use the float property:http://w3schools.com/css/tryit.asp?filename=trycss_float6
Thanks for that tip. Will the float property allow the background image to reduce as the screen size does?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...