user7520132 user7520132 - 4 years ago 83
CSS Question

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.

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"> &#x2630 </font></button>
<div class="dropdown-content" style="left:0;">
<a href="../index.html" class="active">Home &#9756</a>
<a href="../html/about.html" class="active">About &#9786</a>
<a href="../html/contact.html">Contact &#x260F</a>
<a href="#">Portfolio &#9825</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>




Answer Source

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"> &#x2630 </font></button>
  <div class="dropdown-content" style="left:0;">
    <a href="../index.html"  class="active">Home &#9756</a>
    <a href="../html/about.html"  class="active">About &#9786</a>
    <a href="../html/contact.html">Contact &#x260F</a>
    <a href="#">Portfolio &#9825</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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download