Zum Inhalt springen

<UL> active, Absonderheiten.

Erstellt am 7. Juni 2004 · 10 Antworten · letzte Antwort am 8. Juni 2004

Tags: HTML & CSS, Frage

denny ·

hi,

man gehe mal bitte auf:

http://www.wolf-technik.net/index.php?id=26

Links sieht man eine (Test) Navigation. Klickt man einen Link an, verändert sich die Navigation total abstrakt.

Mein Typo Code

#-----------------------------------
# Zweite Navigation links
#-----------------------------------

temp.navi_links =  HMENU
temp.navi_links.entryLevel = 1

temp.navi_links.1 = TMENU
temp.navi_links.1 {
          expAll = 0
          wrap = <ul> | </ul>
          NO.wrapItemAndSub =  <div class ="list">  <li> | </li> </div>
          CUR = 1
          CUR.ATagParams = class ="list"
          CUR.wrapItemAndSub = <li> | </li>
        }

        ### Ebene 2 ###
temp.navi_links.2 < temp.navi_links.1

        ### Ebene 3 ###
temp.navi_links.3 < temp.navi_links.2

        ### Ebene 4 ###
temp.navi_links.4 < temp.navi_links.3

Der Teil aus der CSS:

/* Listen Zeugs */

ul {
margin-left: 0; padding-left: 0;
}

.list{list-style:none;
}

.list a{
color:#006595;
text-decoration:none;
display:block;
width:120px;
height:21px;
background-color:#fafafa;
border:1px solid #d5e7ec;
border-left:4px solid #d5e7ec;
text-align:center;}

.list a:hover{
color:#006595;
background-color:#f5fafa;
border:1px solid #008996;
border-left:4px solid #008996;}

.list li{margin:-5px;}

Ich habe keine Ahnung, wie ich das beseitigen kann. :-(

Was ist das Problem?

Unbekannter Benutzer ·

wenn oben "temp.navi_links.1 = TMENU " steht ist es ein TMENU!
würde oben "temp.navi_links.1 = GTMENU" stehen, ist es ein GMENU

ehrlich gesagt baust du dein menü auch komisch auf..wie soll es denn laufen?

Schnickeschnack ·
Laduros schrieb

wenn oben "temp.navi_links.1 = TMENU " steht ist es ein TMENU!
würde oben "temp.navi_links.1 = GMENU" stehen, ist es ein GMENU

schon klar, ich halt mich dann weiter raus, realisierte bisher lieber mit GMENU... 😉

Schnickeschnack

Unbekannter Benutzer ·

kk *g*

mal schaun ob hier noch ne antwort kommt :-D

es ist auch möglich - tabellen mit mouse-over zu versehen..alles über ein css möglich. man denk es ist ein GMENU - daweil ist es nur bzw könnte es nur ein css sein - ist von der ladezeit besser ,)

denny ·

hi,

ok, dann kläre mich mal bitte auf. Dieses Menu ist mittlerweile meine fünfte Variante. Ich bin der Verzweiflung (wiedermal) nahe.

Ich will doch nichts weiter, als eine <ul> navi, die sich so verhält, als sei es geplan. ;-)

Wie kann ich denn verhindern, das die Navi so komische Sachen macht, wenn man einen Link betätigt? Ich habe doch nirgends für active etwas anderes definiert.

denny ·

hi,

Laduros schrieb

schreib uns mal ganz genau..was dein menü machen soll..vielleicht kannst es auch irgendwie darstellen...

Also zum einen, soll das Linke Menu etwas über den Rand gehen (die Elemente)dann wirkt nicht so alles geklebt)). Bei einem klick auf Ebene 1 Soll lediglich erkennbar sein, auf welcher Seite man sich befindet. Das lässt sich zum Beispiel in der Farbe symbolisieren.
Bei Seiten mit einer Unterseite, soll die Schrift innen etwas versetzt werden, durch einen höheren margin-left Wert und ebenfalls die Hintergrund Farbe anpassen. Hier könnte es mit dem IE schwierig werden, da muss glaube ich padding verwendet werden. Die Abschlüsse der Navi Links und Rechts müssen aber auf gleicher Höhe bleiben.
Die Zwischenabstände, könnten so bleiben, aber das muss man ausprobieren.

Ich hoffe, das ich as halbwegs anschaulich erklärt habe. :-)

Bin schon happy, das ihr meine Hilferufe liest.

denny ·

hi,

ich habe die alte navi Komplett verworfen und neu zusammen gesetzt. Es passt jetzt fast alles.

Erstmal der Typo3 Code:

#-----------------------------------
# Zweite Navigation links
#-----------------------------------
# Construct the main menu as a nested unordered list.
# It has level1 and level2 entries.
# All formatting will be done via CSS.
temp.menu2 = COA
temp.menu2 {
    # the menu object itself, starting off the site root
  10 = HMENU
  10.entryLevel = 1
    # Level1 entries are simple text menu entries,
    # (formatted via CSS to run down the left side of the page)
  10.1 = TMENU
  10.1 {
      # Don't really like unneccessary scripting.
    noBlur = 1
      # Current item should be unlinked and formatted differently.
    CUR = 0
      # Active items above current item should be formatted differently.
    ACTIFSUB = 0
  }

    # Base formatting of menu entries as list items.
  10.1.NO {
    wrapItemAndSub = <li class="menu1-lev1-no">|</li>
    ATagParams =
  }

    # Current menu item is unlinked and marked
  10.1.CUR {

    wrapItemAndSub = <li class="menu1-lev1-cur">|</li>
    doNotLinkIt = 1
  }

    # Active items above current to be formatted differently
  10.1.ACTIFSUB {
    wrapItemAndSub = <li class="menu1-lev1-act">|</li>
  }

    # Wrap the level1 menu inside an unordered list
  10.1.wrap = <ul class="menu1-lev1">|</ul>


    # Level2 entries are simple text menu entries also,
    # (formatted very differently via CSS to run left to right
    # across the page under the header, so you only see the styling
    # classes here.)
  10.2 = TMENU
  10.2 {
    noBlur = 1
    CUR = 0
    ACTIFSUB = 0
  }

    # Same formatting of menu entries as list items.
  10.2.NO {
    wrapItemAndSub = <li class="menu1-lev2-no">|</li>
    ATagParams =
  }

    # Current menu item is unlinked and marked too
  10.2.CUR {
    wrapItemAndSub = <li class="menu1-lev2-cur">|</li>
    doNotLinkIt = 1
  }

    # Active items above current to be formatted differently as for level1
  10.2.ACTIFSUB {
    wrapItemAndSub = <li class="menu1-lev2-act">|</li>
  }

    # Wrap the level2 menu inside an unordered list
  10.2.wrap = <ul class="menu1-lev2">|</ul>
}

Wie man sehen kann, habe ich CUR und ACT außer Betrieb gesetzt, weil ich genau dort noch ein Problem habe. Wen ich sie aktiv setze, dann habe ich beim aktiven Link keine Formatierungen. Das ganze Menü wird an für sich nach meinen Wünschen gewrappt.
Es hat den Anschein, als wenn meine CSS Klasse ".menu1-lev1-cur" nicht beachtet wird.

Hier mal der CSS Code

/* NAVIGATION */

/* basics */

li {
margin-top: 0;
margin-bottom: 0;
}
ul {
margin-top: 0;
margin-bottom: 0;
list-style: none;
margin-left: 5px;

}

/* Level 1 */

li a:link, li a:visited, li a:hover, li a:active, li a:focus {
background:#4883BA; color:white;
width:100%; height: 1.0em;
display:block;
border-bottom: 1px solid #85ADD1;
border-left: 1.0em solid #85ADD1;
text-decoration:none;
padding-left: 1.0em; padding-bottom:0.5em;
margin-left: 5px;
margin-top: 5px;
font-size:0.9em;
}

li a:visited { color:#052D51; border-color:#08437A; }
li a:hover { color:#E7EFF6; border-color: #E7EFF6; }
li a:active { color:#052D51; border-color: #E7EFF6; }
li a:focus { color:#052D51; border-color: #E7EFF6; }

.menu1-lev1-cur li a:link, .menu1-lev1-cur li a:visited, .menu1-lev1-cur li a:hover, .menu1-lev1-cur li a:active, .menu$
background:#4883BA; color:white;
width:100%; height: 1.5em;
display:block;
border-bottom: 1px solid #85ADD1;
border-left: 1.2em solid #85ADD1;
text-decoration:none;
padding-left: 2.0em; padding-bottom:0.2em;
margin-bottom: 5px;
margin-left: -10px;
font-size:0.9em;
}

.menu1-lev1-cur li a:visited { color:#052D51; border-color:#08437A; }
.menu1-lev1-cur li a:hover { color:#E7EFF6; border-color: #E7EFF6; }
.menu1-lev1-cur li a:active { color:#052D51; border-color: #E7EFF6; }
.menu1-lev1-cur li a:focus { color:#052D51; border-color: #E7EFF6; }

Bitte nicht wundern, das die Werte die selben sind, es ist nur testweise, bis ich den Fehler gefunden habe.

Die Klassen, *no und *act scheinen das selbe Problem zu haben, habe es aber nicht weiter verfolgt.
Eigentlich bin ich davon ausgegangen, das a:focus die Aufgabe von cur übernimmt, aber es zeigt keine Wirkung.

Testen lässt sich das unter: http://www.wolf-technik.net/index.php?id=11

cu denny