× Got a CSS, HTML or webdesign question? Ask it here!

Nav Bar Needs Help

3 weeks 1 day ago #21679 by AJ2021
Nav Bar Needs Help was created by AJ2021
Hi, I'm new to web design and need help with the 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 and the page links aren't spaced correctly and I'm not sure how to space them. 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;
Aj2021 Posted Today, 06:43 AMI don't know how but I got the page links to be white just by doing other unrelated things to the page in the css but my name in the nav bar is still black... Why is that? I want it white as well.

@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;
}

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

Please Log in or Create an account to join the conversation.

Time to create page: 0.110 seconds
Powered by Kunena Forum