Navigation help - and general questions as well

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
rmfred

Navigation help - and general questions as well

Post by rmfred »

I realize I am not the sharpest tool in the shed, but I can create a valid xhtml/css site in my sleep... however, I find "made simple" a real misnomer :) I just spent over an hour trying to figure out why my template/css wasn't behaving the way I wanted in regards to navigation.
I'm using version 1.2 barbados...
After watching the choc mint tutorial I created a template and css based from this site layout
http://www.powerbitwebdesign.com/test/f ... fred1a.htm and associated the template with the css. I also added the accessibility and cross-browser tools css to the template so the dfn stuff wouldn't show up.

I then took the simple_navigation.tpl file and imported with a new name... edited to remove the reference and called it in the template via {menu template='royal_main.tpl' number_of_levels='1'} which returned a smarty error. After a few minutes of searching the forums I discovered that it needs to be called like this instead: {menu template='royal_main' number_of_levels='1'}, but my navigation was still not correct and was also giving me a validator error regarding unclosed tag even though the original layout code was valid.

That led me to the discovery that my original css code was ul#nav and html was ul id="nav" wouldn't work with cmsms because it automagically inserted another ul after ul id="nav". So I changed ul#nav just to be #nav and got rid of the validator errors, but still the navigation was not looking correctly. While viewing source I noticed that there was a li class="currentpage" in the html but I couldn't figure out why it was there since I wasn't using anything other than the menu template I created and the accessibility css and neither has a reference to a li class of currentpage (at least not that I could see :)

So, after a few more minutes of frustration, it occurred to me to add the li selected class to my CSS file... which was essentially a duplicate of the ul#nav li a properties from the original css. Doing that worked.

After that, I went back and read documentation via the forums and some of the wiki's and found nothing (of course that could be attributed to my lack of proper search terms or investigation) that really related to how to form your css and html properly before you attempt to create a template and css file. I couldn't find anywhere that the li class= selected was being called from, cuz I can't see it in the simple_navigation.tpl file that I modified...so can anyone tell me where that is and what calls it?

Now, I have a workable upper level menu after a couple of hours http://www.powerbitwebdesign.com/cms/
Now my next problem would be this:
I would like a sub navigation menu like you would see here http://www.powerbitwebdesign.com/test/flex_royal/1.htm
on the page http://www.powerbitwebdesign.com/cms/in ... msms-works

How do I create a sub menu that works like http://www.powerbitwebdesign.com/test/flex_royal/1.htm using CMSMS for any page that is a subset of
http://www.powerbitwebdesign.com/cms/in ... msms-works
and looks like this subset http://www.powerbitwebdesign.com/test/flex_royal/1a.htm ?

Sorry to vent because I do believe CMSMS could be very workable for me if someone could enlighten me! :)
thanks
rmfred

Re: Navigation help - and general questions as well

Post by rmfred »

BUMP... could use some assistance if anyone has the time. Thanks.
I've made some headway... this is the scenario:
Attempting to emulate this layout: http://www.powerbitwebdesign.com/test/f ... fred1a.htm
CMSMS attempt: http://www.powerbitwebdesign.com/cms/ which looks fine
The cmsms page uses a template called royal that calls the main menu like this:

{menu template='royal_main' number_of_levels='1'}


What I did with menus via the menumanager is documented in my first post.

Emulate this page: http://www.powerbitwebdesign.com/test/flex_royal/1.htm
CMSMS attempt: http://www.powerbitwebdesign.com/cms/in ... msms-works which also looks fine. In order for it to work I created a second template called royal_sub which is applied to the how-cmsms-works page and called the menus like this:

{menu template='royal_main' number_of_levels='1'}


{menu template='royal_main' start_level='2'}


Emulate this page: http://www.powerbitwebdesign.com/test/flex_royal/1a.htm
CMSMS attempt: http://www.powerbitwebdesign.com/cms/in ... tylesheets which doesn't work.  I tried creating another template called royal_sub_sub and called the menu like this:

{menu template='royal_main' number_of_levels='1'}


{menu template='royal_main' start_level='2'}


I can get this page http://www.powerbitwebdesign.com/cms/in ... tylesheets to "almost" work in FF.. e.g. looks the same as http://www.powerbitwebdesign.com/test/flex_royal/1a.htm by altering the css margins padding line-height etc (except that the top level page http://www.powerbitwebdesign.com/cms/in ... msms-works does not stay highlighted; but in changing the margins etc to function for FF; the page doesn't work the same in IE.

It seems to me that I am overthinking this? Do I need to create multiple templates to achieve my goal? If so, what am I not doing correctly? If not, please explain how I can use a single template to do this.

If this post is overly obtuse, I apologize, but I couldn't come up with any other descriptive method... If you require templates or css or whatever please advise and I will provide whatever is needed.

Thanks in advance for taking a look... and hopefully responding to my conundrum.
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: Navigation help - and general questions as well

Post by KO »

I think you are probably doing this bit too difficult way. I would do a single menu call. Then you do rest with CSS. I would try something like this:


{menu template='royal_main' number_of_levels='2' collapse='1'}


#navWrapper {position:relative;}
#navWrapper ul {whatever you have atm} /* or position:relative over here instead. try both */
#navWrapper ul li {whatever you have atm and at least float:left;}
#navWrapper ul ul {position:absolute; left:0;}

I'm probably forgetting something here and it will not be perfect but hopefully this helps you forward.

br, K
rmfred

Re: Navigation help - and general questions as well

Post by rmfred »

I've reverted back to attempting to do this via one template. I'm much closer but am still having a problem with getting sub page menu items to display properly.
This page works fine: http://www.powerbitwebdesign.com/cms/
This page works fine: http://www.powerbitwebdesign.com/cms/in ... msms-works
This page has problems: http://www.powerbitwebdesign.com/cms/in ... tylesheets

The upper level page (the previous page link) is not highlighted and the current page link is larger than it's supposed to be.

My menu structure in the template is like this:

{menu template='royal_main' number_of_levels='1'}



{menu template='royal_main' start_level='2'}
KO
Power Poster
Power Poster
Posts: 562
Joined: Mon Nov 06, 2006 7:55 pm

Re: Navigation help - and general questions as well

Post by KO »

Page you are now having problems is most likely section header. That one has no around menu text. As you have styled you menu in CSS for it's not applied for this.  you could modify menu template so that section header will also have that with ... or make it normal page.
Locked

Return to “Layout and Design (CSS & HTML)”