Centering a “Contact Box” & Making it Responsive
Question
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.
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:
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 answers
solution1
0 ACCPTED 2017-02-05 19:41:22
You forgot to put closing </div> for <div class="dropdown"> . Here is a fixed html:
FYI: you can always validate your generated html online: https://validator.w3.org/ to check if your code is correct.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
centering and making responsive a blockquote element
Making this contact form responsive with Javascript
Making the 4 box responsive
Making a employee contact sheet with pictures and I need to make it responsive
How to make a simple contact form input box responsive
centering contact form content
Centering an element in a responsive Design
centering div position with responsive
Centering bootstrap responsive columns
Centering a responsive image
Related Tags