html - Textarea 搞乱导航

标签 html css

好吧，我正在重新设计一个网站以包含一些漂亮的 HTML5 功能，但我遇到了一个障碍，无论我尝试什么，我似乎都无法找到摆脱它的方法。

以下是出现错误的HTML5页面的代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Contact Us</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
    </head>
    <body id="contact">
        <header>
            <a href="index.html"><img src="images/logo.png" alt="Signwrite Signs &amp; Designs Logo" /></a>
            <nav>
                <ul>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="services.html">What We Do</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="index.html">Home</a></li>
                </ul>
            </nav>
        </header>
        <section id="content">
            <article>
                <h1>Contact Us</h1>
                <p>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3173.5474529375374!2d144.9503499999996!3d-37.30585800436599!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad7a4a8a3379d23%3A0x9d76c4464bec770c!2s106B+Powlett+St%2C+Kilmore+VIC+3764!5e0!3m2!1sen!2sau!4v1429341803861" width="100%" frameborder="0" style="border:0">&nbsp;</iframe>
                </p>
                <form method="POST" id="contact-form"> 
                    <p>
                        Full name<br>
                        <input type="text" name="fullname" value="" placeholder="Enter your full name here">
                    </p>
                    <p>
                        Email<br>
                        <input type="email" name="email" value="" placeholder="Enter your email here">
                    </p>
                    <p>
                        Query<br>
                        <textarea></textarea>
                    </p>
                    <p>
                        <button>Submit</button>
                    </p>
                </form>
            </article>
        </section>
        <footer>
            &copy; Signwrite Signs &amp; Designs 2015.
        </footer>
    </body>
</html>

以下是我使用的 CSS 文件的代码(我引用了所有我从中获得帮助的外部资源，因此有评论)

/* http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp */
@font-face {
    font-family: Frutiger;
    src: url(frutiger.otf);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 50px 0;
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
}

body#home { background-image: url(images/backgrounds/home-large.jpg); }
body#about { background-image: url(images/backgrounds/about-large.jpg); }
body#contact { background-image: url(images/backgrounds/contact-large.jpg); }

/* http://www.w3schools.com/cssref/css3_pr_mediaquery.asp */
@media screen and (max-width: 300px) {
    body#home { background-image: url(images/backgrounds/home-small.jpg); }
    body#about { background-image: url(images/backgrounds/about-small.jpg); }
    body#contact { background-image: url(images/backgrounds/contact-small.jpg); }
}

@media screen and (max-width: 1024px) {
    body#home { background-image: url(images/backgrounds/home-medium.jpg); }
    body#about { background-image: url(images/backgrounds/about-medium.jpg); }
    body#contact { background-image: url(images/backgrounds/contact-medium.jpg); }
}

header {
    height: 100px;
    background: -webkit-linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Safari 5.1-6*/
    background: -o-linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Fx 3.6-15*/
    background: linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Standard*/
}

header img {
    height: 100px;
}

nav {
    float: right;
}

nav ul {
    margin: 0px;
}

nav li {
    float: right;
    display: block;
    text-align: center;
}

nav li a {
    font-family: Frutiger;
    display: inline-block;
    line-height: 100px;
    vertical-align: middle;
    height: 100px;
    width: 150px;
    color: white;
    text-decoration: none;
}

nav li a:hover {
    background-color: rgba(23, 10, 81, 1);
}

/* http://codeconvey.com/2014/04/12/make-css-sticky-footer/ */
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: rgba(23, 10, 81, 1);
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    color: white;
    font-family: Frutiger;
}

/* http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically */
#front {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

/* http://www.w3schools.com/cssref/css3_pr_text-shadow.asp 
https://css-tricks.com/viewport-sized-typography/ */
#front h1 {
    font-family: Frutiger;
    font-size: 4vw;
    color: white;
    text-shadow: 2px 2px black;
}

/* http://www.w3schools.com/css/css3_borders.asp */
#button {
    background: -webkit-linear-gradient(rgba(255, 154, 201, 1), rgba(233, 42, 142, 1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(rgba(255, 154, 201, 1), rgba(233, 42, 142, 1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(rgba(255, 154, 201, 1), rgba(233, 42, 142, 1)); /*Fx 3.6-15*/
    background: linear-gradient(rgba(255, 154, 201, 1), rgba(233, 42, 142, 1)); /*Standard*/
    width: 50%;
    text-align: center;
    padding: 1px;
    box-shadow: 0 0 0 1px #4a1330;
    border-radius: 5px;
    position: relative;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

#button a {
    background-color: #e92b8e;
    border-radius: 5px;
    padding: 3%;
    display: block;
    text-decoration: none;
    color: white;
    font-family: Frutiger;
    font-size: 1.5vw;
}

#button a:hover {
    background-color: #e864a8;
}

#content {
    font-family: Verdana;
    background: rgba(255,255,255,0.9);
    width: 45%;
    height: 100%;
    margin-top: 2%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 1%;
    padding-bottom: 2%;
    position: relative;
    left: 24.5%;
}

/* https://github.com/karlhorky/gray/blob/gh-pages/css/gray.css */
#signs a:hover, #screenprinting a:hover, #digital-printing a:hover, #printing a:hover {
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

#screenprinting a, #screenprinting a:hover { background-image: url(images/screenprinting.jpg); }
#digital-printing a, #digital-printing a:hover { background-image: url(images/digital-printing.jpg); }
#printing a, #printing a:hover { background-image: url(images/printing.jpg); }
#signs a, #signs a:hover { background-image: url(images/signs.jpg); }

#signs a, #screenprinting a, #digital-printing a, #printing a {
    background-repeat: no-repeat;
    background-size: cover;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(1);
     filter: grayscale(1);
     filter: gray;
}

.service a {
    float: left;
    width: 22%;
    margin-left: 2.4%;
    margin-top: 1%;
    line-height: 2200%; 
    vertical-align: bottom;
    text-align: center;
    font-family: Verdana;
    font-size: 2vw;
    color: white;
    text-shadow: 2px 2px black;
    text-decoration: none;
}

#services:after {
    content: "";
    clear: both;
    display: table;
}

#contact-form input, #contact-form textarea {
    border: 1px solid gray;
    padding: 10px;
    box-shadow: inset 0px 0px 5px gray;
    width: 97%;
}

#contact-form button {
    border: 1px solid gray;
    padding: 10px;
    box-shadow: inset 0px 0px 2px gray;
}

现在，当我输入所有代码并在 OSX Yosemite 10.10.3 的 Chrome 42.0.2311.90(64 位)上查看它时，导航栏几乎下降到标题栏的高度。我删除了 Query 下面的文本区域，它神奇地回到了原位。

我不知道发生了什么，这让我发疯!我觉得我遗漏了一些东西，希望对这个问题有新的看法。

问候， 本

最佳答案

你试过用“div”元素替换“p”

你能看看这个Fiddle replaced p element with div element 

enter code here

关于html - Textarea 搞乱导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29714880/

上一篇：javafx - ImageView 上的边框半径和阴影

下一篇：jquery - 如何使用 JQuery 在 MVC4 中添加时间？

相关文章：

css - 相对 CSS 仅语音气泡

html - 根据行数动态地在 <div> 中垂直居中 <table>？

html - 不使用 data-* 前缀的自定义 HTML 属性是否有效？

javascript - 对于多个添加的元素，自动滚动溢出元素不会继续

javascript - 如何制作待办事项列表，并在未选中剩余 0 个元素时显示按钮

javascript - CSS3 模糊叠加

javascript - Angular : switch HTML depending on screen resolution

javascript - 如何使用 jquery 获取以值开头的类并向每个类中的复选框添加事件

javascript - 使可折叠 Div 默认情况下不隐藏

javascript - 如何在打印布局 html 中设置 img 样式

©2024 IT工具网  联系我们