Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 19
  1. #1
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    I'm currently try to build my first site from scratch and I'm having some CSS issues. What I would like to happen is my slideshow on the homepage to always stay within the navigation bar and the footer. However when the screen is adjusted the footer will sometimes go under the slideshow; I adjusted the zindex so it did not overlap it. I'd like to fix the CSS so that the center div always stays within the header and footer.

    My Site: http://artsatheart.atwebpages.com/

    Thank you in advance for your help!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The thing I'm about to emphasize isn't in bold to offend you...it's intended to drive home one of the most important and least understood concepts when it comes to floats:

    When you float, you must clear.

    You have three floated divs: center, left, and right (by the way, you don't even need three columns on this page, but that's for another day). After the right one, put this:

    <div style="clear: both;"></div>

    This isn't your fault, by the way...floats are very strange animals and take a lot of time and effort and swearing and bashing your head against the wall to master, and almost no one explains them well. Basically, what happens is that the height of a floated element isn't incorporated into the height of its container (if there is one)...it's sort of its own being "floating out in space", if you will.

    Hopefully, this makes some sense to you.
    AlphaMare likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    Thank you for your response!

    I placed the div clear after the right column within the container div. However when I shrink the browser window vertically the slideshow still does not stay within the navigation and footer. Did I do something wrong?

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Ahhh. You've got a second problem...absolute positioning. Whenever you use absolute positioning, the flow of your document is broken. What this means is that when you position an item, it will no longer follow the normal rules and conventions of document flow.

    in your case, it's your footer. You'll have to remove the absolute positioning. The downside is that on longer pages, your footer will not be at the bottom of the page unless you create a minimum height for your content area...but in your particular case, that's not that much of an issue because your pictures are so large.
    tksforlife likes this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    It worked! Thanks!

    I notice that no matter what I set the footer height to now, it doesn't change. How can I set it to a specific pixel height?

  7. #6
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You mean the white space at the bottom is bigger than you expect it to be?

    Other than writing really long pages...unfortunately, no. This is one of those design decisions you have to make, where you either have the footer overlap or you have extra space in it. Personally, I'd leave it the way you have it.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  8. #7
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    I see. Thats a major drawback...

    For my copyright tag at the bottom is it possible to have it centered at the bottom of the footer div? I created a ID for it but its not quite working the way I'd like. Appreciate your help!

  9. #8
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You could declare your copyright p as an inline element...that might work. I usually don't try to do things like this, though.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  10. #9
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    Is there a better way of doing what I'm attempting?

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Unfortunately, none that I know about. Your big issue is that you have different browsers, different screens, different resolutions, different toolbars on each browser, etc. and so on.

    If anyone would have an answer to this, it would be AlphaMare. Maybe Webzarus or smoseley or a handful of others. Sorry, dude...I can't think of one.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:48 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com