Bilder als Hauptmenü-Buttons

  • Hallo :)

    ich frage mich schon länger, wie das nun im wbb4 geht, dass man ganz normale Bilder als Buttons machen kann, im Hauptmenü.

    Weiss das wer zufällig?

    Wäre nett, wenn mir das mal wer für Dumme erklärt, hab schon einiges bei .mainMenü ausprobiert, aber brings nicht zustande

  • Letztendlich geht das nur per Hintergrundbild oder per content, sofern man keine Templates bearbeitet:

    Beides ungetestet:
    1.:

    CSS
    #mainMenu li:nth-child(X) > a {
    background: url("../pfad/zum/bild.png") scroll no-repeat center center @wcfMainMenuBackgroundColor;
    text-indent: -9999px;
    }

    2.:

  • danke dir, @Black Rider :)

    was muss ich denn in das (x) schreiben?

    hab jetz mal eine 1 für den ersten Dings.. reingemacht..
    so:

    Code
    #mainMenu li:nth-child(1) > a {
    text-indent: -9999px;
    }
    #mainMenu li:nth-child(1) > a::before {
    content: url("../images/SC_easter/testbutton.png");
    display: block;
    }

    nur leider..tut sich da nix, ausser, dass der erste Part voll Hoch wird :S


    Liveansicht: http://sonlong-community.de/wbb/
    Stilname: SC_easter


    Edit: wenn ich beide Codes nehme.. sieht das so aus:

    ist aber auch net der erwünschte effekt.. ich hätte gern NUR den Button - und da drauf dann der Text :)

    ich muss noch viel CSS lernen oO .. :(

    Wer mich erreichen möchte, findet mich bei cls-design.com :*<3


    Einmal editiert, zuletzt von Bibini (5. März 2014 um 15:37)

  • super, schon besser :)

    nur, wie bekomm ich jetz die schrift AUF den button?

    (den hässlichen button lass ich eh net, war nur schnell so mal hingeworfen..aber wenn ichs mal weiss, WIE isses ja kein Thema mehr )

    mit padding oder marquee ansprechen? und wie bekomm ich den Rand oben ums Hauptmenü weg?

    das soll ja einfach nen stückchen unter dem Headerlogo sein.. und NUR die Buttons, so wie früher halt auch ...

    sorry, dass ich mich dämlich anstelle, aber bin erst in den Kinderschuhen von CSS und steh da grad echt auf dem Schlauch :(

    (wenn das mit CSS net geht, hab ich auch kein Problem mit Templateänderung, sofern mir wer hilft mit dem Code..wo und was ich wie ändern soll)

  • Ich bin zu blöd dazu :(

    wenn du Time hast, schau bitte nochmal :(

    muss ich da iwie noch mit z-index was machen? weil nu hängt der button ja ÜBER dem text ..

    und der Rahmen von dem ganzen menü ist ja auch noch da .. das soll auch noch weg ..

    muss ich nomma in Ruhe suchen, der abstand vom Menü zum Header ..müsste ja auch noch höher .. mhh..

    mein jetziger Code:

    Code
    #mainMenu li:nth-child(1) > a {
    position: relativ;
    }
    #mainMenu li:nth-child(1) > a::before {
    content: url("../images/SC_easter/testbutton.png");
    display: block;
    position: absolute;
    left:60px; top:330px; width:150px; height:100px;
    }
  • Zeile 2 ist schon einmal falsch. „relativ“ wird im Englischen anders geschrieben. Dadurch brauchst du dann auch nicht solche exorbitanten Werte in Zeile 8, wobei hier Höhen- und Breitenangabe gar nicht benötigt werden.

    Ändere den Code aber mal und entferne überall das > a.
    Dann musst du dem <a>-Element noch einen transparenten Hintergrund zuweisen.

  • So, hab weiter rumgebaut...

    Transparent hab ich nun schon mal :)

    danke für die tips :)

    nun hab ich aber immer noch 3 Probleme [Blockierte Grafik: http://bsmilies.de/yellow/traurig/heul_g.gif]

    1) der Header müsste noch ein ganzes Stück hoch, dass die Buttons schöner dazwischen passen und der Header nicht "abgeschnitten" wird (1)

    2) Der Text ist immer noch nicht auf den Buttons? (2) (dadurch fehlt natürlich auch der Link und man kanns net anklicken)


    3) die Striche da, gehen die auch noch weg? (3)


    ..wäre lieb, wenn mir da noch wer helfen könnte, eilt auch net soo..bin jetz eh erst mal away :)

    (kann ich net auch mal paar Fertigcodes bekommen *liebblinsel* )

    -----------------------------------------------------------------

    Edit: Stundenlanges selbst-probieren später..
    Habs nun selbst hin bekommen, zwar mit nem anderen Lösungsweg- aber Funktionell - hat sich also erledigt, danke für die zahlreiche Hilfestellung :)

    gute Nacht :)

    Wer mich erreichen möchte, findet mich bei cls-design.com :*<3


    4 Mal editiert, zuletzt von Bibini (7. März 2014 um 10:37)

  • Super das du das hinbekommen hast, da ist der Lerneffekt doch gleich größer. :)

    Jetzt müsstest du es nur noch für die mobilen Endgeräte anpassen.

    Tipp: Guck dir mal bei dem Blue Temtation Stil an, wie es mit den @media gemacht wurde :)

  • nein, sorry, ich habe nichts dazugelernt...
    ich habe lediglich nach stundemlangen rumprobieren.. immer noch nicht geschafft gehabt, dass die schrift ÜBER dem Button war..
    dann bekam ich meine Wut.. und blendete dieses ganze, dämliche Menü komplett aus...und hab mir eine Templateänderung vorgenommen und mir ein neues Menü eingebaut.. und wüsste nicht, wie ich das noch für irgendwelche mobilen Endgeräte anpassen könnte... aber auch egal, wenn nicht, lösch ich den stil wieder, sollte ich nicht noch eine Fertiglösung finden.. ich selbst hab jetz kein Nerv mehr da planlos weiter rumzupuzzlen... und das .........^ Media hab ich schon angeschaut, kapier ich nicht, ist mir zu hoch ...

    Wer mich erreichen möchte, findet mich bei cls-design.com :*<3


    2 Mal editiert, zuletzt von Bibini (7. März 2014 um 10:39)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!