www.webdeveloper.com
Results 1 to 6 of 6

Thread: Gap appears between footer and background image

  1. #1
    Join Date
    Jul 2009
    Posts
    37

    Gap appears between footer and background image

    On my website www.cherrietestingwebsite.com on the all the pages with the exception of the homepage there is gap between my background image and the footer, which I can't get rid of, does anyone know what is causing the problem?

    Thanks

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    I don't really see any gaps between the image and the footer, even on those other pages. but reviewing the code, the <div> structure seems off.
    Oh, and first, the DOCTYPE declaration is not on the very first line, instead you have:
    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    DOCTYPE info here:
    http://www.w3schools.com/tags/tag_doctype.asp
    Very important to get this right, since the DOCTYPE is howthe browser knows which set of rules to apply when parsing the page.
    Now the <div> structure... there is GREAT commenting on the page:
    Code:
    <!-- MAIN CONTAINER DIV BEGINS -->
    but your <div> structure does not follow the comments. For example, comment says:
    Code:
    <!-- MAIN CONTENT CONTAINER DIV BEGINS -->
    But there is no opening or closing div for the image container.
    And at the bottom:
    Code:
    <!-- MAIN CONTAINER DIV ENDS -->
    but there is no closing div tag (</div>).
    So if the DOCTYPE is off and there are mismatched <div> tags (that is, not an open and close tag as a pair), the page layout can be way off.
    For your review:
    It's good practice when coding to put in the closing tag to any element as soon as you finish the opening tag.
    So for example, put in your opening #wrapper tag and then put in the closing #wrapper tag before you put anything in #wrapper.
    Now if you are using #wrapper in the normal way... that is to "wrap" all the content.... then everything... all content needs to be placed between the opening #wrapper tag and the closing #wrapper tag.
    Now as you add content to the main, all encompassing wrapper <div>, indent each level of nesting. So when you nest one level deep, indent the code so you can visually see what content in inside what. Next level of nesting gets indented one more time.
    That practice, along with always adding the closing tag a couple of lines below the opening tag at the same time the opening tag is created, will help you keep content in the proper container element and eliminate extra opening or closing tags...... always crate them in pairs.
    PS: After trying to decypher the <div> structure of another post, let me add one thing to "always create <div> tags in pairs... an opening and closing".... Add a comment right before the closing tag to remind you which <div> you are closing... like this:
    Code:
    <!-- close wrapper -->
    </div>
    That sure helps when trouble shooting later.
    Best wishes,
    Eye for Video

  3. #3
    Join Date
    Jul 2009
    Posts
    37

    Thanks

    Thanks for your help, I sorted all my coding and it now all validates to xhtml strict apart from the fact there is one error on the homepage, as I have used Jquery but I don't know how to get around this at all, am not sure if you can. Thankfully the problems with the cross-browsers have now gone. I was wanting to put text over the background image, I have looked at some tutorials, what is the easiest way to achieve this? Once again many thanks.

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Well background images have a special meaning when talking about CSS. A <div> background image is not counted as content so you can use an image as the "background" and still add regular old text as the content of a <div>.
    http://www.w3schools.com/cssref/pr_background-image.asp
    So first, give each section that you want to have a background image a unique name... you can't call them all
    Code:
    <div id="contentholder">
    make it
    Code:
    <div id="contentholder_aboutus">
    etc. and then use the background image property... for example:
    Code:
    background-image:url(../images/page_back.jpg);
    Since the home page has more than a single image, to place text over the top of the slideshow images, you'll need to position a separate <div> stacked on top of those images using the css property z-indexing:
    http://www.w3schools.com/cssref/pr_pos_z-index.asp
    z-indexing must be used with a declared position... which can be a little tricky until you understand the "Parent rule", so study this topic well.
    http://www.w3schools.com/cssref/pr_class_position.asp
    For review:
    http://www.webdeveloper.com/forum/sh...lared+position
    Best wishes,
    Eye for Video

  5. #5
    Join Date
    Jul 2009
    Posts
    37
    Yeah thanks for your help, I have carried out the advice you gave regarding the background images on the about us page and it works fine, however the only problem is the text creates a black gap at the top between the image and the navigation bar, the more text you type the bigger the gap gets. It happens across all the browsers too?

  6. #6
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    By default paragraphs <p> have a top and bottom margin... so there is always space above & below the paragraph.
    Code:
    p
    {color: #ffffff;
    font-size: 18px;
    padding-left: 10px;
    padding-top: 30px;
    }
    In your CSS you are using a 30 pixel top padding....so that plus the default top margin are pushing the container with the text in it down a little, exposing the black background.
    So give the <p> a
    Code:
    margin-top: 0px;
    and that should take care of it.
    Best wishes,
    Eye for video

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles