Jump to content

Nav bar spruce up


AJ2021

Recommended Posts

Hi, I'm new to web design and need help w/ my nav bar. I need help spacing my page links on the nav bar as well as spacing my nav bar within the page. I have my nav bar spaced right now but I don"t know if it will work well w/my page and the page links aren't spaced correctly and I'm not sure how to space them. I also got my page links to be white but the rest of the words in the nav bar are still black & I want it white as well. Any help would be 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: 48px;
    left: 142px;
}
 
    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;
    }

/* 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;
}



Also line 24 which is position:absolute under header h1 in Dreamweaver is coming up as a problem and I can't seem to find out why.
 header h1 {
        font-size: 40px;
        color: #ffffff
        position: absolute;
        width: 425px;
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...