'flyout revisited' problem... am sure the problem is me!!

hey there bob, thank you once again for your help

i’ve checked my naming of that chunk and all seems well with it... http://cheerytomato.com/modx170808/chunk.png [the stroke next to the chunk name is just my cursor, was making sure there was no space in there]. and the css named in the chunk seems to be in the right spot as well, http://cheerytomato.com/modx170808/directory.png

it’s not a drama if i dont get it to work, as long as i know i can get one version of a vertical nav to work i’m happy, am always keen to learn where i’m messing up though.

if you have any thoughts of getting arrow gifs/jpegs into the nav, i’d be most keen to hear them. thank you!

Quote from: kathleenread at Sep 01, 2008, 08:51 AM

if you have any thoughts of getting arrow gifs/jpegs into the nav, i’d be most keen to hear them. thank you! 

Kathleen, you will need to use a CSS class to assign an arrow. In your nav, Wayfinder will input the class(es) you have told it to use (via the way finder call, e.g. &outerClass=`menu`). This class(es) should be referenced in your CSS, otherwise no styling will take place.

For more info on how to do insert the arrows using CSS, refer to this: http://www.projectseven.com/tutorials/navigation/auto_hide/ scroll down toward the bottom OR see this http://sperling.com/examples/menuh/. It may not be what you want exactly but it gives you an idea how to style using CSS. Hope this is clear and helpful.

Cheers,
/k

Your CSS is being pulled into the page but it’s not being applied to the menu because all the style rules are called via a .menu class and you don’t have an element on the page with that class. If you look at the flyout menu, you can see a <div class="menu"> element that is missing from the revisited flyout menu.

flyout code:

Revisited flyout code:

thank you so much for those links kongondo, they are a great start. have also just now found http://wiki.modxcms.com/index.php/Wayfinder which i think will give me a better grounding, i was doing too much from copying and pasting without really understanding what i was doing.
and thanks also from your time and response bob. that has gotten that menu working now, cheerin!
am off to figure out this arrow thing, really appreciate the help you’ve offered

Quote from: kathleenread at Sep 03, 2008, 07:12 AM

..... have also just now found http://wiki.modxcms.com/index.php/Wayfinder which i think will give me a better grounding,....

You are welcome!

The link you have for the WF wiki is for wayfinder version 1. Have a look at wayfinder version 2 here: http://wiki.modxcms.com/index.php/Wayfinder200

Also, I recommend you download the zipped HTML file at the top of that wayfinder 2 page. It is quite exhaustive and makes a lot of things clearer. It’s certainly worth reading in conjuction with the stuff on the wiki

Cheers,
/k

gold gold gold!! thank you again kongondo i will most definitely check out that other link and download the files, am sure that slowly slowly the pieces will fall into place...

so... i’ve spent the last couple of evenings working on getting a different parent class happening for my nav. have learnt a lot and am filling in the gaps. am still very very green though. wondering if anyone can explain to me how the css is prioritised? i’m figuring things out at http://cheerytomato.com/modx170808/index.php?id=10 [looks terrible, i know!! just while i’m learning...]

what i mean is i’ve made ’ &parentClass="parent" ’ and there’s a ’parent’ style in my css with that red bg and arrow in the bg as well. the type colour i’ve actually set for it though is white and that’s over-ridden by the green in my ’menu’ style. oh. i think i’m starting to figure out my answer... menu is the style that the wayfinder nav sits in so i guess that’s going to be the first/main thing that’s paid attention to? only if i take the colour out of that, where do i get to tell the links that aren’t a parent what colour to be and what bg colour to have? i’ve tried &rowClass and that overrides it too.

sorry if that’s confusing, my head is swimming... [kongondo i found another post you’d made elsewhere yesterday that helped me get here, thanks again if you read this].

Everything is given a mathematical specificity, and the "biggest" one wins out.

http://www.htmldog.com/guides/cssadvanced/specificity/

There are two reasons why the links are green instead of white. The first is due to the cascading part in Cascading Style Sheets, rules that appear further down the style sheet override rules that come earlier. The rules for your parent class

come before the rules for the menu class in your style sheet

so the green in the menu class overrides the white in the parent class. If you place the parent class rules after the menu class ones, it should sort the problem out for the web login link.

The second reason is the classes for the flyout link have been applied to the actual link

whereas the other links have the classes appled to the <li>

The CSS rules ".menu a, .parent a" apply to <a> elements inside another element with a class of either menu or parent. If you apply the class to the <a> element, the rules no longer apply because the <a> isn’t inside itself. Moving those classes from the <a> to the <li> will fix the flyout link.

Ye am reading

Good explanation bob

/k