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,957
    Thanks
    9
    Thanked 727 Times in 721 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,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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
    •