1
Хорошо, поэтому я перепроектирую веб-сайт, чтобы включить некоторые из отличных функций HTML5, но я попал в блокпост, который, несмотря ни на что, я стараюсь, я не могу понять, как избавиться от него ,Textarea Messing up Navigation
Ниже приведен код страницы 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 & 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"> </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>
© Signwrite Signs & 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;
}
Теперь, когда я ввожу весь этот код и просмотрите его на Chrome 42.0.2311.90 (64-бит) в OSX Йосемити 10.10.3 панель навигации падает почти высоту строки заголовка. Я удаляю текстовую область под Query, и она волшебным образом появляется на месте.
Я понятия не имею, что происходит, и это сводит меня с ума! Я чувствую, что у меня что-то не хватает, и я бы оценил свежий взгляд на эту проблему.
С уважением, Бен
Даже когда я удалить все р тег и заменить на divs или ничего не делает. Единственное, что я могу остановить, это удалить текстовую область или тег ввода. – WhaleFanny
Это просто догадка, так как у меня нет такой же среды, как вы (Chrome 42.0.2311.90 (64-разрядная версия) в OSX Yosemite). Я нашел этот стиль –
Это просто догадка, так как у меня нет такой же среды, как вы (Chrome 42.0.2311.90 (64-разрядная версия) в OSX Yosemite). Я нашел этот стиль '#font и #font h1' не используется, так как селектор не найден. Просто подсказка, возможно, есть недостаток вертикального пространства, вызванный дополнительной высотой от textArea. Надеюсь, это даст вам несколько советов –