mtp: horizontale css navigation mit versch. grafiken

Wie ich mit CSS und Listen eine waagerechte Navigationsleiste hinbekomme weiß ich mittlerweile - dazu gibt es ja hier und im Internet genug Anleitungen. Mein Problem - und dazu habe ich auch hier im Forum keine Lösung gefunden sieht nun wie folgt aus.

Ich möchte für jeden Navigationspunkt ein eigenes kleines Bild haben das vor dem eigentlichen Text steht z.B.

[Grafik Haus] Home | [Grafik Hierarchie] Sitemap | [Grafik Brief] Kontakt | [Grafik Info-I] Impressum

Zwischen der Grafik und dem entsprechenden Textlink sollen jeweils 5 Pixel Abstand sein und zwischen den verschiedenen Links ca. 10-12 Pixel.

Das nächste Problem ist - wenn die Schriftgröße im Browser vergrößert wird soll die vorstehende Grafik trotzdem immer auf der Mittellinie der nachfolgenden Schrift stehen. Ich vermute man muss bei beiden Problemen mit Hintergrundgrafiken arbeiten und diese dann vertikal mit 50% positionieren oder? Hab ich versucht hat aber n icht geklappt.... trotzdem scheint mir das der richtige Weg. Den Code den ich dafür hatte hab ich leider bei meinen Versuchen nicht gespeichert.

Hat wer Ideen oder einen konkreten Lösungsvorschlag?

mtpost

  1. Hallo mtp.

    Das nächste Problem ist - wenn die Schriftgröße im Browser vergrößert wird soll die vorstehende Grafik trotzdem immer auf der Mittellinie der nachfolgenden Schrift stehen. Ich vermute man muss bei beiden Problemen mit Hintergrundgrafiken arbeiten und diese dann vertikal mit 50% positionieren oder? Hab ich versucht hat aber n icht geklappt....

    Woran bist du gescheitert? Das von dir geschilderte Vorgehen kann grundsätzlich erst einmal deine Anforderungen erfüllen. Wenn du deine Probleme jedoch nicht schilderst, kann dir niemand dabei helfen.

    Den Code den ich dafür hatte hab ich leider bei meinen Versuchen nicht gespeichert.

    Dann erstelle neuen. Du wirst schließlich weiter experimentieren wollen, oder?

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
    1. Danke für Deine weitreichende Hilfe.
      Ich weiss ja dass manchmal auch faule Menschen hier ihre Fragen posten aber warum gehen hier manche davon aus dass dem immer so ist.
      Ich glaube schon, dass meine Fragestellung mein Problem ausreichend geschildert hat aber ich kann auch gerne einen Roman schreiben.

      Wenn meine Vorgehensweise mein Problem gelöst hätte wäre ich mit meinem Problem nicht hier.

      Hast Du dazu eine Lösung ja? nein?
      Wenn nein danke ich Dir für die freie Meinungsäußerung verzichte aber ebenso dankend auf weitere Kommentare bin aber für fachlich qualifizierte Hilfe weiterhin dankbar....

      Ich vermute aber mal dass nach dieser Antwort meinerseits das kollektive Schweigen ausbricht weil ich ja nicht Megadankbar für eine Antwort war.

      Manchmal geht es hier echt nach dem Motto
      Hilf Dir selbst dann hilft Dir Gott...

      Hallo mtp.

      Das nächste Problem ist - wenn die Schriftgröße im Browser vergrößert wird soll die vorstehende Grafik trotzdem immer auf der Mittellinie der nachfolgenden Schrift stehen. Ich vermute man muss bei beiden Problemen mit Hintergrundgrafiken arbeiten und diese dann vertikal mit 50% positionieren oder? Hab ich versucht hat aber n icht geklappt....

      Woran bist du gescheitert? Das von dir geschilderte Vorgehen kann grundsätzlich erst einmal deine Anforderungen erfüllen. Wenn du deine Probleme jedoch nicht schilderst, kann dir niemand dabei helfen.

      Den Code den ich dafür hatte hab ich leider bei meinen Versuchen nicht gespeichert.

      Dann erstelle neuen. Du wirst schließlich weiter experimentieren wollen, oder?

      Einen schönen Donnerstag noch.

      Gruß, Ashura

      1. Hallo mtp.

        Ich weiss ja dass manchmal auch faule Menschen hier ihre Fragen posten aber warum gehen hier manche davon aus dass dem immer so ist.

        Wenn du mehr aus meiner Antwort herausliest, als geschrieben war, dann ist das deine Sache. Unterstelle mir bitte aber keine Dinge, die ich nicht eindeutig oder mehrdeutig geäußert habe.

        Ich glaube schon, dass meine Fragestellung mein Problem ausreichend geschildert hat aber ich kann auch gerne einen Roman schreiben.

        Ein Exzerpt würde bereits genügen.

        Du schriebst:

        Ich vermute man muss bei beiden Problemen mit Hintergrundgrafiken arbeiten und diese dann vertikal mit 50% positionieren oder? Hab ich versucht hat aber n icht geklappt....

        Nun meine logische Schlussfolgerung hierauf: *Was* hat an diesem Vorgehen nicht geklappt?

        Hast Du dazu eine Lösung ja? nein?

        Ganz gewiss.

        Manchmal geht es hier echt nach dem Motto
        Hilf Dir selbst dann hilft Dir Gott...

        Gott hilft niemandem, er erfreut sich nur an unseren Leiden.

        Einen schönen Donnerstag noch.

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
  2. Hallo,

    [Grafik Haus] Home | [Grafik Hierarchie] Sitemap | [Grafik Brief] Kontakt | [Grafik Info-I] Impressum

    Zwischen der Grafik und dem entsprechenden Textlink sollen jeweils 5 Pixel Abstand sein und zwischen den verschiedenen Links ca. 10-12 Pixel.

    abstände zwischen den links mit margin definieren.
    abstände von grafik und text mit padding-left - dafür dann grafikbreite in px + 5px angeben.
    bei background-position müßte Deine Idee eigentlich dafür sorgen, daß bei höher skalierter Schrift das Bild in der vertikalen mitte gezeigt wird. Im Prinzip würde ich sagen, daß es nach Deiner Methode funktionieren sollte.
    z.B.
    background:url(foo.gif) no-repeat center right;

    netten Tag
    ^da Powl

    --
    ===============================
    powl.hat-gar-keine-homepage.de/