サポート » 使い方全般 » CSS 外枠とボタンの重なりを解消したい

  • 解決済 zen73

    (@zen73)


    ―――――――――
    |       |
    |       |
    |       |
    |       |
    | ――――― |
    | |ボタン| |
    ――――――――― ここの重なりを解消したい

    TCDさんhttp://design-plus1.com/tcd-w/2015/09/contactform7.html#7 のContact Form 7 のカスタマイズデザイン
    をお借りし,ボタンだけを私の好みのものに変えてみました。http://zlabo.com/contact

    TCDさんのデザインでは枠とボタンの間に余白があったのですが,ボタンを変更すると余白がなくなってしまいました。

    CSSのmarginとかpaddingをいじってはみたのですが,どうしても重なりを解消できずお尋ねする次第です。

    下でコメントアウトした部分がTCDさんのボタン配置で,その上が私のボタン配置です。

    2つのサイトをみくらべたうえで,下のCSSでの解消策を考えてくださいとの要求をしているようで心苦しいのですが,よろしくお願いいたします。

    <フォームソースコード>

    <p>お名前 <span class=”required” >(必須)</span>
    [text* your-name watermark” 例)ズィ―ラボ”] </p>

    <p>住所<span class=”required” >(必須)</span>
    [select* menu-education “北海道” ・・・ “沖縄県”] </p>

    <p>メールアドレス <span class=”required” >(必須)</span>
    [email* your-email watermark” メールアドレス <必須>” ] </p>

    <p>題名<span class=”any” >(任意)</span>
    [text your-subject watermark" 題名"] </p>

    <p>メッセージ本文 <span class=”required” >(必須)</span>
    [textarea* your-message] </p>

    <p>こちらの文字列を入力してください。 <span class=”required” >(必須)</span></p>
    [captchac captcha-170]
    [captchar captcha-170 4/4]

    [response]

    <p>[submit “入力内容を送信する”]</p>

    <CSSコード>

    /* デザインカスタマイズ */
    div.wpcf7 { background:#fafafa; border:1px solid #ddd; padding:0px; -moz-border-radius:10px; -khtml-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; margin:0 0 30px 0; }
    div.wpcf7 p { padding:20px 20px 0; margin:0; font-size:11px; }
    div.wpcf7 input, .wpcf7 textarea { border:1px solid #ccc; padding:8px; font-size:14px; }
    div.wpcf7 textarea { width:97.5%; height:300px; }

    div.wpcf7 input.wpcf7-submit {
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px;
    border:1px solid #ee1eb5;
    padding:8px 70px;
    text-decoration:none;
    background:-moz-linear-gradient( center top, #d90074 5%, #9c0053 100% );
    background:-ms-linear-gradient( top, #d90074 5%, #9c0053 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d90074′, endColorstr=’#9c0053′);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #d90074), color-stop(100%, #9c0053) );
    background-color:#d90074;
    color:#ffffff;
    display:inline-block;
    text-shadow:1px 1px 0px #c40069;
    -webkit-box-shadow:inset 1px 1px 0px 0px #fbafe3;
    -moz-box-shadow:inset 1px 1px 0px 0px #fbafe3;
    box-shadow:inset 1px 1px 0px 0px #fbafe3;
    }
    div.wpcf7 input.wpcf7-submit:hover {
    background:-moz-linear-gradient( center top, #9c0053 5%, #d90074 100% );
    background:-ms-linear-gradient( top, #9c0053 5%, #d90074 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#9c0053′, endColorstr=’#d90074′);
    background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #9c0053), color-stop(100%, #d90074) );
    background-color:#9c0053;
    }
    /*
    .wpcf7 input.wpcf7-submit:active {
    position:relative;
    top:1px;
    }
    */

    /*
    div.wpcf7 input.wpcf7-submit {
    cursor:pointer; color:#fff; font-weight:bold; font-size:14px; width:200px; height:45px; margin:0 auto; display:block;
    -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
    background:#333; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #808080; border:1px solid #666;
    }
    div.wpcf7 input.wpcf7-submit:hover { background:#006080; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), inset 0px 32px 0px -12px #007ea8; border:1px solid #006080; }
    .wpcf7 input.wpcf7-submit:active { box-shadow:none; bottom:-2px; position:relative; }
    */

    .wpcf7 input:focus, .wpcf7 textarea:focus { border:1px solid #009de1; }
    .wpcf7-captchac { border:1px solid #ccc; }

    /* 下部の不要と思われるものは省略しています*/

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック投稿者 zen73

    (@zen73)

    上から2行目を
    div.wpcf7 p { padding:5px 20px 10px; margin:0; font-size:11px; }
    としたら,解決しました。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「CSS 外枠とボタンの重なりを解消したい」には新たに返信することはできません。