-1

私のウェブサイトへのリンク: http://foxweb.marist.edu/users/kf79g/contact.php

お問い合わせページで困っています。画面のサイズに関係なく（ウィンドウのサイズを可能な限り最小の幅に変更しても）、全体を中央に配置して応答性を高めたいと考えています。注: フォームの幅を大きくしてレスポンシブにする方法を見つけない限り、大きな/デスクトップ画面はそのままにしておきます。中・小画面を中心にページ全体を作ってみました。ただし、ページが縮小するにつれて、中央属性の測定値が少しずれています。その理由は、古いブラウザでも見栄えがするように、一部を変更する必要があったためです。ソーシャルアイコンも私に問題を引き起こしています. すべてのデバイスとブラウザの中心にすべてを配置する方法はありますか? 私は測定で最善を尽くしました。どんな助けでも大歓迎です。

修正したい問題は次のとおりです。

Firefox: 中程度のページで、フォームが境界を超えています。小さなページでは、ページが小さいときにフォームが縮小しています。小さなページでは、ソーシャル アイコンがごちゃごちゃしています。中規模および小規模のページでは、フォームが均等に中央に配置されません。

IE 7: 中程度のページと小さいページで、ソーシャル アイコンが乱れます。小さなページでは、フォームが境界を超えています。小さな画面でフォームが縮小されていません。中規模および小規模のページでは、フォームが均等に中央に配置されません。

IE 8: 小さなページで、フォームが縮小しています。中規模および小規模のページでは、フォームが均等に中央に配置されません。ソーシャルアイコンはそれほど悪くありません。

HTML:

<section>

            <div id='main_section'>
                <div id = "center">
                <div id='details_section'> 
                <br/>

                    <h2> Stay in touch </h2><br/>
                    <p>I love getting feedback regarding all my projects, works, and services. You can use the quick contact form to leave a message, comments and questions.</p><br/>
                    <p>Your name and e-mail address are never shared, I just use them when I need to get back to you.</p><br/>


                    <h2> Social networks </h2><br/>
                    <div id = "center_icons">
                        <a href="https://www.facebook.com/lenny.pfautsch" target="_blank"><img src="images/facebook.png" alt="facebook" style="margin:1px;"></a> 

                        <a href="https://plus.google.com/113122168458946246215/posts" target="_blank"><img src="images/google-plus.png" alt="google plus" style="margin:1px;"></a>

                        <a href="http://www.linkedin.com/pub/leonard-pfautsch/53/b34/1a2" target="_blank"><img src="images/linkedin.png" alt="linkedin" style="margin:1px;"></a>

                        <a href="https://github.com/LeonardPfautsch" target="_blank"><img src="images/github.png" alt="github" style="margin:1px;"></a>
                    </div>
                <br/>

                </div>
                </div>

                <div id = "center">
                <div id='contact_section'>
                    <form method='POST' action='contact.php'>
                    <span class='label'>Name:</span><br/>
                    <input type='text' class='textfield' name='name' size='50' maxlength='50'><br/>
                    <span class='label'>Email:</span><br/>
                    <input type='text' class='textfield' name='email' size='50' maxlength='50'><br/>
                    <span class='label'>Subject:</span><br/>
                    <input type='text' class='textfield' name='subject' size='50' maxlength='50'><br/>
                    <span class='label'>Message:</span><br/>
                    <textarea rows='5' cols='50' name='message' id='textarea' maxlength='500'></textarea><br/>
                    <input type='submit' value='Send' id='submit' name='action'> 
                    </form>
                </div>
                </div>


            </div>
        </section>

主な CSS:

#details_section {

    max-width:100%;
    float:left;
    margin-right:20px;


}


#contact_section {
    max-width:100%;
    margin-bottom:40px;
    margin-right: 0px;

    margin-top:20px;
    padding:20px; /*Make this smaller for 100% responsiveness*/
    border-radius:10px;
    background:#f1f1f1;
    box-shadow:0px 0px 15px #272727; 
    float:right;
}


#submit {
    padding:0px 8px;
    background:#c4c4c4; 
    width:115px;
    height:33px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    max-width:100%;
}
#submit:hover {
    background:#a8a8a8;
    cursor: pointer;
}

div.button input {
padding:0px 8px;
    background:#c4c4c4; 
    width:80px;
    height:30px;
    border-radius:10px;
    border:1px solid #8d8d8d;
    margin:1px;
    max-width:100%;
}

div.button input:hover {
background:#a8a8a8;
    cursor: pointer;
}

大画面:

#details_section {
    width:320px;
}

ミディアムスクリーン: 

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contact_section {
width:450px;

}

#details_section {
    width: 450px;
    text-align:justify;
}

#details_section h2 {
    width: 450px;
    text-align:center;

}

textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}

textarea{
    max-width: 450px;
    height: 150px;
}

小さいスクリーン: 

#center{
width: 465px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#center_icons{
width: 228px; /*this value is changing for IE and chrome*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#contact_section {
width:450px;

}

#details_section {
    width: 450px;
    text-align:justify;
}

#details_section h2 {
    width: 450px;
    text-align:center;

}

textarea, input[type="text"] {
    width: 100%;
    max-width: 450px;
}

textarea{
    max-width: 450px;
    height: 150px;
}
4

1 に答える 1

1

Element Inspector を使用して、ページの外観を適切にすることをお勧めします。最新のブラウザにはすべて含まれています。あちこちで CSS を微調整するだけで十分なようです。たとえば、入力を小レイアウトと中レイアウトで異なる幅に設定できます (116 行目が に変わりますwidth:90%)。

ボックスのサイジングとその仕組みを正しく理解することが重要です。複合マージンとパディングが要素のオーバーフローを引き起こしているようです。http://css-tricks.com/box-sizing/

于 2013-06-28T00:11:14.067 に答える