Text Align Not Working???

gabriel515

04-10-2011, 10:49 AM

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:
<!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:
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;
}

SB65

04-10-2011, 01:36 PM

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.

optimus203

04-10-2011, 02:28 PM

Would something like this work?

<!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>

abduraooft

04-10-2011, 02:35 PM

btw, your current DOCTYPE (http://www.alistapart.com/articles/doctype/) is incomplete which may turn IE into quirks mode.