11 Replies - 1355 Views - Last Post: 18 April 2009 - 08:05 PM

#1 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

How to make forms stay aligned with header/footer

Post icon  Posted 14 April 2009 - 07:51 PM

hello,

i am very new to css and programming in general which leads me here... i have two forms on my home page, login and register and i have a resizable bg image. right now, everything on my home page is focused around the footer. this is causing me a lot of problems when resizing the browser window. if i make the browser window smaller, then i am unable to scroll to see all of the page's text (forms, etc.). i've tried all of the overflow options and none of them return the result i am looking to get.

any ideas on how i basically put my header, two forms, and footer in a div that will not go anywhere if the window is resized to say smaller than 800x600, and also make sure to keep my footer always aligned to the bottom of the page? i can't use position: fixed because i need this to work in IE6. if you want to see a live version of the problem, it is shareyourdiscount dot com (header may not appear, i'm messing around with it... but it doesn't work with or without the header included at this point) . i'm open to suggestions, thank you!

Is This A Good Question/Topic? 0
  • +

Replies To: How to make forms stay aligned with header/footer

#2 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: How to make forms stay aligned with header/footer

Posted 16 April 2009 - 01:15 AM

View Postninethousandfeet@msn.com, on 14 Apr, 2009 - 06:51 PM, said:

hello,

i am very new to css and programming in general which leads me here... i have two forms on my home page, login and register and i have a resizable bg image. right now, everything on my home page is focused around the footer. this is causing me a lot of problems when resizing the browser window. if i make the browser window smaller, then i am unable to scroll to see all of the page's text (forms, etc.). i've tried all of the overflow options and none of them return the result i am looking to get.

any ideas on how i basically put my header, two forms, and footer in a div that will not go anywhere if the window is resized to say smaller than 800x600, and also make sure to keep my footer always aligned to the bottom of the page? i can't use position: fixed because i need this to work in IE6. if you want to see a live version of the problem, it is shareyourdiscount dot com (header may not appear, i'm messing around with it... but it doesn't work with or without the header included at this point) . i'm open to suggestions, thank you!


can you please post a little html code, i think i know what your talking about but im not sure.

and if i am correct you need to center everything on your page the turn your page into a liquid state which means changing your width to a percent.
Was This Post Helpful? 0
  • +
  • -

#3 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: How to make forms stay aligned with header/footer

Posted 16 April 2009 - 10:58 AM

i think i have my widths all set to 100%, but here is the css and the site is shareyourdiscount dot com. the main problem i am having now is this: if you make the browser window smaller in IE6, then scroll down, my background image is pushed upward and my footer is on top of white space at the bottom. any ideas? thank you for helping!
body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color: #FFF;
	font-size: 13.5px;
	font-weight: lighter;
	letter-spacing: 0.5px;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
}
#container {
	position: relative;
	min-height: 100%;
	z-index: 2;
	margin-bottom: -486px;
}
/* mac hide \*/
* html #container{
	height: 100%;
}
/* end hide */
#clearfooter {
	clear: both;
	height: 486px;
	width: 100%;
}
#background {
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
}
#footerIndex {
	position: absolute;
	text-align: center;
	height: 486px;
	width: 100%;
	bottom: 0px;
	z-index: 4;
	overflow: hidden;
}
 


Was This Post Helpful? 0
  • +
  • -

#4 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: How to make forms stay aligned with header/footer

Posted 16 April 2009 - 12:57 PM

have you tried using float left?
Was This Post Helpful? 0
  • +
  • -

#5 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: How to make forms stay aligned with header/footer

Posted 17 April 2009 - 10:41 AM

i haven't tried that... what do you recommend i add the float: left to? would that be a property with the background ID or somewhere else?
Was This Post Helpful? 0
  • +
  • -

#6 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: How to make forms stay aligned with header/footer

Posted 17 April 2009 - 03:59 PM

add it to the css for the div.
Was This Post Helpful? 0
  • +
  • -

#7 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: How to make forms stay aligned with header/footer

Posted 17 April 2009 - 08:03 PM

caleb,

i put the float:left in my css for the div and still the same result. any other ideas?

This post has been edited by ninethousandfeet@msn.com: 17 April 2009 - 08:04 PM

Was This Post Helpful? 0
  • +
  • -

#8 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: How to make forms stay aligned with header/footer

Posted 17 April 2009 - 11:53 PM

have you tried changing all of your positionings except the bg to auto?

have you tried changing all of your positionings except the bg to auto?
Was This Post Helpful? 0
  • +
  • -

#9 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: How to make forms stay aligned with header/footer

Posted 18 April 2009 - 11:31 AM

i'm not sure what you mean by:

View Postcalebj, on 17 Apr, 2009 - 10:53 PM, said:

have you tried changing all of your positionings except the bg to auto?



you mean the css property 'position:'? if so, auto is not an option, i'm able to choose absolute, fixed, static, inherit...

, or are you referring to the overflow property?
Was This Post Helpful? 0
  • +
  • -

#10 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: How to make forms stay aligned with header/footer

Posted 18 April 2009 - 12:50 PM

oops sorry, but have you tried to just remove your positions and move the divs via margins?
Was This Post Helpful? 0
  • +
  • -

#11 ninethousandfeet@msn.com  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 310
  • Joined: 09-February 09

Re: How to make forms stay aligned with header/footer

Posted 18 April 2009 - 04:36 PM

i haven't tried that, i'm not really sure what you mean by the second part "move the divs via margins"... so you think i should remove all positions on the css properties related to this page and then what exactly do i do with the margins?

would i actually set a certain margin in each css style or is am i doing something to the div tags on my file?

thank you
Was This Post Helpful? 0
  • +
  • -

#12 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: How to make forms stay aligned with header/footer

Posted 18 April 2009 - 08:05 PM

View Postninethousandfeet@msn.com, on 18 Apr, 2009 - 03:36 PM, said:

i haven't tried that, i'm not really sure what you mean by the second part "move the divs via margins"... so you think i should remove all positions on the css properties related to this page and then what exactly do i do with the margins?

would i actually set a certain margin in each css style or is am i doing something to the div tags on my file?

thank you


ok the property is applied to your div class in the head content and this snippet of code will move your div so it is 250px from the left of the main div.
margin: 0 0 0 250px

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1