I see this very nice drop down menu but when i want to put it in my forum.
But the drop down part goes underneath the rest of my forum. How can i fix that problem?
This is the example of the drop down that i want to use.
http://www.stunicholls.com/menu/pro_dropdown_2.html
Please provide the following information when posting a new topic for support.
Link to my site: http://www.yourdomain.com
SMF version: SMF ver. here
TP version: TP ver. here
Theme name and version: Theme name here
Browser Name and Version: Browser name/version here
Mods installed: Mods listed here
Related Error messages: Error message here
Link to my site: http://www.ilnika.com
SMF version: SMF 2.0 RC3
TP version: TP ver 1 beta 5
Theme name and version: Curve Default
Browser Name and Version: Firefox 3.6.8
Mods installed:
1. Sitemap 2.1.2
2. Custom Form Mod 1.
3. Aeva Media 1.3a
4. Pretty URLs 1.0
6. Facebook_Like v.1.2 1.
7. AutoKeywords 1.
8. Team Page 3.5.
9. TinyPortal 1.
11. Google Tagged 1.
12. ENotify 1.0.
13. Users Online Today 1.5.
14. Aeva Media 1.1b
15. Redirection Topics 1.
16. FaceBook Style NavBar (FBSNB) 1.0.
17. Contact Page 2.0.
18. SA Affiliates 3.3.5
I don't see any problems with your menu. There no way to say what's wrong without seeing it.
Its there. THe block was turned off.
I don't see any menu other than the one that is at the upper part of your page. I don't see a block with any menu in it either.
I just looked on another PC and its there. I promise. THe drop down goes under the other blocks
Perhaps you need to be logged in to see it? Here is a screen shot of what I see.
Edit: lol... Perhaps you meant to link to this site: http://www.kalaharired.net/ (http://www.kalaharired.net/)
<div style="overflow: auto;" class="blockbody">
When I disable "overflow: auto" from the above line it works perfectly. Find that line and remove the "overflow: auto" and see if there are any other problems caused.
Stupid question but where do i disable it?
OMW, I gave the wrong URL. Its www.kalaharired.net
SO so so sorry guys
NP! Did you try what I said?
How do i disable it?
Here is the code.
display:block;overflow:visible;
Ok i see that its working in Internet Explorer. But i want it to also work in Firefox.
I took a closer look at your page. I am guessing you just pasted the code for the menu and maybe other stuf in the page, in blocks. As a result, you have more than one head section. Please post the code for the menu you put in the block here, in a code block.
NoFeaR,
Besides posting the code here for the menu that you are using in the block, as WillyP suggested, could you please verify that the menu you are using is the one from the link that you first posted in your original post in this topic (http://www.stunicholls.com/menu/pro_dropdown_2.html). Your menu on your site doesn't even look like that one. In fact, it might be a little easier for us to help you if you tell us the exact steps you took to get that menu on your site. That is the only way that we can try to duplicate your efforts and help you solve the problem.
ZarPrime
Ok. Since i posted that first post i changed a few things. I will attach the code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.kalaharired.net/links/style.css" type="text/css" />
</head>
<body>
<ul id="css3menu" class="topmenu">
<li class="topfirst"><a href="http://www.kalaharired.net" title="Home"><img src="http://www.kalaharired.net/links/bhome.png" alt="Home"/>Home</a></li>
<li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=register" title="Register Free on the Website"><img src="http://www.kalaharired.net/links/service.png" alt="Register Free on the Website"/>Register Free on the Website</a></li>
<li class="topmenu"><a href="#" title="Newsletters"><span><img src="http://www.kalaharired.net/links/green-download-32.png" alt="Newsletters"/>Newsletters</span></a>
<ul>
<li class="subfirst"><a href="#" title="Newsletter1">Newsletter1</a></li>
</ul>
</li>
<li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=teampage" title="Team"><img src="http://www.kalaharired.net/links/blue-discuss.png" alt="Team"/>Team</a></li>
<li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=forum" title="Forum"><img src="http://www.kalaharired.net/links/smile1.png" alt="Forum"/>Forum</a></li>
<li class="topmenu"><a href="#03" title="Special Announcement"><span><img src="http://www.kalaharired.net/links/bnews.png" alt="Special Announcement"/>Special Announcement</span></a>
<ul>
<li class="subfirst"><a href="#" title="Tollie Jordaan Auction 30 October 2010"><img src="http://www.kalaharired.net/links/icon6.png" alt="Tollie Jordaan Auction 30 October 2010"/>Tollie Jordaan Auction 30 October 2010</a></li>
</ul>
</li>
<li class="toplast"><a href="#" title="Classifieds"><img src="http://www.kalaharired.net/links/g-micon5.png" alt="Classifieds"/>Classifieds</a></li>
</ul>
</body>
</html>
Then the CSS
ul#css3menu,ul#css3menu ul{
margin:0;list-style:none;background-color:#000;background-image:url("mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;}
ul#css3menu li:hover>*{
display:block;}
ul#css3menu li:hover{
position:relative;}
ul#css3menu ul ul{
position:absolute;left:100%;top:0;}
ul#css3menu{
padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu>li,ul#css3menu li{
margin:0 0 0 1px;}
ul#css3menu ul>li{
margin:1px 0 0;}
ul#css3menu a:active, ul#css3menu a:focus{
outline-style:none;}
ul#css3menu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial,sans-serif;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu ul li{
float:none;margin:9px 0 0;}
ul#css3menu ul a{
text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:16px Arial,sans-serif;color:#cccccc;text-decoration:none;}
ul#css3menu li:hover>a{
background-color:#00c4ff;border-style:none;font:bold 12px Arial,sans-serif;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
ul#css3menu img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu img.over{
display:none;}
ul#css3menu li:hover > a img.def{
display:none;}
ul#css3menu li:hover > a img.over{
display:inline;}
ul#css3menu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu ul li:hover>a{
background-color:#333;background-image:none;border-style:solid;border-color:#262626;font:16px Arial,sans-serif;color:#1F80AE;text-decoration:none;}
ul#css3menu li.topfirst>a{
height:26px;line-height:26px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topfirst:hover>a{
line-height:26px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.topmenu>a{
height:26px;line-height:26px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.topmenu:hover>a{
line-height:26px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu li.toplast>a{
height:26px;line-height:26px;border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu li.toplast:hover>a{
line-height:26px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu ._>li>a{
padding:0;}
ul#css3menu li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#css3menu li.subfirst:hover>a{
border-style:none;}
Only this should go in the block:
<ul id="css3menu" class="topmenu">
<li class="topfirst"><a href="http://www.kalaharired.net" title="Home"><img src="http://www.kalaharired.net/links/bhome.png" alt="Home"/>Home</a></li>
<li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=register" title="Register Free on the Website"><img src="http://www.kalaharired.net/links/service.png" alt="Register Free on the Website"/>Register Free on the Website</a></li>
<li class="topmenu"><a href="#" title="Newsletters"><span><img src="http://www.kalaharired.net/links/green-download-32.png" alt="Newsletters"/>Newsletters</span></a>
<ul>
<li class="subfirst"><a href="#" title="Newsletter1">Newsletter1</a></li>
</ul>
</li>
<li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=teampage" title="Team"><img src="http://www.kalaharired.net/links/blue-discuss.png" alt="Team"/>Team</a></li>
<li class="topmenu"><a href="http://www.kalaharired.net/index.php?action=forum" title="Forum"><img src="http://www.kalaharired.net/links/smile1.png" alt="Forum"/>Forum</a></li>
<li class="topmenu"><a href="#03" title="Special Announcement"><span><img src="http://www.kalaharired.net/links/bnews.png" alt="Special Announcement"/>Special Announcement</span></a>
<ul>
<li class="subfirst"><a href="#" title="Tollie Jordaan Auction 30 October 2010"><img src="http://www.kalaharired.net/links/icon6.png" alt="Tollie Jordaan Auction 30 October 2010"/>Tollie Jordaan Auction 30 October 2010</a></li>
</ul>
</li>
<li class="toplast"><a href="#" title="Classifieds"><img src="http://www.kalaharired.net/links/g-micon5.png" alt="Classifieds"/>Classifieds</a></li>
</ul>
In other words, keep the stuff inside of the body tags, remove everything above
before '<ul id="css3menu" class="topmenu">' and remove everything
after the last </ul>.
Then copy the contents of the css file to the end of the css file for the skin you are using.
Sad to say that didn't work. It still goes underneath the other blocks.
It works fine in IE but its only firefox that has the problem.
Who designed the theme ?
block
Ok then, well you could try asking over on his site if you two don't figure it out :
http://www.blocweb.net/index.php
I thought maybe use z-index to bring the drop down forward, but I don't really know this theme.
Well, I think WillyP had the right idea here. However, rather than adding the css into the style.css for the theme, it might be better to add it to the tp-style.css in the default theme (/Themes/default/tp-style.css). That way it should work with any theme.
I've stayed out of this to see if you guys could solve it but I would suggest that you add the block while you are viewing your site with the default SMF theme (Curve) before trying to make it work with a custom theme. Now that I look at your site, it looks like you have switched scripts again and I don't even see the normal tabs that come with the theme (Home, Forum, etc.)
ZarPrime
I just changed the colour. And removed the Build in menus.
What you need to do next is remove some code that comes before the content of the block. In the generated source, you have this:
<div class="block_topcontainer">
<div class="tp_topblock_noframe">
<div class="" id="block8"><div class="blockbody" style="overflow: auto;height: 300px;"><ul id="css3menu" class="topmenu">
<li class="topfirst"><a href="http://www.kalaharired.net" title="Home"><img src="http://www.kalaharired.net/links/home.png" alt="Home"/>Home</a></li>
What screwing up this menu is style="overflow: auto;height: 300px;" applied to the div, class "blockbody". Remove that and it works fine in Firefox.
Zarprime, do you know offhand where this is generated? Can this be removed for just one block? Of course, it might be easier to just put the menu code in the header of the theme instead of a block.
No, I saw that the other day when I looked at the site but, at this point, I'm not even certain that you are working with the same code. Before, he had a horizontal dropdown menu and now he has a vertical menu in there.
If he is going to use a vertical menu, I would think you would want this in the left panel rather than the top panel where he has it now. Look here --> http://www.kalaharired.net/index.php?theme=1
ZarPrime
I think he has lost the style-sheet for the drop down menu. I was still seeing a horizontal menu then I refreshed my cache and it looks like an unstyled list.
He removed the head section from the block, now he needs to add either a link to the stylesheet for the menu, or the contents to the the stylesheet for the theme he is using.
Then he should move the menu from the block to the theme's header, so it's not affected by the overflow:auto and hieght:300px applied to the block.