Piktogramme/Bilder in die Navigation ?

Ich hab mal eine Frage, also ich würde gerne in meine Navigation, vor den anzuklickenden Seitennamen, noch kleine Bilder einfügen und wollte die Experten einfach mal fragen, ob sie wüssten ob und wie dies funktioniert.!

Danke im Voraus.

Hallo,

1. Möglichkeit:
Du fügst das Bild direkt im Seitennamen mit ein:

Eigene Seiten Editieren
Seite auswählen
Vor dem Seitennamen gibst du folgendes ein:

Breite in Pixel
Höhe in Pixel

Ganz großer Nachteil: Der Code steht dann auch in der URL der Seite:

und in dem Balken über deinem Content wird ebenfalls das Bild eingefügt.
Ersteres lässt sich in vernünftigen Browsern mit der Html5 History-API beheben. Bei letzterem kann das Bild per CSS einfach ausgeblendet werden.



2. Möglichkeit:
Du machst all deine Seiten zu Seiten, die nicht in der Navigation sichtbar sind (siehe FAQ). Dann legst du für jede Seite eine Seite ohne Link an. Im Seiteneditor:
"Neue Seite hinzufügen"
"Optionen anzeigen"
In Text Box "Normale Seite" klicken
"Menüpunkt ohne Link" auswählen

Im Feld "Titel der neuen Seite" gibst du dann obigen Code mit einer kleinen Änderung ein. Die normale Navigation soll simuliert werden, daher verlinkst du einfach die entsprechenden Seiten:

Nachteil: Du musst dir die Unterseitenfunktion selbst per Javascript programmieren.



3. Möglichkeit:
Du fügst die Bilder dynamisch per Javascript ein.



4. Möglichkeit:
Du gibst all deinen Navigationspunkten eine ID und fügst die Bilder per CSS ein. Das ID vergeben funktioniert genauso, wie ich es in folgendem Thread für das Design Red gemacht habe:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=133210



5. Möglichkeit: (und die wirds dann wohl auch werden )
Der selektierst jeden deiner Menüpunkte über den Attribut-Selektor. Hierfür bietet sich das href Attribut an. Die Links in deiner Navi haben die Klasse menu:

Jetzt kannst du über die Pseudoklasse before vor dem Link ein Pseudoelement einfügen:

Verschieben des Bildes um X Pixel nach oben, um den Text vertikal auszurichten.


Um ein wandern des Pseudoelementes zu verhindern, muss es sich trotz absolute Positionierung am Element ausrichten, auf welches es angewendet wird. Dazu muss dieses relative positioniert werden:

Der Text muss noch um die Breite des Bildes nach rechts verschoben werden, da der Text ansonsten verdeckt wird.

Das ganze musst du dann natürlich noch für jede Seite wiederholen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Wow, Danke erstmal ... das hilft mir richtig weiter.
Eine Frage hätte ich aber noch : Wieviele Pixel wären für Höhe und Breite denn am besten.?

http://fussballfans-in-leipzig.de.tl/%3Cimg-src%3D-g-http-d--s--s-www-.-fc45-.-de-s-images-s-manufacturers-s-SG_Rotation_Leipzig-.-jpg-g--alt%3D-g-Home-g--style%3D-g-width-d-25px%3Bheight-d-25px%3B-g-%3E-G.ae.stebuch.htm

Hab jetzte die Erste Möglichkeit gewählt (vorläufig). Wie bekomme ich die Schrift nun in in die Mitte der Zeile ... und nicht so unten an den Rand gedrückt.?

Ich dachte eigentlich, du willst jedem Menüpunkt ein anderes Bild geben.
So hättest du das auch einfacher haben können, in dem du das Bild einfach auf die Hintergrundgrifk der Buttons gesetzt und die Hintergrundgrafik dann einfach ausgetauscht hättest.

Das musst du probieren, so wie es dir halt gefällt.

Am besten wäre es, wenn du meinen Tipp beherzigst und Möglichkeit 5 verwendest oder jetzt wo ich weiß, dass du immer das gleiche Bild möchtest, es so machst, wie oben beschrieben.
Für Möglichkeit 5 reicht dann auch das einmalige einfügen, da ja unabhängig vom href-Attribut:

Breite des Bildes
Höhe des Bildes

Wenn du es unbedingt so lassen möchtest, musst du den Code nochmal etwas anpassen. Ich mach das jetzt mal Beispielhaft für dein Gästebuch. Der Titel sieht momentan so aus:

Als erstes musst du die vertical-align Eigenschaft des Bildes auf middle setzen:

Und dann braucht auch der Text die vertical-align Eigenschaft und den Wert middle. Dazu musst du ein span Element um den Text legen:

Wie gesagt, ich würde einfach entweder die Hintergrundgrafik des Buttons bearbeiten oder Möglichkeit 5 verwenden.

Und gleich noch ein Tipp: Nimm die Farb und Fett Formatierung im Seitentitel raus und mach das per CSS!
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Brauche wieder mal Hilfe ...

http://fussballfans-in-leipzig.de.tl/ <<< Ich wollte die Schriftgröße der Navigation ändern, aber diese hat sich leicht nach oben verschoben.

Code ist :

Wie kann ich die Schrift wieder zntral kriegen.?

Erstmal finde ich es super von dir, dass du das wieder rausnimmst und dir denkst, die sollen das doch mal selbst eingeben, damit sie mein Problem nachvollziehen und mir dann anschließend helfen können.

Nach dem ich die Schriftgröße bei dir jetzt mal geändert habe, sieht es für mich so aus, als wäre es immer noch in der Mitte. Naja, ich habe das jetzt nicht abgemessen, bin mir aber doch relativ sicher.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering

Ja ich habe es geändert, nachdem meine 'home'-Seite nicht mehr funktionierte.

Und ich sehe gerade keine Vergrößerung.?

Er hat es wohl einfach kurz Clientseitig (zb. mit Firebug) bei sich geändert.
Davon bekommst du selber nichts mit.

Auch ich habs mal kurz bei mir vergrößert und auch da ist es genau in der Mitte.

Du trägst aber auch nicht unbedingt zur Problemlösung etwas bei:
- Die Rechtsklick-Sperre bringt nichts und behindert uns eher, als sie etwas nützt
- Wenn wir nicht sehen, was du siehst können wir dir nicht helfen:
Also entweder Screenshot und markieren, wo das Problem liegt oder das Problem auf der Website lassen.

mfg Philipp
______________
Forenregeln, FAQ, Suchfunktion