Bräuchte hilfe bei "buttons" auf meiner Website

1. offizieller Beitrag

    Hey People,

    ich arbeite an einer Website und habe auf einer anderen etwas gesehen was ich gut fand, und nun möchte ich dies auf meiner auch haben. Eine Information am Rande, ich arbeite mir Jimdo wo nicht jeder code funktioniert speziell <style> nicht (glaub ich). Also hätte da den code von der Website herauskopiert falls das jemanden hilft. Achja es ist auch javascript dabei :-D.

    Ich selber bin ein noob im scripten und programmieren, kann nur basics.

    Was willst du den davon genau haben ?
    Alle 24 Butttons ,bzw Linnks mit den kleinen Bildern darinne,oder nur bestimmte ?

    Du sagtest du hast den Code Kopiert. Hast du den Kopierten Code mal bei dir auf der seite ausprobiert, und wenn ja was ist passiert ?

    EDIT: Habe mal gerade dein Code getestet. Der fuktioniert doch . Sieht genau so aus wie auf den Bild. Jetzt mußt du mal erklären was du genau willst weil verstehe das gerade nicht

    Genau ich weiß nich nicht wie viele buttons ich haben will nur mal einen mit dem css etc und dann kopiere ich die buttons nach der Reihe z.b.
    Und wenn ich den code hineinkopiere ist zwar alles da, aber ich kann den code nicht editieren denn das css ist 240 word seiten lang und da meine Website komplett weiß ist, sind die buttons Rechteckig grau eingerahmt was auch komplett blöd aussieht

    Also die ganze Css Datei durchsuchen nach den Original angaben habe ich auch keine lust zu
    Ich habe mal einen Button nachgebaut damit du weißt wie es geht
    Nur ist die frage wie du das bei deinen Jimdo eingeben mußt.

    Ich poste dir mal den Code wie man das auf einer normalen webseite einfügen würde

    HTML
    <!DOCTYPE html><htmlang="de"><head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1"><title>Reifenangebot Bild</title><style>  body{  background:grey;}div{  margin:0 auto;  height:153px;  width:266px;  border:2px solid white;  background:lightgrey;}#out{  margin-left:calc(50% - 25px);}#in{    background-image: url(https://www.autohaus-grufeneder.at/++theme++poi.plonetheme.hdlint/++resource++poi.plonetheme.hdlint/sprites/icons_leistungen.svg);    background-position: 0px -93px;    background-size: 460px 740px;    display: inline-block;  margin-top:30px;  height:40px;  width:50px;}div:hover{    background:#f93;}div:hover >span #in{    background-position: 0px -93px;    background-size: 460px 646px;}div:hover > h3{  color:white;}h3{  text-align:center;  color:black;  font-weight:500;}</style>  </head>  <body><div> <span id="out">  <span id="in"></span></span><h3>Reifenangebot</h3></div></body></html>

    Wenn du Inline styls brauchen solltes( Was Mist wäre ) mußt du die style angaben mit in den Element reinschreiben ( style="" ).
    Fals du es nicht hin bekommst dann meld dich

    Hi basti,

    Dankeschön für dieses script!
    Nun da ich aber es nicht vollkommen kopieren will, währe es möglich das orange zu ändern sobald der Mauszeiger darauf ist.
    Und es sollte sich ein Text ausklappen durch das klicken.;-)

    Edit: z.b onlick auf den button der den Text sicherbar macht, denn ich finde nichts, wo der text sich mit einer animation darunter aufklappt

    Einmal editiert, zuletzt von iCenTeX (1. Oktober 2018 um 09:13)

    Das die orange farbe weg geht oder nee andere farbe das solltest du ja selber wechseln können. Wie meinst du den das mit den Text einblenden ? Da gibt es soviele animationen wie man das machen könnte.
    Zb so.
    https://basti1012.bplaced.net/index.php?ordn…_meiner_Website
    Ist zwar nicht perfekt ,aber das soll zeigen wie man es machen könnte und das man das ohne Javascript machen kann.

    Wenn du genau weißt wie es aussehen soll dann beschreibe es mal so gut wie möglich , dann kann man da mal was machen.

    Hab da auch was gefunden mit dem aufklappen nur hat das extrem viel js. Und jimdo nimmt kein <style> und ich weiß nicht ob es js auch nimmt. Also css und html muss in einem sein ohne <style>

    Edit v1 : <style> funkitoniert und wenn ich auf jimdo ein element html erstelle den code hineinkopiere von deinem Beipsiel https://codepen.io/basti1012/pen/oaXGNO und das css in <style> funktioniert alles außer wenn ich darauf klicke passiert nichts
    Edit v2: nun sieht es so aus, wenn ich es im <style> mache, jimdo verwirrt mich xD

    2 Mal editiert, zuletzt von iCenTeX (1. Oktober 2018 um 13:44)

    Hast du das schon online gestellt ? Oder kannst du das mal online stellen ? Weil so kann ich jetzt nicht helfen. Wenn bei jimdo <style></style> Funktioniert , was du einfach testen kannst

    Code
    <style>
*{
background:red;
}
</style>


    ( Jetzt sollte fast alles rot sein , dann geht dein <style>auch )
    Dann sollte der Button von mir auch gehen .
    Ich weiß nicht ob bei Jimdo irgendwas anders ist ,vieleicht funktioniert da der Checkbox hack nicht oder transition. Ansonsten ist das nur Css ohne Javascript und sollte somit eigentlich funktionieren

    Du hast ja auch einen ganz anderen Code wie ich genommen. <label> Fehlt , die ganzen css anweisungen mit :cehecked fehlen ,zumindest kann ich sie nicht finden. Das kann so nicht gehen. Kopiere doch mal meinen code 1 zu 1 da rein und teste dann das mal , dann sollte das auch gehen.

    Gerade <label> wird hier gebraucht damit der checkbox hack geht. Vieleicht gehtes auch anders aber habe ich noch nie probiert. Nur in meinen Code wird er gebraucht und das fehlt bei dir komplett. Die Css anweisungen mit :checked sagen aus ,das bei gescheckter ( angeklickter ) checkbox das untere Bild rauskommen soll. Man könnte das auch mit Javascript machen doch wozu wenn es auch ohne geht. Also probier das mal aus und kopiere den ganzen Codeda rein. Jeder Code hat da ein sinn. Unbrauchbaren Code gibt es in der Variante gerade nicht und gerade das mit der Checkbox ist hier wichtig