I'm having a bit of trouble in regards to background color being applied to all at once to pages within a part of my navigation section. Currently when I hover over Brass, the background color is being applied to Brass and the pages within this section. What I'm trying to accomplish is getting the background color to appear only when I hover over these elements instead of all at once.
header {
color: #348899;
background-color: #343642;
background-image: url(Images/heading.png);
background-position: right;
background-repeat: no-repeat;
}
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
h1 {
margin: 0;
padding: 10px;
font-size: 42pt;
line-height: 36pt;
font-weight: lighter;
}
h2 {
margin: 0;
padding: 0 10px 5px;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
h3 {
margin: 0;
padding: 0 10px 5px 0;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
nav {
color: #343642;
background-color: #979C9C;
float: left;
width: 160px;
font-weight: bold;
height: 100%;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li:hover {
background-color: #b1b6b6;
}
nav ul li a {
display: block;
text-decoration: none;
color: #343642;
}
nav ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
}
main {
color: #17354A;
background-color: #F2EBC7;
margin-left: 160px;
padding: 10px;
z-index: 0;
display: flex;
}
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
margin: 0 20px 0 0;
}
main .row .left {
width: 25%;
}
main .row .middle {
width: 50%;
}
main .row .right {
width: 25%;
}
.brass {
float: right;
margin: 0 0 5px 5px;
}
.logo {
float: right;
margin: 0 0 5px 5px;
}
body{
background-color: #348899;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
color: #348899;
background-color: #343642;
font-style: italic;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Beginning Band Players
</h1>
<h2>
Home
</h2>
</header>
<nav>
<ul>
<li>Home</li>
<li>Brass
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li>Woodwind
<ul>
<li>Clarinet</li>
<li>Flute</li>
<li>Oboe</li>
<li>Saxophone</li>
</ul>
</li>
<li>Percussion
<ul>
<li>Bells</li>
<li>Snare Drum</li>
</ul>
</li>
<li>Maintenence</li>
<li>Additional Equipment</li>
</ul>
</nav>
<main>
<div class="column left">
<div class="logo">
<img src="Images/Logo-E.png" alt="logo" height="200" width="355">
</div>
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
It's our hope that prospective music students find what they're looking
for and enjoy a lifetime of music.
</p>
<div class="brass">
<img src="Images/brass-1.jpg" alt="brass" height="238" width="425">
</div>
</div>
</div>
<div class="column right">
<h3>
What to Expect:
</h3>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources:
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
<footer>
Copyright © 2022, Carter Thomas Wolfe <br>
Web Project Prototype
</footer>
</div>
</body>
</html>
you can use this
nav ul li ul li:hover {
background-color: #b1b6b6;
}
instead of
nav ul li:hover {
background-color: #b1b6b6;
}
Related
I'm trying to make my navigation section a little nicer. Currently when I hover over the menu items to display the pages within, the pages show up instantly. I'd like them to show up gradually instead of all at once. I've tried adding transition: 2s; underneath nav ul li:hover ul in my CSS file, but that doesn't seem to work.
header {
color: #348899;
background-color: #343642;
background-image: url(Images/heading.png);
background-position: right;
background-repeat: no-repeat;
}
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
h1 {
margin: 0;
padding: 10px;
font-size: 42pt;
line-height: 36pt;
font-weight: lighter;
}
h2 {
margin: 0;
padding: 0 10px 5px;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
h3 {
margin: 0;
padding: 0 10px 5px 0;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
nav {
color: #343642;
background-color: #979C9C;
float: left;
width: 160px;
font-weight: bold;
height: 100%;
position: relative;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li a {
display: block;
text-decoration: none;
color: #343642;
}
nav ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
nav ul li:hover ul {
display: block;
transition: 2s;
}
nav ul li ul li:hover {
background-color: #b1b6b6;
width: 80px;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
background-color: #b1b6b6;
}
main {
color: #17354A;
background-color: #F2EBC7;
margin-left: 160px;
padding: 10px;
z-index: 0;
display: flex;
}
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
margin: 0 20px 0 0;
}
main .row .left {
width: 25%;
}
main .row .left p {
margin-right: 5px;
}
main .row .middle {
width: 50%;
}
main .row .middle h3 {
text-align: center;
}
main .row .right {
width: 25%;
}
main .side .left {
width: 50%;
}
main .side .right {
width: 50%;
}
.brass {
float: right;
margin: 0 0 5px 5px;
}
.logo {
float: right;
margin: 0 0 5px 5px;
}
body{
background-color: #348899;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
color: #348899;
background-color: #343642;
font-style: italic;
text-align: center;
margin-left: 160px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Beginning Band Players
</h1>
<h2>
Home
</h2>
</header>
<nav>
<ul>
<li>Home</li>
<li>Brass
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li>Woodwind
<ul>
<li>Clarinet</li>
<li>Flute</li>
<li>Oboe</li>
<li>Saxophone</li>
</ul>
</li>
<li>Percussion
<ul>
<li>Bells</li>
<li>Snare Drum</li>
</ul>
</li>
<li>Maintenence</li>
<li>Additional Equipment</li>
</ul>
</nav>
<main>
<div class="column left">
<div class="logo">
<img src="Images/Logo-E.png" alt="logo" height="200" width="355">
</div>
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
It's our hope that prospective music students find what they're looking
for and enjoy a lifetime of music.
</p>
<div class="brass">
<img src="Images/brass-1.jpg" alt="brass" height="238" width="425">
</div>
</div>
</div>
<div class="column right">
<h3>
What to Expect:
</h3>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources:
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
<footer>
Copyright © 2022, Carter Thomas Wolfe <br>
Web Project Prototype
</footer>
</div>
</body>
</html>
You have to tell the CSS which property you'd like to transition, and how you'd like it to transition. If you changed your transition line to something like:
transition: opacity 2s ease-in;
That's saying: fade the opacity in over 2 seconds, with an "easing in" function. https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function That line above should work - but only if it has different states of opacity to transition between. Elements default to an opacity of 1, so simply defining the transition for opacity won't be enough, you have to also different states to change between. If you were using opacity, I'd try setting the default state for the element/class/whatever to 0, and the hover state to 1.
.classYouWantToFadeIn {
opacity:0;
/*rest of the CSS*/
}
.classYouWantToFadeIn:hover {
opacity: 1;
}
If the transition still doesn't seem to work, read up on "specificity rules" in CSS. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
try this instead:
nav ul li:hover ul {
display: block;
transition: 2s ease-in-out;
}
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
I was just continuing with making this website and all of a sudden some of my navbar padding goes 'missing' and I can't seem to pinpoint the mistake. I've already played the detective game and commented out some of the stuff I thought was interfering. Luckily I have an original picture before the screw-up and one after. Some of the 'paragraph text' will be 'placeheld' for personal reasons and I think it's irrelevant, unless it's needed in order to fix the problem.
-Thanks.
Before and after picture: http://imgur.com/a/ts1FS
Code:
CSS:
body {
background-color: #1a1a1a;
color: #ccad00;
line-height: 1.9;
font-size: 19px;
}
p.desc{
text-indent: 50px;
}
h1 {
font-family: courier;
color: #ccad00;
}
h2 {
font-family: courier;
color: #ccad00;
text-align: center;
}
#divtitle {
width: 50%;
margin:auto;
padding-top: 50px;
text-align: center;
}
h2
{
font-family:courier;
color: #99cc00;
}
p {
line-height: 1.9
text-size: 19px;
}
#nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #ccad00;
height:40px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
}
#nav li {
margin: 0px;
}
#nav li a {
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #f2f2f2;
background-color: #ccad00;
float: left
}
#nav li a:hover {
color: #0d0d0d;
background-color: #35af3b;
}
.button {
background-color: #ffa600;
border: none;
color: #998200;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
font-family: courier;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: white;
color: #998200;
}
div#containerbttn {
width: 800px;
height: 100px;
margin: auto;
background-color: green;
}
ul.square{
list-style-type: square;
}
.center {
text-align: center;
}
html:
<div id="nav">
<ul>
<li>Home
</li>
<li>Center
</li>
<li>Rules
</li>
<li>References
</li>
<li>Rankings
</ul>
</div>
<div>
<div id="divtitle" >
<h1> text </h1>
</div> -->
<div id="containerbttn">
<button class="button">GET STARTED!</button>
<button class="button">FAQ</button>
<button class="button">RANKINGS</button>
</div>
<h2> Synopsis: </h2>
<div class="center">
<p class="desc"> Welcome to ***!. This is a free...
<ul class="square">
<li> some text </li>
<li> some text </li>
</ul>
<p class="desc" > text </p>
</div>
</html>
Your problem exists because you have set the height of the #nav element to 40 px. When you add the padding to your a element, you make it larger than the ul element. This can be solved easily by updating two lines of code.
First, remove from css:
#nav{ height:40px; }
Then, add to html after ul but before closing the nav div:
<div style="clear:both;"></div>
Here is a jsfiddle of your working page: https://jsfiddle.net/8o279n5r/
And here is a great answer on what the clear property does: What does the CSS rule clear: both do?
I'd like to ask your help with my bottom navigation bar and a link on both my navigation bars.
I can't seem to make it appear in the center. Will using padding be able to fix it? I've been trying to use it, but I have to estimate the number of pixels.
My second problem is that my bottom navigation bar doesn't have the correct spacing. I already changed the font size, but it doesn't fix the problem. Right now, it appears like this: "HomeWho We AreWhat We Do...".
My third problem is that one of my links don't appear to be working. It's a link to another webpage I coded. I think I've typed it correctly, but it won't work.
Here's a fiddle:
https://jsfiddle.net/captainpokey/66szogpm/
And here's the code:
html {
100%
}
body {
background: #cecdcc;
margin: 0;
padding: 0;
color: #8c8b8a;
font-size: 18px;
font-family: "Lato", sans-serif;
}
#wrap {
background-color: #fff;
width: 1000px;
margin: 0 auto;
}
#nav {
width: 1000px;
height: 45px;
background: #dcdbda;
font-family: "Lato";
font-size: 18px;
}
#nav ul {
padding: 0;
margin: 0;
background: #dcdbda;
float: left;
margin-left: 50px;
}
#nav li {
height: 40px;
padding-top: 4px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
#nav a {
display: block;
text-decoration: none;
text-align: center;
color: #949392;
}
#nav ul ul {
position: absolute;
left: 0;
top: 100%;
visibility: hidden;
margin: 0;
padding: 0;
}
#nav li:hover, #nav li:hover li {
background: #fff;
}
#nav li li:hover, #nav li li:hover li {
background: #bbb;
}
#nav li:hover ul {
visibility: visible;
}
#header {
width: 1000px;
height: 485px;
background-image: url(../images/headerphoto.jpg);
}
#content {
background-color: #fff;
font-family: "Lato", sans-serif;
color: #777674;
padding-top: 10px;
padding-bottom: 20px;
}
#content h4 {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 20px;
text-transform: bold;
}
#content p {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 18px;
text-transform: bold;
}
#footer {
background-image: url(../images/footerphoto.jpg);
width: 1000px;
height: 255px;
}
#navbottom {
padding-left: 130px;
width: 1000px;
color: #fff;
font-size: 12px;
font-family: "Lato";
}
#navbottom ul {
padding: 0;
margin: 0;
float: left;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
float: left;
position: relative;
list-style-type: none;
}
#navbottom li:hover ul {
visibility: visible;
}
#navbottom a {
display: block;
text-decoration: none;
text-align: center;
color: #fff;
}
#copyright {
padding-left: 150px;
padding-right: 150px;
font-family: "Lato", sans-serif;
font-size: 16px;
}
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<title>Powers & Grant, Inc.</title>
<meta charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="nav">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Our Services</li>
<li>The Powers Team</li>
<li>Contact</li>
</ul>
</div>
<div id="header"></div>
<div id="content">
<p>As the Country's pioneer in sales force outsourcing, Powers knows the intricacies of managing the critical tasks involved in increasing revenues as well as saving the company from the costly maintenance of agents with minimal increase in sales growth.<br><br>
Powers and Grant Inc. currently handles and manages sales teams for various industries principally involved in the Real Estate, Consumer, and
Pharmaceutical and Direct Selling companies.<br><br>
We assist companies in enhancing their competitiveness through application of competencies and integrate these essential factors needed to survive
today's need for continued innovation.<br><br></p>
</div>
<div id="footer">
<div id="navbottom">
<ul>
<li>Home</li>
<li>Who We Are</li>
<li>What We Do</li>
<li>Our Services</li>
<li>The Powers Team</li>
<li>Contact</li>
</ul>
</div><br>
<div id="copyright">Copyright © Powers and Grant, Inc. All Rights Reserved</div>
</div>
</div>
</body>
Please help! Thank you very much in advance.
I have made the changes here.
https://jsfiddle.net/66szogpm/1/
code to align your top nav text to center
#nav li {
line-height: 40px;
float: left;
position: relative;
width: 150px;
list-style: none;
}
code to align your bottom nav
#navbottom {
padding-left: 100px;
width: 1000px;
color: #fff;
font-size: 14px;
font-family: "Lato";
margin: 0 auto;
}
#navbottom ul {
padding: 0;
margin: 0;
margin-left: 20px;
margin-right: 20px;
}
#navbottom ul li {
display: inline-block;
position: relative;
list-style-type: none;
margin: 5px 10px;
}
You have used float: left in many places, which isn't necessary. All you had to do was change the display property to inline-block.
I haven't changed it for the top nav. But, you can try it out.