ilch Forum » Allgemein » HTML, PHP, SQL,... » button statt imput im Login

Geschlossen
  1. Mo. 08.06.2015 16:57 Uhr #1
    User Pic
    Galle81 gelöschter User
    Hi zusammen,

    da ich meinen Loginbutton etwas aufhübschen möchte, wollte ich mal fragen, ob es irgendwelche Einschränkungen gibt, wenn man bei meiner Loginbox dieses: 

    <input style=" color:#ff3c00;height:25px;width:46px; border: 0 none ; cursor:pointer;" type="submit" name="user_login_sub" value="Login" />

    in folgendes ändert: 
    <button class="button_dark" type="submit" name="user_login_sub"><i class="fa fa-sign-in fa-4x"></i>&nbsp;<span style="font-weight:bold;">Login</span></button>


    Ich habe das Internet schon ein wenig durchstöbert, jedoch bin nicht fündig geworden.

    Mfg, Galle


    verwendete ilch Version: 1.1 O

    betroffene Homepage: www.fsc-clan.org
    0 Mitglieder finden den Beitrag gut.
  2. Mo. 08.06.2015 21:02 Uhr #2
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    wieso gibst du du den input nicht einfach eine class?
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  3. Mo. 08.06.2015 21:41 Uhr #3
    User Pic
    Galle81 gelöschter User
    Weil ich dann kein css Icon eingebaut bekomme.
    Es sei denn, dass mir jemand verrät wie ich es mit <imput> einfüge. lächeln
    0 Mitglieder finden den Beitrag gut.
  4. Mo. 08.06.2015 22:35 Uhr #4
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    input[type=submit] {
    background: .... ;
    color: ..... ;
    border: 0;
    }

    du kannst jedes input individuell anpassen, es ist nur die frage wie du es ansprichst


    Greetz Wizz
    0 Mitglieder finden den Beitrag gut.
  5. Mo. 08.06.2015 23:26 Uhr #5
    User Pic
    Galle81 gelöschter User
    Danke schon mal für die Antworten.
    Bekomme ich denn so auch nur bei dem Icon die Größe eingestellt , ohne die Größe der Schrift zu verändern?
    0 Mitglieder finden den Beitrag gut.
  6. Mo. 08.06.2015 23:51 Uhr #6
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    du kanst alle styles so anpassen wie du möchtest.
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  7. Di. 09.06.2015 00:20 Uhr #7
    User Pic
    Galle81 gelöschter User
    ZitatZitat geschrieben von Nex4T
    du kanst alle styles so anpassen wie du möchtest.


    Und wie?
    Hättest du ein Beispiel?
    0 Mitglieder finden den Beitrag gut.
  8. Di. 09.06.2015 00:45 Uhr #8
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    z.b damit? 
    width:300px;
height:300px;


    Wenn du von dem Icon sprichst das links neben login steht, das muss ja auch irgendwo definiert sein dementsprechend kanst du halt alles anpassen.

    Edit

    Ich sehe gerade du hast das icon direkt als Wert angelegt. Ich empfehle dir über ein span ein overlay zu machen. Sprich du überlagerst den Button mit deiner gewünschten graik etc. Schau dir mal meine WoW Designs an dort habe ich das ebenfalls verwendet.


    Zuletzt modifiziert von Nex4T am 09.06.2015 - 00:51:28
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  9. Di. 09.06.2015 10:22 Uhr #9
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Nimm einfach das button-Element, funktioniert genauso.

    Verschwendete Mühe mit dem input-Element zwinker
    externer Link
    0 Mitglieder finden den Beitrag gut.
  10. Di. 09.06.2015 11:00 Uhr #10
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Trotzdessen hat er als Value ein Icon das er größer haben möchte, wie möchtest du das bitte angehen ohne die schriftgröße zu ändern? Mir fällt spontan nur overlay ein.
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  11. Di. 09.06.2015 11:47 Uhr #11
    User Pic
    Galle81 gelöschter User
    Die Größe bei dem Icon lege ich z.B. so fest:
    <i class="fa fa-sign-in fa-4x"></i>
    Und so kann ich es nicht einfügen, wenn ich das Element <imput> verwende. traurig

    So sieht es im Moment aus, wenn ich <imput> verwenden möchte: 
     <input class="fa-input" type="submit" name="user_login_sub" value="&#xf090; Login" />

    Wenn ich der Klasse eine andere Größe z.B. font-size:12px zuweise, ändert sich selbstverständlich auch die Schriftgröße.

    Zum Thema <button> habe ich gelesen, dass es gerade bei älteren Browsern Probleme geben soll, allerdings sind diese Themen schon ein paar Jahre alt. lächeln

    Mfg, Galle
    0 Mitglieder finden den Beitrag gut.
  12. Di. 09.06.2015 12:40 Uhr #12
    User Pic
    Nex4T Moderator
    Registriert seit
    28.02.2007
    Beiträge
    3.414
    Beitragswertungen
    213 Beitragspunkte
    Wie gesagt ich empfehle dir ein span als overlay in dem du das icon als bildatei überlagern lässt.


    Zuletzt modifiziert von Nex4T am 09.06.2015 - 13:29:54
    while(!asleep()) sheep++;
    www.movely.biz
    www.webplant.eu
    0 Mitglieder finden den Beitrag gut.
  13. Di. 09.06.2015 14:31 Uhr #13
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Warum irgendwelche Workarounds, wenn ein button in allen modernen Browsern problemlos funktioniert?

    siehe Browsersupport: wiki.selfhtml.org/wiki/Referenz:HTML/button

    Mit einem IE vor Version 8, gab es jedoch gewisse Probleme. Nichts worüber man sich heute Gedanken machen braucht.

    Aus dem MSDN:
    In IE8 mode, the value attribute is submitted. In other document modes and earlier versions of Internet Explorer, the innerText value is submitted.

    EDIT:
    Ganz übersehen...

    ZitatZitat geschrieben von Nex4T
    Trotzdessen hat er als Value ein Icon das er größer haben möchte, wie möchtest du das bitte angehen ohne die schriftgröße zu ändern? Mir fällt spontan nur overlay ein.


    Wie er schon schrieb', indem man ein inline-Element nutzt.


    Zuletzt modifiziert von dastiii am 09.06.2015 - 14:41:27
    externer Link
    2 Mitglieder finden den Beitrag gut.
  14. Di. 09.06.2015 21:10 Uhr #14
    User Pic
    Galle81 gelöschter User
    Danke dastii für den Link.
    Ich habe es jetzt mit <button> eingebunden, da man scheinbar mehr Möglichkeiten hat.

    Muss man noch etwas bestimmtes beachten oder reicht es aus, wie ich es 1. Beitrag eingebunden habe?

    Mfg, Galle
    0 Mitglieder finden den Beitrag gut.
  15. Mi. 10.06.2015 22:34 Uhr #15
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    Sollte passen.
    externer Link
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten