SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Having a height problem

    And no, I don't mean with my short stature (grins)

    http://www.johnnywattsagency.com/index-build.php
    http://www.johnnywattsagency.com/style.css

    I'm using this website as my guide ... http://www.cowellfortreasurer.com/

    For some reason, the #content is only staying a certain height, which is too short obviously as it is not as tall as the text in the #main.
    What am I missing?

    Also - the background image (blue) for the footer is 1000px tall, and yet it is truncating itself.
    Why is that?

    Thanks in advance,
    ~ Barbara
    Barbara E.

    Will add my site links when I'm more established here.

  2. #2
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #main is floated which means it is removed from the normal document flow.

    That basically means the parent in this instance (#container) dosnt recognise the fact that #main is breaking out of #content, add overflow:auto to #content and it will behave itself and keep a better eye on the height of #main.

    I assume that the 1000px tall image is to fill the gap under the footer so that the bottom of the page is always the footer? If so then you can put the background image ( background: url('images/blue_pattern.png') repeat-x; ) on the body in your CSS as the wrapper hides everything above the footer. Note, you can crop this image to the minimal needed height and width to repeat the pattern and save loading the large image.

    On a side note, I really really hope the intention isn't to replicate the reference site, unless the same person owns both.

  3. #3
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.

    a) I added the overflow auto ... and it sort of fixed the problem.

    The #content, with the white background, is supposed to overlap the footer ... just like in the referenced website.

    b) I am just borrowing the effect I'm trying to achieve (the main content "paper" effect overlapping the footer) - no other elements. Once all is in place, I will swap out the footer's background image. I have no desire to plagiarize the reference site (using their images, etc).
    Barbara E.

    Will add my site links when I'm more established here.

  4. #4
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    RE: footer image

    I still don't understand why the full height of the image isn't showing. What is preventing that since I have provided no restrictions as to the footer's height or the website's height.
    Barbara E.

    Will add my site links when I'm more established here.

  5. #5
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should be able to achieve that with "position: relative;" on the #container, you may need to adjust z-index's and definatley check it across browsers.

  6. #6
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Div's are elastic, they will always shrink to the minimum height of the content which is why the image is cropped (the image isn't cropped the div is just too short to show any more). You can use CSS and Javascript work rounds to make the footer 100% tall but I would not recommend this.

  7. #7
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, position:relative did not work on the #content

    As for the footer image - I understand your explanation - thank you! =)
    Barbara E.

    Will add my site links when I'm more established here.

  8. #8
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What browser are you using?

  9. #9
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firefox 9.0.1 ...

    It's not doing it right in IE7 either (recently replaced computer, should really upgrade IE LOL)
    Barbara E.

    Will add my site links when I'm more established here.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hello. The problem is taht on #footer you have a -100px margin-top set on it. It's causing the footer to overlap the content. Please remove the margin-top:-100px and all will be good on taht issue
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But that is how the reference site [http://www.cowellfortreasurer.com/] had it setup so that the #content would overlap the footer ....
    Barbara E.

    Will add my site links when I'm more established here.

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I did not look at the reference site. I'm sorry.

    Put position:relative on "#content" to allow the content to stack on top of the footer.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've already had that (and is currently there) ... doesn't change anything.

    Am I not holding my tongue right here? hehehe
    Barbara E.

    Will add my site links when I'm more established here.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You may have it there but you're not making it correct.


    Code:
    #content {width:1000px;background-color:#fff;padding:25px 0 45px 0;overflow:auto;position:relative  -moz-box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5), -20px 0 20px -20px rgba(0, 0, 0, 0.5);  -webkit-box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5), -20px 0 20px -20px rgba(0, 0, 0, 0.5);  box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5), -20px 0 20px -20px rgba(0, 0, 0, 0.5);}
    Where is the semi colon after the position:relative? Without that ending semi colon ( ; ) the rule is not being applied. I did not look in your CSS file, sorry, because I assumed it was not there in the first place.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  15. #15
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *quietly sneaks in and adds the ; and then dashes out*

    DUH! For whatever reason, I just never noticed that. Always the simplest of things ...

    Now, IE hacks are something I haven't really delved into yet.
    So, since the shadow effect that shows in Firefox doesn't work in IE ... is there a way I can tell IE to use a substitute effect (ie, 1px border) and make sure that effect isn't applied in Firefox?
    Barbara E.

    Will add my site links when I'm more established here.

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Sure. THere are multiple ways.

    One are conditional comments. Google for more information, but basically you can target specific browser versions, or something like IE6 and up, or IE7 and down. And then write the styles to apply to only them. Google for more information.

    Then you have some "hacks" you can use

    * html #thing{} /*this targets IE6 only*/
    *+html #thing{}/*this targets IE7 only*/

    The only reason that IE7 works for IE7 and not IE6 is because + isn't recognized by IE6. This is called the star HTML hack.

    However, you might want to take a look at this article. Might be interesting to you . Uses an image but heck, if you want to go that route...
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  17. #17
    SitePoint Zealot beyre's Avatar
    Join Date
    Dec 2008
    Location
    North Carolina
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for your help ... Nutty and Ryan.
    I really appreciate you taking the time =)

    I will revisit those conditions/hacks later on and part of the "finishing touches" stage.
    Just really need to get back into adding content ... well, as soon as the client sends that =)
    Barbara E.

    Will add my site links when I'm more established here.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're welcome . I had some free time today afterwork so I thought I'd stop on by here.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Enthusiast NuttySkunk's Avatar
    Join Date
    Jan 2012
    Location
    United Kingdom
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad it worked


Bookmarks

Posting Permissions

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