如何使此页面上的所有内容都集中并对所有浏览器完全响应?

时间:2013-06-27 22:59:38

标签: html css internet-explorer responsive-design

链接到我的网站:http://foxweb.marist.edu/users/kf79g/contact.php

我的联系页面遇到问题。无论屏幕尺寸如何(即使您将窗口调整到最小的宽度),我希望整个事物都能够居中和响应。注意:除非您找到一种方法使表单宽度更大且响应更快,否则请将大/桌面屏幕保留为我希望它的外观。我试图让整个页面以中小屏幕为中心。但是,随着页面缩小,中心属性测量值略有下降。这样做的原因是有些必须是不同的,以便它对旧版浏览器看起来不错。社交图标也给我带来了麻烦。有没有办法让整个设备和浏览器都集中在一起?我尽力测量。任何帮助将不胜感激。

以下是我想解决的问题:

火狐:         在中等页面上,表单超出范围。         在小页面上,当页面很小时,表单会缩小。         在小页面上,社交图标搞砸了。         在中小页面上,表单不会均匀居中。

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;
}

1 个答案:

答案 0 :(得分:1)

我建议使用Element Inspector在页面上看到正确的外观。所有现代浏览器都包含它们似乎所有你需要的是这里和那里的小CSS调整。例如,您可以在小型和中型布局中将输入设置为不同的宽度(第116行更改为width:90%)。

正确理解盒子大小及其工作方式非常重要。似乎复合边距和填充是导致元素溢出的原因。 http://css-tricks.com/box-sizing/