Problems with nav bar

Greenhorn

Posts: 2

posted 1 year ago

Hi, I'm new to web design and currently I have been able to get my links to be in white but am unable to get the rest of the text within the nav bar white... I also need help spacing the links within the nav bar as well as spacing the nav bar within the page. Any help would be greatly appreciated!

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

Maybe this is part of the problem with the rest of the text staying in black but Dreamweaver throws up an error at line 24 which is position:absolute under header h1 but I'm unable to figure out what's wrong. If anyone could that would be greatly appreciated as well!

Joe Maccorn

Greenhorn

Posts: 2

posted 1 year ago

The more I look at my page, the more I don't think things are sized properly especially the width under header h1. I'm not sure what proper sizing should be. I started this as a webplan in a online program called figma but when translating it to code/Dreamweaver I'm confused. Any help with sizing the page, nav bar, and nav bar links correctly would be greatly appreciated!

Listen. That's my theme music. That's how I know I'm a super hero. That, and this tiny ad told me:

Thread Boost feature

https://coderanch.com/t/674455/Thread-Boost-feature