Jump to content
Sign in to follow this  
AJ2021

Nav bar spruce up

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;

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...