[HOW TO] Integrate a CSS dropdown Menu into phpBB Styles

[cla1067]

nvm just found my answer in the posts i must have missed it the first couple of times.
Thanks for nav bar it a lot better then anything else i have found and easy to customize!

[bonelifer]

Hmm maybe I can just add some rounded corners to the menu.css

demopage: http://www.konsult-poolen.se

Could you post what you did to integrate the menu with the prosilver header like on your website.

I've tried everything but it's just maddening. I'd like to integrate it the way you did, but if I can't find a way I may use the code from Glacier which isn't really the position I want it at though.

[cla1067]

okay I need some help. This is pretty much the first time I am editing a style based off of prosilver.
I am using Carbon Copy.

How do I get rid of the space between the header and bottom menu?



If you need any more info or any of my coding please just let me know thanks!

http://www.thebehemoths.stupidwhitekid.com/community <-- forums temporary location

[wired076]

okay I need some help. This is pretty much the first time I am editing a style based off of prosilver.
I am using Carbon Copy.

How do I get rid of the space between the header and bottom menu?



If you need any more info or any of my coding please just let me know thanks!

http://www.thebehemoths.stupidwhitekid.com/community <-- forums temporary location

You need to edit your css!

If you require more help please include your overall_header.html and required css file for this section!

[cla1067]

okay I know the coding isn't super clean yet. I compressed them into a zip to make life a little easier.

Thanks

[cla1067]

Here is the overall_header.html that should be in the zip folder. The one that is in there Isn't right and I cannot edit my last post.

[wired076]

Here is the overall_header.html that should be in the zip folder. The one that is in there Isn't right and I cannot edit my last post.

Just to let you know, explain this to you.

To figure out which is the issue I have found out the part of overall_header.html that is contained within the two nav bar's. Then to go further the part you want to fix is at the bottom of the logo so it has to do with this section's css.

Code: Select all

</ul>

      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo"><img src="images/spacer.gif" width="870" height="180" alt="" /></a>
            <!--<h1>{SITENAME}</h1>
            <p>{SITE_DESCRIPTION}</p>-->
            <p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
         </div>

      <!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
      <!-- ENDIF -->

         <span class="corners-bottom"><span></span></span></div>
      </div>
               
<span class="preload3"></span>
<span class="preload4"></span>

<ul id="nav2">

What is this for <img src="images/spacer.gif" width="870" height="180" alt="" /> ?? What are you using this for?

Try removing this and clearing your cache.

[cla1067]

I know that is the part where the problem is, but I tried messing with it myself and I couldn't fix it.The style originally was set up like this. if I remove this then that background does not show up which is the actual banner. The banner is 900 by 188 which is same as original as well, so it is bigger then the spacer. I will take a screen shot of what happens.

[wired076]

I know that is the part where the problem is, but I tried messing with it myself and I couldn't fix it.The style originally was set up like this. if I remove this then that background does not show up which is the actual banner. The banner is 900 by 188 which is same as original as well, so it is bigger then the spacer. I will take a screen shot of what happens.

Send me the updated code so I can see what you have done! Thanks

[cla1067]

I took out the code for the banner and replaced with:

Code: Select all

<a href="{U_INDEX}"><img src="{T_THEME_PATH}/images/banner.png"/></a>

So it would then look like this in the section for the overall header:

Code: Select all

        <li class="top_r"><img src="{T_THEME_PATH}/images/menu1/menu_corner_right.gif" title="" alt="" /></li> 
</ul>

<a href="{U_INDEX}"><img src="{T_THEME_PATH}/images/banner.png"/></a>
               
<span class="preload3"></span>
<span class="preload4"></span>

and it does this: