Menüs mit Grafiken (Hintergrundbildern) erstellen

[planepix]

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.

[Marcell]

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

[Doro]

Grossartig, besten Dank Planepix und Nina,
funktioniert einwandfrei und kommt gerade recht
Doro

[monachus]

Hallo Zusammen,

da ich die lesten Tage auf der Suche war nach Möglichkeiten einer Sprite für horizontale Navigation möchte ich meine Infos hier auch kundtun:

Geholfen hat mir dabei folgender Link auf ZenGarden
Erklärung CSS Sprite Horizontal
Beispiel von ZenGarden

Ein bisschen mit den CSS Bezeichnungen von Typolight herumgespielt und es hat ganz gut geklappt. (persönlich muss ich die Grafik noch verbessern und die Pixel genauer angeben). Wichtig war das

display:inline

Hier nen Abriss von meinem CSS, wenn es jemanden interssieren sollte. Eventuell könnte man in dem Tutorial nen Hinweis machen, wie man horizontal gestalten kann.

#mainmenu.mod_navigation
{
	width:989px;
	height:40px;
	margin:25px 0;
}
#mainmenu.mod_navigation .level_1
{
	width:989px;
	height:40px;
	margin:0;
	padding:0;
	background:url(tl_files/images/navigation.png) 0 0 no-repeat;
}
#mainmenu.mod_navigation .level_1 li
{
	display:inline;
}
#mainmenu.mod_navigation .level_1 li a,
#mainmenu.mod_navigation .level_1 li span
{
	width:122px;
	height:0;
	overflow:hidden;
	float:left;
	padding-top:38px;
	outline:none;
}
#mainmenu.mod_navigation .level_1 li a,
#mainmenu.mod_navigation .level_1 li span
{
	background-image:url("tl_files/images/navigation.png");
	background-repeat:no-repeat;
}
#mainmenu.mod_navigation .level_1 li.startseite a
{
	background-position: 0 0;
}
#mainmenu.mod_navigation .level_1 li.startseite a:hover
{
	background-position: 0 -40px;
}
#mainmenu.mod_navigation .level_1 li.startseite span.active,
#mainmenu.mod_navigation .level_1 li.startseite a.trail
{
	background-position: 0px 0px;
}

Gruss
Marko

[jollo]

Hallo,

ich arbeite seit 3 Tagen mit Contao und bisher vollauf begeistert. Nun verbringe ich aber schon einige Stunden damit, meine Navigation in die horizontale zu bekommen und mit Hintergrundbildern zu versehen. Das habe ich mit dem guten Tutorial von planepix und Nina geschafft.

Nun habe ich versucht, das ganze in die horizontale zu bekommen und habe Monachus Anleitung benutzt. Die ist mir aber etwas zu speziell und wenig erklärend und hat auch nicht bei mir funktioniert.
@ Monachus: Könntest du deine Schritte irgendwie noch mit Kommentare versehen und vielleicht bei dem Beispiel von planepix und Nina bleiben und dahingehend deinen Eintrag editieren?

display:inline;

reicht bei mir leider nicht aus!

[planepix]

Hallo jollo,

willkommen im Contao-Forum.

Wenn Du dem Listenelement li die Eigenschaft float:left; gibts, sollten die Navigationspunkte horizontal angeordnet werden.

Sinnvolles Setup:
Das gesamte Menü zunächst ohen Hintergrundbilder erstellen, damit die Funktion gegeben ist. Menüfarben einstellen für den Normal-, Hover- und Aktivzustand, damit man die Funktion überprüfen kann. Und dann die Hintergrundgrafik einfügen - wenn Du eine Spritegrafik nutzt, dann am besten die "Koordinaten" notieren und dann für jeden Menüpunkt ausrichten bzw. in die CSS-Datei schreiben.

[swefla]

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.

/* 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

menu.gifmenu.gif

Danke für eure Hilfe.

Liebe Grüße,
swefla

[varix]

Hast du mal einen Link, wo man sich das ansehen kann?

Gruß
varix

[swefla]

Nö, leider noch nicht, da ich die Seite grade lokal bei mir am rechner erstelle...

[g.lorenz]

...wo ist den das im ersten Thread erwähnte Tutorial "Menü mit Grafiken" beblieben?

LG Guido

[foil]

hier ist es:
http://dev.contao.org/projects/typol...nueMitGrafiken

[planepix]

und im aktuellen Contao Wiki hier.

[g.lorenz]

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

/* 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:

/* 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
startseite.png
habe ich von Leistungen (incl.) bis Satzarbeiten "menue_links_leistungen" eingegeben.

Seitenname.png

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

[bibib]

Was habe ich übersehen? Vermutlich wieder ein ganz simpler Fehler. Vielen Dank für eure Hilfe

Ein / vor tl_files bei der Pfadangabe zur background-url? Also so:
background:url(/tl_files/schulte/menue_links_leistungen.png) no-repeat -1200px -30px;

Die Anleitung bezieht sich doch sicher noch auf eine alte Contao-Version, welche Version hast du denn installiert?

LG, bibib

[g.lorenz]

Hallo bibib!

Mit Vorfreude habe ich die Anderung vorgenommen aber es funktioniert leider nicht. Mit Contao Open Source CMS 2.10.3 arbeite ich. Trotzdem vielen, vielen dank für den Tipp

LG Guido

[Andreas]

Den Slash am Anfang braucht es nicht. Man müsste das sehen, das kann ja alles mögliche sein.

[g.lorenz]

...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.

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

[Andreas]

Schau dir das mal im FE im Firebug an. Du musst das Hintergrundbild auf jeden Fall sehen, da brauchst du nichts mit Leveln zu machen. Ist die Navigation auch in #left? Kommt dein CSS im FE an? Zeigt dir Firebug bei Maus über den Bildpfad das Bild an? Sind deine Klassen im Quelltext so vorhanden, wie du dir das vorgestellt hast?

Ich habe dir mal dein CSS ein wenig aufgeräumt, dadurch wird es auch übersichtlicher

[CSS]
/* 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;
  width: 300px;
  display: block;
  text-indent: -10px;
  background: url(tl_files/schulte/menue_links_leistungen.png) no-repeat left top;
}

#left .mod_navigation .print a:focus,
#left .mod_navigation .print a:hover,
#left .mod_navigation .print a:active,
#left .mod_navigation .print span {
  background-position: 0 -30px;
}

#left .mod_navigation .grossformatdruck a {
  background-position: -300px 0;
}
#left .mod_navigation .grossformatdruck a:focus,
#left .mod_navigation .grossformatdruck a:hover,
#left .mod_navigation .grossformatdruck a:active,
#left .mod_navigation .grossformatdruck span {
  background-position: -300px -30px;
}

#left .mod_navigation .laminierung a {
  background-position: -600px 0;
}
#left .mod_navigation .laminierung a:focus,
#left .mod_navigation .laminierung a:hover,
#left .mod_navigation .laminierung a:active,
#left .mod_navigation .laminierung span {
  background-position: -600px -30px;
}

#left .mod_navigation .kaschierung a {
  background-position: -900px 0;
}
#left .mod_navigation .kaschierung a:focus,
#left .mod_navigation .kaschierung a:hover,
#left .mod_navigation .kaschierung a:active,
#left .mod_navigation .kaschierung span {
  background-position: -900px -30px;
}

#left .mod_navigation .folienbeschriftung a {
  background-position: -1200px 0;
}
#left .mod_navigation .folienbeschriftung a:focus,
#left .mod_navigation .folienbeschriftung a:hover,
#left .mod_navigation .folienbeschriftung a:active,
#left .mod_navigation .folienbeschriftung span {
  background-position: -1200px -30px;
}
[/CSS]

[g.lorenz]

... 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:
firebug Kopie.gif

So, morgen fangen wieder 100 jahre an. Wünsche allen eine gute Nacht

Guido

[Andreas]

Ah, ok. Also im CSS sprichst du ja die Menüpunkte einzeln an, musst du ja, da jeder anders formatiert wird. Die sprichst du je über ne eigene Klasse an z.B. .laminierung. Diese Klassen musst du den Seiten auch zuweisen im BE in den Seiteneinstellungen. Die Klasse .menue_links_leistungen bringt da gar nichts. Tausche diese einzeln gegen die entsprechenden Klassen aus wie print, laminierung usw.

Danach kannst du im Firebug links die einzelnen Elemente markieren, wobei du dann rechts direkt siehst, welches CSS auf das markierte Element aufgesetzt ist. Zieh dann das rechte Fenster ein wenig breiter, damit du das CSS dort besser erkennen kannst. Markiere z.B. ein A-Element und schau rechts, ob die Formatierung aus dem CSS für dieses Element auch angekommen ist, z.B. das Hintergrundbild - background:...

[tacker]

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....

[BugBuster]

Schau mal hier: Contao Wiki - Navigation mit Grafiken - Sprite

[tacker]

Hi BugBuster,
den Link kenne ich, aber es funzt nicht oder ich bin zu doof um das umzusetzen.

[Andreas]

... vertikalem Dropdown lässt mich echt altern.... (Trotz Firefox und Webdevelopper) ...

... 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 ...

Da bist du nicht der erste

Firebug ist dafür wirklich besser als Webdeveloper.

Anstatt
#header .mod_navigation .produkte .active
sprich besser direkt
#header .mod_navigation .produkte span
an. Der active point ist immer im SPAN, wobei .active mehrfach aufgesetzt ist, du würdest mit .active also mehrere Elemente gleichzeitig formatieren.

Mit einer ID für die Navigation, z.B. mainnav, werden deine Selektoren übrigens viel kürzer.
#header .mod_navigation .produkte span
#mainnav .produkte span

a.active gibt es soviel ich weiß nicht (aktive Punkte sind SPANs).

#header .mod_navigation .produkte a:hover - Der Selektor ist richtig um den Hover-Effekt des A-Tags im Listenpunkt .produkte zu formatieren.
:focus, :hover, :active sind Pseudoklassen (mit Doppelpunkt) wohingegen die Klasse .active (mit Punkt) tatsächlich existieren muss.

Möchtest du evtl. einen Hover-Effekt auf einem Span? Dann nimm span:hover (olle Browser kenn das nich, egal)

CSS posten ist für uns mühseelig. Zeige die Seite, oder erstelle schnell eine statische Seite, die du uns zeigst.