Can this website be centered?

Discussion in 'CSS' started by mark_s, May 25, 2008.

  1. #1
    mark_s, May 25, 2008 IP
  2. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Absolutely. I took a quick look at your CSS and your HTML and from the looks of it, you should be able to center your content by replacing your #main_container code with the following:

    
    #main_container {position: relative; display: block; top: 10px; margin: 0 auto; }
    
    Code (markup):
    By adding the margin rule, you're telling the browser to set the left and right margins to be the same width and to do it automatically; what this does is center block-level elements to their parent. In your case, it will center the main container div to the center of the Body.
     
    steelfrog, May 25, 2008 IP
  3. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks but that didn't work :(
     
    mark_s, May 25, 2008 IP
  4. ferman

    ferman Well-Known Member

    Messages:
    968
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    140
    #4
    #main_container {margin: 0px auto; }

    just try to simplify the code as above
    hope it will solve the problem
     
    ferman, May 26, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I remember telling you how to do this in a thread a long time ago..
     
    wd_2k6, May 26, 2008 IP
  6. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I took a deeper look into your code and you have several issues at play here.

    First off, your HTML is out of whack. You have extra div tags which is usually a sign that you closed a div too early somewhere.

    It also doesn't validate (validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.murraysworld.com%2Findex2.php)

    Second off, you have no global wrapper/container. You start several (main_content) but they are closed a few lines after. You need to have one main div that covers the entire site in order to align the content.

    Third, your CSS needs optimization. I spotted allot of redundant styles and allot of things you have defined that really didn't need to be defined.

    In short, you've got a long road ahead. Let me know if you need help with something in particular and I'll try to give you a hand.
     
    steelfrog, May 26, 2008 IP
  7. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Steelfrog, a bit harsh there - nearly all my invalid XHTML is from a YouTube embed which is essentially out of my control. And a few old CSS styles is hardly worth worrying about. I don't have a long road ahead at all :)

    I've made the new layout live and got rid of that one extra div but I still can't get it centered.

    New URL: http://www.murraysworld.com/
     
    mark_s, May 26, 2008 IP
  8. kevster1

    kevster1 Peon

    Messages:
    747
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #8
    #wrap {
    width: 760px;
    margin: 0px auto 0px auto; /* top, right, bottom, left */
    padding: 10px;
    border: 1px solid #000;
    background-color: #eee;
    }

    then place the content inside <div id="wrap">
    works for me :)
     
    kevster1, May 26, 2008 IP
  9. steelfrog

    steelfrog Peon

    Messages:
    537
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Hi mark, I didn't mean to offend you; what I meant is that you will have to dig through your code to figure out what the problem is. I've tried to simply drop in an extra container around your content but it did not resolve the issue, nor did simply removing the offending extra div closing which means that the problem lies somewhere in the CSS, most likely caused by an invalid width/display setting.

    The CSS issues I mentioned earlier could potentially cause some issues. If you declare styles in a parent, subsequent child containers can inherit the style by default.

    I'll try to take a deeper look tonight if time allows and see if I can't help you a bit.

    As for the YouTube embed, there are some work-around solutions out there. I haven't embedded a Flash video in a while but I'll see if I can't dig up that link for you.

    Hmm, I've tried that but it doesn't actually center it. There's an issue with the right-side margin/padding.

    [EDIT] Nevermind, got it. Drop this in right after you open your BODY tag. Kevster got it, but had the width value wrong and I was wrong assuming that I had to declare the width. Good catch, Kev. I didn't calculate your width size to the pixel-perfect value, but this looked fine in Firefox.

    <div style="width: 1000px; margin: 0 auto;">
    Code (markup):
     
    steelfrog, May 26, 2008 IP
  10. mark_s

    mark_s Peon

    Messages:
    497
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #10
    That worked! Thanks a lot.

    Now I'm going to revert until I can style the website to look better centered.

    Sorry for misinterpreting you before, now I understand what you meant.
     
    mark_s, May 26, 2008 IP