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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Text Align Not Working???

    Trying to get text align right for a certain part of txt(Leeds United 0) on the same line as 'Man United 2' how can i do this what do i need to change???

    My HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <title>Handheld Manager</title>
    <style type="text/css">
     div.c1 {text-align: center}
    </style>
    </head>
    <body>
    <div class="c1"><img class="banner" src="" alt="Handheld Manager banner"></div>
    <div class="navbar"><span class="nav1 navbar"><a href="index.html">Home</a> | <a href="fixtures-and-results.htm">Fixtures and Results</a> | <a href="arcade-games.html">Arcade</a></span></div>
    <div class="container">
    <h1>Welcome To Handheld Manager!</h1>
    <p><span class="txt1">Man United 2</span></p>
    <p><span class="txt3">Leeds United 0</span></p>
    <div class="c1">
    <p><span class="txt2">© Handheld Manager 2011</span></p>
    </div>
    </div>
    </body>
    </html>
    My CSS:
    Code:
    body {
    font-family: calibri;
    background: rgb(244, 240, 236);
    }
    .txt1 {
    text-align: center; 
    color: #000000;
    }
    .txt2 {
    font-size: small;
    }
    .txt3 {
    text-align: right;
    }
    h1 {
    text-align: left;
    }
    .container {
    width: 692px;
    border: 1px solid black;
    margin:0 auto;
    margin-top: 20px;
    background-color: #ffffff;
    padding-right: 4px;
    padding-left: 4px;
    overflow: auto;
    }
    a:link {
    color: #6699ff;
    text-decoration: none;
    }
    a:visited {
    color: #6699ff;
    text-decoration: none;
    }
    a:hover {
    color: #0000ff;
    text-decoration: underline;
    }
    .banner {
    border: 1px solid black;
    }
    .nav1 {
    display:inline;
    }
    .navbar {
    background-color: #dcdcdc;
    margin:0 auto;
    margin-top: 20px;
    width: 692px;
    border: 1px solid black;
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    padding-right: 4px;
    }

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    If this is a table of results, eg:

    Man Utd 0 0 Arsenal

    then I would use an html table, as it is tabular data. Then you can set the text-align property for each cell.

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Would something like this work?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Handheld Manager</title>
    <style type="text/css">
    div.c1 {text-align: center}
    body {
    font-family: calibri;
    background: rgb(244, 240, 236);
    }
    .txt1 {
    float:left; 
    color: #000000;
    }
    .txt2 {
    font-size: small;
    }
    .txt3 {
    float: right;
    }
    h1 {
    text-align: left;
    }
    .container {
    width: 692px;
    border: 1px solid black;
    margin:0 auto;
    margin-top: 20px;
    background-color: #ffffff;
    padding-right: 4px;
    padding-left: 4px;
    overflow: auto;
    }
    a:link {
    color: #6699ff;
    text-decoration: none;
    }
    a:visited {
    color: #6699ff;
    text-decoration: none;
    }
    a:hover {
    color: #0000ff;
    text-decoration: underline;
    }
    .banner {
    border: 1px solid black;
    }
    .nav1 {
    display:inline;
    }
    .navbar {
    background-color: #dcdcdc;
    margin:0 auto;
    margin-top: 20px;
    width: 692px;
    border: 1px solid black;
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    padding-right: 4px;
    }
    .clear {
    	clear: both; }
    </style>
    </head>
    
    <body>
    <div class="c1"><img class="banner" src="" alt="Handheld Manager banner"></div>
    <div class="navbar"><span class="nav1 navbar"><a href="index.html">Home</a> | <a href="fixtures-and-results.htm">Fixtures and Results</a> | <a href="arcade-games.html">Arcade</a></span></div>
    <div class="container">
    <h1>Welcome To Handheld Manager!</h1>
    <div class="clear"></div>
    <p class="txt1">Man United 2</p>
    <p class="txt3">Leeds United 0</p>
    <div class="clear"></div>
    <div class="c1">
    <p><span class="txt2">© Handheld Manager 2011</span></p>
    </div>
    </div>
    </body>
    </html>
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    btw, your current DOCTYPE is incomplete which may turn IE into quirks mode.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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