DHTML-Navi auf Adobe Spry Basis

yodatortenboxer
Beiträge: 424
Registriert: Do 22. Jan 2004, 14:45
Wohnort: Kölpinsee auf Usedom
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von yodatortenboxer » Fr 4. Mär 2011, 12:04

Hiho,
hat jemand ne idee warum die navi im ie6 springt/ruckelt ?? und was ich ändern muß das es funktioniert??
Ich würde zum testen als erstes einmal im Firefox mit Firebug oder im IE mit dem IETester und der Debugbar (http://www.my-debugbar.com/wiki/IETester/HomePage) die CSS überprüfen.
Man kann dann sehen welches Teil das Springen hervorruft (Beispiel: margin).
Der IE geht sehr penibel mir der CSS um. Vieleicht liegt es daran.

Gruß yodatortenboxer
Schöne Grüße von Usedom
Ralf

mahu76
Beiträge: 41
Registriert: Mo 6. Jul 2009, 15:29
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von mahu76 » Fr 4. Mär 2011, 13:26

hallo yodatortenboxer,

das hört sich ja schon mal sehr gut an vielen dank für den tip!

habe mir auch gerade schon beides installiert!
mim firebug denke ich kann ichsnicht testen da es im firefox immer passt.

es springt nur im ie6 im 7er und 8er klappts auch!
nun noch ne kurze frage zum ie tester.
habs offen im ie6 und habe auch die spry css ausgwählt im ietester..

nur wie komme ich nun weiter wie stelle ich den fehler fest? was muß ich nun tun?


VG mahu76
Zuletzt geändert von mahu76 am Mo 25. Apr 2011, 13:13, insgesamt 1-mal geändert.

Mirco NAJU
Beiträge: 77
Registriert: Sa 30. Mai 2009, 09:11
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Mirco NAJU » Fr 4. Mär 2011, 14:24

Irgendwo bin ich jetzt betriebsblind ...

Code: Alles auswählen

#vpnavigation, #vpnavigation ul { /* alle Listen */
float: none;
font-family: verdana, arial, helvetica, sans-serif; text-decoration: none;
font-size: 12px;
list-style: none;
margin:0; 
padding:0;
padding-left: 0px;
}

#vpnavigation li { /* alle Listenelemente */
float: left;
margin:0px;
}

/* Liste 1.Ebene */
#vpnavigation a {  display: block; width: 121px;  padding: 0px ;color: #fff; text-decoration: none; text-align:center; }

/* Liste 2.Ebene */
#vpnavigation ul ul a { padding:2px ; width:200px; color: #000; background-color: #E9E9E8; font-weight:normal; text-align:left; border-top: 1px solid #fff;}

/* Liste 3.Ebene */
#vpnavigation ul ul ul { display:none; }

 /* 1. Ebene Aktiv */

/* 2. Ebene Aktiv */
#vpnavigation ul ul li a:hover { color: #fff; background-color:#0069B3; }

#vpnavigation li ul { /* Listen 2. Ebene */
position: absolute;
background: #ccc;
display: block;
width: 200px;
padding: 0px;
top:177px;
left: -999em; /* durch "left" außerhalb des sichtbaren Bereichs wird das gleiche erreicht wie durch "display: none", kann aber auch von Textbrowser angezeigt werden */
}

#vpnavigation ul li ul li{ /* Listen 2. Ebene Textblock */
width: 200px;
}
#vpnavigation ul li ul li a{ /* Listen 2. Ebene Textblock */
padding-left:10px;
padding-right:10px;
}

#vpnavigation li:hover ul ul, #vpnavigation li.sfhover ul ul {
left: -999em;
}

#vpnavigation li:hover ul, #vpnavigation li li:hover ul, #vpnavigation li.sfhover ul, #vpnavigation li li.sfhover ul { /* Listen, die unterhalb von "gehoverten" Menüpunkte liegen */
left: auto;
padding-bottom: 0px;
margin-left: 0px;
background-color:none;
border: 0px solid #fff;
}

li#idcat_2 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#981A24;
border: 1px solid #fff;
}

li#idcat_6 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#A33323;
border: 1px solid #fff;
}
li#idcat_16 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#BD6605;
border: 1px solid #fff;
}
li#idcat_3 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#BD8D00;
border: 1px solid #fff;
}
li#idcat_4 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#266756;
border: 1px solid #fff;
}
li#idcat_5 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#135544;
border: 1px solid #fff;
}
li#idcat_25 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#144D74;
border: 1px solid #fff;
}
li#idcat_8 {
padding-top:5px;
padding-bottom:5px;
font-weight:bold;
background-color:#005699;
border: 1px solid #fff;
}

li#idcat_7 {
display:none;
}
li#idcat_13 {
display:none;
}
bei #idcat8 müsste die 2. Ebene nicht linksbündig sondern rechtsbündig aufgehen ... das aufpoppen von navigationsebenen ist definitiv nicht meine welt

yodatortenboxer
Beiträge: 424
Registriert: Do 22. Jan 2004, 14:45
Wohnort: Kölpinsee auf Usedom
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von yodatortenboxer » Fr 4. Mär 2011, 15:18

Hiho,

@mahu76
nur wie komme ich nun weiter wie stelle ich den fehler fest? was muß ich nun tun?
Du musst erst einmal feststellen bei welcher Aktion wo etwas passiert, also bei Mousover oder so.
Dann kannst du nachschauen ob da eine unterschiedliche Darstellung der CSS stattfindet bzw. vieleicht irgendwo ein falscher CSS Wert hinterlegt ist.
Der Firefox ist da meistens "kulanter" als der IE.
Vor allem beim IE6 wird viel CSS "anders" interpretiert.
Wie du die Debugbar nutzen kannst siehe hier: http://www.my-debugbar.com/wiki/Tutorials/DebugBarDemo

gruß yodatortenboxer
Schöne Grüße von Usedom
Ralf

helgaK
Beiträge: 18
Registriert: Mo 16. Feb 2009, 22:58
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von helgaK » Fr 22. Apr 2011, 21:04

Vielen Dank erstmal für das Modul. Im ersten Einsatz als horizontale Navigation funktioniert es wunderbar, nun möchte ich für einen zweiten Navigationsbaum die vertikale Variante nutzen. Habe im Mandanten die entsprechenden Einstellungen vorgenommen, aber erhalte dann immer folgende Fehlermeldung:

Code: Alles auswählen

Fatal error: Cannot redeclare nav_feld() (previously declared in /www/htdocs/w00ddf06/cms/front_content.php(926) : eval()'d code:226) in /www/htdocs/w00ddf06/cms/front_content.php(926) : eval()'d code on line 451
offensichtlich wird versucht, eine declaration zweimal auszuführen, was nicht natürlich geht - aber wo setze ich an? Gibt es ein Verfahren für die doppelte Nutzung? Ich benötige die "Ausklappfunktion" bei den Unternavigationen, sonst könnte ich auch auf das Modul Navigation_Main zurückgreifen, das funktioniert mit dem zweiten Baum...
verwende contenido 4.8.14.

Danke sehr für eure Hilfe
Helga

Oldperl
Beiträge: 4155
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Oldperl » So 24. Apr 2011, 10:02

Hallo Helga,

ja man kann Funktionen in eine if-Abfrage kapseln, die prüft, ob die Funktion schon existiert. Nutzt man aber dieses Vorgehen, muss mindestens 1 Mal die Funktion vor ihrer 1. Anwendung definiert werden, eine nachträgliche Definition im Script, wie normalerweise in PHP möglich, geht dann nicht.

Code: Alles auswählen

// check if function exist
if(!function_exists("myFunc")) {     
// declare function if not exists
    function myFunc($param1) {
        // do something...
        ;
    } // end function
} // end if
Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

helgaK
Beiträge: 18
Registriert: Mo 16. Feb 2009, 22:58
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von helgaK » Mo 25. Apr 2011, 11:22

Hallo Ortwin,
vielen Dank für deine Information und den Code. Was kann ich denn nun tun, um den Zustand "vor dem ersten Mal" wieder herzustellen? Kann ich Tabellen in der Datenbank leeren - wenn ja, welche wären das? oder muss ich contenido neu installieren? Und dann gehört diese if-Abfrage wahrscheinlich in beide Navigations-Module (vertikal und horizontal) oder? und an welcher Stelle füge ich sie am besten ein ? Wenn du noch ein paar Hinweise für mich hättest, wäre ich dir sehr dankbar.

Viele Grüße
Helga

Seelauer
Beiträge: 186
Registriert: So 22. Jan 2006, 21:03
Wohnort: Mal da, mal da
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Seelauer » Mo 25. Apr 2011, 18:10

Hallo Helga,
meines Erachtens hat es Ortwin so vorgeschlagen:
Suche in Deinem Modul den Anfang der Function

function nav_feld($cat, $Level)
{
global $client, $lang, $cfg, $idcat;
...

und füge vor dem Functions-Beginn folgenden Befehl ein

if (!function_exists("nav_feld"))
{

function nav_feld($cat, $Level)
{
global $client, $lang, $cfg, $idcat;
...

und füge am Ende der Function ein

}

Diese Ergänzung bei jeder Function mit Namen "nav_feld" bzw. bei Dir in die beiden Module, evtl. auch bei function liste($array, $indent = " ")
{
Guten Gruß
Seelauer.

helgaK
Beiträge: 18
Registriert: Mo 16. Feb 2009, 22:58
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von helgaK » Di 26. Apr 2011, 22:22

Hallo Seelauer,
danke, habe es nun wie von dir beschrieben eingefügt in beide Module, aber die Fehlermeldung war immer noch da. Wenn ich den Zusatz auch noch bei function liste($array, $indent = " ") eingefügt habe, wurde schon die erste Navigation (horizontal) nicht mehr angezeigt. Es gab eine Fehlermeldung, dass die Liste nicht mehr dargestellt werden könne etc, jedenfalls ein "fatal error..." ;-(
und nun? gibt es noch andere Möglichkeiten für eine zweite dynamische Navigation?
viele Grüße,
Helga

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Fr 10. Jun 2011, 15:51

Hallo zusammen,

ich schaffe es einfach nicht, dass der angeklickte Navigationspunkt die gewünschte Hintergrundgrafik erhält.

Code: Alles auswählen

/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    background-image: url('../images/navi_grau.gif');
    /*background-color: #EEE;*/
    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.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:active, ul.MenuBarHorizontal a:focus
{
    /*background-color: #33C;*/
    background-image: url('../images/navi_rot.gif');
    color: #FFF;
}
Bei a.hover und a.active ändert sich die Grafik von grau in rot. Bei a.focus passiert nichts.

Weiß zufällig jemand, wie ich das hin bekomme?

Vielen Dank und viele Grüße
Martin

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Spider IT » Sa 11. Jun 2011, 09:41

Hallo Martin,

ohne das Modul zu kennen: Im Modul sollte geprüft werden, ob die aktuelle idcat mit der idcat des Links übereinstimmt und wenn ja, eine (andere) CSS-Klasse eingesetzt werden.
Diese separate Klasse kann dann im Stylesheet unabhängig formatiert werden.

Gruß
René

Oldperl
Beiträge: 4155
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Oldperl » Sa 11. Jun 2011, 10:25

Hallo,

man muss hier auf den Doppelpunkt achten. a:focus, a:hover, etc. sind feste CSS-Klassen, die direkt vom Browser interpretiert werden. Sie müssen nicht im class-Attribut des a-Tag angegeben werden. Normalerweise interpretieren alle gängigen Browser diese CSS-Klassen.
marphin hat geschrieben:Bei a.hover und a.active ändert sich die Grafik von grau in rot. Bei a.focus passiert nichts.
Diese (mit Punkt) wären eigene CSS-Klassen, und diese müßten in ein class-Attribut in den a-Tag.

Laut deiner CSS sollen a:hover, a:active und a:focus alle dasselbe anzeigen. Tun sie das nicht, stellt sich mir als erstes die Frage, ob das bei allen Browsern so ist, bzw. in welchem Browser dieses Verhalten auftritt.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Sa 11. Jun 2011, 10:40

Hallo,

das mit dem Doppelpunkt ist natürlich richtig, habe das nur versehentlich falsch geschrieben. Im beigefügten Code steht es aber richtig mit Doppelpunkt.

Es wird in keinem Browser gewünscht dargestellt (FF, IE, Safari). Im Safari werden die Breiten dazu noch falsch dargestellt, so dass das Layout zerschossen wird. Aber das ist eine andere Geschichte, der ich noch auf den Grund gehen muss.

Hier der Link zur Seite: http://www.wibbel-dance-party.de/cms (noch im Aufbau)

Ich habe mir echt nen Wolf gesucht :-), finde aber keine Lösung.

Gruß, Martin

Oldperl
Beiträge: 4155
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Oldperl » Sa 11. Jun 2011, 14:22

Hallo Martin,

also bei mir funktioniert a:focus einwandfrei sowohl im FF 3.6 als auch im IE 7 u. 8.
Wenn du auf der Seite bist einfach mal mit TAB und SHIFT-TAB die einzelnen Anker durchgehen. Sobald er das Menü erreicht werden die a:focus Werte genommen wenn der Focus auf dem entsprechenden Menüpunkt liegt.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Sa 11. Jun 2011, 16:08

Hallo Ortwin,

danke erst einmal. Ich habe da wohl etwas falsch verstanden und somit auch falsch erklärt. Ich dachte a:focus wäre dazu da, den Reiter der geöffneten Seite zu formatieren. Also focus geht bei mir auch :? .

Ich finde im Netz einfach keine Lösung für das Problem. Wenn du z.B. auf den Reiter "Programm" klickst, soll dieser Reiter solange rot bleiben wie die Seite geöffnet ist.

Auf folgender Seite sieht man, was ich möchte: http://www.werbeagentur-usedom.de/medie ... links.html

Der Link "Links" ist aktiv und hat ein anderes Hintergrundbild als die anderen.

Gruß, Martin

Gesperrt