Seite in die Länge gezogen - CSS Style

  • Hallo,


    Die Integration der Buchungsmaske hat funktioniert, nur die Eingabemaske wird bereits in der Vorschau der Seite in die Länge gezogen -> siehe unter http://www.karolingerhof.de/buchung.html
    ( im Bearbeitungsmodus sind die Abstände noch so wie sie sein sollten )


    Vermutlich benötige ich ein CSS Style, aber als HTML- Anfänger bin ich aktuell überfordert. Vieleicht kann mir da jemand weiterhelfen.


    Outdoor Responsive

    Version 12.5.7 Business


    Beste Grüße

    Richard

  • Hallo,

    bevor ich mich auf die Suche mache :)
    Wie hast du denn die Buchungsmaske im ZP eingebunden, mittels IFrame oder Code oder..?
    Schreib mal was dazu, bzw. poste das eingefügte hier.
    Dann kann man das mal nachstellen und so evtl. den Fehler finden.

    Gruß
    Jochen

  • Hallo,

    siehe dazu auch meinen Eintrag-> ZP Forum 19.01.2016

    den folgenden Code (Datepicker) habe ich per Quelltext eingebunden, dann hat alles funktioniert außer die in die Länge gezogene Seite

    <div class="hoteliers-form">
    <form class="hoteliers-form__form">
    <ul class="hoteliers-form__list">
    <li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_arrival"><label class="hoteliers-form__label" for="">Anreise</label>
    <div class="hoteliers-form__form-field-container"><input class="hoteliers-form__form-field"> <svg class="hoteliers-form__icon hoteliers-form__icon--no-event" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 400 400"><path fill="#000" d="M28 4h-3v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-10v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-3c-1.1 0-2 0.9-2 2v22c0 1.1 0.9 2 2 2h24c1.1 0 2-0.9 2-2v-22c0-1.1-0.9-2-2-2zM28 28c0 0 0 0 0 0h-24c0 0 0 0 0 0v-18h24v18zM9 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM23 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM18 12h-10v2h8v4h-8v2h8v4h-8v2h10zM22 26h2v-14h-4v2h2zM27.3 30.8h-22.5c-1.1 0-2-0.6-2-1.7v1c0 1.1 0.9 2 2 2h22.5c1.1 0 2-0.9 2-2v-1c0 1.1-0.9 1.8-2 1.8z"></path></svg></div>
    </li><li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_departure"><label class="hoteliers-form__label" for="">Abreise</label>
    <div class="hoteliers-form__form-field-container"><input class="hoteliers-form__form-field"> <svg class="hoteliers-form__icon hoteliers-form__icon--no-event" xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 400 400"><path fill="#000" d="M28 4h-3v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-10v1c0 1.1-0.9 2-2 2s-2-0.9-2-2v-1h-3c-1.1 0-2 0.9-2 2v22c0 1.1 0.9 2 2 2h24c1.1 0 2-0.9 2-2v-22c0-1.1-0.9-2-2-2zM28 28c0 0 0 0 0 0h-24c0 0 0 0 0 0v-18h24v18zM9 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM23 6c0.6 0 1-0.4 1-1v-4c0-0.6-0.4-1-1-1s-1 0.4-1 1v4c0 0.6 0.4 1 1 1zM18 12h-10v2h8v4h-8v2h8v4h-8v2h10zM22 26h2v-14h-4v2h2zM27.3 30.8h-22.5c-1.1 0-2-0.6-2-1.7v1c0 1.1 0.9 2 2 2h22.5c1.1 0 2-0.9 2-2v-1c0 1.1-0.9 1.8-2 1.8z"></path></svg></div>
    </li><li class="hoteliers-form__grid-item js-grid-item" data-item="hoteliers_submit"><label class="hoteliers-form__label hoteliers-form__label--hidden" for="">Verfügbarkeit</label><button class="hoteliers-form__form-field hoteliers-form__btn">prüfen</button>
    </li></ul><!-- / hoteliers-form__list --></form></div>

    Gruß
    Richard

  • Hallo Richard,

    ich habe eben die "länge" durch ändern des Wertes "400" bei beiden Einträgen im Code "viewbox="0 0 400 400" auf z.B. "50" kleiner machen können.
    Im Code rot markiert.

    Kannst es so ja mal versuchen, ob das dann für dich passend wäre.

    Gruß
    Jochen

Jetzt mitmachen!

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