#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0

    CSS footer positioning


    EDIT:

    Also my header is scaling it seems when resolution is changed but its not increasing the area allowance height wise.

    Code:
    #header { 
    width : 100%;
    min-width : 1024px;
    min-height : 234px;
    text-indent : -21%;
    padding : 0;
    margin : 0;
    vertical-align:bottom;
    float:left;
    }
    
    .headbg {
    background-image : url('Images/header.png');
    background-color : #000000;
    background-size : cover;
    top : 0;
    left : 0;
    background-repeat:no-repeat;
    position : relative;
    margin : 0;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    please validate your code first.

    I see a missing dbl quote in your "copyright class".

    And I really don't understand why you need a #footer and a .footerbg for that section when those can be combined into just one or the other.

    Comments on this post

    • itoobie agrees : copyright class quote fix + reassurance that I can combine into one.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0
    Originally Posted by DonR
    please validate your code first.

    I see a missing dbl quote in your "copyright class".

    And I really don't understand why you need a #footer and a .footerbg for that section when those can be combined into just one or the other.
    Thanks for the reply, Yepp im doing that as we speak.
    I'm fairly new to css completely self taught and was having a problem when I had it just in the one, I honestly dont remember what the problem was as it was late last night so ended up seperating it for whatever reason and had it working nicely until I started to try to make the site more compatable.

    Fixed the double quote (big derp)

    will fix the errors I have from validate and get back to this form post, thanks so far a bunch

    EDIT:
    This document was successfully checked as XHTML 1.0 Strict!
    Result: Passed

    I'm going to save a backup of what i currently have and mess around some more with it. You said it could be done in one so I'm going to attempt to do this hehe, shouldnt be too hard if I actually think about it logically >.< must have been the tiredness that got to me last night.

    EDIT2:
    Combined into one, ps. im an idiot for that one...
    space is showing where the image should be showing but only getting background color. double checked pathing and it should be correct.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0
    edited main post to show what i could use some help on now =/
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    so your images folder path IS "Images" and not "images" or "IMAGES"?
    And this folder path is in relation to where the CSS file is located and not where the HTML file is located?

    As for the whitespace "around" header, container and footer..is this whitespace on the outside? If so, setup css rule to reset the margins to 0 for those items (or for DIVs in general if you want).

    I have no idea what you're talking about on the scaling stuff without being able to see what you are talking about....if you a have a link to your code plz post it.
    Last edited by DonR; August 25th, 2013 at 03:24 PM.
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0
    Originally Posted by DonR
    so your images folder path IS "Images" and not "images" or "IMAGES"?
    And this folder path is in relation to where the CSS file is located and not where the HTML file is located?

    As for the whitespace "around" header, container and footer..is this whitespace on the outside? If so, setup css rule to reset the margins to 0 for those items (or for DIVs in general if you want).

    I have no idea what you're talking about on the scaling stuff without being able to see what you are talking about....if you a have a link to your code plz post it.
    This is correct, all my other images are being called fine from my Images folder in relation to my css file.

    right now the site is kinda junk after messin with a bunch of stuff but heres a link
    itoobie.backtoclassic.com
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    OK, to get rid of the whitespace you need to float:left; all of your DIVs except for the #wrapper DIV. After you do this, you will have to do some tweaking to get your text and navigation to go where you want. I highly suggest that you don't use position:absolute; on your sidebar nav and instead use position:relative; . Position:absolute; has its purpose but usually only as a last resort.

    Using your url("Images/footer.png") link wouldn't load the footer image for me. Are you sure you still have your footer.png file and that its in the Images folder?

    Comments on this post

    • itoobie agrees : footer wasnt uploaded properly and floating worked =)
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0
    Originally Posted by DonR
    OK, to get rid of the whitespace you need to float:left; all of your DIVs except for the #wrapper DIV. After you do this, you will have to do some tweaking to get your text and navigation to go where you want. I highly suggest that you don't use position:absolute; on your sidebar nav and instead use position:relative; . Position:absolute; has its purpose but usually only as a last resort.

    Using your url("Images/footer.png") link wouldn't load the footer image for me. Are you sure you still have your footer.png file and that its in the Images folder?
    /facepalm wow while I was working on the header/footer a bit I completely forgot to reupload it working through ftp, I feel like an idiot.

    Only thing now is the resolution, when I change resolution the header and footer height dont change at all while the images actually do it seems.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    sorry, but, I gots nothing for ya to help with your scaling/resolution issue..hopefully one of the gurus will be able to chime in and give assistance.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0
    Originally Posted by DonR
    sorry, but, I gots nothing for ya to help with your scaling/resolution issue..hopefully one of the gurus will be able to chime in and give assistance.
    none the less I appreciate the help and have learned a bunch from yah. Thanks once again =)
  20. #11
  21. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    Only thing now is the resolution, when I change resolution the header and footer height dont change at all while the images actually do it seems.
    That's what it's set to do. If you want to change the heights, the simplest thing is to use media queries to change the heights in response to different window/viewport sizes.

    The images change sizes because you're using "background-size: contain".

    Would you mind explaining why you put multiple links inside an <h1>?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    22
    Rep Power
    0
    Originally Posted by Kravvitz
    That's what it's set to do. If you want to change the heights, the simplest thing is to use media queries to change the heights in response to different window/viewport sizes.

    The images change sizes because you're using "background-size: contain".

    Would you mind explaining why you put multiple links inside an <h1>?
    That was actually a lazy fix I did when I first made the site, to raise the links up a bit.

    I havnt really been working on the content too much while I try to get the layout set as I think that would be the best approach to getting it how I want.

    Going to look into media queries right now, thanks

IMN logo majestic logo threadwatch logo seochat tools logo