Edit:
Nevermind I found the problem... I used the wrong comment tags (html instead of css...ack x.X). Fixed the tags and it works perfectly now.
_______________
Hey everyone I need some help. I am working on a site for a class project for my web design class and it is going pretty well, but tonight I ran into a huge problem while reorganizing my css files.
The problem is that my navigation buttons are no longer being placed correctly. Before I moved things around there were no issues, but I do not see any problems with any of the css files I am linking to.
Here is what is happening at the moment: Final Fantasy Fansite; Final Fantasy 7
Here is the html for that page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Final Fantasy 7</title>
<link rel="stylesheet" type="text/css" href="http://www.lmpgames.com/fffansite/css/ff7/nav.css">
<link rel="stylesheet" type="text/css" href="http://www.lmpgames.com/fffansite/css/ff7/page.css">
<link rel="stylesheet" type="text/css" href="http://www.lmpgames.com/fffansite/css/ff7/images.css">
</head>
<body>
<div class="background"></div>
<h1>
<a href="index.html"><div class="title"></div></a>
</h1>
<div class="navtr">
<a href="bestiary.html"><div class="bestiary"></div></a>
<a href="guides.html"><div class="guides"></div></a>
<a href="locations.html"><div class="locations"></div></a>
<a href="misc.html"><div class="misc"></div></a>
<a href="../index_test.html"><div class="homepage"></div></a>
</div>
<div class="navbr">
<a href="characters.html"><div class="characters"></div></a>
<a href="items.html"><div class="items"></div></a>
<a href="materia.html"><div class="materia"></div></a>
<a href="skills.html"><div class="skills"></div></a>
</div>
<div class="sb">
<table class="table2" border="0" align="center">
<tr>
<td>
<span class="scrollArea">
<h2>
Final Fantasy 7 Updates/News
</h2>
<h4>
Wednesday, June 8, 2011:
<ul>
<li>Today I scrubbed all CSS from html files and external linked them to make html files more streamlined.</li>
<li>Added in Characters page, buttons, menus, and content for Barret Wallace and Cloud Strife.</li>
<li>Fixed several typos in css files resulting in messed up styles and image placement.</li>
<li>Added in rest of item page selection buttons, menus and content to be added later.</li>
<li>I also have begun to link owner names for weaponry to their character profiles. So far only AM Cannon is linked as a test.</li>
</ul><br />
Tuesday, June 7, 2011:
<ul>
<li>Created css files for materia and items pages.</li>
<li>Created materia page</li>
<li>Added all navigation buttons to main (this page), items, and materia pages.</li>
<li>Added materia menu buttons, menu and information pages to come later this week.</li>
</ul>
</h4><br />
</span>
</td>
</tr>
</table>
</div>
</body>
</html>And here are the linked css files:
nav.css:
@charset "utf-8";
/* CSS Document */
.navtr {
position:absolute;
top:80px;
left:48px;
z-index:2;
}
.navbr {
position:absolute;
top:130px;
left:48px;
z-index:2;
}
.bestiary {
position:absolute;
background-image:url(../../ff7/images/bestiary.png);
width:150px;
height:42px;
left:550px;
}
.characters {
position:absolute;
background-image:url(../../ff7/images/characters.png);
width:150px;
height:42px;
left:625px;
}
.guides {
position:absolute;
background-image:url(../../ff7/images/guides.png);
width:150px;
height:42px;
left:710px;
}
.items {
position:absolute;
background-image:url(../../ff7/images/items.png);
width:150px;
height:42px;
left:785px;
}
.locations {
position:absolute;
background-image:url(../../ff7/images/locations.png);
width:150px;
height:42px;
left:870px;
}
.materia {
position:absolute;
background-image:url(../../ff7/images/materia.png);
width:150px;
height:42px;
left:945px;
}
.misc {
position:absolute;
background-image:url(../../ff7/images/misc.png);
width:150px;
height:42px;
left:1030px;
}
.skills {
position:absolute;
background-image:url(../../ff7/images/skills.png);
width:150px;
height:42px;
left:1105px;
}
.homepage {
position:absolute;
background-image:url(../../ff7/images/homepage.png);
width:150px;
height:42px;
left:1190px;
}page.css:
@charset "utf-8";
/* CSS Document */
.background {
position:absolute;
left:340px;
top:0px;
width:1280px;
height:720px;
background-image:url(../../ff7/images/bg.png);
background-repeat:no-repeat;
z-index:0;
}
.title {
position:absolute;
left:666px;
top:0px;
width:650px;
height:90px;
background-image:url(../../ff7/images/title.png);
background-repeat:no-repeat;
z-index:2;
}
.table {
position:absolute;
top:200px;
left:666px;
height: 450px;
z-index:2;
}
.table2 {
position:absolute;
width:480px;
height:450px;
}
.sb {
position:absolute;
top:180px;
left:675px;
z-index:2;
}
.scrollArea {
width: 615px;
height: 450px;
padding-left: 5px;
padding-right: 5px;
border-width: 1px;
border-style: solid;
border-color:#000;
color:#000;
float: left;
overflow: auto;
}images.css:
@charset "utf-8";
/* CSS Document */
<!-- main images -->
.bestiary {
position:absolute;
background-image:url(../../ff7/images/bestiary.png);
width:150px;
height:42px;
left:550px;
}
.characters {
position:absolute;
background-image:url(../../ff7/images/characters.png);
width:150px;
height:42px;
left:625px;
}
.guides {
position:absolute;
background-image:url(../../ff7/images/guides.png);
width:150px;
height:42px;
left:710px;
}
.items {
position:absolute;
background-image:url(../../ff7/images/items.png);
width:150px;
height:42px;
left:785px;
}
.locations {
position:absolute;
background-image:url(../../ff7/images/locations.png);
width:150px;
height:42px;
left:870px;
}
.materia {
position:absolute;
background-image:url(../../ff7/images/materia.png);
width:150px;
height:42px;
left:945px;
}
.misc {
position:absolute;
background-image:url(../../ff7/images/misc.png);
width:150px;
height:42px;
left:1030px;
}
.skills {
position:absolute;
background-image:url(../../ff7/images/skills.png);
width:150px;
height:42px;
left:1105px;
}
.homepage {
position:absolute;
background-image:url(../../ff7/images/homepage.png);
width:150px;
height:42px;
left:1190px;
}
.background {
position:absolute;
left:340px;
top:0px;
width:1280px;
height:720px;
background-image:url(../../ff7/images/bg.png);
background-repeat:no-repeat;
z-index:0;
}
.title {
position:absolute;
left:666px;
top:0px;
width:650px;
height:90px;
background-image:url(../../ff7/images/title.png);
background-repeat:no-repeat;
z-index:2;
}
<!-- item images -->
.acc {
position:relative;
width:150px;
height:42px;
background-image:url(../../ff7/images/acc.png);
}
.armor {
position:relative;
width:150px;
height:42px;
background-image:url(../../ff7/images/armor.png);
}
.kitems {
position:relative;
width:150px;
height:42px;
background-image:url(../../ff7/images/kitems.png);
}
.usables {
position:relative;
width:150px;
height:42px;
background-image:url(../../ff7/images/usables.png);
}
.weapons {
position:relative;
width:150px;
height:42px;
background-image:url(../../ff7/images/weapons.png);
}
<!-- materia images -->
.command {
width:120px;
height:120px;
background-image:url(../../ff7/images/materia/cmateria.png);
}
.independant {
width:120px;
height:120px;
background-image:url(../../ff7/images/materia/imateria.png);
}
.magic {
width:120px;
height:120px;
background-image:url(../../ff7/images/materia/mmateria.png);
}
.summon {
width:120px;
height:120px;
background-image:url(../../ff7/images/materia/smateria.png);
}
.support {
width:120px;
height:120px;
background-image:url(../../ff7/images/materia/sumateria.png);
}
<!-- character images -->
.good {
position:relative;
width:150px;
height:42px;
top:60px;
background-image:url(../../ff7/images/gguys.png);
}
.bad {
position:relative;
width:150px;
height:42px;
top:120px;
background-image:url(../../ff7/images/bguys.png);
}Anyone had any ideas?