Can anyone take a look at my menu at my website pokersharksonline.com - the top menu is showing up way below where it is suppose to be in the gray box. Below is my style.css and header coding...I am using articlelive software if that helps. <div class="header"> <div class="TopMenu"> %%Panel_SiteMenuPanel%% </div> <a href="/" title="Poker Sharks Online - Home Page"><img class="logo" src="http://pokersharksonline.com/templates/Default/Images/sitelogo.gif"/> <a href="http://www.fulltiltpoker.com/?key=MDAwMDY0MkEwMDAwRjg2OTAwMDAwMDAwMDAwMDAwMDA-"> <img src="http://www.fulltiltpoker.com/images/com/en/content/affiliates/banners-sizes/100-deposit-bonus/468x60.gif" IMG STYLE="position:absolute; TOP:32px; LEFT:278px; WIDTH:468; HEIGHT:60px" width="480" height"60"><a/> <div class="HeaderSearch"> %%Panel.SmallSearchPanel%% <div id="menu"> <img src="http://www.pokersharksonline.com/templates/Default/Images/menu-front-cap.gif" alt="Texas Holdem Poker" /> <div class="menuBg"> <ul>%%Panel.PagesMenuPanel%%</ul> </div> <img src="http://www.pokersharksonline.com/templates/Default/Images/menu-cap.gif" alt="Texas Holdem Poker" /> </div> </div> </div> ------------------------------------------------------------ body { color:#000; margin: 0; padding: 0; height: 100%; text-align: center; min-width: 700px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 11px; } /* General Links */ a:link { text-decoration : none; border: 0px;} a:active { text-decoration : underline; border: 0px;} a:visited { text-decoration : none; border: 0px;} a:hover { text-decoration : underline; border: 0px;} img { padding: 0px; margin: 0px; border: none;} input { font-family: 'Verdana'; color: #2f2928; font-size: 11px; } textarea { font-family: 'Verdana'; color: #2f2928; font-size: 12px; } select { font-family: 'Verdana'; color: #2f2928; font-size: 11px;} h1, h2, h3 { font-family: Georgia, "Times New Roman", Times, serif} h4 { font-family: 'Verdana'} #bgcontain { width: 1000px; margin: 0 auto; text-align: left; } /* IE min height hack */ * html #container { height: 250px;} #container { padding: 0; float: left; width: 100%; clear: both; min-height: 250px; background: url('../Images/bkg_container.png') repeat-y right top; margin: 20px 0px } /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .header { width: 1000px; position: relative; height: 150px; margin-top: 0px;} .header h1 { font-size: 38px; letter-spacing: -2px; font-weight: normal; padding: 15px 0px; margin: 0px;} .header h1 a {} .header h1 a:visited {} .header h1 a:hover {text-decoration: none;} .header .search { position: absolute; top: 0px; right: 0px; width: 220px; padding: 10px 0px 0px 0px} .header .search h2 { font-size: 13px; font-weight: normal; margin: 0px; padding: 0px 0px 2px 0px; text-transform: uppercase;} .header .search form { padding: 0px; margin: 0px;} .header .search form { margin-top:38px; margin-right:1px; clear:right; float:right; } .header .search .input { background:#cceaff; border: solid 1px #fff; font-size: 11px; padding: 3px 3px 4px 3px; margin: 0px;} .header .search .arrow { width: 69px; height: 22px; background: url('../Images/SearchArrow.png') no-repeat;} .header .search .arrow:hover { background: #ffd780 url('../Images/SearchArrow.png') no-repeat 0 -22px; } .header .search .arrowIE { width: 69px; height: 22px; background: #ffd780 url('../Images/SearchArrow.png') no-repeat 0 -22px; } /*\ IE/Win min height hack */ * html .searcharrow { margin: -23px 0px 0px 135px; } /* */ .searcharrow { padding: 0px; margin: -22px 0px 0px 135px; top: 0px; background: none;} .logo { margin-top:6px; margin-left:1px; clear:left; float:left; } /* Top Menu (Site Menu - SiteMenuPanel.html) ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .TopMenu { position: relative; top: 0px; left: 0px; height:12px; margin-top:3px; margin-left:3px; overflow:hidden; float:left; } .TopMenu ul { padding: 0px; margin: 0px; clear:left; float:left; } .TopMenu li { padding: 0px 6px; margin: 0px; list-style-type: none; display: block; float:left; font-size: 10px; line-height:12px;} .TopMenu li a { text-decoration: none;} .TopMenu li a:visited { text-decoration: none;} .TopMenu li a:hover { text-decoration: none; text-decoration: underline;} /* DropDown Menu ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ #menu { position: absolute; top: 106px; left: 0px; clear:left; float:left; margin-top:15px; height:32px; overflow:; width:1000px; } #menu ul { padding: 0px; margin-top: 7px; margin-left:0px; float:left; } #menu li { float: left; display: block; list-style: none; font-size: 11px; font-weight: bold; } #menu li a { display: block; text-decoration: none; padding: 6px 14px; } #menu li a:visited {} #menu li a:hover {} #menu img { float:left; } #menu .menuBg { background:url('../Images/menu_tile.gif'); height:32px; float:left } DIV#menu ul li a { z-index: 100 } DIV#menu ul li a:hover { z-index: 100 } DIV#menu ul li:hover { z-index: 100 } DIV#menu ul li.over { z-index: 100 } DIV#menu ul li li { clear: left; padding: 0px; display: inline; margin: 0px; border: none;} DIV#menu ul li { position: inline } DIV#menu ul li ul { margin: 0px; display: none; z-index: 150; left: 0px; padding: 0px; width: 0px; position: absolute; top: 100%; border-left: none; } DIV#menu ul li:hover ul { display: block} DIV#menu ul li.over ul { display: block} #menu li li a { font-size: 10px; font-weight: normal; letter-spacing: normal; width: 150px; padding: 3px 20px; color:#FFF; border-right: none;} #menu li li a:visited { width: 130px; padding: 3px 10px; color:#fff; border-right: none;} #menu li li a:hover { width: 130px; padding: 3px 10px; color:#fff; border-right: none;} /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ .content { float: left; width: 550px; padding: 0px;}
<div id="menu"> Shouldnt this match with <img src="http://www.pokersharksonline.com/templates/Default/Images/menu-front-cap.gif" alt="Texas Holdem Poker" /> <div class="header"> <div class="TopMenu"> %%Panel_SiteMenuPanel%% </div> <a href="/" title="Poker Sharks Online - Home Page"><img class="logo" src="http://pokersharksonline.com/templates/Default/Images/sitelogo.gif"/>
I dont think I follow what you are saying . The different divs are different menus.... explained below The <div class="TopMenu"> is the: # View Blogs # View Authors # Become an Author # Account Login # Submit Article # Submit Blog The (see below) is the home, syndicate, sitemap, contact us <div id="menu"> <img src="http://www.pokersharksonline.com/templates/Default/Images/menu-front-cap.gif" alt="Texas Holdem Poker" /> <div class="menuBg"> <ul>%%Panel.PagesMenuPanel%%</ul>
I was finally able to get the menu front and end caps on the gray bar. Now the actual buttons display underneath the bar...i am so frustrated!
the img should be in your css not html, With it in the html the image covers whatever you want to be displayed
I opened your source code and got your header looking fine but I do not know where you want the two little images. If you want just send me the Html & css files over Email or something. My email is and I have 4 of the messanger programs linked to this account. You can send them any way you like and I will return them within an hour if im awake when you send them
Still having problems with that menu. Something is wrong with the CSS (style.css) but I cant figure it out Please HELP - this has been hours upon hours of struggles