SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Odd Display Issue + Centering Page

    Hello all,

    I am working on the website at georgiasbest.com, and I am seeing some weird display issues that I otherwise don't see on my local machine. The whole image is practically cut off! What is going on here? Something to do with the web host?

    I also need to find out what I did incorrectly to center the page. Apparently margin:0 auto; isn't correct in this case.

    -T

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Firstly, remove this:

    Code:
    * {
    margin: 0 auto;
    padding: 0;
    background: url(gbbg.gif);
    }
    You don't want every element on the page to be centered (it wouldn't work on every element anyway), and you certainly don't want every element to have the same bg image.

    Put a wrapper div around your content and center that instead with margin: 0 auto;

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    The code Ralph cites looks like some sort of adapted reset. I like resets, but not the "universal selector" "hard" resets, as you're using here. They cause lots of problems. You might find some resets more to your liking here. There are a million different ways to do them, and I find myself veering from one reset to another almost on an arbitrary basis. I've used Russ Weakley's reset as often as anything else. The big thing is to remember that you can and should modify any reset you use to suit your own needs.

  4. #4
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes, this worked:


    Code:
    body{
     background:url(gbbg.gif);
    }
    #container{
     margin:0 auto;
     padding:0;
     width:500px;
     height:763px;
     background:url(hpbg.jpg) no-repeat;
    }
    h1{
     color:#009;
     text-shadow:1px 1px 1px #000, 1px 2px 1px #03F;
     font-weight:bold;
     font-size:40px;
    }
    However, now the site is bumped down from the top about 20px when I want the image snug at the top.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by etidd View Post
    the site is bumped down from the top about 20px when I want the image snug at the top.
    You need

    Code:
    h1 {
      margin-top: 0;
    }
    It's an issue of collapsing margins.

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    @ralph.m has helped me solve dozens of issues. Thanks one more time!

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,221
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    No worries! That's what we are here for.


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
  •