1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Help needed extending branches of navigation and images?

How to extend branches of navigation and images

         

Simon_Lloyd

11:07 am on Apr 11, 2010 (gmt 0)

10+ Year Member



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 here "<snip>" 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.

Can someone help?

Regards,
Simon

[edited by: limbo at 7:52 am (utc) on Apr 13, 2010]
[edit reason] No URL's please, see TOS [webmasterworld.com] [/edit]

Simon_Lloyd

12:35 am on Apr 13, 2010 (gmt 0)

10+ Year Member



Any ideas guys?

Simon_Lloyd

5:55 am on Apr 20, 2010 (gmt 0)

10+ Year Member



Sorry to bump this again but can anyone offer any help?

limbo

11:06 am on Apr 20, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi Simon

Can you post up a snippet of HTML and CSS, for just the section you are have trouble with?

Simon_Lloyd

2:12 pm on Apr 20, 2010 (gmt 0)

10+ Year Member



Thanks for replying, the CSS is as follows:
<style type="text/css">
ul.dropdown {
 background: transparent url(images/box1-bottom-left.png) 0 100% no-repeat;
 font: normal 14px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

ul.dropdown li {
 padding: 5px 10px;
 background-color: #172322;
 color: #fff;
 line-height: 22px;
 white-space: nowrap;
}

ul.dropdown li.first {
 padding-left: 15px;
 background: transparent url(images/box1-bottom2.png) 0 100% no-repeat;
}

ul.dropdown li.last {
 padding-right: 15px;
 background: transparent url(images/box1-bottom2.png) 100% 100% no-repeat;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 color: #b0d730;
}

ul.dropdown a:link,
ul.dropdown a:visited{ color: #fff; text-decoration: none; }
ul.dropdown a:hover{ color: #b0d730; }
ul.dropdown a:active{ color: #0395cc; }



ul.dropdown ul {
 left: -21px;
 width: 150px;
 padding: 0 16px;
 background: url(images/box1-top.png) 50% 0 no-repeat;
}

ul.dropdown li.last ul {
 left: auto;
 right: 16px;
}

ul.dropdown ul li {
 height: auto;
 padding: 5px 15px;
 line-height: 1.3em;
 white-space: normal;
}

ul.dropdown ul li.first {
 padding-left: 0;
 background: #172322;
}

ul.dropdown ul li.last {
 padding-bottom: 10px;
 background: transparent url(images/box1-bottom.png) 50% 100% no-repeat;
}

ul.dropdown ul li.first ul {
 top: 0;
 padding: 0 16px 0 0;
 background-image: url(images/box1-outwards-top-right.png);
}

ul.dropdown ul li.first li.first {
 background-image: none;
}

ul.dropdown ul li.last {
 padding-right: 0;
}

ul.dropdown ul li.last ul {
 left: 100%;
 right: auto;
 top: -16px;
}


ul.dropdown ul ul {
 top: -12px;
 left: 100%;
 padding: 16px 0 0;
 background: transparent url(images/box1-top-left.png) 0 0 no-repeat;
}

ul.dropdown ul ul li.first {
 padding-top: 10px;
 background: #172322 url(images/box1-top-right.png) 100% 0 no-repeat;
}


ul.dropdown form * {
 display: inline;
 float: left;
}

ul.dropdown form label {
 display: none;
}

ul.dropdown form input.text {
 width: 143px;
 height: 18px;
 padding: 2px 25px 2px 5px;
 border-width: 0;
 background: transparent url(images/bg_search-field.png) 0 0 no-repeat;
 color: #969696;
 font: normal 14px/17px Tahoma, Verdana, Arial, Helvetica, sans-serif;
 vertical-align: middle;
}

ul.dropdown form input.text:focus {
 outline: none;
}

ul.dropdown form input.button {
 position: relative;
 margin: 4px 0 0 -20px;
}


ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
}



ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-right.png);
 background-position: 95% 50%;
 background-repeat: no-repeat;
}
</style>


and the html that works fine is below: 

<li class="dir">Page Views
<ul>
<li class="first"><a href="http://www.example.com/" target="_parent" title="members HomePage, full of information and links">My Homepage</a></li>
<li class="dir">Excel Forums
<ul>
<li class="first"><a href="http://www.example.com/forumz/members-excel-forum/" target="_parent" title="members Excel forums">Members Excel</a></li>
<li class="last"><a href="http://www.example.com/forumz/newsgroup-excel-forum/" target="_parent" title="Newsgroup Excel forums">Newsgroup Excel</a></li>
</ul>
</li>
<li class="dir">Access Forums
<ul>
<li class="first"><a href="http://www.example.com/forumz/members-access-forum/" target="_parent" title="Newsgroup Access forums">Members Access</a></li>
<li class="last"><a href="http://www.example.com/forumz/newsgroup-access-forum/" target="_parent" title="Newsgroup Access forums">Newsgroup Access</a></li>
</ul>
</li>


But when i try to extend the tree as below the wrong offset and wrong image in place as the tree expands, code below: 

<li class="dir">Post Tools
<ul>
<li class="first"><a href="http://www.example.com/forumz/forumdisplay.php?do=markread" target="_parent" title="Mark All Forums read">Mark Forums Read</a></li>


<li class="dir">Unanswered Threads
<ul>

<li class="first"><a href="" class="dir">Excel</a>
<ul>

<li class="first"><a href="" class="dir">New Posts</a>
<ul class="dir">
<li class="first"><a href="" class="dir">Members</a>
<ul>
<li class="first"><a href="http://www.example.com/forumz/search.php?do=getnew&include=65,66,67,68,69">All Members Excel</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=69">Worksheet Functions</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=65">VBA Programming</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=68">Excel Miscellaneous</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=67">New Users</a></li>
<li class="last"><a href="http://www.example.com/forumz/search.php?do=getnew&include=66">Charting</a></li>
</ul>
</li>
<li class="last"><a href="" class="dir">Newsgroups</a>
<ul>
<li class="first"><a href="http://www.example.com/forumz/search.php?do=getnew&include=23,24,27,45,46">All Newsgroups Excel</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=25">Worksheet Functions</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=23">VBA Programming</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=45">Excel Miscellaneous</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=getnew&include=46">New Users</a></li>
<li class="last"><a href="http://www.example.com/forumz/search.php?do=getnew&include=24">Charting</a></li>

</ul>
</li>

</ul>
</li>



<li class="first"><a href="http://www.thecodecage.com/forumz/search.php?do=process&forumchoice[]=65&forumchoice[]=66&forumchoice[]=67&forumchoice[]=68&forumchoice[]=69&forumchoice[]=23&forumchoice[]=24&forumchoice[]=46&forumchoice[]=45&forumchoice[]=25&childforums=1&replyless=1&replylimit=0&nocache=0" target="_parent" title="All Excel forum threads">All Excel Forums</a></li>
<li> <a href="http://www.example.com/forumz/search.php?do=process&forumchoice[]=23&childforums=0&replyless=1&replylimit=0&nocache=0" target="_parent" title="Excel VBA Programming forum threads">Excel VBA Programming</a></li>

<li><a href="http://www.example.com/forumz/search.php?do=process&forumchoice[]=24&childforums=0&replyless=1&replylimit=0&nocache=0" target="_parent" title="Excel Charting forum threads">Excel Charting</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=process&forumchoice[]=46&childforums=0&replyless=1&replylimit=0&nocache=0" target="_parent" title="Excel New User forum threads">Excel New Users</a></li>
<li><a href="http://www.example.com/forumz/search.php?do=process&forumchoice[]=45&childforums=0&replyless=1&replylimit=0&nocache=0" target="_parent" title="Excel Miscellaneous forum threads">Excel Miscellaneous</a></li>
<li class="last"><a href="http://www.example.com/forumz/search.php?do=process&forumchoice[]=25&childforums=0&replyless=1&replylimit=0&nocache=0" target="_parent" title="Excel Worksheet Function forum threads">Excel Worksheet Functions</a></li>
</ul></li>


This is the first of many categories i need to expand the tree for

regards,
Simon

[edited by: tedster at 6:40 am (utc) on Apr 23, 2010]
[edit reason] no real urls, please - see charter [/edit]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026