Jump to content

Nav Bar Drop Down Not Displaying Right


Xtremer360

Recommended Posts

I was told to repost this topic in this forum because the person thought it was more JS. My script will not show correctly.

 

<!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>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Dog's Choice">
<meta name="generator" content="AceHTML 6 Pro">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<noscript></noscript><!-- --><script 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"> </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>
                  </li>
                  </ul>   
                  <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 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-info.jpg" alt="Info" width="61" 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>
               </ul>
              </div>
                   <div id="left-box">
                      <div class="quote">
                        <h3> <img src="images/head-quote.jpg" alt="Quote" width="52" height="17"></h3>
                        <div class="quote-content">
                  
                  </div>
                      </div>
                      <div class="spotlight">
                        <h3><img src="images/head-spotlight.jpg" alt="Spotlight"></h3>
                        <div class="spotlight-content">
                  
                   </div>
                      </div>
                      <div class="opinion">
                        <h3><img src="images/head-opinion.jpg" alt="Opinion" width="78" height="18"></h3>
                        <div class="opinion-content">
                     
                  </div>
                      </div>
                    </div>
                    <div id="content-box">
                      <div class="content-banner"><img src="images/content-banner.jpg" alt="Banner"></div>
                      <div class="site-news">
                        <h2><img src="images/head-site-news.jpg" alt="News"></h2>
                        <div class="site-news-content">
                         
                        </div>
                      </div>
                      <div class="clear"></div>
                      <div class="content-bottom-box">
                        <h2><img src="images/head-headlines.jpg" alt="Headlines"></h2>
                        <div class="content-bottom-box-content">
                         
                        </div>
                      </div>
                      <div class="content-bottom-box">
                        <h2><img src="images/head-rumors.jpg" alt="Rumors"></h2>
                        <div class="content-bottom-box-content">
                         
                        </div>
                      </div>
                    </div>
                    <div id="right-box">
                      <div class="events">
                        <h3><img src="images/head-events.jpg" alt="events"></h3>
                        <div class="events-content">
                     
                  </div>
                      </div>
                      <div class="forum">
                        <h3><img src="images/head-forums.jpg" alt="forum"></h3>
                        <div class="forum-content"><a href="http://kansasoutlawwrestling.com/phpBB3/"><img src="images/picture3.jpg" alt="Forum" width="152" height="134"></a></div>
                      </div>
                      <div class="shop">
                        <h3></h3>
                        <div class="shop-content"><a href="http://kansasoutlawwrestling.com/oscommerce/catalog/"><img src="images/shirt.jpg" alt="Shop"></a></div>
                      </div>
                  </div></td>
                </tr>
                <tr class="main">
                  <td valign="top" class="footer"><a href="#">link</a>    |    <a href="#">link</a>    |    <a href="#">link</a>    |    <a href="#">link</a>    |    <a href="#">link</a>  </td>
                </tr>
              </table></td>
            <td valign="top"><div class="rightside"></div></td>
          </tr>
        </table></td>
    </tr>
  </tbody>
</table>
</body>
</html>

 

@charset "windows-1252";   

body {      
   background: #0a0d12;
   text-align: center;
   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:0px; padding:0px; float:left; list-style: none;}
#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: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;}

Link to comment
https://forums.phpfreaks.com/topic/148893-nav-bar-drop-down-not-displaying-right/
Share on other sites

Problem at line 7 character 7: Be careful when making functions within a loop. Consider putting the function in a closure.

 

Problem at line 12 character 25: Expected '{' and instead saw 'window'.

 

Problem at line 10 character 4: Be careful when making functions within a loop. Consider putting the function in a closure.

 

Problem at line 6 character 8: Missing semicolon.

 

Problem at line 9 character 8: Missing semicolon.

 

Problem at line 11 character 2: Missing semicolon.

ok i fixed the missing semi colon errors try this:

 

  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);}

Notice what happens with the page with this coding.

 

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

 

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
<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"> </td>
            <td width="805" valign="top"><table width="805" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="center" valign="top" class="contentarea">
			  <div id="main-nav">
			  	<ul>
					<li><a href="#"><img src="images/btn-roster.jpg" alt="Roster" width="71" height="36" border="0"/></a>
					<ul>
                  <li><a href="#">Test Link 1</a></li>
                  <li><a href="#">Test Link 2</a></li>
                  <li><a href="#">Test Link 3</a></li>
                  </ul> 
                  </li>
					<li><a href="#"><img src="images/btn-events.jpg" alt="Events" width="75" height="36" border="0"/></a>
					<ul>
                  <li><a href="#">Test Link 4</a></li>
                  <li><a href="#">Test Link 5</a></li>
                  <li><a href="#">Test Link 6</a></li>
                  </ul> 
					</li>
					<li><a href="#"><img src="images/btn-multimedia.jpg" alt="Multimedia" width="108" height="36" border="0"/></a>
					<ul>
                  <li><a href="#">Test Link 7</a></li>
                  <li><a href="#">Test Link 8</a></li>
                  <li><a href="#">Test Link 9</a></li>
                  </ul> 
					</li>
					<li><a href="#"><img src="images/btn-info.jpg" alt="Info" width="61" height="36" border="0"/></a>
					<ul>
                  <li><a href="#">Test Link 10</a></li>
                  <li><a href="#">Test Link 11</a></li>
                  <li><a href="#">Test Link 12</a></li>
                  </ul> 
					</li>
				</ul>
			  </div>
                    <div id="left-box">
                      <div class="quote">
                        <h3> <img src="images/head-quote.jpg" alt="Quote" width="52" height="17"/></h3>
                        <div class="quote-content"> 

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

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

					</div>
                      </div>
                    </div>
                    <div id="content-box">
                      <div class="content-banner"><img src="images/content-banner.jpg" alt="Banner"/></div>
                      <div class="site-news">
                        <h2><img src="images/head-site-news.jpg" alt="News"/></h2>
                        <div class="site-news-content">
                          
                        </div>
                      </div>
                      <div class="clear"></div>
                      <div class="content-bottom-box">
                        <h2><img src="images/head-headlines.jpg" alt="Headlines"/></h2>
                        <div class="content-bottom-box-content">
                          
                        </div>
                      </div>
                      <div class="content-bottom-box">
                        <h2><img src="images/head-rumors.jpg" alt="Rumors"/></h2>
                        <div class="content-bottom-box-content">
                          
                        </div>
                      </div>
                    </div>
                    <div id="right-box">
                      <div class="events">
                        <h3><img src="images/head-events.jpg" alt="events"/></h3>
                        <div class="events-content">

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

 

@charset "windows-1252";   

body {	   
background: #0a0d12;
text-align: center;
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;}
#main-nav ul li                        { margin:0px; padding:0 4px 0 0px; float:left; list-style:none;}
#main-nav ul li a                      { border:none;}
*html #main-nav ul li                  { margin:0 0px 0 5px; padding:0px; float:left; list-style:none;}

#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;}

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.