Mengenfeld neben Warenborb

Thema wurde von Sommerzauber, 23. April 2018 erstellt.

  1. Sommerzauber
    Sommerzauber Erfahrener Benutzer
    Registriert seit:
    16. März 2018
    Beiträge:
    131
    Danke erhalten:
    41
    Danke vergeben:
    55
    #1 Sommerzauber, 23. April 2018
    Hallöchen, ich hätte gerne das SO gestaltet, wie im Demo-Shop #3 - finde aber keine Möglichkeit.

    upload_2018-4-23_17-22-25.png

    ... was muß ich tun?
     
  2. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    #2 barbara, 23. April 2018
    Versuche es mal mit den css-codes im eigenen css:

    Code:
    .input-number .btn-minus {
    top: auto;
    bottom: 1px;
    border-bottom: none;
    border-bottom-right-radius: 0px;
}
    Code:
    .input-number .btn-plus {
    border-top: none;
    height: 22px;
    border-left: 1px solid #ccc;
    border-top-right-radius: 0px;
}
    Code:
    .input-number .btn-minus, .input-number .btn-plus {
    position: absolute;
    top: 1px;
    z-index: 900;
    right: 1px;
    font-size: 13px;
    height: 23px;
    width: 40px;
    padding: 5px 0;
    border-right: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
    Code:
    .product-info .product-info-details .button-container {
    float: left;
    width: 66.66667%;
}
.product-info .product-info-details .input-number {
    width: 33.33333%;
}
    Eventuell muss noch etwas für die Größen eingetragen werden, das muss man sich dann aber bei Dir ansehen.
     
  3. Sommerzauber
    Sommerzauber Erfahrener Benutzer
    Registriert seit:
    16. März 2018
    Beiträge:
    131
    Danke erhalten:
    41
    Danke vergeben:
    55
    #3 Sommerzauber, 23. April 2018
    Gibt es irgendwas, was Du nicht weißt? :)

    Es muß sich aber irgendwo ein Fehler eingeschlichen haben, ich habe kein [ - ]

    upload_2018-4-23_23-34-55.png


    Folgendes habe ich jetzt per copy/paste in meiner CSS stehen:


    Code:
    /*Mengenfeld neben Warenborb */

.input-number .btn-minus {
    top: auto;
    bottom: 1px;
    border-bottom: none;
    border-bottom-right-radius: 0px;
}

.input-number .btn-plus {
    border-top: none;
    height: 22px;
    border-left: 1px solid #ccc;
    border-top-right-radius: 0px;
}

.input-number .btn-minus, .input-number .btn-plus {
    position: absolute;
    top: 1px;
    z-index: 900;
    right: 1px;
    font-size: 13px;
    height: 23px;
    width: 40px;
    padding: 5px 0;
    border-right: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.product-info .product-info-details .button-container {
    float: left;
    width: 66.66667%;
}


.product-info .product-info-details .input-number {
    width: 33.33333%;
}
     
  4. barbara
    barbara G-WARD 2014-2020
    Registriert seit:
    14. August 2011
    Beiträge:
    35.657
    Danke erhalten:
    11.371
    Danke vergeben:
    1.617
    #4 barbara, 23. April 2018
    Das ist eigentlich der Code vom Testshop 3, nur ohne die Bildschirmauflösung, die muss man auf Deinen Style anpassen.
    So ohne Den Code in Deinem Shop zu sehen, kann ich nur raten.
    Versuche es mal mit:
    Code:
    .input-number .btn-minus {
    top: auto !important;
hier der restliche Code....
     
  5. Sommerzauber
    Sommerzauber Erfahrener Benutzer
    Registriert seit:
    16. März 2018
    Beiträge:
    131
    Danke erhalten:
    41
    Danke vergeben:
    55
    #5 Sommerzauber, 23. April 2018
    Schau mal einer Guck ... was so ein "!important;" alles ausmacht :)

    Nun ist es da.

    D A N K E !