Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member
    Join Date
    Jan 2004
    Posts
    62
    Member #
    4758
    Right now i'm trying to get a DIV to center like the background image on my site so that the DIV looks like it's inside the background. i am going to have the background image be inside the div along with text. i don't know how to perfectly center DIV like you can with "background-position: center center". How would i go about this?

    All the site is going to consist of is the code below. i've added a link to the site as well so you can get a better picture of what i'm trying to do.

    The Webpage

    Code:
    <html>
    <head>
    <TITLE>Just For You Shhhh</TITLE>
    
    <style="css/text">
    body {
    background: #7592ff;
    background-image: url('rachBG.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    color: #FF85B4;
    }
    table.calig, tr.calig, td.calig { 
    font-family: sans-serif;
    font-size: 21px;
    border: 0px;
    font-weight: bold;
    }
    
    div.main {
    height: 748px;
    width: 1004px;
    z-index: 1;
    }
    
    div, div.main body, table, tr, td {
    font-family: san-serif, arial;
    font-size: 13px;
    border: 0px;
    }
    
    </style>
    </head>
    
    <body>
    <div align="center" class="main">
    <b>Test...</b>
    </div>
    
    </html>
    - flipjargendy

  2.  

  3. #2
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    add this:

    body {
    text-align: center; <-- exploits ie's block element bug
    }

    div.main {
    margin: 0 auto; <-- rule for standards compliant browsers
    text-align: left; <-- compensates for center alignment
    }

  4. #3
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Avoid using text-align as a hack to align block objects, as everything in the hierarchy will also have its text alignment changed.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  5. #4
    Senior Member Jack000's Avatar
    Join Date
    Aug 2004
    Posts
    250
    Member #
    7173
    wouldn't this cause all child elements of .main to have left alignment?

    text-align: left; <-- compensates for center alignment

  6. #5
    Junior Member
    Join Date
    May 2005
    Posts
    11
    Member #
    9851
    Yeah it actually would therefore it would be cool to use #main instead of class. Unless you want it to be aligned otherwise you prolly could use another class... Not sure bout that tho

  7. #6
    Member
    Join Date
    Jan 2004
    Posts
    62
    Member #
    4758
    That didn't work...

    For some reason the webpage is displayed how i want it to in Mozilla Firefox. When i view it in IE, there are errors. Everything i have in style shows as text. And still it does not center properly. It centers, but i want the DIV to center while the text is still left aligned so that the page looks like this picture
    - flipjargendy

  8. #7
    Member
    Join Date
    Jan 2004
    Posts
    62
    Member #
    4758
    This is what it looks like so far. My new code is below. The only thing that isn't working is that div.main doesn't fill the whole screen verticaly. i tried making the height 110% but it just fills more of the page and adds a scroll bar. i'm viewing this in Mozilla Firefox and IE. Let me know how it looks on your computer though.

    ** i've added borders so that you can see what's going on easier.
    - flipjargendy

  9. #8
    Senior Member Physt's Avatar
    Join Date
    Jul 2004
    Posts
    255
    Member #
    6655
    You're page isn't loading for me, but I'll explain how centering is generally done..

    Code:
    html{
       text-align: center;
    }
    div#container{
       margin: 0px auto;
       width: 700px;
       text-align: left;
    }
    HTML Code:
    <html>
    <body>
    <div id="container">
    <p>This text will be left-aligned but in the center container..</p>
    </div>
    </body>
    
    </html>
    The width must be set specifically.. In this case I used 700px.. Text-align: center centers everything.. Margin: 0px auto; centers the contianer.. 0px top and bottom margin.. auto left and right margin (centered).. text-align: left; fixes the alignment of the text..

    This works in every browser that is currently used by at least .5% of browsers (about.. probably even more now) ..
    www.controlalternate.com - Web resources and free templates. www.chaosconcepts.net - Custom web and graphic design.
    www.blog.chaosconcepts.net - My Blog

  10. #9
    Member
    Join Date
    Jan 2004
    Posts
    62
    Member #
    4758
    i forgot to post my code. Here it is. Any ideas why the page isn't loading in IE but will in Mozilla Firefox?

    i have got centering to work properly with this now. i will try the other way suggested when i can figure out how to get DIV.main to actually fill 100% of the screen verticaly.

    The below code creates this page
    Code:
    <html>
    <head>
    <TITLE>Just For You Shhhh</TITLE>
    
    <style="css/text">
    <!--
    body {
    background: #A6FFC3;
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-position: center center;
    color: #FFBDFF;
    }
    table.head, tr.head, td.head { 
    font-family: sans-serif;
    font-size: 21px;
    border: 0px;
    font-weight: bold;
    }
    div.main {
    background-image: url('rachBG.jpg');
    background-attachment: fixed;
    background-repeat: repeat-y;
    background-position: center center;
    height: 100%;
    padding: 0px;
    width: 1026px;
    z-index: 1;
    margin: 0 auto; <-- rule for standards compliant browsers
    text-align: left; <-- compensates for center alignment
    }
    div, div.main body, table, tr, td {
    font-family: san-serif, arial;
    font-size: 13px;
    border: 2px;
    border-style: solid;
    }
    -->
    </style>
    </head>
    
    <body>
    <div class="main">
    <center><table height="100%" width="934"><TR class="head"><TD class=head><b>Test.....</b></TD></TR><TR><TD>&nbsp;&nbsp;&nbsp;&nbsp;TextTextTextTextTextTextTextTextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText Text</TD></TR></table></center>
    </div>
    
    </html>
    - flipjargendy


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:28 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com