Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 37
  1. #1
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Positioning "footer" to the bottom fully, imposible mission.

    Well, my project is growing and finally is getting a final stage. But there is so many things in CSS that I can´t manage, and the footer is the worse.
    I´ve been spending around four hours trying to positioning the foot to the BOTTOM of the page, and it seems like an imposible mission. The foot is allways "floating", centered and with color styles, but didn´t fitted to the bottom.

    This is my "footer" code:

    Code:
    #footer {
    	background: url(images/degradado_pie.jpg) center no-repeat;  
    	height:45px;
    	text-align:center;
    	font-family: tahoma;
    	font-size: 75%; 
    	clear:both; 
    	margin-top:3em;	
    	}
    And this is my test web-site and the CSS:

    http://www.arcorel.com/test/index.html
    http://www.arcorel.com/test/basic.css

    I will really apreciate any help, just because it is the last thing I need to start adding content and forget about the main structure.

    Thanks in advance, as allways!

    backfolder.-

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Make #container-page position:relative and then add this to the CSS for your footer
    Code:
    position:absolute;
    width:100%;
    bottom:0;
    left:0;
    You will have to add a bottom padding on #main equal to or greater than the height of your #footer. Also remove the top margin on #footer. You may have to redo your background image for the footer though.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    _Aerospace_Eng_,

    First of all thanks for your quick reply and interest. Theres seem to be a bug in the text background color when using position in the #container-page. Background color is broken when you scroll up and down.

    There´s the changes you´ve suggested:

    http://www.arcorel.com/codingforums/index.html

    Now the foot is better, but under it there is a lot of "air".
    I´m missing something...

    backfolder.-

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Reread my post carefully. There is one part in there that you didn't do.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Hey Aerospace,
    Well, I´ve forget to re-size the image to 760px. Now fits perfect!!
    But there´s still a text and background color bug. I´ve just changed the color in the #main from #511D48 to #EFE3F1, but all the tab´s color obviously changes.
    Code:
    #main {
    border: 0px solid #666;
    clear: both;
    background: #511D48;
    padding-top: 2em;
    font-family: "MS Sans Serif", Geneva, sans-serif;
    color: #FFF;
    padding-bottom: 45px;
    }
    So I don´t know if should I redo the tabs CSS or keep trying until find the key... Any ideas of what this happend when using "position"?
    Thanks a lot!

    backfolder.-

  • #6
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy

    Well now I´ve just done.
    Now the big problem is the %&!@&?€! compatibility between brownsers!!!
    I´ve just download Firefox, and results are a bit horrible... I´m tired, I´m a designer not a programmer...
    Can someone give me some tips about how to keep the look at least in Firefox and Explorer?
    I´m gonna search anyway in the forums...

    backfolder.-

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by backfolder View Post
    Can someone give me some tips about how to keep the look at least in Firefox and Explorer?
    Your menu is too high up in Firefox.

    Look at you #header:
    Code:
    #header {
    	position: relative;
    	width: 100%;
    	height: 3em;
    	width: 45em;
    }
    It needs to be higher than 3em. The banner is 150px high. You should probably just drop the height.

    Why is it looking alright in IE6? Read this: Internet Explorer and the Expanding Box Problem [fixed in IE7]

  • #8
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Angry

    @ koyama,
    ups! I forget! That point (adding i.e. 150 px) fix the problem in Firefox. So thanks a lot.
    I´ve just removed position:absolute and now the foot fits in the bottom perfectly, but... There´s a "div" or rectangle that appears just over the foot, and I don´t know why...

    And if you see Contact section, in the Google Ads div, alse appear another "background" that I can´t identify!
    This two poltergeist are driving me crazy! So any advace is really appreciated...

    As always, thaks a lot for your help!

    backfolder.-

  • #9
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Well position:absolute removed and now the foot fits in the bottom perfectly.

    But footer in Contact section when bronwsing with Firefox, is still displayed at the middle of the page. And I don´t know why!!!

    Thaks a lot for your help!

    backfolder.-

  • #10
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by backfolder View Post
    But footer in Contact section when bronwsing with Firefox, is still displayed at the middle of the page. And I don´t know why!!!
    The problem is that the #google_sky is floated, but floats do not by default expand their container.

    To solve your problem, add the red part:
    Code:
    #main {
    	border: 0px solid #666;
    	clear: both;
    	background: #511D48;
    	padding-top: 2em;
    	font-family: "MS Sans Serif", Geneva, sans-serif;
    	color: #FFF;
    	padding-bottom: 45px;
    	overflow: hidden;
    }
    To learn more, read this: http://www.quirksmode.org/css/clearing.html

  • #11
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Thumbs up

    Yes!!!
    That fixed the problem... and when everything looks clear and ready to add content... now the submenus doesn´t appear!!! XDDDDD
    Well, I´m comparing two CSS in order to find the bug:

    http://www.arcorel.com/codingforums/tabs.css
    http://www.arcorel.com/test/tabs.css

    Final layout and elements (and compatibility) is near, thanks to you all!

    koyama, thanks for the link, and thanks for your help!!!

    backfolder.-

  • #12
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by backfolder View Post
    ... now the submenus doesn´t appear!!!
    Hmm... I don't know where you are looking? Which page? and which browser?

  • #13
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Unhappy

    hi again, koyama,

    If you compare this two pages:

    http://www.arcorel.com/codingforums/pintura.html
    ... and
    http://www.arcorel.com/test/pintura.html

    In the first one you will see that sublinks into category Pintura are invisibles, but they exists. I´ve just compared both CSS, and didn´t find any obvious change.

    Thaks for any help!

    backfolder.-

  • #14
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by backfolder View Post
    If you compare this two pages:

    http://www.arcorel.com/codingforums/pintura.html
    ... and
    http://www.arcorel.com/test/pintura.html

    In the first one you will see that sublinks into category Pintura are invisibles, but they exists.
    You have this:
    Code:
    div, td, th, h2, h3, h4 { /* redundant rules for bad browsers  */  
    	position: relative;
    	font-family: verdana,sans-serif;
    	font-size:    x-small;
    	voice-family: "\"}\"";
    	voice-family: inherit;
    	font-size: small;
    	color: #333;
    }
    I would really be careful using such a general declaration setting all div elements to have position:relative. I am not sure why you have used it in the first place. It does fix some rendering issues in IE, but it actually leads to other bugs in IE. Probably it makes just about as much damage as it solves for. My best advice is to remove it. It has consequences on stacking order too. Removing it will solve your stacking order problem too.

    Also, I would drop those hacks for IE5/Win considering how few IE5/Win users there are. Have you asked yourself which browsers you need support for? If you want support for IE5/Win then you should also test your page in that browser. All those hacks make your style sheet much harder to read and maintain.

    Only if the hacked styles for IE5/Win have consequences on accessibility for users with that browser then I would consider implementing them. But this doesn't seem to be the case.

  • #15
    New Coder
    Join Date
    Oct 2005
    Posts
    52
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks koyama,

    Yes, definitely this red one is the guilty (well the real guilty is me for adding . But if I remove position: relative, the background colored issue is there again.

    And about browsers, I want to do it compatible at least with IE, Firefox and Opera (maybe Safari too). I will check it.

    About the IE5 hack I´m gonna remove it. As you said is more the problem that causes, than the fixes..

    Once again, thaks for helping me!

    backfolder.-


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •