集中“联系盒”并使其具有响应能力
[英]Centering a “Contact Box” & Making it Responsive
问题描述
I am trying to create a contact page on my website. 
我正在尝试在我的网站上创建联系页面。 I want the contact form (aka the "name,email,message" box) to be centered and stay centered on the page even when the window size is adjusted. 我希望联系表单（也称为“名称，电子邮件，消息”框）居中并即使在调整窗口大小的情况下也可以在页面上居中。 However, I'm running into a few problems. 但是，我遇到了一些问题。
I got the contact box to be centered, but when I implemented the code for my nav bar (which I have on all other pages) it completely changes the positioning of the contact box and instead pulls it all the way to the far left, which is where the nav bar is located. 我使联系人框居中，但是当我为导航栏实现代码时（在所有其他页面上都有），它完全改变了联系人框的位置，而是将其一直拉到最左边。是导航栏所在的位置。
I'm assuming that somewhere in my nav bar code it makes the positioning for everything else adjust, however since I'm relatively new to basic HTML, CSS, & Javascript I am having trouble singling out the reason behind this. 我假设在导航条形码中的某处可以调整其他所有内容的位置，但是由于我对基本HTML，CSS和Java相对较新，因此我很难找出造成这种情况的原因。
If anyone could provide any insight on what's causing this/how to fix it that would be much appreciated! 如果有人能提供任何有关导致此问题/解决方法的见解，将不胜感激！ Thanks! 谢谢！
Below is my CSS and HTML: 以下是我的CSS和HTML：
body { font-family: 'Raleway', sans-serif; background:url("../images/example.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } /*CONTACT BOX*/ form { max-width:420px; margin:200px auto; } .feedback-input { color:white; font-family: "Avenir", Arial, sans-serif; /* font-weight:500;*/ font-size: 18px; border-radius: 5px; line-height: 22px; background-color: transparent; border:2px solid #CC6666; transition: all 0.3s; padding: 13px; margin-bottom: 15px; width:100%; box-sizing: border-box; outline:0; } .feedback-input:focus { border:2px solid #CC4949; } textarea { height: 150px; line-height: 150%; resize:vertical; } [type="submit"] { font-family: Arial, Helvetica, sans-serif; width: 100%; background:#CC6666; border-radius:5px; border:0; cursor:pointer; color:white; font-size:24px; padding-top:10px; padding-bottom:10px; transition: all 0.3s; margin-top:-4px; font-weight:700; } [type="submit"]:hover { background:#CC4949; } /*NAV BAR*/ /*style of the button*/ .dropbtn{ background-color: rgba(255,255,255,0); color: white; /* margin:0 auto;*/ font-size: 16px; border: none; cursor: pointer; } /*the div that controls the position of menu content*/ .dropdown { position: fixed; left: 0; top: 0; display: inline-block; } /*dropdown content*/ .dropdown-content { /*font-family: ;*/ display: none; /* right: 0;*/ background-color: #f9f9f9; max-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /*links inside of dropdown*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /*change color of links on hover*/ .dropdown-content a:hover {background-color:#ffe6f0} /*show menu on hover*/ .dropdown:hover .dropdown-content { display: block; } .dropdown:active .dropdown-content{ background-color:red; } /*change the background color of dropdown button when content is shown*/ .dropdown:hover .dropbtn { background-color: #ff3385; }
<!DOCTYPE html> <html> <title>Em || Contact</title> <link rel="stylesheet" href="../css/contact.css"> <body> <div class="dropdown"> <button class="dropbtn"><font size="15"> ☰ </font></button> <div class="dropdown-content" style="left:0;"> <a href="../index.html" class="active">Home ☜</a> <a href="../html/about.html" class="active">About ☺</a> <a href="../html/contact.html">Contact ☏</a> <a href="#">Portfolio ♡</a> </div> <form action="mailto:example@gmail.com" method="post" enctype="text/plain"> <input type="text" name="name" class="feedback-input" placeholder="Name" /> <input type="text" name="email" class="feedback-input" placeholder="Email" /> <textarea name="text" class="feedback-input" placeholder="Comment"></textarea> <input type="submit" value="SUBMIT"/> </form> <link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2017-02-05 19:41:22
You forgot to put closing </div> for <div class="dropdown"> . 您忘记了<div class="dropdown">结束语</div> <div class="dropdown"> 。 Here is a fixed html: 这是固定的html：
FYI: you can always validate your generated html online: https://validator.w3.org/ to check if your code is correct. 仅供参考：您始终可以在线验证生成的html： https ： //validator.w3.org/，以检查您的代码是否正确。
body { font-family: 'Raleway', sans-serif; background:url("../images/example.jpg"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; } /*CONTACT BOX*/ form { max-width:420px; margin:200px auto; border: 1px solid red; } .feedback-input { color:white; font-family: "Avenir", Arial, sans-serif; /* font-weight:500;*/ font-size: 18px; border-radius: 5px; line-height: 22px; background-color: transparent; border:2px solid #CC6666; transition: all 0.3s; padding: 13px; margin-bottom: 15px; width:100%; box-sizing: border-box; outline:0; } .feedback-input:focus { border:2px solid #CC4949; } textarea { height: 150px; line-height: 150%; resize:vertical; } [type="submit"] { font-family: Arial, Helvetica, sans-serif; width: 100%; background:#CC6666; border-radius:5px; border:0; cursor:pointer; color:white; font-size:24px; padding-top:10px; padding-bottom:10px; transition: all 0.3s; margin-top:-4px; font-weight:700; } [type="submit"]:hover { background:#CC4949; } /*NAV BAR*/ /*style of the button*/ .dropbtn{ background-color: rgba(255,255,255,0); color: white; /* margin:0 auto;*/ font-size: 16px; border: none; cursor: pointer; } /*the div that controls the position of menu content*/ .dropdown { position: fixed; left: 0; top: 0; display: inline-block; z-index: 100; } /*dropdown content*/ .dropdown-content { /*font-family: ;*/ display: none; /* right: 0;*/ background-color: #f9f9f9; max-width: 150px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } /*links inside of dropdown*/ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /*change color of links on hover*/ .dropdown-content a:hover {background-color:#ffe6f0} /*show menu on hover*/ .dropdown:hover .dropdown-content { display: block; } .dropdown:active .dropdown-content{ background-color:red; } /*change the background color of dropdown button when content is shown*/ .dropdown:hover .dropbtn { background-color: #ff3385; }
<!DOCTYPE html> <html> <title>Em || Contact</title> <link rel="stylesheet" href="../css/contact.css"> <body> <div class="dropdown"> <button class="dropbtn"><font size="15"> ☰ </font></button> <div class="dropdown-content" style="left:0;"> <a href="../index.html" class="active">Home ☜</a> <a href="../html/about.html" class="active">About ☺</a> <a href="../html/contact.html">Contact ☏</a> <a href="#">Portfolio ♡</a> </div> </div> <form action="mailto:example@gmail.com" method="post" enctype="text/plain"> <input type="text" name="name" class="feedback-input" placeholder="Name" /> <input type="text" name="email" class="feedback-input" placeholder="Email" /> <textarea name="text" class="feedback-input" placeholder="Comment"></textarea> <input type="submit" value="SUBMIT"/> </form> <link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.