SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Addict rosem's Avatar
    Join Date
    Jul 2003
    Location
    Chicago, IL
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering a Page with CSS - Problem will Pay $$

    Alright, so I've been doing CSS for a while now, but this is really starting to get to me.

    I've centered sites before with this method :

    http://www.simplebits.com/notebook/2...centering.html

    But I can't seem to get my current site to do it. If I have the postion of my boxes set to "absolute" will that not allowing that centering method to work?

    Any help would be apreshiated, I can post my code, or you can message me on AIM - I'll pay some $$ paypal if you help me out

    AIM: rosemFSU

    Thanks,
    Mike

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Theres a full explantion of centering in the FAQ and also an explanation of how to centre an existing site that was centred already.

    It's pretty simple and all you need do is find the width of your existing page and apply a wrapper of that width and use the usual centering methods as in the article and in the FAQ.

    The only extra thing you need is to apply position:relative to the surrounding wrapper so that any absolute elements in the page will now take their parent to be this new centred wrapper and not the viewport. This means the absolute elements will stay in relation to the top left corner of the wrapper no matter where it moves as the page is resized.

    You shouldn't mention money in this forum as help here is free. If you want paid help you can post in the sitepoint marketplace forums once you have read the guidelines

  3. #3
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely positioned elements are removed from the flow.

    If you must use absolute positioning and elements have fixed widths you can set left:50% and then use a negative left margin of half the element's width to center them,
    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.

  4. #4
    SitePoint Addict rosem's Avatar
    Join Date
    Jul 2003
    Location
    Chicago, IL
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I did what you said about the wrapper (I named it "container" however ) do you care to have a look at my code and see what I'm doing wrong?

    That would help me out quite a bit.

    Thanks,
    Mike

    ALSO, Thanks for the fast reply everyone!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Can you post the code or a link and I'll take a look.

    Absolutely positioned elements are removed from the flow.
    Thats true but they are also absolutely placed in relation to their parent. Therefore setting the parent to relative will keep the layout intact (unless the layout is not left aligned of course then there will be nothing to centre).

  6. #6
    SitePoint Addict rosem's Avatar
    Join Date
    Jul 2003
    Location
    Chicago, IL
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.rosem.com/work/random/css_test.zip

    Have a look, and let me know

    Thanks,
    Mike

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Paul said, your container should be position:relative. When you do that, you'll find that your page is not exactly centred but a little to the right of centre. That's due to the numbers you've used for your absolute-positioned divs.

  8. #8
    SitePoint Addict rosem's Avatar
    Join Date
    Jul 2003
    Location
    Chicago, IL
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there any way to get it right dab in the center?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Bon Rouge said you have offset your page by 50px ao that becomes part of the centering. You can change all your left positions by 50px less or you can trick the browsers with a negative position as follows.
    Code:
    #container {
    margin: 0 auto;
    width: 710px;
    text-align: left;
    position:relative;
    left:-50px
    }
    That should counteract the positioning if you can't be bothered to change all the absolutes

  10. #10
    SitePoint Addict rosem's Avatar
    Join Date
    Jul 2003
    Location
    Chicago, IL
    Posts
    302
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AHHHH.... It all just clicked now

    Before you posted that I went back and changed all the position-left's back to 0 instead of 50. So both methods will work...

    What one is "better" or more correct. The way I did it, or your way?

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,379
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Best to have them set to zero as you know where you are now. If you had millions of them in the page then you could have used my method to make life easier

  12. #12
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background-color

    I am having a similiar situation. I want to set set a background color. So I have my CSS as:

    body
    {
    text-align: center;
    background-color:Gray;
    }
    #container_2
    {
    margin: 0 auto;
    width: 950px;
    text-align: left;
    }


    This is not working. Why?

  13. #13
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really see how this is similar, but... maybe it's the capital 'G' you have. CSS properties and values are all lower-case.

  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)
    Try using the hex color.
    Code:
    body
    {
    text-align: center;
    background-color: #808080;
    }
    #container_2
    {
    margin: 0 auto;
    width: 950px;
    text-align: 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.

  15. #15
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BonRouge
    I don't really see how this is similar, but... maybe it's the capital 'G' you have. CSS properties and values are all lower-case.
    The reason I said it was similar because I started off by wanting to center my page (which works) and I wanted to extend it by having a background-color (which doesn't work).

    BTW, I also tried small g, but no luck.
    Thanks

  16. #16
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz
    Try using the hex color.
    Code:
    body
    {
    text-align: center;
    background-color: #808080;
    }
    #container_2
    {
    margin: 0 auto;
    width: 950px;
    text-align: left;
    }

    Even hex color doesn't work.
    Thanks

  17. #17
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I didn't read your mind and see the tangential relationship between this thread and your background colour.

    You 'll have to show us your page - what you have there should work.

  18. #18
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
            
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head><link href="../Icons/favicon.ico" rel="SHORTCUT ICON"><link href="PSS.css" rel="stylesheet" type="text/css"><title>
    </title><link rel="stylesheet" href="../Themes/Basic/CA_StyleSheet.css" type="text/css" /><link rel="stylesheet" href="../Themes/Basic/PSS.css" type="text/css" /><link rel="stylesheet" href="../Themes/Basic/StyleSheet.css" type="text/css" /></head>
    <body>
        <div id="container_2">
        <form method="post" action="default3.aspx" id="__aspnetForm">
    <div>
    <input type="hidden" name="__VIEWSTATE" value="OwXpEZh1FUntQLKJeH2WtiCnKOGA6JvXXqbtDt3UkNws/lnFl2SqkAEhFatP6P/+" />
    </div>
    
        
        <div style="font-size:10pt; font-family:Verdana;">
    
        Welcome to Default3.aspx. To access the application, please
        <a id="ctl00_ContentPlaceHolder1_HyperLink1" href="Default4.aspx">click here</a>.
            </div>
    
        </form>
        </div>
    </body>
    </html>
    Thanks

  19. #19
    SitePoint Addict Melter's Avatar
    Join Date
    Sep 2002
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Won't adding background-color:transparent to container_2 solve this?
    vinyl digging - on a secondhand vinyl journey

  20. #20
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't had time to look at this properly, but I think the form might be more of a problem than the second div. Maybe background:transparent on the form id...

  21. #21
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yaip has 4 CSS files linked there. It seems to me the problem might be that the color is set in one and overridden in another.
    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.

  22. #22
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't spot that (I said I hadn't looked at it properly)...

    Yeah, it's probably that, isn't it?

  23. #23
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you are right. I didn't realize that till I did a View->Source in my browser. I am using ASP.NET and was not aware what the server generated.

    I fixed this by doing a ! IMPORTANT for the color attribute.
    Thanks

  24. #24
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to have a 3-D effect for the #container_2 so that it will appear as if it is slightly raised from the background.

    How will I accomplish that?
    Thanks

  25. #25
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    border: 2px outset #000;
    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
  •