Komplexe Navigation mit Bildern

[snooze7]

Hallo zusammen,

ich würde gerne eine komplexe Navigation mit Bildern machen, jedoch klappt es einfach nicht so wie ich es mir vorstelle.

Hier mein html code:

<div id="unternavigation">
<a name="anker_unternavigation"><span class="hidden">Unternavigation</span></a>
    
<ul>
     <li><a class="vers100-on"></a></li>
         <ul>
                <li><a class="vers110"></a></li>
                    <ul>
                         <li><a class="vers111"></a></li>
                         <li><a class="vers112"></a></li>
                    </ul>
                <li><a class="vers120"></a></li>
                    <ul>
                         <li><a class="vers121"></a></li>
                         <li><a class="vers122"></a></li>
                    </ul>
         </ul>
     <li><a class="vers200"></a></li>
         <ul>
                <li><a class="vers210"></a></li>
                    <ul>
                         <li><a class="vers211"></a></li>
                         <li><a class="vers212"></a></li>
                    </ul>
                <li><a class="vers220"></a></li>
                    <ul>
                         <li><a class="vers221"></a></li>
                         <li><a class="vers222"></a></li>
                     </ul>
         </ul>

Hier die css Datei:

/* Allgemeine Informationen
------------------------------*/
/* Basisvorlage CSS
www.basisvorlage.de
Start: 19.05.2008
Aenderung: 19.05.2008
*/

span.hidden { 
    text-decoration: none;
    visibility: hidden;
}


/* Unternavigation
---*/

div#unternavigation {
    position: absolute;
    top: 104px;
    left: 50%;
    margin-left: 255px;
    width: 233px;
    height: auto;
}

a.vers100-on {
    background-image: url(../images/versicherung1_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers100-off { 
    position: absolute; 
    height: 0; 
    visibility: hidden;
}

a.vers100, a.vers100:link { 
    background-image: url(../images/versicherung1_off.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers100:hover, a.vers100:active, a.vers100:focus { 
    background-image: url(../images/versicherung1_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers110-on {
    background-image: url(../images/versicherungen/versicherung1_1_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 19px; 
}

a.vers110-off { 
    position: absolute; 
    height: 0; 
    visibility: hidden;
}

a.vers110, a.vers110:link { 
    background-image: url(../images/versicherungen/versicherung1_1_off.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 19px; 
}

a.vers110:hover, a.vers110:active, a.vers110:focus { 
    background-image: url(../images/versicherungen/versicherung1_1_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 19px; 
}



a.vers200-on {
    background-image: url(../images/versicherung2_on.gif);
    background-repeat: no-repeat;
    position: absolute;  
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers200-off { 
    position: absolute; 
    height: 0; 
    visibility: hidden;
}

a.vers200, a.vers200:link { 
    background-image: url(../images/versicherung2_off.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers200:hover, a.vers200:active, a.vers200:focus { 
    background-image: url(../images/versicherung2_on.gif);
    background-repeat: no-repeat;
    position: absolute;  
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers300-on {
    background-image: url(../images/versicherung3_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers300-off { 
    position: absolute; 
    height: 0; 
    visibility: hidden;
}

a.vers300, a.vers300:link { 
    background-image: url(../images/versicherung3_off.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers300:hover, a.vers300:active, a.vers300:focus { 
    background-image: url(../images/versicherung3_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers400-on {
    background-image: url(../images/versicherung4_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers400-off { 
    position: absolute; 
    height: 0; 
    visibility: hidden;
}

a.vers400, a.vers100:link { 
    background-image: url(../images/versicherung4_off.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

a.vers400:hover, a.vers400:active, a.vers400:focus { 
    background-image: url(../images/versicherung4_on.gif);
    background-repeat: no-repeat;
    position: absolute; 
    left: 0px; 
    width: 255px;
    height: 59px; 
}

Ich wollte diese Navigation ganz ohne Javascript machen (da gibt es wohl so accordian javascripte, aber eigentlich müsste es auch so gehen).

In meinem Div Container soll die komplette Navigation sein, daher denke ich mal "position: absolut" um den Container genau auszurichten. Jetzt würde ich das ganze so handhaben, dass sich die einzelnen Bilder (Listenelemente) sich ohne eine feste "top" Positionsangabe einfach unter das darüberliegende Bild (Listenelement) setzt - ohne Abstand, ohne nichts.
Das ganze wäre dann auch so zu sehen:

Bild1
Bild11
Bild12
Bild2
Bild21
Bild22
Bild3
Bild31
Bild32

Einfach untereinander ohne Abstand. Im html Code würde ich dann später meine Position in der Navigation festlegen, ungefähr so:

Bild1-on (bei "on" wird das Bild markiert angezeigt)
Bild11-on
Bild12
Bild2
Bild21-off (bei "off" wird das Bild ausgeblendet)
Bild22-off
Bild3
Bild31-off
Bild32-off

Angezeigt werden würde bei diesem Beispiel also nur
Bild1-on
Bild11-on
Bild12
Bild2
Bild3

.... Ich hoffe ganz schwer, dass mir jemand weiterhelfen kann.

Falls es Probleme mit der Vorstellung des Menüs gibt, hier ein Link zu einem Versuch, bei dem jeder Htmlseite eine eigene Stylesheet Datei zugeordnet habe (also absolut kontroproduktiv).
Versicherungsstelle Veronika Cramer

 

[sysop]

sieht echt toll aus, kompliment.

wo ist denn nun dein problem, beim schnell durchlauf hat das menü gut geklappt und sieht wie gesagt heftigst schön aus.

 

[snooze7]

vielen dank.

Wenn du dir aber den quelltext genauer anschaust, siehst du 9 css Dateien... Ich hätte aber gerne "nur" eine. Außerde wäre eine o.g. Navigation besser, da die Links "nur versteckt wären, die suchmaschine aber dadurch immer alle Verlinkungen durchcrawlt... oder?!

Ich denke einfach, dass das Grundprinzip, d.h. Bild sitzt unter Bild eigentlich nicht schwierig sein sollte.

Mfg Snooze

 

[markovi]

Mein Tipp:

Definiere weniger "class" elemente. Wenn ich das richtige sehe, ist doch Höhe, Breite usw. immer gleich.

Dann kannst du noch "id" s definieren, in denen du die Hintergrundbilder
definierst. Das spart Schreibarbeit.

Alternativ kannst du auch Unterklassen definieren.

 

[ky_fr34k]

hi.
wirklich schön.
aber warum muss die navigarion komplett aus bildern bestehen?
das ist doch alles text, warum text nicht als text?
Gruß KY

 

[koslowski]

Hi,

In meinem Div Container soll die komplette Navigation sein, daher denke ich mal "position: absolut" um den Container genau auszurichten.

völlig unnötig.

Sorry, aber Quelltext und Formatierung sind ziemlich schrottig.
Was ist wenn jemand Grafiken deaktiviert hat? - Ende Gelände.

Erstellung eines einfachen, horizontalen, grafischen Menüs:

Mit Photoshop wird eine Grafik in der Größe von 120x80px erstellt. Sie beherbergt beide Linkzustände. Der eigentliche Link ist somit 120x40px groß und enthält jeweils auch den Linktext in Form z.B. einer schönen Schreibschrift.
Normalzustand ist oben in der Grafik, der Hoverzustand darunter.


Doctype ist "strict" um immer im Standardmodus zu sein.
Beim Link der gerade aktuellen Seite wird <a> gegen <strong> ausgetauscht, damit er nicht auf sich selber zeigt.

Ein leeres <span> wird vor dem Linktext eingefügt, es bekommt später die HG-Grafik zugewiesen.
Die HG-Grafik soll per CSS den Linktext verdecken. Die dafür benötigte Technik ist eine Image-Replacement-Technik nach Gilder/Levin

XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Grafisches Menü</title>
</head>
<body>
<ul>
    <li id="navi01"><strong><span></span>Startseite</strong></li>
    <li id="navi02"><a href="#"><span></span>Kontakt</a></li>
    <li id="navi03"><a href="#"><span></span>Galerie</a></li>
</ul>
</body>
</html>

Die Abstände werden erstmal auf null gesetzt. Die <ul> bekommt eine Breite und wird zentriert. <li> floatet , bekommt eine Breite und das Listenzeichen ausgeschaltet:

* {
    padding:0;
    margin:0;
}
ul  {
    width:400px;
    margin:2em auto;
}

 li  {
    float:left;
    width:120px;
    list-style-type:none;
}

<a> und <strong> bekommen position:relative; damit sich das später absolut positionierte <span> mit der HG-Grafik daran orientieren kann.
overflow:hidden ist dafür damit bei Schriftvergrößerung der Linktext des Markup's nicht darunter hervorlugen kann.
Es wird zum Blockelement erhoben und kriegt die Breite von <li> und die Höhe der halben Grafik (ein Zustand halt!):

 a,
 strong  {
      position:relative;
      overflow:hidden;
      display:block;
      width:100%;
      height:40px;
}

Der Normalzustand und der hervorgehobene Zustand der gerade aktuellen Seite wird definiert. Mit position:absolute verdeckt die Grafik den Linktext:

#navi01 a span  {
    position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(startseite.jpg) no-repeat 0 0;
}
 #navi01 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(startseite.jpg) no-repeat 0 -40px;
}
 #navi02 a span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(kontakt.jpg) no-repeat 0 0;
}
#navi02 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(kontakt.jpg) no-repeat 0 -40px;
}
#navi03 a span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(galerie.jpg) no-repeat 0 0;
}
#navi03 strong span  {
       position:absolute;
    width:100%;
    height:40px;
    top:0;
    left:0;
    background:url(galerie.jpg) no-repeat 0 -40px;
}

Der untere Teil der Grafik wird durch das "hovern" per background-position ins Bild geschoben:

#navi01 a:hover span,
#navi01 a:focus span,
#navi02 a:hover span,
#navi02 a:focus span,
#navi03 a:hover span,
#navi03 a:focus span  {
    background-position:0 -40px;
}

Mmh..., und damit ist auch der IE einverstanden??
Nicht ganz:
Er hat aber plötzlich vergessen wie es geht, das beim überfahren des Links aus dem Pfeil eine Hand werden muss.
Das wird ihm per CC wieder beigebracht.
Außerdem bleibt die Grafik des gerade gehoverten Menüpunktes im IE6 nach dem hovern in der hover-position stehen
und springt nicht zurück auf die "Normal-Position".
Der dafür definierte Hack mit background-position mutet unsinnig und absurd an, hilft aber.

<!--[if lte IE 7]>
  <style type="text/css">
   ul a span  {
    cursor:pointer;
}
 a:hover  {
    background-position:0 0;
}
  </style>
<![endif]-->

Es ist evtl. darauf zu achten, das die Regel nur auf das betreffende Menü beschränkt werden sollte.
Das kann sichergestellt werden, indem die ul eine id bekommt und die Regel per Nachfahrenselektor
auf das betroffene Menü angewendet wird.

Ein vertikales, grafisches Menü ist wesentlich einfacher zu erstellen.
Die Grafik misst dann 240x40, weil sie von rechts nach links verschoben wird.

koslowski

 

[snooze7]

ja sau geil, vielen dank.

So etwas habe ich gesucht.

Eigentlich wollte ich keine Grundsatzdiskussion hier anfangen ob grafische Menüs sinnvoll oder absoluter Schwachsinn sind. Mir gefällt es einfach besser.

Wie du bestimmt bemerkt hast, bin ich nicht gerade der Super-Programmierer, sondern eher der Grafiker.

Aber vielen Dank; leider komm ich erst morgen den Lösungsvorschlag zu testen...


Mfg Snooze

 

[snooze7]

@ koslowski:

Aber einen kleinen Denkanstoß wegen des grafischen Menüs möchte ich Dir noch mitgeben, gerade auch wegen Deiner Aussage im Bezug auf "Grafik ausgeschaltet". Wenn du so argumentierst musst du den barrierefreien Gedanken auch weiter und konsequent denken; d.h. du musst auch andere Sprachen anbieten, Javascripte, Flash usw. dürfen nicht verwendet werden (kann man ja auch ausschalten).

Wenn du Dir mal die Mühe gemacht hast mein "schrott" css durchzusehen, wirst du bestimmt bemerkt haben, dass ich die Klasse "span" genau für den Fall gemacht habe, wenn jemand die Seite "nackt" sehen will. Dann steht dort nämlich der richtige Text. Demnach ist mein grafisches Menü nur eine Oberfläche für den Normaluser (was mit Sicherheit die meisten Leute sind).

Außerdem ist mir nach dem 2ten Mal durchlesen aufgefallen, dass dein Konezpt nicht auf ein normales grafisches Menü zu verwenden ist, denn du gehst von nur einem Hintergrundbild aus (ich will aber Hintergrundbilder mitsamt dem Text implementieren): --> einen Vorteil hat das Ganze nämlich: die Grafiken werden in jedem Browser gleich dargestellt und somit auch die Schrift darin, was man bei einem Textmenü mit den unterschiedl. Verschachtelungen nicht immer garantieren kann oder mit verschiedenen hacks arbeiten muss, was eigentlich auch wieder gegen den "strict" Charakter spricht.

Mfg

 

[Efchen]

Wenn du so argumentierst musst du den barrierefreien Gedanken auch weiter und konsequent denken; d.h. du musst auch andere Sprachen anbieten, Javascripte, Flash usw. dürfen nicht verwendet werden (kann man ja auch ausschalten).

Sollte man ja auch nicht verwenden für essenzielle Elemente einer Website.

einen Vorteil hat das Ganze nämlich: die Grafiken werden in jedem Browser gleich dargestellt

Unfug. Eben nicht. Deswegen soll man sich das mit den Grafiken ja überlegen: Beste Beispiele, wo das nicht genauso "aussieht": Google, Lynx, Vorlesebrowser.
Ende Gelände, wie koslowski so schön sagt :-)

Und ein nicht so schön aussehendes Menü, was wenigstens benutzbar ist, ist wertvoller als ein klasse aussehendes Menü, was mindestens ein Mensch nicht nutzen kann.

Gruß,
-Efchen

 

[neuroleptika]

...
Außerdem ist mir nach dem 2ten Mal durchlesen aufgefallen, dass dein Konezpt nicht auf ein normales grafisches Menü zu verwenden ist, denn du gehst von nur einem Hintergrundbild aus (ich will aber Hintergrundbilder mitsamt dem Text implementieren)
...

Aber genau dafür ist das Menü doch gemacht.
#navi02 strong span, #navi02 a span {..} überdeckt den Text in von a bzw. strong komplett. (Vorausgesetzt die Grafik enhält keine Transparenz).
Sollte der Text bei extremer Schriftvergrößerung neben der Grafik noch hervorluken könnte display: hidden, oder eine geringere font-size für li a bzw. li strong Abhilfe schaffen.

Ansehen konnt ich mir dein Beispiel nicht. Der Link ist nicht (mehr) erreichbar.

 

[koslowski]

Hi,

Zitat von snooze7:
Wenn du Dir mal die Mühe gemacht hast mein "schrott" css durchzusehen, wirst du bestimmt bemerkt haben, dass ich die Klasse "span" genau für den Fall gemacht habe, wenn jemand die Seite "nackt" sehen will. Dann steht dort nämlich der richtige Text.

hab ich! Da steht nur "Unternavigation". Bei den ganzen Menüpunkten steht garnix. Also Ende Gelände für den "Screenreaderuser".
Ihm wird "Unternavigation" vorgelesen, aber was für Menüpunkte sie enthält steht da nicht.

Zitat von snooze 7:
Demnach ist mein grafisches Menü nur eine Oberfläche für den Normaluser (was mit Sicherheit die meisten Leute sind).

Das ist ja das Traurige! :(
Eine Webseite sollte möglichst für alle User zugänglich sein und dazu zählen auch Menschen mit körperlichen Einschränkungen.
Auch nicht schön zu lesen, das dir Minderheiten, insbesondere Menschen mit körperlichen Einschränkungen offensichtlich am Arsch vorbei gehen. :|

Wenn ich deiner Meinung folgen würde, könnte ich ja gleich dazu übergehen, mich dafür einzusetzen, Parkplätze für Behinderte abzuschaffen.
Die sind ja eh meist frei und blockieren Abstellmöglichkeiten für "Normalos".

Zitat von snooze 7:
Außerdem ist mir nach dem 2ten Mal durchlesen aufgefallen, dass dein Konezpt nicht auf ein normales grafisches Menü zu verwenden ist, denn du gehst von nur einem Hintergrundbild aus

ja tue ich!
Ich hätte sogar noch einen Schritt weitergehen können:
Sämtliche Zustände aller Links dieses Menüs in nur eine Grafik packen.
Aber wenn dich dieses grafische Menü schon überfordert, dann hättest du dich dann gar nicht mehr ausgekannt. ;)

Zitat von snooze 7:
oder mit verschiedenen hacks arbeiten muss, was eigentlich auch wieder gegen den "strict" Charakter spricht

"strict" bedeutet "Always Standard Modus".
"Transitional" "Almost Standard Modus".
Vielleicht informierst du dich mal richtig darüber.

Gegen "strict" spricht garnix, außer du willst z.B. einen iframe einsetzen, was bei strict nicht mehr erlaubt ist.

Tach Jens,

Sollte der Text bei extremer Schriftvergrößerung neben der Grafik noch hervorluken könnte display: hidden, oder eine geringere font-size für li a bzw. li strong Abhilfe schaffen.

öhem...., *hüstel*....., hab ich doch. :-)

 a,
 strong  {
      position:relative;
      [COLOR=Red]overflow:hidden;[/COLOR]
      display:block;
      width:100%;
      height:40px;
}

koslowski

 

[neuroleptika]

öhem...., *hüstel*....., hab ich doch. :-)

 a,
 strong  {
...
[COLOR=Red]overflow:hidden;[/COLOR]
...
}

Ups, na sowas...