Page 3 of 10

Posted: Tue 8. Nov 2005, 17:17
by volkman
Hi Yves,
it works perfect with Safari 2.0.1, just tested it. Doublechecked with FF, same result. Users of Mac-OS X up to 10.3.9 have to use Safari 1.2, that version ain't work. Current System Mac-OS X 10.4.X uses Safari 2.0.1, that works.
btw, IE on Mac does not work at all with the testsite, no menus, nada.

regards
volkman

Posted: Tue 8. Nov 2005, 18:43
by StudioZ
Hi Volkman ;-)

Thanks for confirming Safari on Mac OS X up to 10.3.9.
I am not up to date yet. Using 10.2.8 ;-)
About I.E. on Mac: Not really a problem...
Who uses I.E. on Mac anyway? :roll: :wink:
volkman wrote:Hi Yves,
it works perfect with Safari 2.0.1, just tested it. Doublechecked with FF, same result. Users of Mac-OS X up to 10.3.9 have to use Safari 1.2, that version ain't work. Current System Mac-OS X 10.4.X uses Safari 2.0.1, that works.
btw, IE on Mac does not work at all with the testsite, no menus, nada.

regards
volkman
@ Frold: BTW: Thanks for pointing me in the right direction :idea: :wink:

Cheers,

Posted: Thu 10. Nov 2005, 16:23
by rtilghman
Glad to hear it works in so many different places... I don't have the resources to test it on Mac, but given its standards strict from a code perspective most of the newer CSS 1.0/2.0 compliant browsers should support it without a problem.

Mac IE is a standards nightmare if I remember correctly... a quick search via google just reinforces that understanding.

http://www.macedition.com/cb/ie5macbugs/

Anyway, glad ya'll are finding it useful.

Best,
Rick

Posted: Thu 8. Dec 2005, 20:07
by Omar
I would like to implement this feature in a vertical menu structure.
What would I have to change to accomplish this?
Can anyone help me with this?

Omar

Posted: Tue 3. Jan 2006, 15:11
by ssyfrig
Hi

Question to the FF (Windows) tester do you also have this result?

Image

the rt works for me great in IE but not in FF....

http://phpwcms.syfrig.net DEV URL !!

Template

Code: Select all

<table width="800" height="30" border="0" cellpadding="0" cellspacing="0">
  <tr> 
    <td valign="top" id="primaryNav">{DHTMLMENU:0,itemOff,itemOn}</td>
    <td width="390" class="tdNextNav">&nbsp;</td>
  </tr>
</table>
css = orginal from Post 1

thanks, Sven

Posted: Tue 3. Jan 2006, 23:20
by rtilghman
The problem has tro do with how you defined your source table and lists... what's happening is that the fly-out menu is appearing underneath the first level menu items. This probably has to do with a css conflict somehwre else, such as with your site CSS styles, etc.

Go here:

http://chrispederick.com/work/webdeveloper/

And get the developer bar for FF. Install it, revisit yoru page, and choose Outline > Link without title attributes. Then mouseover a primary menu element to see the problem. The submenu loads beneath the main menu.

Looking through your CSS quickly I did notice this:

".tdNextNav {
border-top-color: #CC0000;
border-top-style: solid;
background-color: #ECECEC;
border-top-width: 1px

}"

Setting a border top width of 1px would have the effect of pushing the menu items down 1px on the page, thereby pushing it over the top of the submenu.

Just a guess. It may be some other problem entirely. However, I can say that the menu works perfectly in FF, so its an implementation problem/conflict. You just need to track it down.

Best,
Rick

Posted: Wed 4. Jan 2006, 00:15
by ssyfrig
Hi Rick

I removed the class ".tdNextNav" ... same look. I will setup a blank new template....

... test temp. on http://phpwcms.syfrig.net/index.php?id=32,0,0,1,0,0

Template=

Code: Select all

<div id="primaryNav">{DHTMLMENU:0,itemOff,itemOn}</div>
same look ... I will search again..

thanks Sven

Posted: Wed 4. Jan 2006, 11:47
by ssyfrig
If I remove all entry from frontend.css it works… There must be a conflict with other definitions. But I don’t know where.

Sven

Posted: Wed 4. Jan 2006, 13:30
by ssyfrig
I found the conflict…..

In my frontend.css I have

Code: Select all

a:link, a:visited, a:active {
  background-color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: none;
  color: #FF0000
}


a:hover {
  background-color: #FFFFFF;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-decoration: underline;
  color: #000000

If I remove the a:active it work's.

can somebody explain me why? because all definitions in the navigation should be part of the ID primaryNav.

thanks, Sven

Posted: Wed 4. Jan 2006, 15:48
by rtilghman
Because of how a "Cascade" works. Any attributes you apply to an actual tag (like "a") are applied to all instances of that tag throughout a given page unless specifically overwritten. The menu is within the PrimaryNav class and all those rules are specifically applied to elements within a bucket with that ID. However, when you define style rules without a class or ID they reach across all buckets irregardless of class or ID.

This is exactly how its supposed to work. I would say that defining link tags with all the attributes you specify probably isn't the best way to approach your CSS... you should use the cascade to your advantage by defining font in the "Body" tag for example.

Best,
Rick

Posted: Wed 4. Jan 2006, 17:54
by Ben
Did you guys know that a CSS dhtml menu has already been implemented into CMS Made Simple? ( http://www.cmsmadesimple.org ) There's a demo here - http://opensourcecms.com/index.php?opti ... iew&id=452

Maybe you can take their ideas and modify them to work for phpWCMS.

DHTML doesn't work for me

Posted: Fri 6. Jan 2006, 14:42
by chAb
Hi,
I tried to use this menu but it doesn't work.
  • - My version of phpwcms is 1.2.5 DEV (the original one without add on or hack)

    - I have included the css into the frontend.css

    - I have created a .js and putted the link into the head of the template

    - And I putted this on the body of the template :

    Code: Select all

    <div class="primaryNav">{DHTMLMENU:1,itemOff,itemOn}</div>
    
Is there anything else to do ?

PS : I'm using the template FREE-L from PEPE (http://phpwcms-templates.de/), without tables (only css) and the frontend.css is not the orginal one.

To see this trouble look at this URL : http://iupm.free.fr/index.php?formation

If anyone have an idea, I would appreciate.

Thanks,

ChAb - a french webmaster using phpwcms

Posted: Fri 6. Jan 2006, 14:49
by ssyfrig
Hi,

try

Code: Select all

<div id="primaryNav">{DHTMLMENU:1,itemOff,itemOn}</div>
greez, Sven

It works

Posted: Fri 6. Jan 2006, 17:22
by chAb
That was that ! :wink: Thank you very much - You can see the result here

But I don't understand why ? :shock:
In the css, the primaryNav style is preceded with a # which mean you can you even use it in "id" of "class" balise...
If someone have an answer...

Moreother, I have some trouble to change the style of it. I think some are herited from other style but i don't know what.
If someone can take a look, I give the path to my stylesheet

I will try to found the problem...

Thanks

Posted: Sun 8. Jan 2006, 05:57
by rtilghman
In CSS "#" is ID, "." is class. The ID reference is used because the PrimaryNav is and must be a unique reference on the page (you don't want the styles used for nav being inadvertantly inherited). Classes can and are use for repeated styles (multiple assignments, same page). Class and ID are two totally different DOM references.

With regard to your problems I'll offer these potential avenues of approach.

1. Provide Containers
From a cursory glance at your stylesheet and code the menu lacks a container. I didn't design the menu to be a container... just to be the menu. In other words you should have a parent/page container to provide the form. I would thus recommend putting the whole thing in a larger div and using that div to set the width and position of the entire "menu box". Note that right now the top level items show up stacked in the middle of the page in firefox.

1. Avoid Global Styles
With CSS you should avoid assigning "global" styles to elements except in very limited cases, like with the Body tag. This is because if you assign classes to something like, say, "Table" it will be applied to ALL table elements in the page irregardless of position or inheritance. It looks

Best,
Rick