Sprite Navigation startschwierigkeiten ?

Ich habe mir jetzt schon einige Zeit lang das Forum durchsucht und auch einige Bücher durchgewälzt aber habe leider für eine vertikale Navigation im Headerbereich gibt es nichts.
Eine komplett Grafik hab ich mir schon gemacht, aber irgendwie habe ich startschwierigkteiten mit den CSS Anweisungen.
Kann mir mal einer Helfen die ersten Anweisungen im CSS zu erstellen?

P.s. Habe versucht die Sprite CSS für left umzuschreiben aber das ging schief!

Anbei meine Grafik, jedes Menü hat eine breite von 96px und einer höhe von 30px. Von oben nach unten ist normal, hover & acitve angelegt.

Danke jetzt schon für eure Hilfe!

Anhang 2426

Hallo Patrick,

als Ansatz hilft dir vielleicht mein Tutorial weiter.

Ich mache mir dazu immer eine Skizze und schreibe mir die Kordinaten auf, damit ich leichter den Überblick behalte.

Guten Morgen Planepix,
genau nach dieser habe ich angefangen aber irgendwie funkt es nicht. Ich weiss auf diese Aussage kann man keine Diagnose stellen.
Dein Tut ist ja für den Bereich left, ich bräuchte es für den Header und irgendwas geht da bei mir schief.

Werde aber nach deiner Vorlage noch mal komplett von vorne anfangen heute Abend.

Leider habe ich keinen Link, werde aber meine CSS sollte es wieder nicht gehen heute Abend mal reinstellen.

UPS: Habe gerade einen massiven Fehler in meinem ersten Beitrag gesehen, es soll natürlich ein HORIZONTALES Menü werden und kein vertikales.

Hallo Patrick,

als ersten Schritt einfach das #left durch #header ersetzen, da die Navigation anstatt in der linken Spalte in der Kopfzeile verwendet werden soll.

Code:

---

. mod_navigation ul,
.mod_navigation li { margin: 0; padding: 0;}
.mod_navigation li { position: relative; float: left; }
.mod_navigation a, .mod_navigation span {width: 96px; height: 30px; text-indent: -3000px; background-image: url('urlzurfile'); background-position: left top;}

---

So in ca. könnte das aussehen...
Dann jedem Navipunkt in der seitenstruktur eine eigene id oder Klasse geben und dann

Code:

---

#iddespunktes a { background-position: 0 0;}
#iddespunktes a:hover { background-position: 0 30px;}
#iddespunktes.active span { background-position: 0 60px;}

#iddespunktes2 a { background-position: 96px 0;}
#iddespunktes2 a:hover { background-position: 96px 30px;}
#iddespunktes2.active span { background-position: 96px 60px;}

---

So in die Richtung geht das ganze... erhebt aber natürlich keinen anspruch auf richtigkeit und vollständigkeit (weil ichs einfach nur schnell zusammengetippt hab.

Aber bitte bei den von Null abweichenden Werten für background-position die Angabe der Einheit nicht vergessen, also

.active span { background-position: 0 60px;}

oder em,pt,...

kacke, voll vergessen, ich bearbeites kurz im oberen post

He Leute Danke für eure Hilfe.
Werde das heute Abend gleich mal durch spielen, aber habe jetzt schon gesehen wo meine Fehler liegen in der CSS.

super, dass es schonmal bei ein paar fehlern helfen konnte.

falls es nicht klappt, wäre dann ein link ganz cool, dann kann man das explizit auf deine seite bezogen sagen.

So jetzt habe ich es endlich geschaft diese CSS Tipps von euch umzusetzten. Habe aber jetzt leider noch zwei kleine Probleme:

1. Es wird alles untereinander angezeigt, würde aber gerne nebeneinander haben.
2. Der Start Button ist wenn ich auf einer anderen Seite sichtbar und der hover funkt auch aber sobald ich aktiv dort bin verschwindet er.

Könnt ich mir hier auch helfen, leider habe ich es noch nicht geschaft das ganze Online zu stellen aber meine derzeite Menü CSS hänge ich mal dran.

Danke noch mal euch allen.

HTML-Code:

---

#header .mod_navigation{width:96px;}
#header .mod_navigation ul{margin:0;padding:0;list-style-type:none;}
#header .mod_navigation li{margin:0;padding:0;}
#header .mod_navigation a,#header .mod_navigation span{height:30px;display:block;text-indent:-3000px;}
#header .mod_navigation .startseite a,#header .mod_navigation .startseite a:link,#header .mod_navigation .startseite a:visited{background:url(tl_files/layout2010/sprite.png) no-repeat;}
#header .mod_navigation .startseite a:hover,#header .mod_navigation .startseite a:focus{background:url(tl_files/layout2010/sprite.png) no-repeat 0 -30px;}
#header .mod_navigation .startseite a:active,#header .mod_navigation .starteseite span{background:url(tl_files/layout2010/sprite.png) no-repeat 0 -60px;}
#header .mod_navigation .uebermich a,#header .mod_navigation .uebermich a:link,#header .mod_navigation .uebermich a:visited{background:url(tl_files/layout2010/sprite.png) no-repeat -96px 0;}
#header .mod_navigation .uebermich a:hover,#header .mod_navigation .uebermich a:focus{background:url(tl_files/layout2010/sprite.png) no-repeat -96px -30px;}
#header .mod_navigation .uebermich a:active,#header .mod_navigation .uebermich span{background:url(tl_files/layout2010/sprite.png) no-repeat -96px -60px;}
#header .mod_navigation .projekte a,#header .mod_navigation .projekte a:link,#header .mod_navigation .projekte a:visited{background:url(tl_files/layout2010/sprite.png) no-repeat -192px 0;}
#header .mod_navigation .projekte a:hover,#header .mod_navigation .projekte a:focus{background:url(tl_files/layout2010/sprite.png) no-repeat -192px -30px;}
#header .mod_navigation .projekte a:active,#header .mod_navigation .projekte span{background:url(tl_files/layout2010/sprite.png) no-repeat -192px -60px;}
#header .mod_navigation .downloads a,#header .mod_navigation .downloads a:link,#header .mod_navigation .downloads a:visited{background:url(tl_files/layout2010/sprite.png) no-repeat -288px 0;}
#header .mod_navigation .downloads a:hover,#header .mod_navigation .downloads a:focus{background:url(tl_files/layout2010/sprite.png) no-repeat -288px -30px;}
#header .mod_navigation .downloads a:active,#header .mod_navigation .downloads span{background:url(tl_files/layout2010/sprite.png) no-repeat -288px -60px;}

---

#header .mod_navigation{width:960px;}

Zitat:

---

blueamerican
#header .mod_navigation{width:960px;}

---

Danke für die schnelle Antwort aber das wars auch nicht!

Nachher sieht alles so aus!

Anhang 2449

ja ist ja auch richtig. du musst die li ja auch floaten

....li {
float:left;
width:96px;
}

bei a und span ist glaube ich besser, weil einige ie-versionen keine :hover pseudoklasse auf nicht-anchor-elementen interpetieren, somit würde der hover effekt nicht funktionieren (außer mit dem hover everything ie behavior)

der float bewirkt die horizontale anordnung, der ist also essentiell

(ein link wäre aber noch immer toll, dann kann man dir einfacher helfen)

Zitat:

---

Zitat von blueamerican

ja ist ja auch richtig. du musst die li ja auch floaten

....li {
float:left;
width:96px;
}

---

Na ja, das ist mal was, jetzt habe ich die zwei kleinigkeiten eingefügt und schon funkt alles so wie gewollt.
Nur eines versteh ich nicht das das active Bild von der startseite nicht angezeigt wird.
Es funkt der hover und normal zustand nur wenn ich auf startseite klicke dann wird dort nichts angezeigt.

Ich weiss das mit dem Link hoffe ich morgen zu schaffen. Aber viellecht hat einer jetzt schon eine Idee.

Ach ja, ich habe zwei seitelayouts da ich auf home keine spalten habe aber sehr wohl auf den anderen. Nur fals es damit zuzammen hängen könnte. Was ich aber nicht glaube.

verschiebst du dein bild auch richtig?!

weil so spontan im css fällts mir nicht auf.
ein Link wäre Hilfreich, dann würde mans sofort sehen woran es liegt. (ich schau morgen nochmal rein)

Aber als Tipp, dann ist es einfacher:
Zähle einmal alle Selektoren auf (kommagetrennt) und weiße einmal das Bild zu.

So jetzt habe ich es gefunden warum der span von der Startseite nie angezeigt wurde und habe gleichzeitig erkannt warum ein Webdesigner soviel für eine ordentliche homepage verlangt.
Den der hätte den Rechtschreibfehler den ich eingabaut habe gefunden. Habe starteseite geschrieben, da kann er nichts finden. *ggg*

Also Leute weiss gar nicht wie oft ich mich hier bei Community bedankt habe aber ich fühl mich hier richtig wohl. Denn hier wird einem schnell geholfen.

Wenn das Theme fertig ist werde ich es auf einer Testseite vorstellen damit ihr sehen könnt wie ihr mir geholfen habt.

Nun gute Nacht!

So jetzt habe ich endlich Zeit gehabt das ganze Online zu stellen obwohl es noch nicht fertig ist.
Aber das Sprite Menü ist so geworden wie gewollt.

Muss mich noch mal für eure Hilfe bedanken den ohne Eure hilfe wäre da gar nichts gegangen.

Hier der Link

Werde wenn dies Fertig ist auch als Theme dann anbitten.

Schönen Abend noch.

Ich weiss jetzt nicht ob jemand auf diesen Beitrag noch Antworten wird aber bevor ich einen neuen Thread starte versuch ich es mal so.

Bei mir ist jetzt alles so weit klar nur wenn ich die CSS sheet zusammenfügen lasse via Contao dann sind meine Navigationsbilder futsch! (Häckchen im Seitenlayout)
Kann mir das mal einer Erklären?

OK Antwort gefunden.

Hallo Patrick,
aber sobald du den Hacken wieder rausnimmst funktioniert es wieder, oder ist ausversehen was in der Reihenfolge der Stylesheets verrutscht?

Kannst du die Option Style-Zusammenfügen nochmal aktivieren, dass man im Firebug den Fehler nachvollziehen kann?

Gruß Patrick

Zitat:

---

Zitat von psren

Hallo Patrick,
aber sobald du den Hacken wieder rausnimmst funktioniert es wieder, oder ist ausversehen was in der Reihenfolge der Stylesheets verrutscht?

Kannst du die Option Style-Zusammenfügen nochmal aktivieren, dass man im Firebug den Fehler nachvollziehen kann?

Gruß Patrick

---

Danke für dein Antwort aber habe den Fehler schon gefunden und grade eben ausgebessert.
Bei der Pfadangabe für das Bild im eingenen Code hatte nur ein ../../ gefehlt. (vor dem tl_files/bild)

Zitat:

---

Zitat von edgeMedia

Danke für dein Antwort aber habe den Fehler schon gefunden und grade eben ausgebessert.
Bei der Pfadangabe für das Bild im eingenen Code hatte nur ein ../../ gefehlt. (vor dem tl_files/bild)

---

Hmm, ich glaub fast eher, es ist was anderes ;)

Beim Aggregieren der einzelnen Stylesheets werden die Pfadangaben von CSS-Bildern nur dann von Contao korrekt adaptiert, wenn Du in Deinen CSS-Regeln diese Pfade entsprechend in Anführungszeichen setzt! In diesem Fall kannst Du Dir dann nämlich das Hinzufügen von "../../" sparen...

Danke Dir xchs aber für mich funkt es jetzt und vielleicht bau ich es das nächste mal nach deinem Vorschlag ein.

Bei der Art von Navigation braucht man doch keine Sprite-Grafiken. Ich hätte eher eine Grafik für den Hintergrundverlauf genommen und die Schrift mit Cufon o.ä. ersetzt. So spart man sich eine Menge arbeit ;)

Zitat:

---

Zitat von Nils Riel

Bei der Art von Navigation braucht man doch keine Sprite-Grafiken. Ich hätte eher eine Grafik für den Hintergrundverlauf genommen und die Schrift mit Cufon o.ä. ersetzt. So spart man sich eine Menge arbeit ;)

---

Ja Nils,
wenn man weiss wie es geht ist klar das man es anders machen würde. Aber ich wollte mal Lernen wie man mit dieser Technik umgeht und zum zweiten müsste ich sofort fragen wie das bei runden Ecken mit einer Hintergrund Verlaufsgrafik funkt?
Vor allem habe ich zwar schon einiges über Cufon gehört aber durchblick habe ich da auch noch keinen.

Aber diese Punkte kommen bei mir in nächster Zeit auf die "Learn how to" Liste.

Da kann ich dir die cufon-Erweiterung empfehlen - die nimmt dir fast alles ab. Zu den runden Ecken:
http://border-radius.com/

Zitat:

---

Zitat von Nils Riel

Da kann ich dir die cufon-Erweiterung empfehlen - die nimmt dir fast alles ab. Zu den runden Ecken:
http://border-radius.com/

---

Des is ja mal eine geniale Seite!
Danke Dir.

Zitat:

---

Zitat von edgeMedia

Danke Dir xchs aber für mich funkt es jetzt und vielleicht bau ich es das nächste mal nach deinem Vorschlag ein.

---

Ok, kein Problem. Bedenke aber, dass es dann bei Dir ggf. zu Problemen kommen könnte, falls Du die Option "Sylesheets zusammenfassen" irgendwann mal (zeitweise) nicht mehr verwenden möchtest...

Zitat:

---

Zitat von Nils Riel

Da kann ich dir die cufon-Erweiterung empfehlen - die nimmt dir fast alles ab. Zu den runden Ecken:
http://border-radius.com/

---

Da musst du dir halt im klaren darüber sein dass das css3-eignschaften sind und die funktionieren (leider) noch nicht in allen gängigen browsern (ie...) es wird vo n der unterstützung her immer besser, aber die ieuser lassen auf sich warten :P