Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Text not centered.

    As you can see here:

    http://habfab.com/david/realfm/

    the text isn't centered in the elements.

    The css is as follows:

    Code:
    body {
    background-color: #F5F5F5;
    font-size: 13px;
    }
    
    #topcontainer {
    height:64px;
    }
    
    .header {
    background: url('../_images/Page_Header.gif');
    background-repeat: repeat-x;
    height: 64px;
    margin:-9px;
    position:relative;
    left:0px;
    top:0px;
    z-index:-1;
    width: 100%;
    }
    
    .social {
    background: url('../_images/logo_social_03.gif');
    background-repeat: no-repeat;
    height: 64px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    width: 338px;
    margin-left: 130px;
    }
    
    #row1 {
    padding: 20px;
    }
    
    .advertisement {
    background: url('../_images/Advertise-Box.gif');
    background-repeat: no-repeat;
    height: 273px;
    width: 351px;
    margin-right: 7px;
    display:table;
    }
    
    .slider {
    background: url('../_images/Slider.gif');
    background-repeat: no-repeat;
    height: 273px;
    width: 727px;
    margin-left: 7px;
    display:table;
    }
    
    #row2 {
    padding: 15px;
    }
    
    .radioinfohead {
    background: url('../_images/Radio_Info_Header.gif');
    background-repeat: no-repeat;
    height: 32px;
    width: 351px;
    margin-right: 7px;
    display: table;
    }
    
    .radioinfocontent {
    background: url('../_images/Radio_Info_Content.gif');
    background-repeat: repeat-y;
    padding: 25px;
    width: 351px;
    margin-right: 7px;
    display: table;
    text-align: center;
    }
    
    .realfmhead {
    background: url('../_images/Real_Content_Header.gif');
    background-repeat: no-repeat;
    height: 32px;
    width: 727px;
    margin-left: 7px;
    display: table;
    }
    
    .realfmcontent {
    background: url('../_images/Real_Content.gif');
    background-repeat: repeat-y;
    padding: 25px;
    width: 727px;
    margin-left: 7px;
    display: table;
    text-align: center;
    }
    
    #row3 {
    padding: 0px;
    }
    
    .newshead {
    background: url('../_images/News_Header.gif');
    background-repeat: no-repeat;
    height: 32px;
    width: 1091px;
    display: table;
    }
    
    .newscontent {
    background: url('../_images/News_Content.gif');
    background-repeat: repeat-y;
    padding: 25px;
    width: 1091px;
    display: table;
    text-align: center;
    margin: auto auto;
    }
    The html is:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    </head>
    <body>
    <div id="topcontainer">
    <div class="header"></div>
    <a href="#" class="social"></a>
    </div>
    <div id="row1" align="center">
    <table border="0" cellpadding="0" cellspacing ="0" align="center">
    <tr>
    <td><a href="#" class="advertisement"></a></td>
    <td><a href="#" class="slider"></a></td>
    </tr>
    </table>
    
    <div id="row2" align="center">
    <table border="0" cellpadding="0" cellspacing ="0" align="center">
    <tr>
    <td><div class="radioinfohead"></div></td>
    <td><div class="realfmhead"></div></td>
    </tr>
    <tr>
    <td><div class="radioinfocontent">content</div></td>
    <td><div class="realfmcontent">Content Here :)</div></td>
    </tr>
    </table>
    </div>
    
    <div id="row3" align="center">
    <table border="0" cellpadding="0" cellspacing ="0" align="center">
    <tr>
    <td><div class="newshead"></div></td>
    </tr>
    <tr>
    <td><div class="newscontent">Content Here :)</div></td>
    </tr>
    </table>
    </div>
    </body>
    </html>
    How can I center the text? I'm using text-align: center;
    Last edited by Vernier; 06-10-2012 at 04:54 PM.

  • #2
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Are you referring to the "Content Here " text? It's centered for me and I am using Chrome.

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What would be the best way to center these?



    Cheers

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cheers - when I do this though they aren't inline.



    Cheers

  • #5
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    CSS:

    Code:
    body {
    background-color: #F5F5F5;
    font-size: 13px;
    }
    
    #menu {
    height:64px;
    }
    
    .header {
    background: url('../_images/Page_Header.gif');
    background-repeat: repeat-x;
    height: 64px;
    margin:-9px;
    position:relative;
    left:0px;
    top:0px;
    z-index:-1;
    width: 100%;
    }
    
    .social {
    background: url('../_images/logo_social_03.gif');
    background-repeat: no-repeat;
    height: 64px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:1;
    width: 338px;
    margin-left: 130px;
    }
    
    #firstrow {
    width: 1100;
    margin-left: auto;
    margin-right: auto;
    }
    
    .advertise {
    background: url('../_images/Advertise-Box.gif');
    background-repeat: no-repeat;
    height: 273px;
    width: 351px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    }
    
    .slider {
    background: url('../_images/Slider.gif');
    background-repeat: no-repeat;
    height: 273px;
    width: 727px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    }
    Html:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    </head>
    <body>
    <div id="menu">
    <div class="header"></div>
    <div class="social"></div>
    </div>
    <div id="firstrow">
    <div class="advertise"></div>
    <div class="slider"></div>
    </div>
    </body>
    </html>
    Cheers

  • #6
    Regular Coder
    Join Date
    Jun 2012
    Location
    Near Chicago, USA
    Posts
    123
    Thanks
    7
    Thanked 19 Times in 19 Posts
    For centering background images both vertically and horizontally,
    Code:
    background-repeat:no-repeat;
    background-position:center center;
    should work.

    Will

  • #7
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cheers Will - unfortunately it's still the same

    Thanks

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    86
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorted - thanks


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •