Seitlich einschwebender Button

  • Hallo,

    ich habe einen Facebook Button, den ich am rechten Rand platziere. Bei hover klappte ein breiterer Facebook Button darüber, sodaß es aussieht, als ob der Button sich herausschiebt. Wie kann ich diesen Vorgang langsam ablaufen lassen. Bin ich hier mit meinem Ansatz am richtigen Weg?

  • Das Ganze ist nur ein minimaler Dummy um das Problem zu zeigen.

    Das HTML Gerüst hat der Editor generiert, Code und CSS habe ich einer Seite im Netz entnommen. Du solltest dich also damit an Macromedia und dem Ersteller der Seite mit dem Facebook Button wenden!

    Du willst es doch auch richtig lernen oder ?

    Ich weiß gar nicht was du da hast ,html3 oder so.

    Da wird dir keiner einer html3 Lösung posten.

    Dein Code zeigt bei mir keine Funktion, da spielt der Browser nicht mit.

    Wenn du Beitrag 2# befolgt hast könntet du mal unter Css transition oder @keyframes googeln , jenachdem, was du da vor hast.

  • Ich habe das Ganze jetzt so gelöst: Ich habe ein längliches Image erstellt, das ich mittels negativem right nach außen verschiebe. Bei hover setze ich right auf 0 und verlangsame die Bewegung mit transition.

    Ich weiß nicht, ob es noch eine elegantere Lösung gibt, aber zumindest funktionierts so.


    Dreamweaver wegschmeißen ist keine Lösung solange ich keinen besseren Editor finde, hat eine Menge gekostet!

    Bei mir funktioniert das Beispiel problemlos mit FF neueste Version.

    Richtig lernen kann ich nur, wenn sinnvolle Antworten kommen, aus denen ich lernen kann. Den Dummy-HTML-Code drumherum zu kritisieren hilft nicht, denn der war ja nur fürs Beispiel gedacht, hat mit der Problemstellung nichts zu tun und findet sich in der Originalpage auch nicht wieder.

  • DreamWeaver produziert nun mal schlechten und zum Teil veralteten HTML-Code, damit lernst du höchstens, wie man es nicht macht. Es gibt im Internet genügend Seiten, auf denen man HTML und CSS lernen kann und das inkl. Beispielen. Wenn du ernsthaft HTML und CSS lernen willst, dann deinstalliere DreamWeaver und nimm einen guten Editor w.z.B. Notepad++

  • Ich weiß nicht, ob es noch eine elegantere Lösung gibt, aber zumindest funktionierts so.

    Wenn es nur um diese Funktion geht ist es ok.

    Es kommt auch immer drauf an wie die ganze Seite aussieht usw.


    Richtig lernen kann ich nur, wenn sinnvolle Antworten kommen, aus denen ich lernen kann.

    Ich sagte goggle mal nach transition und du hast es hinbekommen.

    Also man sieht , wenn man es will dann klappt das auch.

    Der restliche Html Code ist trotzdem Mist .

    Deswegen sage ich jetzt mal,

    https://www.designerinaction.d…development/aufbau-html5/


    Der Code in den Link sieht mir aktuell aus, konnte da jetzt nix sehen was Müll ist.

    Damit kannst du dir selber Seiten zusammen bauen.

    Wenn du Das Grundgerüßt und so verstanden hast geht es eigentlich recht einfach.


    Wenn du es aber wirklich lernen willst verzichte auf DW und versuche es gleich richtig zu lernen.

    Auch wenn wir veralteten Code schlecht reden meinen wir es nicht Böse.

    Irgendwann wirst du im Forum fragen warum meine Seite zerschossen ist.

    Antwort von uns: Die neuen Browser lesen den veraltet Code nicht mehr , deswegen solltest du versuchen immer up to date zu sein.

  • Dreamweaver wegschmeißen ist keine Lösung solange ich keinen besseren Editor finde, hat eine Menge gekostet!

    Da hättest du dich besser mal informiert, es gibt sehr gute Editoren, die gratis sind:

    - VisualStudio Code (mein Lieblingseditor)

    - Brackets

    - Atom

    - Sublime Text


    Von DreamWaver halte ich nichts, allein schon wegen dem hohen Preis. Hast du den neusten DreamWaver? Kann mir kaum vorstellen, dass der neuste kein HTML 5 kann.

  • Da Dreamweaver anscheinend ein rotes Tuch ist :): Ich verwende davon zu 99.9% nur den Sourcecode-Editor und die FTP Funktion, den WYSIWYG Editor überhaupt nicht, da der nichts bringt wenn HTML und CSS getrennt sind.


    Meine produktiven Seiten sind auch aufgebaut wie bei designerinaction beschrieben: Meta, header, nav, footer, main-content und der ist in Spalten unterteilt. Nur für den Test mit den einschwebenden Buttons habe ich die DW Default-Seite benutzt, damit das Beispiel aufs Minimum reduziert ist.

  • Ist bekannt, die Seite ist aber schon rund 20 Jahre alt, CoRa gibt es nicht mehr und ein Update rentiert sich deshalb nicht.

    Oder übernehmt ihr gerne Aufträge unentgeltlich nur damit etwas aktuell ist, das nicht mehr benötigt wird?

    Falls ja, bitte melden, da habe ich sicher ab und zu was für euch!

  • Meine Seiten habe ich inzwischen durch den validator.w3.org prüfen lassen, CSS Validatoren gibt es ebenfalls zur Prüfung des CSS.

    Gibt es aber auch eine Seite, die einem sagt, für welche CSS Statements man browserspezifische Einträge braucht, z.B:

    für transition braucht man auch

    -webkit-transition

    -moz-transition

    -o-transition