POSTED HERE http://www.webmasterworld.com/css/4113821.htm 11th April with no response.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hi all, I have a CSS navigation bar (I didn’t create the CSS I just manipulated what I had to work for me) and all is fine until i try to add more branches to the navigation tree, this is going to be hard to explain, there’s a test page which i can give you the url for, if you take a look at "Page Views" first you will see that when the drop-down branches out the next menu item is offset down and out to the right nicely rounded, so far so good, I created the next menu item "Post Tools > Unanswered Threads > Excel >New Posts" and from her on in lies the problem, as you can see each of the tiers (I’ve only done Excel so far) as they open out have the wrong top image and aren’t offset down (Just like the one below "Access"), I know very little about CSS and don’t know how to create the order in the CSS shown in the HEAD to show the correct images.
CODE AS FOLLOWS
and the html that works fine is below:
But when i try to extend the tree as below the wrong offset and wrong image in place as the tree expands, code below:
This is the first of many categories i need to expand the tree for
Can someone help?
u should upload your current crafted css page that contain menu navigation bar somewhere.. so we can live preview..
sorry can not help.. hope someone else can help.. :)
Virtual, thanks for the reply, the blue corner is an image problem i assume and yes the tree expands fine but if you first navigate to POST TOOLS>UNANSWERED THREADS>ACCESS that is exactly as each branch should look as it opens out, if you look at the Excel one that i have tried extending the offset and images are wrong, each branch out should offset down and have a rounded top to the first menu item (i know access only has the one branch but it shows how it should look on each subsequent branch).
I don’t know if i’m making myself clear, let me know if i haven’t explained it well.
Well after a more detailed look, you have several issues going on. For one you have too many stylesheets – 3 for the same drop down menu and then embedded styles. There is bound to be conflict between them. You need to regroup all the styles into 1 external stylesheet to start off.
Next, remove the padding from ul.dropdown li to make "forum view" align with the rest.
As for the problem with Excel, you can only have one li class="first" in the html as this class carries the rounded top right image, if you use it a second time in the same drop down you get the rounded top underneath the first one and so on, the arrows are generated by the "dir" class
Change ul.dropdown ul li.first ul background image to "box1-topright.png"
I hope this gets you on your way.
Firstly i appreciate you taking the time to look, i’m no coder by any means but i’ll have a look. If you take a look at the real navigation bar (http://www.thecodecage.com/forumz you need to login to see the entire navbar so i have pm’d you a test account access) (doesn’t have the extra branches) you should see that "Forum View" is fine, the css provided in the test page has been taken from a seperate css file, i included it in the HEAD so people who know much more than me can see and relate to the css for the dropdowns, there are one or two extra .ul li first…..etc that i added (couldn’t tell you which ones they are now:(), but there isn’t any more than two.
I can barely code html, css seems an absolute nightmare to try to add to although i do see the sense in using it.
My apologies, it’s my site and i want to build in the extra functionality for the members to find specific groups of posts in specific forums, it was a request that i have had from a few of the professionals that use the site, it seemed sensible and it keeps them at the site so i tried to achieve it…the html and query part i’ve sorted its just the css! :)
I hope this gets you on your way.
Unfortunately this didn’t solve the problem, any other ideas?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".