Jump to content

AJ2021

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by AJ2021

  1. 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;
    
×
×
  • Create New...