I’m having a problem… I’m not sure how to position my contact form below my nav bar. Currently my nav bar overlaps my contact form. I would also like to add a picture to the left of the contact form, right now the contact form takes up the whole space. Any help is greatly appreciated!
CSS:
@charset "utf-8";
/* CSS Document */
#wrapper {
width: 1920px;
min-height: 1080px;
position: relative;
margin: 0 auto;
background-color: #5DD7FE
}
header {
width: 1778px;
min-height: 62px;
background-color: #808080;
position: absolute;
top: 0;
left: 50px;
}
header h1 {
font-size: 40px;
color: #ffffff;
position: absolute;
width: 425px;
}
header nav ul li {
list-style-type: none;
display: inline-block;
}
header nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 18px;
}
header nav ul li a:hover {
color: red;
}
header nav {
position: absolute;
top: 6px;
left: 500px;
}
section{
position: absolute;
top:190px;
left: 154px;
width: 1634px;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jackson Lawton_homePage</title>
<link href="_CSS/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Jackson Lawton and Family</h1>
<nav>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="contact.html">Contact</a>
</li>
<li><a href="media.html">Media</a>
</li>
<li><a href="gallery.html">Gallery</a>
</li>
<li><a href="resume.html">Resume</a>
</li>
</ul>
</nav>
</header>
<div class="container">
<form action="action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="france">France</option>
<option value="germany">Germany</option>
<option value="ireland">Ireland</option>
<option value="japan">Japan</option>
<option value="poland">Poland</option>
<option value="russia">Russia</option>
<option value="spain">Spain</option>
<option value="uk">UK</option>
<option value="ukraine">Ukraine</option>
<option value="">USA</option>
<option value="other">Other</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
</html>