...

View Full Version : Nav Bar Drop Down



CoolAsCarlito
03-06-2009, 09:21 AM
<div id="main-nav">
<ul>
<li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"></a></li>
<li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"></a></li>
<li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"></a></li>
<li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"></a></li>
</ul>
</div>


I have this code. And what I'm wanting it to do is have those images be turned into a dropdown that still has it blended into the page and doesn't stray off at all on the design or anything. I've tried a few different things but they've just messed up so I took it out and hoping somebody can really help me with this.

http://kansasoutlawwrestling.com/KOW/index.html

Excavator
03-06-2009, 09:32 AM
Hello CoolAsCarlito,
Have you had a look at the suckerfish menus? Google that.
You should fix a few things the validator finds - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkansasoutlawwrestling.com%2FKOW%2Findex.html

Read about validating, tables and DocTypes in my sig below.

CoolAsCarlito
03-06-2009, 04:21 PM
I use this as a testing until I can get it looking right first then I'll go back in and change the links. Is this code wrong? Because with this it doesn't show the other


<div id="main-nav">
<ul id="nav">
<li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"></a>
<ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul>
</li>
<li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"></a>
<ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul>
</li>
<li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"></a>
<ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul>
</li>
<li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"></a>
<ul> <li><a href="#">Remoras</a></li> <li><a href="#">Tilefishes</a></li> <li><a href="#">Bluefishes</a></li> <li><a href="#">Tigerfishes</a></li> </ul>
</li>
</ul>
</div>

I don't have the css or js in there yet is that way it's not displaying right?

http://kansasoutlawwrestling.com/KOW/index.html

CoolAsCarlito
03-06-2009, 06:55 PM
Here's my css:


@charset "windows-1252";

body {
background: #0a0d12;
text-align: center;
padding: 0px;
margin: 0px;
}

.main {
width:1027px; margin:0px auto; padding:0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 0px;
border-bottom: 0px;


}
.header {
width: 1027px;
height: 146px;
background: #0a0d12 url(../images/header.jpg);
border: 0px;
margin: 0px;
padding: 50px 130px 0px 0px;
}

.leftside {
width: 110px;
height: 825px;
background:url(../images/left-side.jpg) right top no-repeat #0a0d12;
padding: 0;
margin: 0;
}

.rightside {
width: 110px;
height: 825px;
background:url(../images/right-side.jpg) left top no-repeat #0a0d12 ;
padding: 0;
margin: 0; border:0px;
}

.contentarea {
color: #eeeeee;
width: 803px;
height: 692px;
background: #0a0c0d;
text-align: left;
vertical-align: top;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-top: 0px;
border-bottom: 0px;
margin: 0px;
padding: 0px;
float:left;
}

.footer {
width: 807px;
height: 133px;
color: #eeeeee;
text-align: center;
vertical-align: top;
background:url(../images/footer.jpg) center top repeat;
padding: 0;
margin: 0;
}

a img,:link img,:visited img { border:none }
a {outline:none;}

.footer a { margin:0px; padding:0px 10px; text-decoration:none; font:bold 12px/18px Arial, Helvetica, sans-serif; color:#fff;}
.top-banner { width:312px; height:69px; background:#313A47; float:right; margin:0px; padding:0px; border:1px solid #000;}

#main-nav { width:805px; height:59px; margin:0px; padding:0px; float:left; background:url(../images/top-nav-bg.jpg) left top no-repeat;}
#main-nav ul { width:350px; height:39px; margin:9px 10px 0 0; padding:0px; float:right; list-style: none;}
#main-nav ul li { margin:0px; padding:0 4px 0 0px; float:left; list-style:none; position: absolute;}
#main-nav ul li a { border:none;}
*html #main-nav ul li { margin:0 0px 0 5px; padding:0px; float:left; list-style:none;}
#main li:hover ul {left: auto;}
#main li:hover ul, #nav li.sfhover ul {left: auto;}

#left-box { width:168px; height:629px; float:left; margin:0px; padding:2px;/* background:#ccc;*/}


.quote { width:168px; height:97px; float:left; margin:11px 0 0 0; padding:0px; background:#2D3542;}
.quote img { float:left; margin:3px 0 0 5px; padding:0px;}
.quote h3 { width:168px; height:27px; float:left; margin:0px; padding:0px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.quote-content { width:164px; height:70px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .quote-content { width:168px; height:70px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.quote-content p { margin:0px; padding:5px; text-align:center; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#fff;}
.quote-content p b { margin:0px; padding:0px; text-align:right; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#c00;}



.spotlight { width:168px; height:202px; float:left; margin:20px 0 0 0; padding:0px; background:#2D3542;}
.spotlight h3 { width:168px; height:25px; float:left; margin:0px; padding:2px 0 0 5px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.spotlight-content { width:164px; height:175px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .spotlight-content { width:168px; height:175px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.spotlight-content h4 { margin:0px; padding:5px; text-align:center; font:bold 11px/12px Arial, Helvetica, sans-serif; color:#fff;}
.spotlight-content p { margin:0px; padding:2px 5px; text-align:left; font:normal 10px/11px Arial, Helvetica, sans-serif; color:#fff;}
.spotlight-content img { margin:0 0 0 20px; padding:2px 0px; text-align:center; float:left; font:normal 10px/12px Arial, Helvetica, sans-serif; color:#fff;}




.opinion { width:168px; height:270px; float:left; margin:15px 0 0 0; padding:0px; background:#2D3542;}
.opinion h3 { width:168px; height:23px; float:left; margin:0px; padding:4px 0 0 5px; background:url(../images/box-head-bg.jpg) left top no-repeat;}
.opinion-content { width:164px; height:243px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .opinion-content { width:168px; height:248px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
.opinion-content p { float:left; margin:0px; padding:10px 5px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form { float:left; margin:0px; padding:10px 5px 0px 5px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form label { float:left; margin:5px 0 0 30px; padding:0px; width:50px;font:bold 12px/18px Arial, Helvetica, sans-serif; color:#fff; }
.opinion-content form input { float:left; margin:5px 0 0 0; padding:0px; }
.opinion-content img { margin:0 0 0 40px; padding:0px;}
.opinion-content img a { margin:0 0 0 40px; padding:0px; border:none;}

#content-box { width:450px; height:623px; float:left; margin:0px; padding:5px;}
.content-banner { width: 446px; height: 95px; float:left; margin:0px; padding:2px; }
.content-banner img { text-align:center; }




.site-news { width:452px; height:218px; float:left; margin:0px; padding:0px; }
.site-news h2 { width:452px; height:23px; float:left; margin:0px; padding:8px 0 0 10px; background:url(../images/content-box-head-bg.jpg) left top no-repeat; }
*html .site-news h2 { height:31px;}
.site-news-content { width:448px; height:182px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
*html .site-news-content { width:452px; height:182px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
.site-news-content h3 { margin:0px; padding:6px 10px 4px 25px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.site-news-content p { margin:0px; padding:6px 10px 5px 25px; text-align:left; font:normal 11px/13px Arial, Helvetica, sans-serif; color:#fff; }


.content-bottom-box { width:214px; height:28px; float:left; margin:0px; padding:2px 2px 0px 4px; }
.content-bottom-box h2 { width:204px; height:23px; float:left; margin:0px; padding:8px 0 0 10px; background:url(../images/content-box-head-bg.jpg) left top no-repeat; }
*html .content-bottom-box h2 { height:31px; width:214px;}
.content-bottom-box-content { width:212px; height:249px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
*html .content-bottom-box-content { width:216px; height:249px; float:left; margin:0px; padding:0px; background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A; border:2px solid #090B0B; border-top:none;}
.content-bottom-box-content h3 { margin:0px; padding:6px 10px 4px 15px; text-align:left; font:bold 11px/18px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box-content p { margin:0px; padding:4px 10px 3px 15px; text-align:justify; font:normal 11px/12px Arial, Helvetica, sans-serif; color:#fff; }
.content-bottom-box-content img { margin:0 0 0 25px; padding:0px;}
#right-box { width:161px; height:629px; float:right; margin:0px; padding:2px;}



.events { width:156px; height:253px; float:left; margin:5px 0 0 0; padding:0px; background:#2D3542;}
.events h3 { width:156px; height:24px; float:left; margin:0px; padding:3px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
.events-content { width:152px; height:221px; float:left; margin:0px; padding:5px 0 0 0; border:2px solid #090B0B; border-top:none; }
*html .events-content { width:156px; height:226px; float:left; margin:0px; padding:10px 0 0 0; border:2px solid #090B0B; border-top:none; }
.events-content p { margin:3px 0 0 0; height:45px; padding:0px; }
.events-content p span { width:146px; float:left; margin:0px; padding:0px 0 0 5px; text-align:left; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#fff; }
.events-content p span b { width:50px; float:left; margin:0px; padding:0px; text-align:left; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#fff; }
.events-content p span a { width:130px; float:left; margin:0px; padding:0px; text-align:right; font:normal 10px/13px Arial, Helvetica, sans-serif; color:#c00; text-decoration:none; }


.forum { width:156px; height:161px; float:left; margin:15px 0 0 0; padding:0px; background:#2D3542;}
.forum h3 { width:156px; height:20px; float:left; margin:0px; padding:7px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
*html .forum h3 { width:156px; height:27px; float:left; margin:0px; padding:7px 0 0 5px; background:url(../images/box-sm-head-bg.jpg) left top no-repeat;}
.forum-content { width:152px; height:134px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .forum-content { width:156px; height:134px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }





.shop { width:155px; height:157px; float:left; margin:14px 0 0 0; padding:0px; background:#2D3542;}
.shop h3 { width:155px; height:27px; float:left; margin:0px; padding:0px; background:url(../images/head-shopzone.jpg) left top no-repeat;}
.shop-content { width:151px; height:130px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }
*html .shop-content { width:155px; height:130px; float:left; margin:0px; padding:0px; border:2px solid #090B0B; border-top:none; }

.shop-content img { text-align:center; margin:0 0 0 20px; padding:0px;}
.clear { margin:0px; padding:0px; clear:both; height:0px;}

abduraooft
03-07-2009, 09:29 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Zhtml xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
There is no point in talking about the display issues, before fixing the errors in markup (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fkansasoutlawwrestling.com%2FKOW%2Findex.html)

CoolAsCarlito
03-11-2009, 07:14 PM
Now I have it looking like this with that css code:

http://kansasoutlawwrestling.com/KOW/index.html

but should have the nav bar looking like this:

http://kansasoutlawwrestling.com/KOW/index2.html





<!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" lang="en" xml:lang="en">
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
<!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("main-nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
;sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
};
}
};
if (window.attachEvent){ window.attachEvent("onload", sfHover);}

//--><!]]>
</script>
</head>
<body>
<table class="main" width="1027" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td colspan="3" class="header"><div class="top-banner"></div></td>
</tr>
<tr>
<td><table width="1027" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftside">&nbsp;</td>
<td width="805" valign="top"><table width="805" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="contentarea">
<div id="main-nav">
<ul>
<li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"/></a>
<ul>
<li><a href="#">Test Link 1</a></li>
<li><a href="#">Test Link 2</a></li>
<li><a href="#">Test Link 3</a></li>
</ul>
</li>
<li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"/></a>
<ul>
<li><a href="#">Test Link 4</a></li>
<li><a href="#">Test Link 5</a></li>
<li><a href="#">Test Link 6</a></li>
</ul>
</li>
<li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"/></a>
<ul>
<li><a href="#">Test Link 7</a></li>
<li><a href="#">Test Link 8</a></li>
<li><a href="#">Test Link 9</a></li>
</ul>
</li>
<li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"/></a>
<ul>
<li><a href="#">Test Link 10</a></li>
<li><a href="#">Test Link 11</a></li>
<li><a href="#">Test Link 12</a></li>
</ul>
</li>
</ul>
</div>
<div id="left-box">
<div class="quote">
<h3> <img src="images/head-quote.jpg" alt="Quote" width="52" height="17"/></h3>
<div class="quote-content">

</div>
</div>
<div class="spotlight">
<h3><img src="images/head-spotlight.jpg" alt="Spotlight"/></h3>
<div class="spotlight-content">

</div>
</div>
<div class="opinion">
<h3><img src="images/head-opinion.jpg" alt="Opinion" width="78" height="18"/></h3>
<div class="opinion-content">

</div>
</div>
</div>
<div id="content-box">
<div class="content-banner"><img src="images/content-banner.jpg" alt="Banner"/></div>
<div class="site-news">
<h2><img src="images/head-site-news.jpg" alt="News"/></h2>
<div class="site-news-content">

</div>
</div>
<div class="clear"></div>
<div class="content-bottom-box">
<h2><img src="images/head-headlines.jpg" alt="Headlines"/></h2>
<div class="content-bottom-box-content">

</div>
</div>
<div class="content-bottom-box">
<h2><img src="images/head-rumors.jpg" alt="Rumors"/></h2>
<div class="content-bottom-box-content">

</div>
</div>
</div>
<div id="right-box">
<div class="events">
<h3><img src="images/head-events.jpg" alt="events"/></h3>
<div class="events-content">

</div>
</div>
<div class="forum">
<h3><img src="images/head-forums.jpg" alt="forum"/></h3>
<div class="forum-content"><a href="http://kansasoutlawwrestling.com/phpBB3/"><img src="images/picture3.jpg" alt="Forum" width="152" height="134"/></a></div>
</div>
<div class="shop">
<h3></h3>
<div class="shop-content"><a href="http://kansasoutlawwrestling.com/oscommerce/catalog/"><img src="images/shirt.jpg" alt="Shop"/></a></div>
</div>
</div></td>
</tr>
<tr class="main">
<td valign="top" class="footer"><a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> </td>
</tr>
</table></td>
<td valign="top"><div class="rightside"></div></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>



@charset "windows-1252";
body {
background:#0a0d12;
text-align:center;
margin:0;
padding:0;
}

.main {
width:1027px;
border-left:1px solid #000;
border-right:1px solid #000;
border-top:0;
border-bottom:0;
margin:0 auto;
padding:0;
}

.header {
width:1027px;
height:146px;
background:#0a0d12 url(../images/header.jpg);
border:0;
margin:0;
padding:50px 130px 0 0;
}

.leftside {
width:110px;
height:825px;
background:url(../images/left-side.jpg) right top no-repeat #0a0d12;
margin:0;
padding:0;
}

.rightside {
width:110px;
height:825px;
background:url(../images/right-side.jpg) left top no-repeat #0a0d12;
border:0;
margin:0;
padding:0;
}

.contentarea {
color:#eee;
width:803px;
height:692px;
background:#0a0c0d;
text-align:left;
vertical-align:top;
border-left:2px solid #000;
border-right:2px solid #000;
border-top:0;
border-bottom:0;
float:left;
margin:0;
padding:0;
}

.footer {
width:807px;
height:133px;
color:#eee;
text-align:center;
vertical-align:top;
background:url(../images/footer.jpg) center top repeat;
margin:0;
padding:0;
}

a img,:link img,:visited img {
border:none;
}

a {
outline:none;
}

.footer a {
text-decoration:none;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 10px;
}

.top-banner {
width:312px;
height:69px;
background:#313A47;
float:right;
border:1px solid #000;
margin:0;
padding:0;
}

#main-nav {
width:805px;
height:59px;
float:left;
background:url(../images/top-nav-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

#main-nav ul {
width:350px;
height:39px;
float:left;
list-style:none;
margin:0;
padding:0;
}

#main-nav ul li {
float:left;
position:relative;
}

#main-nav ul li a {
border:none;
display:block;
float:left;
padding:0 15px;
}

#left-box {
width:168px;
height:629px;
float:left;
margin:0;
padding:2px;
}

.quote {
width:168px;
height:97px;
float:left;
background:#2D3542;
margin:11px 0 0;
padding:0;
}

.quote img {
float:left;
margin:3px 0 0 5px;
padding:0;
}

.quote h3 {
width:168px;
height:27px;
float:left;
background:url(../images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

.quote-content {
width:164px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .quote-content {
width:168px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.quote-content p {
text-align:center;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.quote-content p b {
text-align:right;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00;
margin:0;
padding:0;
}

.spotlight {
width:168px;
height:202px;
float:left;
background:#2D3542;
margin:20px 0 0;
padding:0;
}

.spotlight h3 {
width:168px;
height:25px;
float:left;
background:url(../images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:2px 0 0 5px;
}

.spotlight-content {
width:164px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .spotlight-content {
width:168px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.spotlight-content h4 {
text-align:center;
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.spotlight-content p {
text-align:left;
font:normal 10px/11px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:2px 5px;
}

.spotlight-content img {
text-align:center;
float:left;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0 0 0 20px;
padding:2px 0;
}

.opinion {
width:168px;
height:270px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.opinion h3 {
width:168px;
height:23px;
float:left;
background:url(../images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:4px 0 0 5px;
}

.opinion-content {
width:164px;
height:243px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .opinion-content {
width:168px;
height:248px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.opinion-content p {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px;
}

.opinion-content form {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px 0;
}

.opinion-content form label {
float:left;
width:50px;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:5px 0 0 30px;
padding:0;
}

.opinion-content form input {
float:left;
margin:5px 0 0;
padding:0;
}

.opinion-content img {
margin:0 0 0 40px;
padding:0;
}

.opinion-content img a {
border:none;
margin:0 0 0 40px;
padding:0;
}

#content-box {
width:450px;
height:623px;
float:left;
margin:0;
padding:5px;
}

.content-banner {
width:446px;
height:95px;
float:left;
margin:0;
padding:2px;
}

.content-banner img {
text-align:center;
}

.site-news {
width:452px;
height:218px;
float:left;
margin:0;
padding:0;
}

.site-news h2 {
width:452px;
height:23px;
float:left;
background:url(../images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .site-news h2 {
height:31px;
}

.site-news-content {
width:448px;
height:182px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .site-news-content {
width:452px;
height:182px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.site-news-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 25px;
}

.site-news-content p {
text-align:left;
font:normal 11px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 5px 25px;
}

.content-bottom-box {
width:214px;
height:28px;
float:left;
margin:0;
padding:2px 2px 0 4px;
}

.content-bottom-box h2 {
width:204px;
height:23px;
float:left;
background:url(../images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .content-bottom-box h2 {
height:31px;
width:214px;
}

.content-bottom-box-content {
width:212px;
height:249px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .content-bottom-box-content {
width:216px;
height:249px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.content-bottom-box-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 15px;
}

.content-bottom-box-content p {
text-align:justify;
font:normal 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:4px 10px 3px 15px;
}

.content-bottom-box-content img {
margin:0 0 0 25px;
padding:0;
}

#right-box {
width:161px;
height:629px;
float:right;
margin:0;
padding:2px;
}

.events {
width:156px;
height:253px;
float:left;
background:#2D3542;
margin:5px 0 0;
padding:0;
}

.events h3 {
width:156px;
height:24px;
float:left;
background:url(../images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:3px 0 0 5px;
}

.events-content {
width:152px;
height:221px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:5px 0 0;
}

*html .events-content {
width:156px;
height:226px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:10px 0 0;
}

.events-content p {
height:45px;
margin:3px 0 0;
padding:0;
}

.events-content p span {
width:146px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 0 0 5px;
}

.events-content p span b {
width:50px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}

.events-content p span a {
width:130px;
float:left;
text-align:right;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#c00;
text-decoration:none;
margin:0;
padding:0;
}

.forum {
width:156px;
height:161px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.forum h3 {
width:156px;
height:20px;
float:left;
background:url(../images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

*html .forum h3 {
width:156px;
height:27px;
float:left;
background:url(../images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

.forum-content {
width:152px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .forum-content {
width:156px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop {
width:155px;
height:157px;
float:left;
background:#2D3542;
margin:14px 0 0;
padding:0;
}

.shop h3 {
width:155px;
height:27px;
float:left;
background:url(../images/head-shopzone.jpg) left top no-repeat;
margin:0;
padding:0;
}

.shop-content {
width:151px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .shop-content {
width:155px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop-content img {
text-align:center;
margin:0 0 0 20px;
padding:0;
}

.clear {
clear:both;
height:0;
margin:0;
padding:0;
}

Rowsdower!
03-11-2009, 07:42 PM
Rearrange your <li> items like so...

HTML:
<ul>
<li><a href="#"><img width="61" height="36" border="0" alt="Info" src="images/btn-info.jpg"/></a></li>
<li><a href="#"><img width="108" height="36" border="0" alt="Multimedia" src="images/btn-multimedia.jpg"/></a></li>
<li><a href="#"><img width="75" height="36" border="0" alt="Events" src="images/btn-events.jpg"/></a></li>
<li><a href="#"><img width="71" height="36" border="0" alt="Roster" src="images/btn-roster.jpg"/></a></li>
</ul>

And then update your CSS with the following changes in red...

CSS:
#main-nav ul {
float:right;
height:39px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:9px 30px 0 0;
width:791px;
}

#main-nav ul li {
float:right;
margin:0;
padding-left:6px;
position:relative;
}

#main-nav ul li a {
border:medium none;
display:block;
/*float:left;*/
/*padding:0 15px;*/ /*kill these off*/
}


This gives the appearance below in FF2...

I am assuming that this is where you want the menu items to appear, correct?

Once we get that straightened out we can worry about the drop-downs :)

CoolAsCarlito
03-11-2009, 08:09 PM
Okay I have it now. Now how do I do the dropdown menu part.

Rowsdower!
03-11-2009, 11:39 PM
Go ahead and add in your submenu items like this:
<ul>
<li><a href="#nogo">menu item 1</a>
<ul>
<li><a href="#nogo">submenu item 1</a></li>
<li><a href="#nogo">submenu item 2</a></li>
<li><a href="#nogo">submenu item 3</a></li>
</ul>
</li> <!-- Note that you close menu item 1's list item AFTER you finish the submenu for this section -->
<li><a href="#nogo">menu item 2</a>
<ul>
<li><a href="#nogo">submenu item 1</a></li>
<li><a href="#nogo">submenu item 2</a></li>
<li><a href="#nogo">submenu item 3</a></li>
</ul>
</li>
etc...



Once that is done your design will break until you patch up the CSS by adding this:
#main-nav ul {
display:block;
position:relative;
width:700px;
height:39px;
float:right;
list-style:none;
margin:0;
padding:9px 30px 0 0;
}

#main-nav ul li {
float:right;
position:relative;
margin-left:6px;
}

#main-nav ul li a {
border:none;
display:block;
/*float:left;
padding:0 15px;*/
}

#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
right:0px;
height:72px;
width:105px;
background-color:red;
}

#main-nav ul li:hover ul {
display:block;
}

This is a very basic type of menu structure and I haven't made it pretty for you at all. Also, it is working in FF but not IE7 for me right now but I don't have the time to debug at the moment. Anyone else want to take a look?

CoolAsCarlito
03-11-2009, 11:50 PM
Back to looking bad.

http://kansasoutlawwrestling.com/KOW/index.html#


<!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" lang="en" xml:lang="en">
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<table class="main" width="1027" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td colspan="3" class="header"><div class="top-banner"></div></td>
</tr>
<tr>
<td><table width="1027" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftside">&nbsp;</td>
<td width="805" valign="top"><table width="805" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="contentarea">
<div id="main-nav">
<ul>
<li><a href="#"><img width="61" height="36" border="0" alt="Info" src="images/btn-info.jpg"/></a>
<ul>
<li><a href="#nogo">submenu item 1</a></li>
<li><a href="#nogo">submenu item 2</a></li>
<li><a href="#nogo">submenu item 3</a></li>
</ul>
</li>
<li><a href="#"><img width="108" height="36" border="0" alt="Multimedia" src="images/btn-multimedia.jpg"/></a>
<ul>
<li><a href="#nogo">submenu item 1</a></li>
<li><a href="#nogo">submenu item 2</a></li>
<li><a href="#nogo">submenu item 3</a></li>
</ul>
</li>
<li><a href="#"><img width="75" height="36" border="0" alt="Events" src="images/btn-events.jpg"/></a>
<ul>
<li><a href="#nogo">submenu item 1</a></li>
<li><a href="#nogo">submenu item 2</a></li>
<li><a href="#nogo">submenu item 3</a></li>
</ul>
</li>
<li><a href="#"><img width="71" height="36" border="0" alt="Roster" src="images/btn-roster.jpg"/></a>
<ul>
<li><a href="#nogo">submenu item 1</a></li>
<li><a href="#nogo">submenu item 2</a></li>
<li><a href="#nogo">submenu item 3</a></li>
</ul>
</li>
</ul>
</div>
<div id="left-box">
<div class="quote">
<h3> <img src="images/head-quote.jpg" alt="Quote" width="52" height="17"/></h3>
<div class="quote-content">

</div>
</div>
<div class="spotlight">
<h3><img src="images/head-spotlight.jpg" alt="Spotlight"/></h3>
<div class="spotlight-content">

</div>
</div>
<div class="opinion">
<h3><img src="images/head-opinion.jpg" alt="Opinion" width="78" height="18"/></h3>
<div class="opinion-content">

</div>
</div>
</div>
<div id="content-box">
<div class="content-banner"><img src="images/content-banner.jpg" alt="Banner"/></div>
<div class="site-news">
<h2><img src="images/head-site-news.jpg" alt="News"/></h2>
<div class="site-news-content">

</div>
</div>
<div class="clear"></div>
<div class="content-bottom-box">
<h2><img src="images/head-headlines.jpg" alt="Headlines"/></h2>
<div class="content-bottom-box-content">

</div>
</div>
<div class="content-bottom-box">
<h2><img src="images/head-rumors.jpg" alt="Rumors"/></h2>
<div class="content-bottom-box-content">

</div>
</div>
</div>
<div id="right-box">
<div class="events">
<h3><img src="images/head-events.jpg" alt="events"/></h3>
<div class="events-content">

</div>
</div>
<div class="forum">
<h3><img src="images/head-forums.jpg" alt="forum"/></h3>
<div class="forum-content"><a href="http://kansasoutlawwrestling.com/phpBB3/"><img src="images/picture3.jpg" alt="Forum" width="152" height="134"/></a></div>
</div>
<div class="shop">
<h3></h3>
<div class="shop-content"><a href="http://kansasoutlawwrestling.com/oscommerce/catalog/"><img src="images/shirt.jpg" alt="Shop"/></a></div>
</div>
</div></td>
</tr>
<tr class="main">
<td valign="top" class="footer"><a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> </td>
</tr>
</table></td>
<td valign="top"><div class="rightside"></div></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>



@charset "windows-1252";
body {
background:#0a0d12;
text-align:center;
margin:0;
padding:0;
}

.main {
width:1027px;
border-left:1px solid #000;
border-right:1px solid #000;
border-top:0;
border-bottom:0;
margin:0 auto;
padding:0;
}

.header {
width:1027px;
height:146px;
background:#0a0d12 url(../images/header.jpg);
border:0;
margin:0;
padding:50px 130px 0 0;
}

.leftside {
width:110px;
height:825px;
background:url(../images/left-side.jpg) right top no-repeat #0a0d12;
margin:0;
padding:0;
}

.rightside {
width:110px;
height:825px;
background:url(../images/right-side.jpg) left top no-repeat #0a0d12;
border:0;
margin:0;
padding:0;
}

.contentarea {
color:#eee;
width:803px;
height:692px;
background:#0a0c0d;
text-align:left;
vertical-align:top;
border-left:2px solid #000;
border-right:2px solid #000;
border-top:0;
border-bottom:0;
float:left;
margin:0;
padding:0;
}

.footer {
width:807px;
height:133px;
color:#eee;
text-align:center;
vertical-align:top;
background:url(../images/footer.jpg) center top repeat;
margin:0;
padding:0;
}

a img,:link img,:visited img {
border:none;
}

a {
outline:none;
}

.footer a {
text-decoration:none;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 10px;
}

.top-banner {
width:312px;
height:69px;
background:#313A47;
float:right;
border:1px solid #000;
margin:0;
padding:0;
}

#main-nav {
width:805px;
height:59px;
float:left;
background:url(../images/top-nav-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

#main-nav ul {
width:350px;
height:39px;
float:right;
list-style:none;
margin:0;
padding:9px 30px 0 0;
}

#main-nav ul li {
float:right;
margin:0;
padding-left:6px;
position:relative;
}

#main-nav ul li a {
border:none;
display:block;
}

#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
right:0px;
height:72px;
width:105px;
background-color:red;
}

#main-nav ul li:hover ul {
display:block;
}

#left-box {
width:168px;
height:629px;
float:left;
margin:0;
padding:2px;
}

.quote {
width:168px;
height:97px;
float:left;
background:#2D3542;
margin:11px 0 0;
padding:0;
}

.quote img {
float:left;
margin:3px 0 0 5px;
padding:0;
}

.quote h3 {
width:168px;
height:27px;
float:left;
background:url(../images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

.quote-content {
width:164px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .quote-content {
width:168px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.quote-content p {
text-align:center;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.quote-content p b {
text-align:right;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00;
margin:0;
padding:0;
}

.spotlight {
width:168px;
height:202px;
float:left;
background:#2D3542;
margin:20px 0 0;
padding:0;
}

.spotlight h3 {
width:168px;
height:25px;
float:left;
background:url(../images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:2px 0 0 5px;
}

.spotlight-content {
width:164px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .spotlight-content {
width:168px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.spotlight-content h4 {
text-align:center;
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.spotlight-content p {
text-align:left;
font:normal 10px/11px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:2px 5px;
}

.spotlight-content img {
text-align:center;
float:left;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0 0 0 20px;
padding:2px 0;
}

.opinion {
width:168px;
height:270px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.opinion h3 {
width:168px;
height:23px;
float:left;
background:url(../images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:4px 0 0 5px;
}

.opinion-content {
width:164px;
height:243px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .opinion-content {
width:168px;
height:248px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.opinion-content p {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px;
}

.opinion-content form {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px 0;
}

.opinion-content form label {
float:left;
width:50px;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:5px 0 0 30px;
padding:0;
}

.opinion-content form input {
float:left;
margin:5px 0 0;
padding:0;
}

.opinion-content img {
margin:0 0 0 40px;
padding:0;
}

.opinion-content img a {
border:none;
margin:0 0 0 40px;
padding:0;
}

#content-box {
width:450px;
height:623px;
float:left;
margin:0;
padding:5px;
}

.content-banner {
width:446px;
height:95px;
float:left;
margin:0;
padding:2px;
}

.content-banner img {
text-align:center;
}

.site-news {
width:452px;
height:218px;
float:left;
margin:0;
padding:0;
}

.site-news h2 {
width:452px;
height:23px;
float:left;
background:url(../images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .site-news h2 {
height:31px;
}

.site-news-content {
width:448px;
height:182px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .site-news-content {
width:452px;
height:182px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.site-news-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 25px;
}

.site-news-content p {
text-align:left;
font:normal 11px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 5px 25px;
}

.content-bottom-box {
width:214px;
height:28px;
float:left;
margin:0;
padding:2px 2px 0 4px;
}

.content-bottom-box h2 {
width:204px;
height:23px;
float:left;
background:url(../images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .content-bottom-box h2 {
height:31px;
width:214px;
}

.content-bottom-box-content {
width:212px;
height:249px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .content-bottom-box-content {
width:216px;
height:249px;
float:left;
background:url(../images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.content-bottom-box-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 15px;
}

.content-bottom-box-content p {
text-align:justify;
font:normal 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:4px 10px 3px 15px;
}

.content-bottom-box-content img {
margin:0 0 0 25px;
padding:0;
}

#right-box {
width:161px;
height:629px;
float:right;
margin:0;
padding:2px;
}

.events {
width:156px;
height:253px;
float:left;
background:#2D3542;
margin:5px 0 0;
padding:0;
}

.events h3 {
width:156px;
height:24px;
float:left;
background:url(../images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:3px 0 0 5px;
}

.events-content {
width:152px;
height:221px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:5px 0 0;
}

*html .events-content {
width:156px;
height:226px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:10px 0 0;
}

.events-content p {
height:45px;
margin:3px 0 0;
padding:0;
}

.events-content p span {
width:146px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 0 0 5px;
}

.events-content p span b {
width:50px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}

.events-content p span a {
width:130px;
float:left;
text-align:right;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#c00;
text-decoration:none;
margin:0;
padding:0;
}

.forum {
width:156px;
height:161px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.forum h3 {
width:156px;
height:20px;
float:left;
background:url(../images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

*html .forum h3 {
width:156px;
height:27px;
float:left;
background:url(../images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

.forum-content {
width:152px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .forum-content {
width:156px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop {
width:155px;
height:157px;
float:left;
background:#2D3542;
margin:14px 0 0;
padding:0;
}

.shop h3 {
width:155px;
height:27px;
float:left;
background:url(../images/head-shopzone.jpg) left top no-repeat;
margin:0;
padding:0;
}

.shop-content {
width:151px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .shop-content {
width:155px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop-content img {
text-align:center;
margin:0 0 0 20px;
padding:0;
}

.clear {
clear:both;
height:0;
margin:0;
padding:0;
}

abduraooft
03-12-2009, 09:13 AM
I'd recommend you to follow http://htmldog.com/articles/suckerfish/dropdowns/

Rowsdower!
03-12-2009, 01:56 PM
Back to looking bad.

http://kansasoutlawwrestling.com/KOW/index.html#

Here is the code I am using. It now works in both FF and IE. You can see my changes in red:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>

<!-- Created on: 2/28/2009 -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title></title>
</head>
<body>
<table class="main" width="1027" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td colspan="3" class="header"><div class="top-banner"></div></td>
</tr>
<tr>
<td><table width="1027" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftside">&nbsp;</td>
<td width="805" valign="top"><table width="805" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="contentarea">
<div id="main-nav">
<ul>
<li><a href="#"><img width="61" height="36" border="0" alt="Info" src="images/btn-info.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Submenu Item 1</a></li>
<li><a href="#nogo">Submenu Item 2</a></li>
<li><a href="#nogo">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#"><img width="108" height="36" border="0" alt="Multimedia" src="images/btn-multimedia.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Submenu Item 1</a></li>
<li><a href="#nogo">Submenu Item 2</a></li>
<li><a href="#nogo">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#"><img width="75" height="36" border="0" alt="Events" src="images/btn-events.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Submenu Item 1</a></li>
<li><a href="#nogo">Submenu Item 2</a></li>
<li><a href="#nogo">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#"><img width="71" height="36" border="0" alt="Roster" src="images/btn-roster.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Submenu Item 1</a></li>
<li><a href="#nogo">Submenu Item 2</a></li>
<li><a href="#nogo">Submenu Item 3</a></li>
</ul>
</li>
</ul>
</div>
<div id="left-box">
<div class="quote">
<h3> <img src="images/head-quote.jpg" alt="Quote" width="52" height="17"/></h3>
<div class="quote-content">
<p>"Unleash the Ultraviolence!"<br/>
<b>Anguish </b>
</p>
</div>
</div>
<div class="spotlight">
<h3><img src="images/head-spotlight.jpg" alt="Spotlight"/></h3>
<div class="spotlight-content"><h4> Wrestler Name</h4>
<p> Lorum ipsum dolar sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore erat,rebum.</p>
<p><img src="images/picture1.jpg" alt="Picture"/></p>
</div>
</div>
<div class="opinion">
<h3><img src="images/head-opinion.jpg" alt="Opinion" width="78" height="18"/></h3>
<div class="opinion-content">
<p>How would you rate the website:</p>
<form action="">
<label>1</label> <input name="rate" type="radio" value="1"/>
<label>2</label> <input name="rate" type="radio" value="2"/>
<label>3</label> <input name="rate" type="radio" value="3"/>
<label>4</label> <input name="rate" type="radio" value="4"/>
<label>5</label> <input name="rate" type="radio" value="5"/>
</form>
<p><a href="#"><img src="images/btn-vote.jpg" alt="Vote" width="62" height="26" border="0"/></a></p>
</div>
</div>
</div>
<div id="content-box">
<div class="content-banner"><img src="images/content-banner.jpg" alt="Banner"/></div>
<div class="site-news">
<h2><img src="images/head-site-news.jpg" alt="News"/></h2>
<div class="site-news-content">
<h3>03-01-09: New website unveiled</h3>
<p>Today the Kansas Outlaw Wrestling website was launched and already fans have been raving about the start of the company and await the first show. One of the members of the KOW Management Team had this to say "The website was very well constructed and we hope that it attracts more fans to help us build our fan base and gets the fans involved into the company".</p>
<p><img src="images/red-bar.jpg" alt="bar"/></p>
<h3>03-01-09: Another Annoucement</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,rebum.</p>
</div>
</div>
<div class="clear"></div>
<div class="content-bottom-box">
<h2><img src="images/head-headlines.jpg" alt="Headlines"/></h2>
<div class="content-bottom-box-content">
<h3>03-01-09 Headline Title</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="content-bottom-box">
<h2><img src="images/head-rumors.jpg" alt="Rumors"/></h2>
<div class="content-bottom-box-content">
<h3>03-01-09 Headline Title</h3>
<p>Lorem ipsum dolor amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
<p><img src="images/picture2.jpg" alt="Picture"/></p>
<p>dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
<div id="right-box">
<div class="events">
<h3><img src="images/head-events.jpg" alt="events"/></h3>
<div class="events-content">
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><a href="#"> more >></a></span> </p>
</div>
</div>
<div class="forum">
<h3><img src="images/head-forums.jpg" alt="forum"/></h3>
<div class="forum-content"><img src="images/picture3.jpg" alt="Forum" width="152" height="134"/></div>
</div>
<div class="shop">
<h3></h3>
<div class="shop-content"><img src="images/shirt.jpg" alt="Shop"/></div>
</div>
</div></td>
</tr>
<tr class="main">
<td valign="top" class="footer"><a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> </td>
</tr>
</table></td>
<td valign="top"><div class="rightside"></div></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>


And the CSS:
@charset "windows-1252";
body {
background:#0a0d12;
text-align:center;
margin:0;
padding:0;
}

.main {
width:1027px;
border-left:1px solid #000;
border-right:1px solid #000;
border-top:0;
border-bottom:0;
margin:0 auto;
padding:0;
}

.header {
width:1027px;
height:146px;
background:#0a0d12 url(http://kansasoutlawwrestling.com/KOW/images/header.jpg);
border:0;
margin:0;
padding:50px 130px 0 0;
}

.leftside {
width:110px;
height:825px;
background:url(http://kansasoutlawwrestling.com/KOW/images/left-side.jpg) right top no-repeat #0a0d12;
margin:0;
padding:0;
}

.rightside {
width:110px;
height:825px;
background:url(http://kansasoutlawwrestling.com/KOW/images/right-side.jpg) left top no-repeat #0a0d12;
border:0;
margin:0;
padding:0;
}

.contentarea {
color:#eee;
width:803px;
height:692px;
background:#0a0c0d;
text-align:left;
vertical-align:top;
border-left:2px solid #000;
border-right:2px solid #000;
border-top:0;
border-bottom:0;
float:left;
margin:0;
padding:0;
}

.footer {
width:807px;
height:133px;
color:#eee;
text-align:center;
vertical-align:top;
background:url(http://kansasoutlawwrestling.com/KOW/images/footer.jpg) center top repeat;
margin:0;
padding:0;
}

a img,:link img,:visited img {
border:none;
}

a {
outline:none;
}

.footer a {
text-decoration:none;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 10px;
}

.top-banner {
width:312px;
height:69px;
background:#313A47;
float:right;
border:1px solid #000;
margin:0;
padding:0;
}

#main-nav {
width:805px;
height:59px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/top-nav-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

#main-nav ul {
display:block;
position:relative;
width:700px;
height:39px;
float:right;
list-style:none;
margin:0;
padding:9px 30px 0 0;
}

#main-nav ul li {
float:right;
position:relative;
margin-left:6px;
}

#main-nav ul li a {
border:none;
display:block;
/*float:left;
padding:0 15px;*/
}

#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
right:0px;
height:72px;
width:105px;
background-color:red;
}

#main-nav ul li:hover ul {
display:block;
}


#left-box {
width:168px;
height:629px;
float:left;
margin:0;
padding:2px;
}

.quote {
width:168px;
height:97px;
float:left;
background:#2D3542;
margin:11px 0 0;
padding:0;
}

.quote img {
float:left;
margin:3px 0 0 5px;
padding:0;
}

.quote h3 {
width:168px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

.quote-content {
width:164px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .quote-content {
width:168px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.quote-content p {
text-align:center;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.quote-content p b {
text-align:right;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00;
margin:0;
padding:0;
}

.spotlight {
width:168px;
height:202px;
float:left;
background:#2D3542;
margin:20px 0 0;
padding:0;
}

.spotlight h3 {
width:168px;
height:25px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:2px 0 0 5px;
}

.spotlight-content {
width:164px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .spotlight-content {
width:168px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.spotlight-content h4 {
text-align:center;
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.spotlight-content p {
text-align:left;
font:normal 10px/11px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:2px 5px;
}

.spotlight-content img {
text-align:center;
float:left;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0 0 0 20px;
padding:2px 0;
}

.opinion {
width:168px;
height:270px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.opinion h3 {
width:168px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:4px 0 0 5px;
}

.opinion-content {
width:164px;
height:243px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .opinion-content {
width:168px;
height:248px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.opinion-content p {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px;
}

.opinion-content form {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px 0;
}

.opinion-content form label {
float:left;
width:50px;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:5px 0 0 30px;
padding:0;
}

.opinion-content form input {
float:left;
margin:5px 0 0;
padding:0;
}

.opinion-content img {
margin:0 0 0 40px;
padding:0;
}

.opinion-content img a {
border:none;
margin:0 0 0 40px;
padding:0;
}

#content-box {
width:450px;
height:623px;
float:left;
margin:0;
padding:5px;
}

.content-banner {
width:446px;
height:95px;
float:left;
margin:0;
padding:2px;
}

.content-banner img {
text-align:center;
}

.site-news {
width:452px;
height:218px;
float:left;
margin:0;
padding:0;
}

.site-news h2 {
width:452px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .site-news h2 {
height:31px;
}

.site-news-content {
width:448px;
height:182px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .site-news-content {
width:452px;
height:182px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.site-news-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 25px;
}

.site-news-content p {
text-align:left;
font:normal 11px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 5px 25px;
}

.content-bottom-box {
width:214px;
height:28px;
float:left;
margin:0;
padding:2px 2px 0 4px;
}

.content-bottom-box h2 {
width:204px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .content-bottom-box h2 {
height:31px;
width:214px;
}

.content-bottom-box-content {
width:212px;
height:249px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .content-bottom-box-content {
width:216px;
height:249px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.content-bottom-box-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 15px;
}

.content-bottom-box-content p {
text-align:justify;
font:normal 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:4px 10px 3px 15px;
}

.content-bottom-box-content img {
margin:0 0 0 25px;
padding:0;
}

#right-box {
width:161px;
height:629px;
float:right;
margin:0;
padding:2px;
}

.events {
width:156px;
height:253px;
float:left;
background:#2D3542;
margin:5px 0 0;
padding:0;
}

.events h3 {
width:156px;
height:24px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:3px 0 0 5px;
}

.events-content {
width:152px;
height:221px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:5px 0 0;
}

*html .events-content {
width:156px;
height:226px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:10px 0 0;
}

.events-content p {
height:45px;
margin:3px 0 0;
padding:0;
}

.events-content p span {
width:146px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 0 0 5px;
}

.events-content p span b {
width:50px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}

.events-content p span a {
width:130px;
float:left;
text-align:right;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#c00;
text-decoration:none;
margin:0;
padding:0;
}

.forum {
width:156px;
height:161px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.forum h3 {
width:156px;
height:20px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

*html .forum h3 {
width:156px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

.forum-content {
width:152px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .forum-content {
width:156px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop {
width:155px;
height:157px;
float:left;
background:#2D3542;
margin:14px 0 0;
padding:0;
}

.shop h3 {
width:155px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/head-shopzone.jpg) left top no-repeat;
margin:0;
padding:0;
}

.shop-content {
width:151px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .shop-content {
width:155px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop-content img {
text-align:center;
margin:0 0 0 20px;
padding:0;
}

.clear {
clear:both;
height:0;
margin:0;
padding:0;
}
The end result in FF2 is the image attached below (I'm hovering the mouse over the "roster" link in this case)...

CoolAsCarlito
03-12-2009, 06:15 PM
Looks great now.

http://kansasoutlawwrestling.com/KOW/index2.html

I changed the bg of the ul to a grey that I already have in the content area so that it looks like it blends in however now I want to have the LI's align left and have the text blend it but don't know what I should do for it.


@charset "windows-1252";
body {
background:#0a0d12;
text-align:center;
margin:0;
padding:0;
}

.main {
width:1027px;
border-left:1px solid #000;
border-right:1px solid #000;
border-top:0;
border-bottom:0;
margin:0 auto;
padding:0;
}

.header {
width:1027px;
height:146px;
background:#0a0d12 url(http://kansasoutlawwrestling.com/KOW/images/header.jpg);
border:0;
margin:0;
padding:50px 130px 0 0;
}

.leftside {
width:110px;
height:825px;
background:url(http://kansasoutlawwrestling.com/KOW/images/left-side.jpg) right top no-repeat #0a0d12;
margin:0;
padding:0;
}

.rightside {
width:110px;
height:825px;
background:url(http://kansasoutlawwrestling.com/KOW/images/right-side.jpg) left top no-repeat #0a0d12;
border:0;
margin:0;
padding:0;
}

.contentarea {
color:#eee;
width:803px;
height:692px;
background:#0a0c0d;
text-align:left;
vertical-align:top;
border-left:2px solid #000;
border-right:2px solid #000;
border-top:0;
border-bottom:0;
float:left;
margin:0;
padding:0;
}

.footer {
width:807px;
height:133px;
color:#eee;
text-align:center;
vertical-align:top;
background:url(http://kansasoutlawwrestling.com/KOW/images/footer.jpg) center top repeat;
margin:0;
padding:0;
}

a img,:link img,:visited img {
border:none;
}

a {
outline:none;
}

.footer a {
text-decoration:none;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 10px;
}

.top-banner {
width:312px;
height:69px;
background:#313A47;
float:right;
border:1px solid #000;
margin:0;
padding:0;
}

#main-nav {
width:805px;
height:59px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/top-nav-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

#main-nav ul {
display:block;
position:relative;
width:700px;
height:39px;
float:right;
list-style:none;
margin:0;
padding:9px 30px 0 0;
}

#main-nav ul li {
float:right;
position:relative;
margin-left:6px;
}

#main-nav ul li a {
border:none;
display:block;
/*float:left;
padding:0 15px;*/
}

#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
right:0px;
height:125px;
width:125px;
background:#0a0d12;
}

#main-nav ul li:hover ul {
display:block;
}


#left-box {
width:168px;
height:629px;
float:left;
margin:0;
padding:2px;
}

.quote {
width:168px;
height:97px;
float:left;
background:#2D3542;
margin:11px 0 0;
padding:0;
}

.quote img {
float:left;
margin:3px 0 0 5px;
padding:0;
}

.quote h3 {
width:168px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

.quote-content {
width:164px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .quote-content {
width:168px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.quote-content p {
text-align:center;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.quote-content p b {
text-align:right;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00;
margin:0;
padding:0;
}

.spotlight {
width:168px;
height:202px;
float:left;
background:#2D3542;
margin:20px 0 0;
padding:0;
}

.spotlight h3 {
width:168px;
height:25px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:2px 0 0 5px;
}

.spotlight-content {
width:164px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .spotlight-content {
width:168px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.spotlight-content h4 {
text-align:center;
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.spotlight-content p {
text-align:left;
font:normal 10px/11px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:2px 5px;
}

.spotlight-content img {
text-align:center;
float:left;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0 0 0 20px;
padding:2px 0;
}

.opinion {
width:168px;
height:270px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.opinion h3 {
width:168px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:4px 0 0 5px;
}

.opinion-content {
width:164px;
height:243px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .opinion-content {
width:168px;
height:248px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.opinion-content p {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px;
}

.opinion-content form {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px 0;
}

.opinion-content form label {
float:left;
width:50px;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:5px 0 0 30px;
padding:0;
}

.opinion-content form input {
float:left;
margin:5px 0 0;
padding:0;
}

.opinion-content img {
margin:0 0 0 40px;
padding:0;
}

.opinion-content img a {
border:none;
margin:0 0 0 40px;
padding:0;
}

#content-box {
width:450px;
height:623px;
float:left;
margin:0;
padding:5px;
}

.content-banner {
width:446px;
height:95px;
float:left;
margin:0;
padding:2px;
}

.content-banner img {
text-align:center;
}

.site-news {
width:452px;
height:218px;
float:left;
margin:0;
padding:0;
}

.site-news h2 {
width:452px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .site-news h2 {
height:31px;
}

.site-news-content {
width:448px;
height:182px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .site-news-content {
width:452px;
height:182px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.site-news-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 25px;
}

.site-news-content p {
text-align:left;
font:normal 11px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 5px 25px;
}

.content-bottom-box {
width:214px;
height:28px;
float:left;
margin:0;
padding:2px 2px 0 4px;
}

.content-bottom-box h2 {
width:204px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .content-bottom-box h2 {
height:31px;
width:214px;
}

.content-bottom-box-content {
width:212px;
height:249px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .content-bottom-box-content {
width:216px;
height:249px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.content-bottom-box-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 15px;
}

.content-bottom-box-content p {
text-align:justify;
font:normal 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:4px 10px 3px 15px;
}

.content-bottom-box-content img {
margin:0 0 0 25px;
padding:0;
}

#right-box {
width:161px;
height:629px;
float:right;
margin:0;
padding:2px;
}

.events {
width:156px;
height:253px;
float:left;
background:#2D3542;
margin:5px 0 0;
padding:0;
}

.events h3 {
width:156px;
height:24px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:3px 0 0 5px;
}

.events-content {
width:152px;
height:221px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:5px 0 0;
}

*html .events-content {
width:156px;
height:226px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:10px 0 0;
}

.events-content p {
height:45px;
margin:3px 0 0;
padding:0;
}

.events-content p span {
width:146px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 0 0 5px;
}

.events-content p span b {
width:50px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}

.events-content p span a {
width:130px;
float:left;
text-align:right;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#c00;
text-decoration:none;
margin:0;
padding:0;
}

.forum {
width:156px;
height:161px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.forum h3 {
width:156px;
height:20px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

*html .forum h3 {
width:156px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

.forum-content {
width:152px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .forum-content {
width:156px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop {
width:155px;
height:157px;
float:left;
background:#2D3542;
margin:14px 0 0;
padding:0;
}

.shop h3 {
width:155px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/head-shopzone.jpg) left top no-repeat;
margin:0;
padding:0;
}

.shop-content {
width:151px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .shop-content {
width:155px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop-content img {
text-align:center;
margin:0 0 0 20px;
padding:0;
}

.clear {
clear:both;
height:0;
margin:0;
padding:0;
}


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>

<!-- Created on: 2/28/2009 -->
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title></title>
</head>
<body>
<table class="main" width="1027" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td colspan="3" class="header"><div class="top-banner"></div></td>
</tr>
<tr>
<td><table width="1027" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftside">&nbsp;</td>
<td width="805" valign="top"><table width="805" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" class="contentarea">
<div id="main-nav">
<ul>
<li><a href="#"><img width="61" height="36" border="0" alt="Info" src="images/btn-info.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Site Staff</a></li>
<li><a href="#nogo">History of Champions</a></li>
</ul>
</li>
<li><a href="#"><img width="108" height="36" border="0" alt="Multimedia" src="images/btn-multimedia.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Upcoming Show</a></li>
<li><a href="#nogo">Recent Show Results</a></li>
<li><a href="#nogo">Show Archives</a></li>
<li><a href="#nogo">Tickets</a></li>
</ul>
</li>
<li><a href="#"><img width="75" height="36" border="0" alt="Events" src="images/btn-events.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Show Photos</a></li>
<li><a href="#nogo">KOW Photos</a></li>
<li><a href="#nogo">Myspace</a></li>
</ul>
</li>
<li><a href="#"><img width="71" height="36" border="0" alt="Roster" src="images/btn-roster.jpg"/></a>
<ul class="sub">
<li><a href="#nogo">Singles</a></li>
<li><a href="#nogo">Tag Teams</a></li>
<li><a href="#nogo">Stables</a></li>
<li><a href="#nogo">Managers/Valets</a></li>
<li><a href="#nogo">Staff</a></li>
<li><a href="#nogo">Champions</a></li>
</ul>
</li>
</ul>
</div>
<div id="left-box">
<div class="quote">
<h3> <img src="images/head-quote.jpg" alt="Quote" width="52" height="17"/></h3>
<div class="quote-content">
<p>"Unleash the Ultraviolence!"<br/>
<b>Anguish </b>
</p>
</div>
</div>
<div class="spotlight">
<h3><img src="images/head-spotlight.jpg" alt="Spotlight"/></h3>
<div class="spotlight-content"><h4> Wrestler Name</h4>
<p> Lorum ipsum dolar sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore erat,rebum.</p>
<p><img src="images/picture1.jpg" alt="Picture"/></p>
</div>
</div>
<div class="opinion">
<h3><img src="images/head-opinion.jpg" alt="Opinion" width="78" height="18"/></h3>
<div class="opinion-content">
<p>How would you rate the website:</p>
<form action="">
<label>1</label> <input name="rate" type="radio" value="1"/>
<label>2</label> <input name="rate" type="radio" value="2"/>
<label>3</label> <input name="rate" type="radio" value="3"/>
<label>4</label> <input name="rate" type="radio" value="4"/>
<label>5</label> <input name="rate" type="radio" value="5"/>
</form>
<p><a href="#"><img src="images/btn-vote.jpg" alt="Vote" width="62" height="26" border="0"/></a></p>
</div>
</div>
</div>
<div id="content-box">
<div class="content-banner"><img src="images/content-banner.jpg" alt="Banner"/></div>
<div class="site-news">
<h2><img src="images/head-site-news.jpg" alt="News"/></h2>
<div class="site-news-content">
<h3>03-01-09: New website unveiled</h3>
<p>Today the Kansas Outlaw Wrestling website was launched and already fans have been raving about the start of the company and await the first show. One of the members of the KOW Management Team had this to say "The website was very well constructed and we hope that it attracts more fans to help us build our fan base and gets the fans involved into the company".</p>
<p><img src="images/red-bar.jpg" alt="bar"/></p>
<h3>03-01-09: Another Annoucement</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,rebum.</p>
</div>
</div>
<div class="clear"></div>
<div class="content-bottom-box">
<h2><img src="images/head-headlines.jpg" alt="Headlines"/></h2>
<div class="content-bottom-box-content">
<h3>03-01-09 Headline Title</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
<div class="content-bottom-box">
<h2><img src="images/head-rumors.jpg" alt="Rumors"/></h2>
<div class="content-bottom-box-content">
<h3>03-01-09 Headline Title</h3>
<p>Lorem ipsum dolor amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
<p><img src="images/picture2.jpg" alt="Picture"/></p>
<p>dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</div>
</div>
</div>
<div id="right-box">
<div class="events">
<h3><img src="images/head-events.jpg" alt="events"/></h3>
<div class="events-content">
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><b>Date:</b>03/28/09</span>
<span><b>Venue:</b>Ringside Arena</span>
<span><b>Location:</b>Staten Island, NY</span>
</p>
<p>
<span><a href="#"> more >></a></span> </p>
</div>
</div>
<div class="forum">
<h3><img src="images/head-forums.jpg" alt="forum"/></h3>
<div class="forum-content"><img src="images/picture3.jpg" alt="Forum" width="152" height="134"/></div>
</div>
<div class="shop">
<h3></h3>
<div class="shop-content"><img src="images/shirt.jpg" alt="Shop"/></div>
</div>
</div></td>
</tr>
<tr class="main">
<td valign="top" class="footer"><a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> | <a href="#">link</a> </td>
</tr>
</table></td>
<td valign="top"><div class="rightside"></div></td>
</tr>
</table></td>
</tr>
</tbody>
</table>
</body>
</html>

Rowsdower!
03-12-2009, 07:18 PM
OK, try these changes/additions to the CSS:
#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
left:0px;
height:auto;
width:120px;
background-color:#0a0d12;
}

ul.sub {
padding:0px !important;
}

.sub li {
width:100%;
}

.sub li a {
width:100%;
padding:2px 5px;
}

This should give you a more crisp layout for the submenu items. Is this what you're after?

CoolAsCarlito
03-12-2009, 07:25 PM
Incredible!

However I want the links to be red I think. Do you think it'll look better for the layout to blend in and can I turn the width into auto so that it can put "History of Champions" on one line instead of breaking it onto two?

Rowsdower!
03-12-2009, 07:35 PM
Incredible!

However I want the links to be red I think. Do you think it'll look better for the layout to blend in and can I turn the width into auto so that it can put "History of Champions" on one line instead of breaking it onto two?

Hey, it's your page you can style those things however you like. Here's another option for the menu system...

Update your menu to this:
<ul>
<li><a href="#"><img width="61" height="36" border="0" alt="Info" src="images/btn-info.jpg"/></a>
<ul class="sub" style="position:absolute;top:36px;left:-272px;">
<li><a href="#nogo">Site Staff</a></li>
<li><a href="#nogo">History of Champions</a></li>
</ul>
</li>
<li><a href="#"><img width="108" height="36" border="0" alt="Multimedia" src="images/btn-multimedia.jpg"/></a>
<ul class="sub" style="position:absolute;top:36px;left:-159px;">
<li><a href="#nogo">Upcoming Show</a></li>
<li><a href="#nogo">Recent Show Results</a></li>
<li><a href="#nogo">Show Archives</a></li>
<li><a href="#nogo">Tickets</a></li>
</ul>
</li>
<li><a href="#"><img width="75" height="36" border="0" alt="Events" src="images/btn-events.jpg"/></a>
<ul class="sub" style="position:absolute;top:36px;left:-79px;">
<li><a href="#nogo">Show Photos</a></li>
<li><a href="#nogo">KOW Photos</a></li>
<li><a href="#nogo">Myspace</a></li>
</ul>
</li>
<li><a href="#"><img width="71" height="36" border="0" alt="Roster" src="images/btn-roster.jpg"/></a>
<ul class="sub" style="position:absolute;top:36px;left:-3px;">
<li><a href="#nogo">Singles</a></li>
<li><a href="#nogo">Tag Teams</a></li>
<li><a href="#nogo">Stables</a></li>
<li><a href="#nogo">Managers/Valets</a></li>
<li><a href="#nogo">Staff</a></li>
<li><a href="#nogo">Champions</a></li>
</ul>
</li>
</ul>

And change your CSS to this:
#main-nav ul {
display:block;
position:relative;
width:700px;
height:39px;
float:right;
list-style:none;
margin:0;
padding:9px 30px 0 0;
}

#main-nav ul li {
float:right;
position:relative;
/*margin-left:6px;*/
}

#main-nav ul li a {
border:none;
display:block;
padding:0 2px 0 3px;
/*float:left;
padding:0 15px;*/
}

#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
left:0px;
height:auto;
width:360px;
background-color:#0a0d12;
}

#main-nav ul li:hover ul {
display:block;
}

ul.sub {
padding:0px !important;
}

.sub li {
width:100%;
}

.sub li a {
width:100%;
padding:2px 5px;
}

I lost track of what exactly I changed in the CSS, but this gives you a pretty wide option and allows you to keep the submenu block displayed while mousing inbetween your menu items at the top (no more pop-down and pop-up as you go from roster to events, for example). If you add a static height to this it will give the appearance of only changing the submenu items for each section as opposed to opening a new submenu for each one...

To change your link font, color, etc. you just add those options to the CSS for #main-nav ul li a. You can do bold font or even use background images for each link. The options are many!

CoolAsCarlito
03-12-2009, 07:43 PM
http://kansasoutlawwrestling.com/KOW/index2.html#

Looks great pretty much. Does what I want it to do but how do you think it looks minus the font color.

Rowsdower!
03-12-2009, 07:55 PM
I think it still needs something. I can't really say what (my "gifts" are more mechanical than artistic). You might try the static height thing and add a 300px by <whatever>px gradient -- maybe even with a "frame" around it -- that fits in with your theme as a background for the submenu.

You might try to develop background images that are 300px wide and add them as a background to the <a> elements. You can then change the background image of the <a> element on hover to a different version to indicate which item the user is currently on (you could do likewise for the main anchor links at the top). This is really up to you and your imagination and taste.

If you need some inspiration take a tour of the CSS Play website in the "menus" section (http://www.cssplay.co.uk/menus/).

You can get a lot of good ideas here for style and then create your own variant to use on your site.

CoolAsCarlito
03-12-2009, 07:59 PM
Thanks. I think I might have even come up with an idea for something cool.

Rowsdower!
03-12-2009, 08:02 PM
That's great. Now you have a solid base to start experimenting with. I'd just recommend you create a clean copy of what you have now and save it off to the side incase you break what you already have (believe me, it happens).

Good luck!

CoolAsCarlito
03-12-2009, 08:23 PM
I want to put a border around it as well as have each li highlited when it's hovered over and when it's also hovered over it will have the same screws (things that are in the footer) that are around each li. What do you think of that idea?

Or...

It may work to put a screw in the corner of each sidebox header. Make that text a bit smaller to accomodate the screw - but I wouldn't mess with the nav bar what might look good is if you can make the dropdowns have a semi transparent background.

Rowsdower!
03-12-2009, 08:43 PM
Transparency could be done with PNG images (though it won't work in IE6 and lower as I understand it due to poor support in earlier IE browsers for PNG transparency).

As far as screws and such, I'd say less is more in most cases. You have to be careful not to do things just because you can -- it should be done because it's right to do it, ya know?

Anyway, you could make the border for the <ul> as intricate and flashy as you want and then make the <a> backgrounds simple and tasteful. You could skip the border and make the <a> backgrounds very bold and bright. You could make a fairly simple border, use your non-transparent gradient (as found in the site news text block, for example) for the <ul> and then use a semi-transparent PNG image for the <a> bg to highlight the menu item you are hovering over. There are thousands upon thousands of possibilities and I'm just not creative enough to tell you what would look best.

Really though I think the best way to find out what you like is by trying things out. Get an idea together that you find personally appealing, execute it, and then post the results in the website review forum here (http://www.codingforums.com/forumdisplay.php?f=37). People there are usually more creative and are not shy about bashing a design to make it better.

CoolAsCarlito
03-13-2009, 07:45 PM
http://kansasoutlawwrestling.com/KOW/index.html

I worked on it and came up with this I hope you think this is good if not tell me what you think would be better. But one additional thing I'd like to do is fix the hover bar because it goes all the way across the whole box I want it to stop after the last letter of every line or something better than all the way across.


@charset "windows-1252";
body {
background:#0a0d12;
text-align:center;
margin:0;
padding:0;
}

.main {
width:1027px;
border-left:1px solid #000;
border-right:1px solid #000;
border-top:0;
border-bottom:0;
margin:0 auto;
padding:0;
}

.header {
width:1027px;
height:146px;
background:#0a0d12 url(http://kansasoutlawwrestling.com/KOW/images/header.jpg);
border:0;
margin:0;
padding:50px 130px 0 0;
}

.leftside {
width:110px;
height:825px;
background:url(http://kansasoutlawwrestling.com/KOW/images/left-side.jpg) right top no-repeat #0a0d12;
margin:0;
padding:0;
}

.rightside {
width:110px;
height:825px;
background:url(http://kansasoutlawwrestling.com/KOW/images/right-side.jpg) left top no-repeat #0a0d12;
border:0;
margin:0;
padding:0;
}

.contentarea {
color:#eee;
width:803px;
height:692px;
background:#0a0c0d;
text-align:left;
vertical-align:top;
border-left:2px solid #000;
border-right:2px solid #000;
border-top:0;
border-bottom:0;
float:left;
margin:0;
padding:0;
}

.footer {
width:807px;
height:133px;
color:#eee;
text-align:center;
vertical-align:top;
background:url(http://kansasoutlawwrestling.com/KOW/images/footer.jpg) center top repeat;
margin:0;
padding:0;
}

a img,:link img,:visited img {
border:none;
}

a {
outline:none;
}

.footer a {
text-decoration:none;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 10px;
}

.top-banner {
width:312px;
height:69px;
background:#313A47;
float:right;
border:1px solid #000;
margin:0;
padding:0;
}

#main-nav {
width:805px;
height:59px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/top-nav-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

#main-nav ul {
display:block;
position:relative;
width:700px;
height:39px;
float:right;
list-style:none;
margin:0;
padding:9px 30px 0 0;
}

#main-nav ul li {
float:right;
position:relative;
}

#main-nav ul li a {
border:none;
display:block;
padding:0 2px 0 3px;
text-decoration: none;
font-weight:bold;
color: red;
}

#main-nav a:hover {
background:url(http://kansasoutlawwrestling.com/KOW/images/top-nav-bg.jpg) left top no-repeat;
}

#main-nav ul li ul {
display:none;
position:absolute;
top:36px;
left:0px;
height:auto;
width:360px;
background-color:#0a0d12;
}

#main-nav ul li:hover ul {
display:block;
border-style: solid;
border-color: black
}

ul.sub {
padding:0px !important;
}

.sub li {
width:100%;
}




#left-box {
width:168px;
height:629px;
float:left;
margin:0;
padding:2px;
}

.quote {
width:168px;
height:97px;
float:left;
background:#2D3542;
margin:11px 0 0;
padding:0;
}

.quote img {
float:left;
margin:3px 0 0 5px;
padding:0;
}

.quote h3 {
width:168px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:0;
}

.quote-content {
width:164px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .quote-content {
width:168px;
height:70px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.quote-content p {
text-align:center;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.quote-content p b {
text-align:right;
font:bold 12px/16px Arial, Helvetica, sans-serif;
color:#c00;
margin:0;
padding:0;
}

.spotlight {
width:168px;
height:202px;
float:left;
background:#2D3542;
margin:20px 0 0;
padding:0;
}

.spotlight h3 {
width:168px;
height:25px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:2px 0 0 5px;
}

.spotlight-content {
width:164px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .spotlight-content {
width:168px;
height:175px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.spotlight-content h4 {
text-align:center;
font:bold 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:5px;
}

.spotlight-content p {
text-align:left;
font:normal 10px/11px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:2px 5px;
}

.spotlight-content img {
text-align:center;
float:left;
font:normal 10px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0 0 0 20px;
padding:2px 0;
}

.opinion {
width:168px;
height:270px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.opinion h3 {
width:168px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-head-bg.jpg) left top no-repeat;
margin:0;
padding:4px 0 0 5px;
}

.opinion-content {
width:164px;
height:243px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .opinion-content {
width:168px;
height:248px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.opinion-content p {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px;
}

.opinion-content form {
float:left;
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:10px 5px 0;
}

.opinion-content form label {
float:left;
width:50px;
font:bold 12px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:5px 0 0 30px;
padding:0;
}

.opinion-content form input {
float:left;
margin:5px 0 0;
padding:0;
}

.opinion-content img {
margin:0 0 0 40px;
padding:0;
}

.opinion-content img a {
border:none;
margin:0 0 0 40px;
padding:0;
}

#content-box {
width:450px;
height:623px;
float:left;
margin:0;
padding:5px;
}

.content-banner {
width:446px;
height:95px;
float:left;
margin:0;
padding:2px;
}

.content-banner img {
text-align:center;
}

.site-news {
width:452px;
height:218px;
float:left;
margin:0;
padding:0;
}

.site-news h2 {
width:452px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .site-news h2 {
height:31px;
}

.site-news-content {
width:448px;
height:182px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .site-news-content {
width:452px;
height:182px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.site-news-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 25px;
}

.site-news-content p {
text-align:left;
font:normal 11px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 5px 25px;
}

.content-bottom-box {
width:214px;
height:28px;
float:left;
margin:0;
padding:2px 2px 0 4px;
}

.content-bottom-box h2 {
width:204px;
height:23px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/content-box-head-bg.jpg) left top no-repeat;
margin:0;
padding:8px 0 0 10px;
}

*html .content-bottom-box h2 {
height:31px;
width:214px;
}

.content-bottom-box-content {
width:212px;
height:249px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .content-bottom-box-content {
width:216px;
height:249px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-content-bg.jpg) left top repeat-x #090A0A;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.content-bottom-box-content h3 {
text-align:left;
font:bold 11px/18px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:6px 10px 4px 15px;
}

.content-bottom-box-content p {
text-align:justify;
font:normal 11px/12px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:4px 10px 3px 15px;
}

.content-bottom-box-content img {
margin:0 0 0 25px;
padding:0;
}

#right-box {
width:161px;
height:629px;
float:right;
margin:0;
padding:2px;
}

.events {
width:156px;
height:253px;
float:left;
background:#2D3542;
margin:5px 0 0;
padding:0;
}

.events h3 {
width:156px;
height:24px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:3px 0 0 5px;
}

.events-content {
width:152px;
height:221px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:5px 0 0;
}

*html .events-content {
width:156px;
height:226px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:10px 0 0;
}

.events-content p {
height:45px;
margin:3px 0 0;
padding:0;
}

.events-content p span {
width:146px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0 0 0 5px;
}

.events-content p span b {
width:50px;
float:left;
text-align:left;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#fff;
margin:0;
padding:0;
}

.events-content p span a {
width:130px;
float:left;
text-align:right;
font:normal 10px/13px Arial, Helvetica, sans-serif;
color:#c00;
text-decoration:none;
margin:0;
padding:0;
}

.forum {
width:156px;
height:161px;
float:left;
background:#2D3542;
margin:15px 0 0;
padding:0;
}

.forum h3 {
width:156px;
height:20px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

*html .forum h3 {
width:156px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/box-sm-head-bg.jpg) left top no-repeat;
margin:0;
padding:7px 0 0 5px;
}

.forum-content {
width:152px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .forum-content {
width:156px;
height:134px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop {
width:155px;
height:157px;
float:left;
background:#2D3542;
margin:14px 0 0;
padding:0;
}

.shop h3 {
width:155px;
height:27px;
float:left;
background:url(http://kansasoutlawwrestling.com/KOW/images/head-shopzone.jpg) left top no-repeat;
margin:0;
padding:0;
}

.shop-content {
width:151px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

*html .shop-content {
width:155px;
height:130px;
float:left;
border:2px solid #090B0B;
border-top:none;
margin:0;
padding:0;
}

.shop-content img {
text-align:center;
margin:0 0 0 20px;
padding:0;
}

.clear {
clear:both;
height:0;
margin:0;
padding:0;
}

Rowsdower!
03-13-2009, 08:21 PM
You have to specify a width for the submenu items or else they will default to the width of the main menu item they appear under regardless of the width of the text content they contain.

You might try this:

Menu HTML block:
<ul>
<li><a href="#"><img width="61" height="36" border="0" src="images/btn-info.jpg" alt="Info"/></a>
<ul class="sub">
<li><a href="#nogo">Site Staff</a></li>
<li><a href="#nogo">History of Champions</a></li>
</ul>
</li>
<li><a href="#"><img width="108" height="36" border="0" src="images/btn-multimedia.jpg" alt="Multimedia"/></a>
<ul class="sub">
<li><a href="#nogo">Upcoming Show</a></li>
<li><a href="#nogo">Recent Show Results</a></li>
<li><a href="#nogo">Show Archives</a></li>
<li><a href="#nogo">Tickets</a></li>
</ul>
</li>
<li><a href="#"><img width="75" height="36" border="0" src="images/btn-events.jpg" alt="Events"/></a>
<ul class="sub">
<li><a href="#nogo">Show Photos</a></li>
<li><a href="#nogo">KOW Photos</a></li>
<li><a href="#nogo">Myspace</a></li>
</ul>
</li>
<li><a href="#"><img width="71" height="36" border="0" src="images/btn-roster.jpg" alt="Roster"/></a>
<ul class="sub">
<li><a href="#nogo">Singles</a></li>
<li><a href="#nogo">Tag Teams</a></li>
<li><a href="#nogo">Stables</a></li>
<li><a href="#nogo">Managers/Valets</a></li>
<li><a href="#nogo">Staff</a></li>
<li><a href="#nogo">Champions</a></li>
</ul>
</li>
</ul>

And the CSS:
#main-nav ul {
display:block;
float:right;
height:39px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:9px 30px 0 0;
position:relative;
width:335px;
}

#main-nav ul li {
float:right;
position:relative;
}
#main-nav ul li a {
border:medium none;
color:red;
display:block;
font-weight:bold;
padding:0 2px 0 3px;
text-decoration:none;
}
#main-nav a:hover {
background:transparent url(http://kansasoutlawwrestling.com/KOW/images/top-nav-bg.jpg) no-repeat scroll left top;
}
#main-nav ul li ul {
background-color:#0A0D12;
display:none;
height:auto;
left:0;
position:absolute;
top:36px;
width:150px;
}
#main-nav ul li:hover ul {
border-color:black;
border-style:solid;
display:block;
}

Also, the hover background image you have added to the <a> elements is creating some extra side borders that don't look quite right. You might consider leaving the side borders out of the image.

CoolAsCarlito
03-13-2009, 08:54 PM
Fixed however how can I adjust the parts of my mainpage so that they can expand in height without hosing the layout.

Rowsdower!
03-13-2009, 09:04 PM
You'd have to cut your main page background image off at the bottom and just let it fade to black (or gray or whatever).

Option B is to cut the background in two horizontally where the black fade occurs about 2/3 of the way down the page. Use the top part as the background for the <html> tag and then use the bottom part as the background for the <body> tag (position the background at the bottom center). I'm pretty sure this could be done... That way when your content grew your bottom portion would just stay down at the bottom almost like a footer...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum