Jump to content


Photo

alignment problems <RESOLVED>


  • Please log in to reply
6 replies to this topic

#1 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 03 August 2006 - 12:28 PM

Hi Guys,

Im trying to align a 10px high bar to the bottom of the screen with a 50px gap. example of what im after is http://www.creativec...n/packages.html this is the position i want but the css rule im using for it is wrong becuase it does not hold its position correctly. Probably becuase i used position relative.

Anyone know what position i should use and if you could correct my code below i would appreciate it. I need it to work in IE and FF.

#bottom_bar {
	   position:relative;
	   padding-bottom : 0px;
           width : 100%;
	   height: 10px;
	   background-image:url(images/bottom_bar.gif);
	   background-repeat:repeat-x;
}

The above code works on the site i have used as an example for some reason but not a my new site and it moves up and down the page anyway without keeping the bottom padding to 50px.


Cheers Rick


#2 Ifa

Ifa
  • Members
  • PipPipPip
  • Advanced Member
  • 88 posts
  • LocationRauma, Finland

Posted 03 August 2006 - 12:54 PM

have you tried margin-bottom?
I'm just a guy who likes to code for fun...

#3 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 03 August 2006 - 12:56 PM

What instead of padding?

what do i need in teh code, would i still use poistion relation or change back to absolute?

Rick

#4 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 03 August 2006 - 01:22 PM

If all preceding floats have been cleared, then the 'bottom' will appear at the end of the page assuming that's where it is in your html code. You shouldn't need position at all.
Legend has it that reading the manual never killed anyone.
My site

#5 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 03 August 2006 - 01:30 PM

Still can't get it at the bootom, im sure im doing something wrong but cant spot what.

here is my html code
<body>

<div id="banner"></div>

<div id="top_bar"></div>

<div id="logo"></div>

<div id="processor"></div>

<div id="navigation"><a href="index.html">HOME</a> <a href="services.html">SERVICES</a> <a href="case_studies.html">CASE STUDIES</a> <a href="about_us.html">ABOUT US</a> <a href="contact_us.html">CONTACT US</a></div>

<div id="news"></div>

<div id="content"></div>

<div id="bottom_bar"></div>




</body>

here is my CSS Code
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#F7F7F7;
}

#banner {
	position:absolute;
	width:100%;
	height:150px;
	padding: o o o o;
	background-image:url(images/top_background.gif);
	background-repeat:repeat-x;
	z-index:10;
}

#top_bar {
	position:absolute;
	width:100%;
	height:30px;
	top: 150px;
	background-image:url(images/top_bar.gif);
	background-repeat:repeat-x;
	z-index:11;
}

#processor {
	position:absolute;
	width:100%;
	height:175px;
	background-image:url(images/processor.gif);
	background-position:right;
	background-repeat:no-repeat;
	z-index:12;
}

#logo {
	position:absolute;
	width:325px;
	height:150px;
	padding: 0 0 0 20px;
	background-image:url(images/logo.gif);
	background-repeat:no-repeat;
	z-index:13;
}

#navigation {
	position:absolute;
	width:550px;
	height:30px;
	top:150px;
	padding:5px 0 0 0;
	z-index:14;
}

#navigation a { 
	font-family:Tahoma;
	font-size: 13px;
	font-weight: bold;
	color:#287683;
	padding:0 0 0 40px;
	text-decoration: none;
	background-color: transparent;
}

#navigation a:hover { 
	font-family:Tahoma;
	font-size: 13px;
	font-weight: bold;
	color:#0F2D73;
	padding:0 0 0 40px;
	text-decoration: none;
	background-color: transparent;
}

#news {
	position:absolute;
	width:190px;
	height:500px;
	top:200px;
	background-image:url(images/news_background.gif);
	background-repeat:no-repeat;
	z-index:15;
}

#content {
	position:absolute;
	width : 570px;
	height:500px;
	left:220px;
	top:200px;
	bottom : 50px;
	padding-left : 230px;
	z-index:15;
}
	

#bottom_bar {
	float:left;
	bottom : 20px;
	width : 100%;
	height: 10px;
	background-image:url(images/bottom_bar.gif);
	background-repeat:repeat-x;
	z-index:16;
}

Can anyone spot what im doing wrong and if so please correct me.

Thanks
Rick

#6 killerb

killerb
  • Members
  • PipPipPip
  • Advanced Member
  • 48 posts

Posted 06 August 2006 - 05:03 AM

How about something like this:

<html>
<head>
<style>
body{padding:0;margin:0}
#lastDiv{height:1200px;margin:0;}
#bottomNav{margin:0;height:70px;}
#bottomNav .inner{margin:0;height:20px;background:teal url(image.png) no-repeat center center;}
</style>

</head>
<body>

<div id="lastDiv">Say this is the bottom most div before the bottomNav</div>

<div id="bottomNav">
  <div class="inner">Content Goes Here</div>
</div>

</body>
</html>

Experience is something you get just after you need it.

#7 Ricklord

Ricklord
  • Members
  • PipPipPip
  • Advanced Member
  • 60 posts

Posted 06 August 2006 - 10:15 AM

Solved




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users