Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 26
  1. #1
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts

    Nav Bar Drop Down

    Code:
    <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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,672
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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?verbos...W%2Findex.html

    Read about validating, tables and DocTypes in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    CoolAsCarlito (03-06-2009)

  • #3
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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

    Code:
    <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

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Here's my css:

    Code:
    @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;}

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    <!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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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




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

  • #7
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Rearrange your <li> items like so...

    HTML:
    Code:
    <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:
    Code:
    #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
    Attached Thumbnails Attached Thumbnails Nav Bar Drop Down-ff2.jpg  
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    CoolAsCarlito (03-11-2009)

  • #8
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Okay I have it now. Now how do I do the dropdown menu part.
    Last edited by CoolAsCarlito; 03-11-2009 at 07:33 PM.

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Go ahead and add in your submenu items like this:
    Code:
    <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:
    Code:
    #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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    CoolAsCarlito (03-11-2009)

  • #10
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    Back to looking bad.

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

    Code:
     <!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>
    Code:
    @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;
    }
    Last edited by CoolAsCarlito; 03-11-2009 at 10:53 PM.

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by CoolAsCarlito View Post
    Here is the code I am using. It now works in both FF and IE. You can see my changes in red:
    Code:
    <!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:
    Code:
    @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)...
    Attached Thumbnails Attached Thumbnails Nav Bar Drop Down-ff2.jpg  
    Last edited by Rowsdower!; 03-12-2009 at 01:35 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    CoolAsCarlito (03-12-2009)

  • #13
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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.

    Code:
    @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;
    }
    Code:
    <!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>
    Last edited by CoolAsCarlito; 03-12-2009 at 05:40 PM.

  • #14
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    OK, try these changes/additions to the CSS:
    Code:
    #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?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • Users who have thanked Rowsdower! for this post:

    CoolAsCarlito (03-12-2009)

  • #15
    Regular Coder
    Join Date
    Jun 2008
    Posts
    680
    Thanks
    114
    Thanked 2 Times in 2 Posts
    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?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •