Menüs mit Grafiken (Hintergrundbildern) erstellen
Hallo zusammen,
ich habe ein kleines Tutorial im Wiki erstellt, dass den Aufbau eines Menüs mit Grafiken (Hintergrundbildern) zeigt:
Menü mit Grafiken
Ergänzt um Ninas Opimierung und einer Beschreibung für eine Sprite-Navigation aus einer Hintergrundgrafik.
Navi a la planepix (Horizontale Version)
Hallo Planepix,
ich habe dein Tutorial mal abgearbeitet. Funktioniert ganz gut, nur wird mir nach dem Klick auf einer Grafik doch noch der Text des Links angezeigt. Der Code Text-indent: -3000px greift nicht bei Darstellung des aktiven Links. Wenn das Menü aktiv ist soll doch auch eine Grafik angezeigt werden.
Hast du eine Idee wie ich das ganze auch horizontal hinbekomme. Einfach li auf float:left hat die Folge, daß nix mehr angezeigt wird. Wäre ja auch zu einfach geworden.
Möchte gerne deine Navigation so umbauen, daß ich vier Menüpunkte mit Bildern horizontal (neben einander mit Abstand) erhalte und die ul beim Hovern angezeigt wird mit normalen Textlinks unter den jeweiligen Bildern.
Du hast doch bestimmt eine Idee oder? Danke für deine Hilfe.
Grüße aus Aachen
Marcell
Liste der Anhänge anzeigen (Anzahl: 1)
Hallo, ich bin auch neu im Forum.
Wenn ich das Menü, nach dem Tutorial erstelle, werden meine Menüeinträge vertikal angezeigt. und es funktioniert auch alles mit hover, active usw.
Ich brauche nun aber das Menü horinzontal. Das mit float: left; und desplay: inline; hab ich auch schon versucht. Ohne Erfolg. Es wird dann gar nichts mehr angezeigt.
Mein CSS-Datei schaut wie folgt aus. Ich habe mein Hauptmenü die ID "mainmenu" gegeben.
Code:
/* Definition Menue */
#mainmenu
{
width:50px;
}
#mainmenu ul
{
margin:0;
padding:0;
list-style-type:none;
}
#mainmenu li
{
margin:0;
padding:0;
display: inline;
float: left;
}
#mainmenu a,
#mainmenu span
{
height:150px;
display:block;
text-indent:-3000px;
background-repeat: none;
}
#mainmenu .gasthaus a,
#mainmenu .gasthaus a:link,
#mainmenu .gasthaus a:visited
{
background:url(menu/menu.gif) no-repeat top left;
}
#mainmenu .gasthaus a:hover,
#mainmenu .gasthaus a:focus,
#mainmenu .gasthaus a:active,
#mainmenu .gasthaus span
{
background:url(menu/menu.gif) no-repeat 0 -150px;
}
#mainmenu .restaurant a,
#mainmenu .restaurant a:link,
#mainmenu .restaurant a:visited
{
background:url(menu/menu.gif) no-repeat -50px 0;
}
#mainmenu .restaurant a:hover,
#mainmenu .restaurant a:focus,
#mainmenu .restaurant a:active,
#mainmenu .restaurant span
{
background:url(menu/menu.gif) no-repeat -50px -150px;
}
#mainmenu .weinkeller a,
#mainmenu .weinkeller a:link,
#mainmenu .weinkeller a:visited
{
background:url(menu/menu.gif) no-repeat -100px 0;
}
#mainmenu .weinkeller a:hover,
#mainmenu .weinkeller a:focus,
#mainmenu .weinkeller a:active,
#mainmenu .weinkeller span
{
background:url(menu/menu.gif) no-repeat -100px -150px;
}
#mainmenu .aktuelles a,
#mainmenu .aktuelles a:link,
#mainmenu .aktuelles a:visited
{
background:url(menu/menu.gif) no-repeat -150px 0;
}
#mainmenu .aktuelles a:hover,
#mainmenu .aktuelles a:focus,
#mainmenu .aktuelles a:active,
#mainmenu .aktuelles span
{
background:url(menu/menu.gif) no-repeat -150px -150px;
}
Die Bilddatei habe ich angehängt. Wenn mir jemand helfen könnte dieses Menü mit CSS zu erstellen, wäre ich sehr dankbar. Habe jetzt schon über einen Tag damit verbracht :(
Anhang 2530Anhang 2530
Danke für eure Hilfe.
Liebe Grüße,
swefla
Liste der Anhänge anzeigen (Anzahl: 2)
Bei mir funktioniert es nicht
Ich sitze bei diesem schönen Pfingstfeiertag vor dem Rechner und quäle mich mit einem Problem:
Bei mir wird die SpriteGrafik nicht angezeigt im Menü. Ob sich überhaupt was tut habe ich zum Test die -3000 auf -10 verändert und siehe da das Menü ist da aber als Zeilen und nicht wie gewünscht mit der Grafik. Verwendet habe ich das CSS von Nina
Zitat:
/* Definition Menue */
#left .mod_navigation
{
width:150px;
}
#left .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li
{
margin:0;
padding:0;
}
#left .mod_navigation a,
#left .mod_navigation span
{
height:30px;
display:block;
text-indent:-3000px;
background-repeat: none;
}
#left .mod_navigation .startseite a,
#left .mod_navigation .startseite a:link,
#left .mod_navigation .startseite a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat top left;
}
#left .mod_navigation .startseite a:hover,
#left .mod_navigation .startseite a:focus,
#left .mod_navigation .startseite a:active,
#left .mod_navigation .startseite span
{
background:url(tl_files/menue/menue.gif) no-repeat 0 -30px;
}
#left .mod_navigation .referenzen a,
#left .mod_navigation .referenzen a:link,
#left .mod_navigation .referenzen a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat -150px 0;
}
#left .mod_navigation .referenzen a:hover,
#left .mod_navigation .referenzen a:focus,
#left .mod_navigation .referenzen a:active,
#left .mod_navigation .referenzen span
{
background:url(tl_files/menue/menue.gif) no-repeat -150px -30px;
}
#left .mod_navigation .portfolio a,
#left .mod_navigation .portfolio a:link,
#left .mod_navigation .portfolio a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat -300px 0;
}
#left .mod_navigation .portfolio a:hover,
#left .mod_navigation .portfolio a:focus,
#left .mod_navigation .portfolio a:active,
#left .mod_navigation .portfolio span
{
background:url(tl_files/menue/menue.gif) no-repeat -300px -30px;
}
#left .mod_navigation .kontakt a,
#left .mod_navigation .kontakt a:link,
#left .mod_navigation .kontakt a:visited
{
background:url(tl_files/menue/menue.gif) no-repeat -450px 0;
}
#left .mod_navigation .kontakt a:hover,
#left .mod_navigation .kontakt a:focus,
#left .mod_navigation .kontakt a:active,
#left .mod_navigation .kontakt span
{
background:url(tl_files/menue/menue.gif) no-repeat -450px -30px;
}
und umgebaut für mich auf:
Zitat:
/* Definition Menue */
#left .mod_navigation
{
width:300px;
}
#left .mod_navigation ul
{
margin:0;
padding:0;
list-style-type:none;
}
#left .mod_navigation li
{
margin:0;
padding:0;
}
#left .mod_navigation a,
#left .mod_navigation span
{
height:30px;
display:block;
background-repeat:none;
text-indent:-10px;
}
#left .mod_navigation .print a,
#left .mod_navigation .print a:link,
#left .mod_navigation .print a:visited
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat top left;
}
#left .mod_navigation .print a:hover,
#left .mod_navigation .print a:focus,
#left .mod_navigation .print a:active,
#left .mod_navigation .print span
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat 0 -30px;
}
#left .mod_navigation .grossformatdruck a,
#left .mod_navigation .grossformatdruck a:link,
#left .mod_navigation .grossformatdruck a:visited
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -300px 0;
}
#left .mod_navigation .grossformatdruck a:hover,
#left .mod_navigation .grossformatdruck a:focus,
#left .mod_navigation .grossformatdruck a:active,
#left .mod_navigation .grossformatdruck span
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -300px -30px;
}
#left .mod_navigation .laminierung a,
#left .mod_navigation .laminierung a:link,
#left .mod_navigation .laminierung a:visited
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -600px 0;
}
#left .mod_navigation .laminierung a:hover,
#left .mod_navigation .laminierung a:focus,
#left .mod_navigation .laminierung a:active,
#left .mod_navigation .laminierung span
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -600px -30px;
}
#left .mod_navigation .kaschierung a,
#left .mod_navigation .kaschierung a:link,
#left .mod_navigation .kaschierung a:visited
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -900px 0;
}
#left .mod_navigation .kaschierung a:hover,
#left .mod_navigation .kaschierung a:focus,
#left .mod_navigation .kaschierung a:active,
#left .mod_navigation .kaschierung span
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -900px -30px;
}
#left .mod_navigation .folienbeschriftung a,
#left .mod_navigation .folienbeschriftung a:link,
#left .mod_navigation .folienbeschriftung a:visited
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -1200px 0;
}
#left .mod_navigation .folienbeschriftung a:hover,
#left .mod_navigation .folienbeschriftung a:focus,
#left .mod_navigation .folienbeschriftung a:active,
#left .mod_navigation .folienbeschriftung span
{
background:url(tl_files/schulte/menue_links_leistungen.png) no-repeat -1200px -30px;
}
Aus Verzweifelung habe ich schon eine .png-Grafik eingebaut weil ich die Vermutung hatte das es am .gif liegt
In diesem Bereich
Anhang 7789
habe ich von Leistungen (incl.) bis Satzarbeiten "menue_links_leistungen" eingegeben.
Anhang 7790
Die Grafik selbst liegt hier: C:\xampp\htdocs\schulte\tl_files\schulte\menue_lin ks_leistungen.png
Was habe ich übersehen? Vermutlich wieder ein ganz simpler Fehler. Vielen Dank für eure Hilfe
LG Guido
Ich habe eine Vermutung wo vielleicht der Fehler liegen könnte
...jedoch keine Lösung wie ich ihn dann beheben könnte wen es daran liegen sollte.
Bei mir liegen die Navigationsmenüs in einer zweiten Ebene.
Zitat:
In diesem Bereich
Anhang 7789
habe ich von Leistungen (incl.) bis Satzarbeiten "menue_links_leistungen" eingegeben.
Vielleicht muss ich da level_1 oder level_2 in meinem css an einer bestimmten Stelle ergänzen oder ändern?
Gruß Guido
Liste der Anhänge anzeigen (Anzahl: 1)
Vielen Dank Andreas
... für Deine Mühe mir zu helfen.
Ich habe vom Firebug mal ein Bild gemacht. Ich steh da irgendwie auf der Leitung. Ist auch schon etwas spät und morgen wieder früh raus.
Hier das Bild:
Anhang 7794
So, morgen fangen wieder 100 jahre an. Wünsche allen eine gute Nacht
Guido
Horizontales Menu mit Grafiken
Hi, finde das Tut nicht, ist es möglich, den Link zu aktualisieren?
Ansonsten: wenn schon ein CSS-Profi online sein sollte: die horizontale Navi mit Hintergrundbild und vertikalem Dropdown lässt mich echt altern.... (Trotz Firefox und Webdevelopper)
Gesucht wird Lösung für:
Einige Menüpunkte sollen HG-Grafik haben mit Wechsel bei a:hover
Was habe ich gemacht:
Klasse in Seitenstruktur vergeben -> CSS:#header .mod_navigation .produkte .active -> funktioniert
Aber:Wie spricht man den a:hover an?
#header .mod_navigation .produkte a.active,
#header .mod_navigation .produkte a:hover -> die HG-Grafik wird nur beim Dropdown angezeigt
Wenn gewünscht, post ich das CSS, aber ich würd gerne verstehen, wie das prinzipiell funktioniert, hangel mich von Beitrag zu Beitrag und bei jedem ist es ein bischen anders....