Hi,
I wouldlike tochange thebackground color of theheaderelement, but itdoes not workas Iimagined
First of all, here is the HTML:
<body><div id="wraper"> <header> <h1><span>Pacific</span> Coastal Highway</h1> <nav> <ul> <li>Home</li> <li>Big Sur</li> <li>Pfeiffer Beach</li> <li>Elephant Seals</li> <li>Morro Bay</li> </ul> </nav> </header> // ... some other HTML elements & content ...</body>
So, within <header> elementwe have <h1> and <nav> elements, and within that <nav> element there is a list thatis actually menu.
Here itCSScodethat refers totheseelements:
#wraper { width: 1200px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: 0px; border-right: 1px solid #000000; border-left: 1px solid #000000;
}
body { margin: 0; background-color: #CBD2FB; font-family: "OpenSans Regular", "Gill Sans MT", Arial, "Times New Roman", sans-serif; color: #202020; background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%); background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 11.91%,rgba(232,238,245,1.00) 25.91%,rgba(202,212,220,1.00) 100%,rgba(0,0,0,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(138,169,207,1.00) 100%,rgba(135,167,207,1.00) 100%,rgba(202,212,220,1.00) 100%);
}
h1 { margin-top: 0px; font-size: 48px; text-shadow: 1px 1px 2px #969696; padding-top: 32px;
}
h1, h2, h3 {
font-family: "Prociono Regular", "OpenSans Regular", "Gill Sans MT", "Times New Roman", Arial; color: #507AAD; text-align: center;
}
h1 span {
position: relative; top: -37px; left: 35px; font-family: GoodDog, Arial, "Times New Roman", "Gill Sans MT", sans-serif; font-size: 47px;
}
header nav ul {
margin-right: auto; margin-left: auto; list-style-type: none; padding-left: 0px; width: 705px; /* [disabled]margin-bottom: 10px; */
}
nav ul li {
float: left; padding: 10px; display: block; width: 110px; text-align: center; background-color: #A9A3FF; border-right: 1px solid #FFFFFF; border-radius: 23px; background-image: -webkit-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%); background-image: -moz-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: -o-linear-gradient(270deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%);
background-image: linear-gradient(180deg,rgba(135,167,207,1.00) 0%,rgba(204,217,234,1.00) 60.11%); margin: 18px 5px;
}
And, finally, here'show it looks:
Now, I'd like tochange thebackground color of the <header> element (to chage that white behind that <h1> and menu into some other color), so I just added the background color of the <header> element in CSS:
header { background-color: #FF2D31;
}
But, here is how it looks now:
As you can see, although <nav> element with list (menu) is IN <header> element - the background color of <header> is just behind <h1> element.
Do you knowwhyit's happening, and whatwould be the bestway tosolvethisproblem?
Thank you in advance.