Seite 5 von 6

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Sa 11. Jun 2011, 16:12
von Spider IT
Hast du mein Beitrag nicht gelesen?

Gruß
René

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Sa 11. Jun 2011, 16:29
von marphin
Hallo Rene,

schon, komme damit aber nicht klar. Die idcat stimmt, die habe ich ja in den Mandanteneinstellungen festgelegt (falls du das meinst). Die Navigation funktioniert ja ansonsten auch und wenn ich eine neue Klasse anlege, habe ich das Problem ja noch immer. Ich müsste wissen, wie die Klasse aussehen soll und vor allem wo sie dann zur Anwendung kommt (also mit class=* oder ID=*). Vielleicht denke ich auch schon wieder viel zu kompliziert.

Viele Grüße
Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Sa 11. Jun 2011, 17:50
von Oldperl
Hallo Martin,

folgende CSS in deine Datei aufnehmen

Code: Alles auswählen

ul.MenuBarHorizontal li.active a
{
    /*background-color: #33C;*/
    background-image: url('../images/navi_rot.gif');
    color: #FFF;
}
dann sollte es gehen.

Gruß aus Franken

Ortwin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Sa 11. Jun 2011, 18:54
von marphin
Hallo Ortwin,

genau das ist die Lösung nach der ich schon so lange suche! - Vielen Dank!

Viele Grüße
Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: So 12. Jun 2011, 21:18
von mahu76
hallo zusammen,

hat vielleicht auch jemand ne idee wie ich der ausklappnavi ne ander hintergrundfarbe geben kann als die hauptnavi?

also ich habe zum bsp in der hauptnavi

startseite
wir über uns
produkte

diese 3 punkte habe z.b. aus hintergrundfarbe blau.

der menüpunkt produkte hat z.b. folgend untermenüpunkte die ausklappen
handschuhe
hosen
jacken

was muß ich nun tun das diese untermenüpunkte z.b.rot als hintergrundfarbe haben?

momentan ist es so das sie immer die selbe farbe habe wir die hauptmenüpunkte (egal was ich mache) ich bekomme es einfach nicht hin :-(

VG mahu

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Mo 13. Jun 2011, 11:41
von marphin
Hallo Mahu,

im folgenden Bereich der css musst du die Farbe festlegen, also durch "background-color: #******" erweitern:

Code: Alles auswählen

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
Willst du im Untermenü eine andere Schriftfarbe haben, dann ebenfalls hier einfügen.

Viele Grüße
Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Mo 13. Jun 2011, 14:00
von mahu76
hallo martin,

danke für deine hilfe!

meinst du es so?

es klappt nicht es bleibt immer beides gleich.

Code: Alles auswählen

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
   background-image: url(SpryMenuBarDown.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
   background-image: url(SpryMenuBarRight.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
   background-image: url(SpryMenuBarDownHover.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
   background-image: url(SpryMenuBarRightHover.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}



##############################################

anbei der von mir verwendete code:
hier ist nun hauptnavi blau und ausklappnavi auch blau.....




@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/
 
 
 
 .MenuBarItemSubmenu22 {
 
 background-color:#ff0000;
 }
 
 
 

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 225px;
    height: 288px;
    
   
    
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
    margin-left: 0px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: right;
    cursor: pointer;
    width: 225px;
    height: 32px;
      border-bottom: 1px dashed #ffffff;
   background-color: #0f6baf;
   border-right: 0px solid #ffffff;
   
   
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
    margin: 0 0 0 100%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    left: -1000em;
    top: 0;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
    left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
    width: 150px;
     height: 32px;
     border-bottom: 1px dashed #ffffff;
    text-align: right;
    margin-left: 2px;
    background-color: #0f6baf;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
    border: 0px solid orange;

     
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
    border: 0px solid red;
         
    
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
    display: block;
    cursor: pointer;
  
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
   
    
   
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
    background-color: #cecece;
    color: #FFF;
    height: 19px;
    border-bottom: 0px dashed red;
    
}
/*   Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
    background-color:# ;
    color: #ffffff;
    
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
    
    background-repeat: no-repeat;
    background-position: 95% 50%;
      
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
    position: absolute;
    
    z-index: 1010;
    filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarVertical li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        
    }
}
ul.MenuBarVertical li.active a
{
    background-color: #b00e34;
    height: 19px;
    /*background-image: url('../images/navi_rot.gif');*/
    /*color: #FFF;*/
      border-bottom: 1px dashed #ffffff;
}

VG mahu

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Mo 13. Jun 2011, 14:23
von marphin
Hallo mahu,

im folgenden Teil der css musst du die Farbe für das Untermenü (Submenue) definieren:

Code: Alles auswählen

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{

background-repeat: no-repeat;
background-position: 95% 50%;

}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
sollte dann so aussehen:

Code: Alles auswählen

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{

background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #ffffff; /*Hier deine gewünschte Farbe festlegen!*/

}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #cccccc; /*Hier deine gewünschte Farbe für Mouseover festlegen!*/
}
Die Schriftfarbe kannst du dann in beiden Klassen noch festlegen: color: #000000;

Dann müsste es gehen!

VG, Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Mo 13. Jun 2011, 14:56
von mahu76
hallo martin,

leider kalppts nicht!

die HG fraben bleiben immer identisch :-(

VG mahu

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Di 14. Jun 2011, 12:10
von marphin
Sorry mahu,

ich habe da nicht richtig gelesen.
styles if there is a submenu under a given menu item
Das bedeutet, dass hier die Navigationspunkte formatiert werden, die Unterpunkte haben.

VG, Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Di 14. Jun 2011, 12:17
von mahu76
hallo martin,

vielen dank für deine mühe!!

könnte man das irgendwie auch umgehen?
z.b. neue klassen irgendwie anlegen fürs untermenü?

VG mahu

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Di 14. Jun 2011, 12:28
von marphin
Hallo mahu,

Gerne.

Möglich ist es bestimmt, ähnlich wie bei der Standard-Navi. Dort kann man ja auch die verschiedenen Ebenen separat formatieren. Aber ich habe keinen Schimmer wie!

Ich habe ebenfalls noch ein Problem mit der Navi. Sie wird im Safari anders dargestellt und zerschießt so das Layout. Du bist nicht zufällig Mac-User oder hast Ahnung von den Unterschieden der Browser in Bezug auf die css? Ich habe schon eine eigene css extra für den Safari eingebunden und finde einfach keine Lösung.

VG, Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Di 14. Jun 2011, 12:50
von mahu76
hallo martin,

ja das kenne ich damit habe ich auch schon stunden verbracht.
wobei bei mir immer der 6er ie das problem ist.

habe leider kein mac und auch kein safari.

für den ie hätte ich ein nettes tool für dich falls du es nicht schon kennst.
http://www.my-debugbar.com/wiki/IETester/HomePage

VG mahu

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Di 14. Jun 2011, 13:04
von marphin
Danke Mahu,

ich werde es mal auf meinem PC testen. Den habe ich nur noch um zu sehen, wie meine Seiten mit dem IE dargestellt werden. Da ich viel grafisch arbeite, habe ich aus Performancegründen vor einigen Jahren auf MAC umgestellt und bereue es nicht. Viel schneller, keine Viren und vor allem keine Abstürze. Und da derzeit viele auf MAC umsteigen, wird es immer wichtiger die Seiten für den Safari zu optimieren.

VG, Martin

Re: DHTML-Navi auf Adobe Spry Basis

Verfasst: Mo 4. Jul 2011, 23:21
von ralfhaerter
yodatortenboxer hat geschrieben:Hiho,
ich habe für meine 4.8 Installation eine DHTML-Navi gebraucht. ...
Ioh, ich auch. :roll:

Works out of the box like a charm! (Tested with Contenido 4.8.15) Thank you very much.