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,118
    Mentioned
    448 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;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,118
    Mentioned
    448 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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  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,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No worries! That's what we are here for.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •