I’ve got my nav bar working but need help positioning text/links within the nav bar. The nav bar is too wide and I can’t seem to get the text and links spaced correctly. What I want to do is get the word family to be centered on a second line instead of the way it is now. When I tried to do that in design view in Dreamweaver it wouldn’t let me and I’m unsure of how to code it. Then I need to position the text inward, away from the left edge. Right now it is but up against the left edge which makes for a bad design. I would also like the nav bar to go the whole width of the page rather than the way it is now. Oh and do you think the sizing of the text, both the links and the rest to be of a good size? Any help is greatly appreciated!
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>
<section>
<h1 id="pagename">Home</h1>
<h2>Welcome to the Lawtons</h2>
</section>
</div><!-- end of wrapper -->
</body>
</html>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;
height: 113px;
}
header h1 {
font-size: 40px;
color: #ffffff;
position: absolute;
width: 426px;
left: -1px;
}
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: 120px 20px 20px; /* top sides bottom */
}