[SOLVED] Don't Know Why It's Not Looking Right

[Xtremer360]

I have this as my css page:

 

body
{
font-family: arial, geneva, tahoma, verdana, helvetica, sans-serif; 
font-size: 10px; 
font-style: normal; 
color: #000000;
letter-spacing: normal; 
word-spacing: normal;
margin: 0;
padding: 0;
}

a:link, a:visited, a:active
{
text-decoration: none;
color: #000000;
}

a:hover
{
color: #000000;
text-decoration: underline;
}

#container{
width: 100%;
color: #000000;
padding: 0px;
}

.header{
background:  url(../../AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.IE5/XWO8LA9B/%27/images/headerbg.gif%27) repeat-x;
width: 100%;
height: 121px;
color: #000000;
padding: 0px;
margin: 0px;
}

.header img{
padding: 5px;
}

.header table tr td a:link{color: #eee;}
.header table tr td a:visited{color: #ccc; }
.header table tr td a:hover{color: #660000; }
.header table tr td a:active{color: #eee; }

.header table tr td{
color: #eee;
font-size: 1.2em;
}

#container2{
background:  url(../../AppData/Local/Microsoft/Windows/Temporary%20Internet%20Files/Content.IE5/XWO8LA9B/%27/images/contbg2.gif%27) repeat-y;
width: 780px;
float: left;
}

#nav{
float: left;
width: 155px;
color: #000000;
font: 1.2em arial, helvetica, sans-serif;
text-transform: uppercase;
padding: 0 0 20px 0;
}

#nav h1{
font-size: 1.6em;
color: #fff;
font-weight: normal;
margin: 0;
line-height: 130%;
text-align: center;
background: #506887;
}

#content{
float: left;
width: 623px;
margin: 0 0 0 1px;
text-align: center;
}

#footer{
clear: both;
width: 100%;
border-top: 1px solid #222;
background: #fff;
}

.table1{
color: #000000;
font-size: 10px;
border: 1px solid #cccccc;
text-align: left;
margin-right: auto;
margin-left: auto;
}

.table1 td{
color: #000000;
font-size: 10px;
border: 1px solid #cccccc;
}

.table1heading
{
color: #000000;
font-weight: bold;
border: 1px solid #cccccc;
}

.table1headingbg
{
color: #000000;
font-weight: bold;
background-color: #D9E2FF;
}

.table1headingred
{
color: #cc0000;
font-weight: bold;
}

.table1headingredbg
{
color: #cc0000;
font-weight: bold;
background-color: #cccccc;
}

.table1red
{
color: #cc0000;
}

.rowheading
{
color: #000000;
background-color: #D9E2FF;
font-size: 1em;
text-transform: uppercase;
font-weight: bold;
}

.rowheadingred
{
color: #cc0000;
background-color: #cccccc;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
border: 1px solid #000000;
}

.row1
{
color: #000000;
background-color: #D9E2FF;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
}

.row2
{
color: #000000;
background-color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
border: 1px solid #cccccc;
}

.row3
{
color: #000000;
background-color: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
border: 1px solid #cccccc;
}

.table2{
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
border: 1px solid #D9E2FF;
text-align: left;
}



h1.backstage{
font-size: 2.4em; 
font-weight: bold; 
text-align:center;
color: #000000;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
background: #D9E2FF;
border-top: 1px solid #5e7ba0;
border-bottom: 1px solid #5e7ba0;
}

h2.backstage
{ 
font-size: 1.6em; 
font-weight: bold;
text-align:center;
color: #000000;
margin: 0px;
padding: 5px 0px;
background: #D9E2FF;
border-top: 1px solid #5e7ba0;
border-bottom: 1px solid #5e7ba0;
}

h3.backstage
{
font-size: 1.2em;
text-align: center;
color: #000000;
margin: 0px;
padding: 2px 0px; 
font-weight: bold;
background: #D9E2FF;
border-top: 1px solid #5e7ba0;
border-bottom: 1px solid #5e7ba0;
}

h4.backstage
{
font-family: verdana,tahoma,arial,helvetica; 
font-size: 10px; 
font-weight: normal;
font-style: normal; 
text-align:center;
color: #000000;
background-color: #cccccc;
letter-spacing: normal; 
word-spacing: normal;
margin: 0;
}

form 
{
margin: 0px;
padding: 0px;
}

ul 
{
margin: 0px;
}

.button {
color: #000000;
font-family: verdana,tahoma,arial,helvetica;
font-size: 8pt; border: 1px solid #000000;
cursor: pointer; 
margin: 0px;
}

.button15 {
color: #000000;
font-family: verdana,tahoma,arial,helvetica;
font-size: 8pt; border: 1px solid #000000;
cursor: pointer; 
margin: 0px;
width: 15px;
}

.button50 {
color: #000000;
font-family: verdana,tahoma,arial,helvetica;
font-size: 8pt; border: 1px solid #000000;
cursor: pointer; 
margin: 0px;
width: 50px;
padding: 0px;
}

.button200 {
color: #000000;
font-family: verdana,tahoma,arial,helvetica;
font-size: 8pt; border: 1px solid #000000;
cursor: pointer; 
margin: 0px;
width: 200px;
}

.button300 {
color: #000000;
font-family: verdana,tahoma,arial,helvetica;
font-size: 8pt; border: 1px solid #000000;
cursor: pointer; 
margin: 0px;
width: 300px;
}

.dropdown {
color: #000000;
font-family: verdana,arial,helvetica;
font-size: 8pt;
border: 1px solid #000000;
cursor: pointer;
}

.fieldtext40 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 40px;
}

.fieldtext80 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 80px;
}

.fieldtext100 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 100px;
}

.fieldtext140 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 140px;
}

.fieldtext160 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 160px;
}

.fieldtext300 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 300px;
}

.fieldtext330 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 330px;
}

.fieldtext360 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 360px;
}

.fieldtext450 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 450px;
}

.fieldtext490 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 490px;
}

.textarea330x100 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 330px;
height: 100px;
}

.textarea360x100 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 360px;
height: 100px;
}

.textarea360x200 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 360px;
height: 200px;
}

.textarea360x400 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 360px;
height: 400px;
}

.textarea490x100 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 490px;
height: 100px;
}

.textarea490x200 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 490px;
height: 200px;
}

.textarea490x400 {
padding: 0px;
margin: 0px;
font-family: verdana,tahoma,arial,helvetica; 
font-size: 12px;
color: #000000;
width: 490px;
height: 400px;
}

body.results
{
font-family: arial, verdana, tahoma, sans-serif;
font-size: 12px;
color: #eee;
background: #272d06;
}

#container_results
{
width: 600px;
border: 1px solid #859913;
margin-left: auto;
margin-right: auto;
background: #39470e;
}

h1.results
{
font-size: 2em;
color: #fff;
text-decoration: underline;
width: 580px;
padding: 6px 10px;
}

h2.results
{
font-size: 1.8em;
color: #fff;
text-decoration: underline;
background: #8fad17;
width: 580px;
padding: 6px 10px;
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
}

h3.results
{
font-size: 1.8em;
color: #fff;
text-decoration: underline;
background: #8fad17;
width: 580px;
padding: 6px 10px;
}

p.results
{
text-align: justify;
padding: 0px 10px;
font-size: 1em;
padding: 0px 10px;
}

img p.results
{
padding: 5px;
margin: 5px;
}

ul.sortable {
text-align: left;
list-style-type: none;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: Arial, sans-serif;
}
ul.sortable li {
text-align: left;
cursor:move;
padding: 2px 2px;
border: 1px solid #ccc;
background-color: #eee;
}

#nav ul
{
        margin: 0;
        padding: 0;
        list-style: none;
}

#nav li
{
        width: 144px;
        height: 16px;
        list-style: none;
        margin: 2px 0;
}

#nav li a
{
        display: block;
        width: 144px;
        height: 16px;
        color: #111;
        padding-left: 10px;
        text-decoration: none;
}

#nav li a:hover
{
        width: 144px;
        height: 16px;
color: #6B6F7D;
background: #adb5cc;

}


#nav li.active
{
        width: 155px;
        height: 16px;
background: #ccc;
color: #222;
}

/* login code */

#login{
background: #fff;
border: 1px solid #a2a2a2;
margin: 5em auto;
padding: 1.5em;
width: 30em;
text-align: left;
}

#login h1 {
margin: 2px;
text-align: center;
font-size: 2.5em;
color: #5e7ba0;
border-bottom: 1px solid #222;
}

#login p {
font-size: 1.4em;
font-weight: bold;
}

#login ul{
list-style: none;
margin: 0;
padding: 0;
}

#login li{
display: inline;
margin-left: 1em;
text-align: center;
font-size: 1.5em
}

#login dd{

}

#login dt{

}

input {
width: 100%
}

input.button{
width: 10em;
}

ul.characters {
text-align: left;
list-style-type: none;
padding: 0px;
margin: 0px;
font-size: 10px;
font-family: Arial, sans-serif;
}

ul.matches {
text-align: left;
list-style-type: none;
padding: 0px;
margin-left: 10px;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 0px;
font-size: 10px;
font-family: Arial, sans-serif;
}

 

And this is my php script so far:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style><?php include('backstage.css'); ?></style>
</head>

<body>
<h1>KOW Backstage</h1>
</body>
</html>

How do I make the KOW Backstage heading show up with the same style as what I gave it to have in the css page. It should be for #login h1?

[rhodesa]

the syntax

#login h1 {

means...apply the following CSS to all H1 tags inside the element with the ID of 'login'. so, to use that style, you would have to remove the #login part (and it would then be global for every H1 tag) or put it inside an element with that ID...like so:

 

<body>
<div id="login">
  <h1>KOW Backstage</h1>
</div>
</body>

[Xtremer360]

Now it looks a heck of a lot better. Here's what it loosk like now:

 

http://kansasoutlawwrestling.com/argyle/backstage.php

 

Still trying to get it to look like this:

 

http://prime.e-wrestling.net/backstage.php

 

Here's my updated code:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<?php include('backstage.css'); ?>
</head>

<body>
<div id="login"> 
<h1>KOW Login</h1>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
<p>Username:</p><br>
<input type="text" name="username" maxlength="40" size="40"> <br><br>
<p>Password:</p><br>
<input type="password" name="pass" maxlength="50" size="40"> 
<br><br>
<input type="submit" name="login" value="Process Login"><br><br>
</form>

</div>
</body>
</html>

[rhodesa]

Install the FireBug plugin for FireFox...it allows you to look at the CSS for each element on a page

[Xtremer360]

Did it and like that plugin. Pretty cool. However I still can't figure out why my login isn't centered and why the Username and Password text isn't where it's supposed to be and there seems to be some extra space between those text and their text boxes and I can't get the right css part to work for the input button.

[rhodesa]

the extra space is because you are using <p> tags, which have top/bottom margin on them by default

[Xtremer360]

yeah but I have something for p{ so if I take that off it'll throw everything off.

[rhodesa]

i'm not saying remove the P, just remove the margin with the css:

margin:0;

[Xtremer360]

Works great now. Thanks