Menüleiste aus Pix

HerrBär

nabend,
und zwar geht es darum... ich versuche eine menüleiste aus pix/buttons zu erstellen. an sich nicht schwer und von der formatierung sieht auch alles so aus wie es soll.
allerdings würde ich diese leiste gern mit nem rollover/hover effekt belegen. zu jedem menüpunkt sind 2 bilder vorhanden. das eine, das immer angezeigt wird und das andere (wer hätts gedacht), wenn man mit der maus drüber geht.
des weiteren soll der "aktive" menüpunkt im menü zu erkennen sein. also das rollover bild sollte bleiben.

ich habe jetzt die idee gehabt es über ne class in der css zu definieren. dazu würde ich für jeden button ne class anlegen mit dem jeweiligen hintergrund.
mittels hover könnte ich einen anderen hintergrund erscheinen lassen. rollover wär damit irgendwie möglich.
die sache mit den "aktiven" menüpunkten leider nicht. dazu hab ich auch keine wirkliche idee. irgend ne if else schleife die abfragt welche seite gerade angezeigt wird.

ich fänd es super, wenn mir einer von euch helfen könnte.
dieses relativ kleine element hat mir schon so viel zeit gestohlen:)

angucken könnt ihr euch die seite hier: Ad-Lips

p.s.: die style.css ist etwas "unaufgeräumt". ich bitte das zu entschuldigen, falls jemand rein schauen sollte.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

perryzelda

meinst du die "über uns" links?
ich weiss nicht, ob ich das richtig gesehen habe, aber die hast du händisch verlinkt. stimmt das ?

HerrBär

ja, genau die. habe sie zum testen rein gepackt. später werden es natürlich andere.
zur zeit ist das ganze ein teil des headers und ich habe eine class angelegt und dann einfach diese über n div im header eingebunden und verlinkt, ja, von hand:)

wie schon gesagt... ist alles noch ein großer versuch:)

perryzelda

wenn das alles seiten werden, kannst du die ja mit wp_list_pages einbinden.
dann hast du für die aktive seite immer eine eigene klasse. und die startseite mit

PHP

<?php if ( is_home()){ ?> id="home"<?php } ?>>

dann hast du dort auch eine aktive klasse Und diese kannst du dann generell über css gestalten

wenn ichs richtig verstanden habe, was du erreichen willst.

HerrBär

hi, danke für deine antwort.
es werden zum großteil seiten. die home bzw. news seite wird keine statische seite sein sondern eine categorie. aus dieser lasse ich dann eine bestimmte anzahl der post anzeigen.

wie genau funktioniert das mit wp_list_pages? damit hab ich noch keine erfahrungen...

perryzelda

vielleicht hilft dir das weiter

Template Tags

probier mal die verschiedenen möglichkeiten durch, du findest dabei sicher das passende

kaiser

funktioniert ganz einfach mit stylesheet i Deiner style.css

Du findest dort folgenden Eintrag

Code

.button1 {
    background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtest.gif') no-repeat top center;
    margin: 0;
    padding: 0;
    height: 37px;
    width: 67px;
    float: left;
    }
    
.button2 {
    background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtest.gif') no-repeat top center;
    margin: 0;
    padding: 0;
    height: 37px;
    width: 67px;
    float: left;
    }

Alles anzeigen

und den änderst Du wie folgt. (Tip: Schau einmal auf Css4You die css Selektoren I & II durch)

Code

.button1 a, .button2 a {
    background: no-repeat top center;
    margin: 0;
    padding: 0;
    height: 37px;
    width: 67px;
    float: left;
    }
.button1 a, .button2 a {
    background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtest.gif');
}


.button1 a:active, .button2 a:active {
    background: url('http://www.gravity-zone.de/adlips/wp-content/uploads/2009/01/testtestXY.gif');
}

Alles anzeigen

Die letzte css-Definition kannst Du mit :hover (Mouse over) und :focus (Mouseklick) versehen. Bei focus würde ich noch outline:none; hinzufügen um die gepunktete Aussenlinie vom FF weg zu bekommen.

Und diesen "Tip" wiederhole ich nochmals: Lies Dir bitte die CSS-Selektoren auf Css4You durch. Das erspart hier unnötige Antworten und hilft Dir ungemein a) Zeit zu sparen b) zu verstehen was Du tust. Und c) ist es eigentlich ganz einfach, wenn man sich die 10-20min. einmal Zeit nimmt. :-D

Ein weiterer "Tip": Firefox und AddOn: Webdeveloper-Toolbar. Da kannst Du Dir mit [Strg]+[E] alle Stylesheets anschauen und direkt ändern. Die Änderungen bleiben nur solange bestehen, wie Du die Seite angewählt hast. Ist sehr angenehm zum Ausprobieren und Lernen. Ich schreib meine Dinge dort alle rein, kopier sie dann ins Originalfile und lad das hoch. Dann neu laden und anschauen und weiter verändern.

Gutest Gelingen!

HerrBär

vielen dank für die hilfreichen tipps und hilfestellungen:)
zum großteil sieht es schon so aus, wie ich mir das vorstelle.
zum roll over habe ich noch eine weitere möglichkeit gefunden, die ein preload ersetzt. wer intresse hat kann hier: CSS 2: schnelle Rollover-Menüs ohne Preload nachlesen wie es geht.

in diesem sinne nochmals danke und ein schönes we

perryzelda

eines ist mir noch aufgefalllen: die seite wackelt, wenn inhalt höher als das browserfenster ( wenn du den IE benützt, siehst du das nicht, sonst schon )

das kannst du abstellen mit

Code

html    {margin-bottom:1px;  min-height:100%;   }

HerrBär

oh, super!
genau das ist mir eben auch aufgefallen. vielen vielen dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Menüleiste aus Pix

Jetzt mitmachen!