Radio Button css

ElefantElefant Forum Zuschauer
bearbeitet Juni 2008 in TYPO3 Extensions
Hallo,
Die Doku von Powermail ist ist schon spitzenmäßige und in der neuen Version auch hinweise zu css. Leider sind die Infos für mich noch nicht ausreichend .

Ich bekomme die Radio Button einfach mit css nicht formatiert.:confused:
Wie bekommen ich den Titel, Label formatiert?

Gruß Eckhard

Kommentare

  • einpraegsam.neteinpraegsam.net Forum Crack
    bearbeitet März 2008
    Elefant schrieb: »
    Hallo,
    Die Doku von Powermail ist ist schon spitzenmäßige und in der neuen Version auch hinweise zu css. Leider sind die Infos für mich noch nicht ausreichend .

    Ich bekomme die Radio Button einfach mit css nicht formatiert.:confused:
    Wie bekommen ich den Titel, Label formatiert?

    Gruß Eckhard

    Wie sollen diese denn ausschauen? Wie ist dein HTML Quellcode?
  • ElefantElefant Forum Zuschauer
    bearbeitet März 2008
    wunschtacho schrieb: »
    Wie sollen diese denn ausschauen? Wie ist dein HTML Quellcode?

    Ich möchte es erstmal nur so haben wie in der Doku.
    In einer Zeile "Anrede Frau O Herr O" und in der nächste Vorname _____

    Habe ich bis jetzt nur eins für die gesamte Webseite.
  • einpraegsam.neteinpraegsam.net Forum Crack
    bearbeitet März 2008
    Hier mal ein Beispiel CSS zu dieser Seite:
    [HTML]
    fieldset.tx-powermail-pi1_fieldset_3 input.powermail_uid42 {
    width: 20px;
    border: none;
    }
    input.powermail_subuid42_1 {
    margin-left: 60px;
    }
    fieldset.tx-powermail-pi1_fieldset_3 div.tx_powermail_pi1_fieldwrap_html_42 label {
    display: inline;
    float: none;
    clear: none;
    margin: 0;
    width: 20px;
    }
    fieldset.tx-powermail-pi1_fieldset_3 p.tx_powermail_pi1_fieldwrap_html_radio_title {
    display: block;
    float: left;
    width: 100px;
    margin-right: 10px;
    }
    div.tx_powermail_pi1_fieldwrap_html {
    clear: both;
    }
    [/HTML]
  • SpeedylettiSpeedyletti Forum Aktivist
    bearbeitet April 2008
    hallo zusammen, ich (wie viele andere) kämpfe mit dem selben problem. eigentlich dachte ich, dass ich einigermassen fit mit css bin, jedoch powermail bringt mich zum zweifeln.

    leider bekomme ich eine normale darstellung welche in ie & firefox schön dargestellt wird nicht hin. entweder ist alles durcheinander oder je nach browser sind die check & radiobuttons unter oder nebeneinander.

    schön wäre es, wenn jemand ein standart css hätte, welches für alle "normalen" powermailformulare auf einer seite funktionieren würde.

    wunschdarstellung:

    beschreibung: [eingabefeld]
    beschreibung: [eingabefeld]
    beschreibung: [eingabefeld]
    checkboxen : [untereinander]

    [absenden]

    merci für eure inputs - marcel
    grüsse speedyletti
  • einpraegsam.neteinpraegsam.net Forum Crack
    bearbeitet April 2008
    Beispiel: Checkboxen untereinander (tmpl_fieldwrap.html)
    [HTML]
    <!-- ###POWERMAIL_FIELDWRAP_HTML_CHECK### begin -->

    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_check tx_powermail_pi1_fieldwrap_html_###POWERMAIL_FIELD_UID###">
    <p class="tx_powermail_pi1_fieldwrap_html_checkbox_title">###LABEL_MAIN######MANDATORY_SYMBOL###</p>
    <!-- ###CONTENT### begin -->
    <!-- ###ITEM### begin -->
    <label for="###LABEL_NAME###">###LABEL###</label>
    <input type="checkbox" ###NAME######VALUE######CLASS######ID######CHECKED###/>
    <!-- ###ITEM### end -->
    <!-- ###CONTENT### end -->
    </div>
    <!-- ###POWERMAIL_FIELDWRAP_HTML_CHECK### end -->
    [/HTML]

    Ersetzen durch:
    [HTML]
    <!-- ###POWERMAIL_FIELDWRAP_HTML_CHECK### begin -->
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_check tx_powermail_pi1_fieldwrap_html_###POWERMAIL_FIELD_UID###">
    <p class="tx_powermail_pi1_fieldwrap_html_checkbox_title">###LABEL_MAIN######MANDATORY_SYMBOL###</p>
    <!-- ###CONTENT### begin -->
    <!-- ###ITEM### begin -->
    <div class="deineklasse">
    <label for="###LABEL_NAME###">###LABEL###</label>
    <input type="checkbox" ###NAME######VALUE######CLASS######ID######CHECKED###/>
    </div>
    <!-- ###ITEM### end -->
    <!-- ###CONTENT### end -->
    </div>
    <!-- ###POWERMAIL_FIELDWRAP_HTML_CHECK### end -->
    [/HTML]
  • SpeedylettiSpeedyletti Forum Aktivist
    bearbeitet April 2008
    hallo wunschtacho,

    whow, das ging ja schnell! und hat wunderbar geklappt.
    die checkboxen sind jetzt untereinander - die radio buttons noch nicht.

    warum hast du dies in html und nicht im css als änderung vorgeschlagen?

    gruss marcel
    grüsse speedyletti
  • einpraegsam.neteinpraegsam.net Forum Crack
    bearbeitet April 2008
    Speedyletti schrieb: »
    die checkboxen sind jetzt untereinander - die radio buttons noch nicht.

    Das kannst du natürlich auch bei den Radio Buttons machen

    Speedyletti schrieb: »
    warum hast du dies in html und nicht im css als änderung vorgeschlagen?

    Das kannst du auch über CSS lösen wenn du magst. Mein Kollege und ich finden aber ein weiteres DIV besser, weil man mehr Möglichkeiten hat.
  • SpeedylettiSpeedyletti Forum Aktivist
    bearbeitet April 2008
    wunschtacho, merci für deine hilfe, es hat mich gefreut mit dem powermail meister selbst zu diskutieren! und vielen dank für euern einsatz und das engagement.

    grüsse aus der schweiz marcel
    grüsse speedyletti
  • SpeedylettiSpeedyletti Forum Aktivist
    bearbeitet April 2008
    Leider stehe ich schon wieder an :confused:

    im internet explorer werden die check, - und radioboxen in der mitte und mit rahmen dargestellt, im firefox sind jetzt wenigstens mal die rahmen weg, jedoch bringe ich diese auch nicht nach links. wenn ich versuche den submit button nach rechts zu verschieben (unter die eingabefelder) geschieht auch nichts.

    ich wollte das powermail "nur" nutzen, damit an den absender eine antwortmail generiert werden kann, da dies ja mit dem formmailer nicht geht.

    ich sehe jetzt dann nur noch als einige lösung, dass ich das formular in eine tabelle rein haue, damit alles dort ist wo es sein soll, jedoch kann das auch nicht die lösung sein.

    gibt es denn noch keine css vorlagen für das powermail welche eingesetzt werden können?

    merci für eure tipps


    Ansicht im Internet Explorer

    pm-ie.jpg


    Ansicht im Firefox

    pm-fox.jpg


    HTML Code

    [html]<div class="contentelement">
    <div class="tx-powermail-pi1">
    <div class="tx-powermail-pi1_formwrap tx-powermail-pi1_formwrap_8">
    <form name="testformular" id="testformular" action="index.php?id=16&tx_powermail_pi1[mailID]=8&cHash=aba361147a" method="post" class="tx_powermail_pi1_form" enctype="multipart/form-data">
    <fieldset class="tx-powermail-pi1_fieldset tx-powermail-pi1_fieldset_formular tx-powermail-pi1_fieldset_1" id="tx-powermail-pi1_fieldset_1">
    <legend>Formular</legend>
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_text tx_powermail_pi1_fieldwrap_html_1">
    <label for="uid1">Name:<span class="powermail_mandatory">*</span></label>
    <input type="text" name="tx_powermail_pi1[uid1]" value="" class="required powermail_testformular powermail_text powermail_uid1" id="uid1" />
    </div>
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_text tx_powermail_pi1_fieldwrap_html_2">
    <label for="uid2">Email:<span class="powermail_mandatory">*</span></label>
    <input type="text" name="tx_powermail_pi1[uid2]" value="" class="required validate-email powermail_testformular powermail_text powermail_uid2" id="uid2" />
    </div>
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_select tx_powermail_pi1_fieldwrap_html_4">
    <label for="uid4">Auswahlbox:</label>
    <div class="auswahlbox">
    <select name="tx_powermail_pi1[uid4]" id="uid4" class="powermail_testformular powermail_select powermail_uid4" >
    <option value="bitte wählen Sie aus folgenden Möglichkeiten:">bitte wählen Sie aus folgenden Möglichkeiten:</option>
    <option value="1. Auswahl">1. Auswahl</option>
    <option value="2 Auswahl">2 Auswahl</option>
    <option value="3 Auswahl">3 Auswahl</option>
    <option value="4 Auswahl">4 Auswahl</option>
    <option value="5 Auswahl">5 Auswahl</option>
    </select>
    </div>
    </div>
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_check tx_powermail_pi1_fieldwrap_html_5">
    <p class="tx_powermail_pi1_fieldwrap_html_checkbox_title">Checkbox:</p>
    <div class="checkbox">
    <label for="uid5_0">1. Option</label>
    <input type="checkbox" name="tx_powermail_pi1[uid5][0]" value="1. Option" class="powermail_testformular powermail_check powermail_uid5 powermail_subuid5_0" id="uid5_0" />
    </div>
    <div class="checkbox">
    <label for="uid5_1">2. Option</label>
    <input type="checkbox" name="tx_powermail_pi1[uid5][1]" value="2. Option" class="powermail_testformular powermail_check powermail_uid5 powermail_subuid5_1" id="uid5_1" />
    </div>
    <div class="checkbox">
    <label for="uid5_2">3. Option</label>
    <input type="checkbox" name="tx_powermail_pi1[uid5][2]" value="3. Option" class="powermail_testformular powermail_check powermail_uid5 powermail_subuid5_2" id="uid5_2" />
    </div>
    </div>
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_radio tx_powermail_pi1_fieldwrap_html_6">
    <p class="tx_powermail_pi1_fieldwrap_html_radio_title">Radiobutton:</p>
    <div class="radiobutton">
    <label for="uid6_0">1. Radiobutton</label>
    <input type="radio" name="tx_powermail_pi1[uid6]" value="1. Radiobutton" class="powermail_testformular powermail_radio powermail_uid6 powermail_subuid6_0" id="uid6_0" />
    </div>
    <div class="radiobutton">
    <label for="uid6_1">2. Radiobutton</label>
    <input type="radio" name="tx_powermail_pi1[uid6]" value="2. Radiobutton" class="powermail_testformular powermail_radio powermail_uid6 powermail_subuid6_1" id="uid6_1" />
    </div>
    <div class="radiobutton">
    <label for="uid6_2">3. Radiobutton</label>
    <input type="radio" name="tx_powermail_pi1[uid6]" value="3. Radiobutton" class="powermail_testformular powermail_radio powermail_uid6 powermail_subuid6_2" id="uid6_2" />
    </div>
    </div>
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_file tx_powermail_pi1_fieldwrap_html_7">
    <label for="uid7">Datei Upload:</label>
    <input type="file" name="tx_powermail_pi1[uid7]" class="powermail_testformular powermail_file powermail_uid7" id="uid7" />
    </div>
    <div class="sendebutton">
    <div class="tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_submit tx_powermail_pi1_fieldwrap_html_3">
    <input type="submit" value="absenden" class="powermail_testformular powermail_submit powermail_submit_uid3" />
    </div>
    </div>
    </fieldset>
    </form>
    <script type="text/javascript">
    function formCallback(result, form) {
    window.status = "valiation callback for form '" + form.id + "': result = " + result;
    }
    var valid = new Validation('testformular', {immediate : true, onFormValidate : formCallback});
    </script>
    </div>
    </div>
    </div>
    </div>

    [/html]
    CSS Code
    /* POWERMAIL FORMULAR*/
    
    /*Validation*/
    input.validation-failed {
        background-color: #f2f2f2;
    }
    /*Validation*/
    div.powermail_mandatory_js {
        color: #372D23;
        font-weight: normal;
    }
    
    /*LABEL = Beschriftung - ok */
    fieldset label {
        display: block;
        width: 120px;
        float: left;
        clear: left;
    }
    /*Eingabefeld - ok */
    fieldset input {
       display: block;
       width: 220px;
       border: 1px solid #999999;
       float: left;
    }
    /*Auswahlbox - ok */
    fieldset select {
       display: block;
       width: 220px;
       float: left;
    }
    /*eigene class in tmpl_fieldwrap.html*/
    .checkbox {
        clear: both;
        height: 5px;
    }
    
    .checkbox label{
        }
    .tx_powermail_pi1_fieldwrap_html_checkbox_title {
        padding-top: 10px;
    }
    .radiobutton {
        clear: both;
        height: 5px;
    }
    .tx_powermail_pi1_fieldwrap_html_radio_title {
        padding-top: 10px;
    }
    tx_powermail_pi1_fieldwrap_html tx_powermail_pi1_fieldwrap_html_radio tx_powermail_pi1_fieldwrap_html_6 input {
        border-top-style: none;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }
    .sendebutton {
        clear: both;
    }
    .auswahlbox option powermail_testformular powermail_select {
        padding-left: 120px;
    }
    
    /* Radio & Checkbok - clear: both */
    .tx_powermail_pi1_fieldwrap_html_radio_title,
    .tx_powermail_pi1_fieldwrap_html_checkbox_title {
        clear: both;
    }
    input.powermail_submit {
        border: 1px solid #999999;
        margin-top: 10px;
    }
    
    grüsse speedyletti
  • einpraegsam.neteinpraegsam.net Forum Crack
    bearbeitet April 2008
    [HTML]fieldset input {
    display: block;
    width: 220px;
    border: 1px solid #999999;
    float: left;
    }[/HTML]

    Du gibst jedem input Feld eine Breite von 220px - also auch deinen Checkboxen...

    [HTML]
    fieldset input {
    display: block;
    width: 220px;
    border: 1px solid #999999;
    float: left;
    }
    fieldset input.powermail_check {
    width: 15px;
    }
    [/HTML]
  • SpeedylettiSpeedyletti Forum Aktivist
    bearbeitet April 2008
    langsam aber sicher komme ich dieser sache näher :redface: merci für den input.
    grüsse speedyletti
  • ElefantElefant Forum Zuschauer
    bearbeitet April 2008
    Nach dem Update sind die Radiobutton jetzt in DIVs diese bekomme ich nicht in eine Zeile. Hier mal mein CSS
    [TYPOSCRIPT]/*###Anrede Radiobutton ###*/
    /* Größe Button */
    fieldset.tx-powermail-pi1_fieldset_7 input.powermail_uid22 {
    width:15px;
    border: none;

    }


    /* Beschriftung des Labels der Radiobutton */
    fieldset.tx-powermail-pi1_fieldset_7 div.powermail_radio_inner_uid22_0 label {
    display: inline;
    float: none;
    clear: none;
    margin-left: 0;

    }
    fieldset.tx-powermail-pi1_fieldset_7 div.powermail_radio_inner_uid22_1 label {
    display: inline;
    float: none;
    clear: none;
    margin-left: 70px;


    }
    /* Beschriftung des Titels der Radiobutton */
    fieldset.tx-powermail-pi1_fieldset_7 p.tx_powermail_pi1_fieldwrap_html_radio_title {
    display: block;
    float: left;
    clear: none;
    width: 100px;
    font-size: 1.00em;
    }[/TYPOSCRIPT]
    Wie muss das CSS aussehen das es funktioniert?
  • einpraegsam.neteinpraegsam.net Forum Crack
    bearbeitet April 2008
    Man kann es eben nicht allen Recht machen :tongue:

    Entweder DIV aus HTML Template schmeißen oder DIVs floaten...
  • ElefantElefant Forum Zuschauer
    bearbeitet April 2008
    wunschtacho schrieb: »
    Man kann es eben nicht allen Recht machen :tongue:

    Da muss ich dir recht geben.

    So wie ich als Anfänger habe da halt so meine Probleme:confused:, wenn ihr in dem Handbuch die Beispiele und das dazugehörige CSS einbringen könntet, wäre dies sicherlicht nicht schlecht. :wink:
    Entweder DIV aus HTML Template schmeißen oder DIVs floaten...
    Das mit dem floaten und dabei alles in einer Zeile zu bringen ist mir jetzt gelungen.
    Mein CSS sieht so aus
    [typoscript]/*###Anrede Radiobutton ###*/
    /* Beschriftung des Titels der Radiobutton */
    fieldset.tx-powermail-pi1_fieldset_7 p.tx_powermail_pi1_fieldwrap_html_radio_title {
    display: block;
    float: left;
    clear: none;
    width: 110px;
    font-size: 1.00em;
    }

    /* Größe Button */
    fieldset.tx-powermail-pi1_fieldset_7 input.powermail_uid22 {
    width:15px;
    border: none;
    float: left;
    }

    /* Beschriftung des Labels der Radiobutton */
    fieldset.tx-powermail-pi1_fieldset_7 div.powermail_radio_inner_uid22_0 label {
    display: inline;
    float: left;
    clear: none;
    margin-left: 0;
    width: 30px;
    }
    fieldset.tx-powermail-pi1_fieldset_7 div.powermail_radio_inner_uid22_1 label {
    display: inline;
    float: left;
    clear: none;
    margin-left: 40px;
    width: 30px;
    }
    /* ###Anrede Radiobutton Ende###*/[/typoscript] Ich würde jetzt noch gern die Radiobuttons vor dem Label haben. :confused::confused: Soll mir aber nicht gelingen!:confused::confused:
  • pidrootlinepidrootline Forum Stammgast
    bearbeitet Juni 2008
    Hallo,

    meinst du ungefähr so?

    template01: Kontakt

    schreibe mir eine Mail ich lasse dir den Code zukommen.

    lg pidrootline
Anmelden oder Registrieren, um zu kommentieren.