Hallo an alle,
ich hab im Forum nix finden können. Ich beabsichtige, ein horizontales Menue einzubauen - möchte immer auf der rechten Seite eine Grafik einblenden, krieg das aber einfach nicht hin. Menue vertikal und unformatiert o.O...
Da ich ein absoluter Neuling bin, wär's nett von Euch, wenn Ihr mir nen kleinen Tipp geben könntet.
Danke Euch
LG
Reverend H
[EDIT]: Zum besseren Verständnis - ich habe einen Div-Container,39 x 966 Pixel. Darunter habe ich eine Grafik als Hintergrund. Nun würde ich gerne herausfinden, wie ich an den Menuepunkten auf der rechten Seite (also "nach" dem Menuepunkt)eine Grafik (39x3 Pixel groß)erscheinen lassen kann. Diese Grafik soll die Menuepunkte als Buttons darstellen.
showmenue2 links mit bildern
(10 posts) (2 voices)-
vor 1 year veröffentlicht #
-
Hallo Reverend H,
ich würde sagen das geht mit background-image bzw. background (CSS).
Allerdings kenne ich nicht deine genaue Menüstruktur. Verwendest Du eine Liste, Tabellen, DIV und SPAN?
Kann man die Seite schon online irgendwo sehen?
Wenn nicht, kannst Du den Menüteil (und umgebende HTML-Teile) mal posten?
Viele Grüße,
Danielvor 1 year veröffentlicht # -
Hallo Daniel,
ich beabsichtige keine "Unterseiten" für die Links zu erstellen. Soll heissen, ich habe 3-4 verschiedene Seiten ohne Unterseiten. Ich habe eine waagrechte Menueleiste mit einem Backgroundimage bereits belegt. Nun möchte ich, dass die angezeigten Links auf der rechten Seite eine bestimmte Grafik haben. Wenn alles so läuft, wie ich mir das gedacht habe, werden die Links als Buttons dargestellt.
Sorry, die seite ist noch nicht online und den Code hab ich grade nicht zur Hand (weil auf Arbeit)...
Aber ich glaube ich kann das mit <span class="link">#hier der von showmenue2 erzeugte Link</span> realisieren, oder liege ich hier falsch?
LG Reverend Hvor 1 year veröffentlicht # -
Hallo,
ich habe folgendes in der index.php stehen dort wo ich das menue haben möchte
<div id="nav_bar"> <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, ' [a]<span class="link">[menu_title]', '', '', '', '[a][menu_title]'); ?> </div>
In der css hab ichs Mal so versucht
#link { background-image:url(img/nav_button_ri.png); background-position:right; background-repeat:no-repeat; padding-left:5px; padding-right:5px; }
Ich kriegs einfach nicht hin...
LGvor 1 year veröffentlicht # -
Hallo,
vorab, vielen Dank! Mit dem Code kann ich jetzt auch was anfangen und versuchen Dir eine Lösung zu präsentieren.
Als Erstes fällt mir, dass der generierte HTML-Code Deines Menüs nicht so ganz ist, wie er sein sollte.
Das hier wird mit deinem
<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, ' [a]<span class="link">[menu_title]', '', '', '', '[a][menu_title]'); ?>
erzeugt:
<a href="/" target="_top">Home </a><a href="/pages/seite2.php" target="_top"><span class="link">Seite 2 <a href="/pages/seite2.php" target="_top"><span class="link">Seite 3
Zuerst einmal fällt mir auf, dass weder die A-Tags (also die Links), noch die SPAN-Tags geschlossen werden.
Ein Link sollte etwa so aussehen:
<a href="seite.php">Home</a>
O.K., ich möchte Dich jetzt hier nicht verbessern, aber wenn Du CSS auf defektes HTML anwenden möchtest, kann das Ergebnis absolut unvohersehbar sein.
Weiter möchtest du etwas CSS auf irgend ein HTML-Tag mit der ID link anwenden.
In Deinem Menü gibt es aber kein id="link"
Folglich wird das CSS aus #link auch nicht auf das Menü angewendet.
Eine ID darf innerhalb des erzugten HTML-Code auch nur 1x verwendet werden. Du möchtest eine mehrfache verwendung, dann solltest du eine Klasse (class) verwenden diese hast Du auch schon im SPAN-Tag angegeben. Die Klasse wird in CSS mit einem . (Punkt) angegeben (also . und nicht # für class).
Falls Du irgend wo anders auf der Seite noch weitere Klassen mit dem Namen link verwenden möchtest, würde es sich anbieten diese Formatierung nur für die Klasse link anzufenden, die sich in einem HTML-Tag mit der ID nav_bar befindet.
Ich habe hier mal für Dich alle änderungen vorgenommen. So sollte es jetzt gehen:
.link { background-image: url(img/nav_button_ri.png); background-position:right; background-repeat:no-repeat; padding-left:5px; padding-right:5px; }
<div id="nav_bar"> <?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, ' [a]<span class="link">[menu_title]</div></span></a>', '', '', '', ''); ?>
Noch ein Hinweis: Die CSS-Datei muss sich natürlich in dem Verzeichnis befinden, in dem sich auch das Verzeichnis img befindet (also auf der gleichen Ebene).
Die Datei nav_button_ri.png sollte dann in dem img Verzeichnis sein.
Sollte das nicht so sein, einfach den Pfad bei url ggf. anpassen oder das Bild dort hin legen.
Viel Erfolg und viele Grüße,
Daniel</span>vor 1 year veröffentlicht # -
Vielen Dank,
nun gehts generell. Ich muss noch ein wenig anpassen und dann ist hoffentlich bald fertig :D Mit html / css muss ich wohl noch nachsitzen.
Nochmals Danke für die echt schnelle Hilfe.
LGvor 1 year veröffentlicht # -
Bitte!
Immer wieder gerne.vor 1 year veröffentlicht # -
Hallo,
was mir nun aufgefallen ist dass mein Background Bild nicht richtig angezeigt wird.
Ich habe versuch mit "line-height:35px;" die Größe anzupassen, leider ohne Erfolg.
Den Menuestring habe ich nun folgend in meiner index.php
<?php show_menu2(0, SM2_ROOT, SM2_START, SM2_ALL, '<span class="link"> [a][menu_title]', ' ', '', ''); ?>
und hier die Formatierung
.link { line-height:35px; font-size:14px; background-image:url(img/nav_button_ri.png); background-repeat:no-repeat; background-position:right; padding-left:5px; padding-right:5px; }
Hierdas vorläufige Ergebnis.
LG
Reverend Hvor 1 year veröffentlicht # -
Hi,
ich habe in der css das "line-height" entfernt und nun scheint es zu passen.
Aber wie kann ich mit css einen aktiven Status realisieren?
Danke.
LGvor 1 year veröffentlicht # -
Hallo,
Ich bin gerade auf dem Weg in die Arbeit und hier am Handy kann ich das nur schwer zeigen.
Aber ein Hinweis zur Selbsthilfe:
Schau Dir den Quelltext im Browser an (also die fertig erzeugte Seite).
Im Menü wirst Du sehen, dass die aktiven Links eine extra CSS Klasse haben. Diese kannst Du verwenden um die aktiven Links anders zu formatieren als die normalen Links.
Viele Grüße,
Danielvor 1 year veröffentlicht #
Antwort
Du musst angemeldet sein, um einen Beitrag zu schreiben.
