Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

This topic is empty.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
April 23, 2010 at 2:48 pm #28824

Simon lloyd
Member

POSTED HERE http://www.webmasterworld.com/css/4113821.htm 11th April with no response.

Using:
<!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

Code:

and the html that works fine is below:

Code:
Page Views
- My Homepage
- Excel Forums
  - Members Excel
  - Newsgroup Excel
- Access Forums
  - Members Access
  - Newsgroup Access

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?

Regards,
Simon

April 26, 2010 at 3:44 am #74698

Member

Any help with this guys?

April 26, 2010 at 2:13 pm #74076

Member

u should upload your current crafted css page that contain menu navigation bar somewhere.. so we can live preview..
hmm.. i think using some javascript for unlimited submenu. i ever try suckerfish method but not unlimited submenu. And, i think someone must create an article the basic concept of making unlimited submenu navigation ^_^ ..so we can discuss the technique here..

sorry can not help.. hope someone else can help.. :)

April 26, 2010 at 2:32 pm #74642

Member

I have created a live test page, i thought it might be against the rules to post the url, anyway it can be found here http://www.thecodecage.com/forumz/testnav.html

Any help would be good!

Regards,
Simon

April 26, 2010 at 4:40 pm #74635

Participant

Well it seems to work in Firefox, except for the blue corner in the top right hand of the drop downs. However the top nav isn’t aligned. Which browser are you having the problem with? IE probably?

April 27, 2010 at 2:53 am #74714

Member

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.

Regards,
SImon

April 27, 2010 at 2:01 pm #74776

Participant

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.

April 27, 2010 at 2:26 pm #74777

Member

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.

Kind regards,
Simon Lloyd

April 27, 2010 at 2:38 pm #74778

Participant

I don’t quite understand what you are trying to achieve here? Are you building a new site using the codecage menu, or are you trying to add to theirs, or it this your site?

April 27, 2010 at 2:46 pm #74779

Member

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! :)

May 1, 2010 at 1:55 am #74934

Member

"virtual" wrote:

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.

Unfortunately this didn’t solve the problem, any other ideas?

May 1, 2010 at 2:50 pm #74975

Participant

Sorry I missed a bit remove these lines from testnav.css and default.css
ul.dropdown ul li.first li.first {
background-image:none;
}

But as I said previously put all your css in one file.

Viewing 12 posts - 1 through 12 (of 12 total)

The forum ‘CSS’ is closed to new topics and replies.