SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    strange background problem in home page.

    The background in my home page seems to be positioning itself at the top even though i have it set for middle in my css file. It is also only doing this on the home page and none others that use this css file. I can post the code if needed, thank you

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    I can post the code if needed, thank you
    Preferably a live link. Nothing beats seeing the real thing.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    gotcha, here is the link http://superfunproductions.com/home.html you can see that its being cut off on the left side a bit i'm trying to fix that as well

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Your original image has the leaves cut off on the left and a lot of empty space on the right, so you need to fix that first. Crop the original file to the leaves only, then save it for the web again.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well i'm curious as to why it is doing this because this is the only page that it looks like this. On all other pages the background is centered.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You don't have much content on the first page so the background is centered with the content as the body height depends on content.

    You could set a min-height for html which will allow the image to sit in the center.

    Code:
    html{min-height:100%}

    However on very long pages your image might not be visible if there is a lot of content so better to used background-attachment:fixed instead.

    Code:
    body{
    background:url(images/leaves.png) no-repeat fixed 50%;
    }
    Now the image will be central whatever the content.

    Note that at 400k that leaves.png is 10 times bigger than I would like to use for a background like that.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it looks like that helped the leaves, I will look into making it smaller but i have to go through the boss. The facebook and twitter links are still behind the slideshow. Should the same thing be done for them?

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the header is being cut off as well and i'm not sure what is doing that as well as the buttons overlapping it.

  9. #9
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i fixed the button overlapping problem but now they are not centered in the lines.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Trying to align elements with a background image is fraught with difficulties, but as a quick fix, you could do this:

    Code:
    #mainMenu {margin-top: 18px;}
    A better option would be to add a top and bottom 1px border to the UL and not have the lines in the background image.

  11. #11
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a bunch, any idea why the header is cut off?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    thanks a bunch, any idea why the header is cut off?
    Yes, your container is 1000px wide, but your header2 image is 1080px wide, so because it's centered, 40px is hidden either end. Either trim the image to 1000px width, or do something like this:

    Code:
    url("../images/header2.png") no-repeat scroll 40px top transparent
    Your UL is also set way too wide, so it's worth fixing that. Don't let any elements be wider than your container, or it will cause problems somewhere along the line.

  13. #13
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah I see, I didn't catch that. Thanks so much for your help.

  14. #14
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's strange that the twitter and facebook links have disappeared on the home page as well as the twitter ticker. They were stuck behind the slideshow some how but now they are not appearing at all. I suppose that looks better but they are supposed to be on the bottom.

  15. #15
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Yes, because the slideshow is positioned absolutely, the other elements don't know it's there, and are thus sitting underneath. A better option that position: absolute on the #slides div would be

    Code:
    #slides {
      width: 800px;
      margin: 0 auto;
    }
    Then you'd also have to reposition the back and forward arrows. But the Twitter/ FB buttons will appear where they should again.

  16. #16
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm... that made the buttons appear but they were on the right side of the screen. It also looked like it lowered the slideshow or is that just my imagination? Since the buttons are absolute as well would it work to reposition them like this as well?

  17. #17
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know why, but the arrows won't reposition. They don't seem to move what ever i do

  18. #18
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by shakmbakm View Post
    I don't know why, but the arrows won't reposition. They don't seem to move what ever i do
    Add position: relative to the #slides div, and then you can position them in relation to that with position: absolute.

  19. #19
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Derp of course, that's the one thing that didn't come to mind. Thank you.
    Last thing is it moving down or is it just playing mind tricks on me?
    The buttons are a bit to the right, I'm not sure why it's doing that because I have it at center now?

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    The #header div has a large height on it (not recommended to add heights) so it's pushing the slideshow down. Presumably that's the same as before.

    Not sure what's moving the buttons, but you could code it better, anyhow. Firstly, don't use <center> as it's from the last century (a presentational element). Create a container div instead, and perhaps set the buttons to display: inline-block to center them. Also, rather than use <br>s, perhaps but the copyright line in its own div or a <p> to keep everything neat and nicely stacked.

  21. #21
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips! Most of this was here when I started on the site, I inherited it form another person so sometimes I get confused.

  22. #22
    SitePoint Zealot
    Join Date
    Apr 2012
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right now it looks like its only through the html. So I think I would have to create a class connected to them before I could make a container.

  23. #23
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Not sure what you mean. Start by replacing <center> with something like <div class="footer">.


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
  •