SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center website in absolute middle of browser

    How do I do this? I feel like I've tried everything:

    http://www.redtreedesign.com/index3.php

    I want the thing in the middle, like http://www.redtreedesign.com/

    THX,
    JP

  2. #2
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this should help

    http://www.pmob.co.uk/temp/2column_simple_1.htm

  3. #3
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how so?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2004
    Location
    Michigan
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean in the middle both horizontally and vertically?

  5. #5
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Maybe this one is more to your liking: http://www.pmob.co.uk/pob/vertical-center1.htm

    Hope it helps.

  6. #6
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Johnny... that helped, however it does not work in FF on mac or pc. Just IE.

    jp

  7. #7
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    It should, here is the page I should have linked you to: http://www.pmob.co.uk/pob/hoz-vert-center.htm

    Though maybe you found the link, on that page I did link.

  8. #8
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, i copied the code directly from that link. i followed everything perfectly that i am aware of. however, still no luck with FireFox.

    http://www.redtreedesign.com/index3.php

    jp

  9. #9
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone have any ideas?

  10. #10
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try putting the footer inside #inner.

    You might also try removing the height declaration from #container and give it min-height:100%; instead.

    Don't forget to provide alternative navigation for those people who don't have Flash support enabled.

    P.S. Your page crashed IE7 when I tried to exit it.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  11. #11
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Kravvitz,

    It's odd now... I can get it to work in FF by min-height & height, but then it doesn't work in IE. Or, leave them both and it works in IE. ANy ideas?

    HTML Code:
    #container {
    	text-align: center;
    	position: relative;
    	vertical-align: middle;
    	display:table-cell;
    	/*min-height:100%;
    	height: 588px; */
    }

  12. #12
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's odd about IE7. Is there a way to figure out why it would have crashed?

  13. #13
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    .container {
         margin:10px auto;
    }
    <!-- 10px is the top margin, setting the rest to auto centers it -->

  14. #14
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Set the height within the conditional comment.

    It only crashed IE7 the first time. It's difficult to fix bugs when you can't reproduce one.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  15. #15
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stridox,

    i'm not sure i follow... so what else needs to be changed in the container? it's still not working for me.

  16. #16
    SitePoint Zealot
    Join Date
    Jul 2006
    Location
    Florida
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you wrap everything in a div with the class="container" or whatever else you want it to be. you also need to set a width if you haven't already, I like to use 770px, because it's the width of the browser content area in 800x600 resolutions.
    HTML Code:
    .container {
         margin:10px auto;
         width: 770px;
    }
    
    
    <div class="container">
    yoru page
    </div>
    If you still need help, posting a link to the page would help a lot.

  17. #17
    SitePoint Addict
    Join Date
    May 2002
    Location
    Louisville, KY
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Actually I do have a couple of links in this thread. Nonetheless, here it is: http://www.redtreedesign.com/index3.php

  18. #18
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cross browser css bugs

    Dan Schulz you will be missed

  19. #19
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    stridox seems to have missed that jpfour23 wants to center the page horizontally and vertically.

    The method that SoulScratch links to is inferior because when the window is too small parts of the page will not be accessible at all -- the scrollbars won't go far enough to the top or left.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


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
  •