I am trying to create a Navigation Menu with dropdown sub-menus. When I am trying to change "display" property from "None"to "Block" for Nested it is not working. Here below is code.
In the Code I have created Main Navigation Menu under with class="nav". and dropdown required on hover over elements in nav class.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS</li>
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Use !important in this style because your styles applied on id(which has highest priority in CSS) are not getting overridden by your style.
.nav>ul>li:hover ul {
display: block !important;
}
Also incase of products. the ul was not inside the li element.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block !important;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
OR
Change your id to class in case of products and services and your code will work without important as well.
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.products li {
padding: 9px 0px;
}
.services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
display: none;
}
.services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul class="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul class="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
This is an issue of specificity: you set the display: none; on an id selector, which has very high specificity, but set display: block; on a very low specificity selector: the descendant selector. The id will override that selector no matter where they show up in the cascade. Consider abstracting your display:none to only be a descendant selector (removing that property from #products, etc.), and it should work fine:
.nav>ul>li ul{
display: none;
}
Some helpful reading:
https://www.w3schools.com/css/css_combinators.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Navigation Menu with dropdown sub-menus
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
.products {
list-style-type: none;
width: 100px;
height: 150px;
position: absolute;
top: 165px;
right: 206px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.products li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.services {
list-style-type: none;
width: 100px;
height: 147px;
position: absolute;
top: 165px;
right: 85px;
background-color: #f9f9f9;
margin: 0px;
padding: 10px 10px;
text-align: center;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
}
.services li {
color: black;
padding: 9px 0px;
background-color: white;
}
.products li:hover {
background-color: #ddd;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li:hover ul {
display: block;
}
I would remove the display: none from the services and products css because IDs have high specificity and will override other rules. While !important might temporarily solve this issue, I would not rely on !important as it could cause more issues later on.
You can declare a non-hovered rule with display: block alongside your current hovered rule.
<!DOCTYPE html>
<html>
<head>
<title>BASIC HTML PAGE</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.head {
padding: 15px;
}
#contact span {
font-weight: bold;
}
#contact {
position: absolute;
top: 30px;
right: 10px;
line-height: 5px;
text-align: right;
}
.nav {
background: #000;
color: #fff;
overflow: auto;
padding: 15px 0px;
}
.nav>ul {
list-style-type: none;
padding: 0px 10px;
float: right;
margin: 0px;
}
.nav>ul>li {
display: inline;
padding: 15px 10px;
}
#products {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 200px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#products li {
padding: 9px 0px;
}
#services {
list-style-type: none;
width: 100px;
height: 140px;
position: absolute;
top: 150px;
right: 100px;
background: red;
margin: 0px;
padding: 10px 10px;
text-align: center;
}
#services li {
padding: 9px 0px;
}
.nav>ul>li:hover {
background: red;
}
/*Please check Code Here.*/
.nav>ul>li ul {
display: none;
}
.nav>ul>li:hover ul {
display: block;
}
</style>
</head>
<body>
<div class="head">
<h1>BUSINESS NAME</h1>
<div id="contact">
<p><span>Mobile:</span>+918050000824</p>
<p><span>EMAIL:</span>garg.ishu#gmail.com</p>
</div>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li class="productshome">PRODUCTS
<ul id="products">
<li>PRODUCT-1</li>
<li>PRODUCT-2</li>
<li>PRODUCT-3</li>
<li>PRODUCT-4</li>
</ul>
</li>
<li id="serviceshome">SERVICES
<ul id="services">
<li>SERVICE-1</li>
<li>SERVICE-2</li>
<li>SERVICE-3</li>
<li>SERVICE-4</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</body>
</html>
Related
body {
background-image: url("pirat.jpg");
}
h1{
font-size :100px;
}
h3{
font-size :50px;
}
<style type="text">
*{
box-sizing: border-box;
outline: none;
}
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
img{
width: 100%;
height: 100vh;
}
.container nav{
position: absolute;
width: 100%;
top: 0;
height: 60px;
background-color: #383838;
color: white;
}
nav ul{
float: right;
list-style: none;
margin: 0;
padding: 0;
width: 600px;
}
nav li{
display: inline-block;
line-height: 56px;
margin:0 25px;
}
nav li a{
display: block;
color: white;
text-decoration: none;
font-size: 13px;
transition: .5s all;
}
a:hover{
color:#808080;
border-bottom: 5px solid white;
}
#myInput{
position: relative;
margin-top: 10px;
padding: 5px 10px 5px 20px;
width: 2300x;
height: 25px;
border-bottom: 2px solid#006699;
font-size: 15px;
color: #006699;
border-radius: 50px;
align-items: center;
float: right;
z-index: 0;
}
#btn{
display: none;
}
.check{
font-size: 30px;
color: white;
float: right;
line-height: 60px;
margin-right: 20px;
margin-left: 10px;
cursor: pointer;
transform: rotate(-90deg);
display: none;
}
#media(max-width: 800px){
nav ul{
position: fixed;
width: 40%;
height: 100vh;
top: 60px;
left: 100%;
text-align: center;
background-color: #2c3e50;
transition: all .5s;
}
nav ul li{
display: block;
}
nav ul li a{
font-size: 20px;
color: white;
}
.check{
display: block;
}
#btn:checked ~ ul{
left: 60%;
}
#media(max-width: 500px){
}
#myUL {
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd;
margin-top: -1px;
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px; color: black;
display: block;
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Add a hover effect to all links, except for headers */
}
.text input:focus + .hide {
display: block !important;
}
.hide {
display: none;
}
.container { position: relative; }
<html>
<head><title>Home</title>
<font color="white">
<center>
<h1></h1>
</center>
<link rel="stylesheet" type="text/css" href="Principala.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<font color="white">
<div class="relative">
<font color = "blue">
<h3></h3>
<div class="container">
<nav>
<input type="checkbox" name="" id="btn">
<label for="btn" class="check">!!!</label>
<div class="search"><input type="text" id="myInput" onkeyup="myFunction()" placeholder="search engine"></div>
<ul>
<li>HOME</li>
<li>SERVICE</li>
<li>CONTACT</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</nav>
<div class=hide>
<ul id="myUL">
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
<li>Calvin</li>
<li>Christina</li>
<li>Cindy</li></ul></div>
<script src="Principala.js"></script>
</script>
</body>
</html>
What is wrong? The suggestions don't want to show when I write in the search box
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
I am trying to create my own little Code Player. Similar to jsfiddle site. Right now I am having trouble with CSS.
I would like to center my menubar ( the buttons HTML, CSS, Javascript, result) in the topbar.
I just started learning HTML, CSS and Javascript. Do you have an idea how I can solve this problem?
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
}
#menu ul {
height: 30px;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
Use this styles for your menu:
#menu {
width: 500px;
margin: 0 auto;
padding-top: -1px;
display: flex;
justify-content: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
No need for the width and margin on #menu. Then you can use display: flex; justify-content: center; padding: 0; on #menu ul to center it's contents. I also removed the floats from #menu li because they're no longer necessary.
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
padding-top: -1px;
}
#menu ul {
display: flex;
justify-content: center;
padding: 0;
}
#menu li {
list-style: none;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
If you apply text-align: center to your header and change the div containing the list to display:inline-block it should do the trick. I also removed the padding, margin, and width:
#header {
width: 99%;
height: 50px;
background-color: steelblue;
margin-top: -10px;
margin-left: -10px;
text-align:center;
}
#appname {
padding: 20px 0px 10px 20px;
float: left;
color: white;
font-size: 20;
font-style: italic;
}
#run {
float: right;
margin: 20px 20px 10px 0px;
}
#menu {
margin: 0 auto;
padding-top: -1px;
display:inline-block;
}
#menu ul {
height: 30px;
padding:0;
margin:0;
}
#menu li {
list-style: none;
float: left;
height: 20px;
padding: 5px 10px;
border: 1px solid grey;
background-color: white;
}
#menu li:hover {
background-color: darkgrey;
}
.break {
clear: both;
}
<div id="header">
<div id="appname">
<b>Code Player</b>
</div>
<div id="run">
<button>RUN</button>
</div>
<div id="menu">
<ul>
<li id="buttonHTML">HTML</li>
<li id="buttonCSS">CSS</li>
<li id="buttonJS">Javascript</li>
<li id="buttonResult">Result</li>
</ul>
</div>
</div>
<div class="break"></div>
I have two questions. The first is that when I write in my html tag I cannot use my the hyperlink when running the page. The other and main reason is that my code will not stretch across the entire page.
Here is the css I wrote for styling the page
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.maincontainer{
width: 100%;
margin: 0 auto;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%;
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c;
}
.button-primary:hover {
background-color: #05370c;
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 100%;
margin: 0;
background-color: #2c421f;
}
and this is my html I wrote for the page. Any help would be awesome. I have been stuck here for a couple days.
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="100%" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
Follow this:
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.maincontainer {
width: 100%;
margin: 0 auto;
}
.picture {
display: inline;
margin: 0;
padding: 0;
position: fixed;
left: 0;
right: 0;
z-index: -1;
background-size: 100%;
}
.button {
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c;
}
.button-primary:hover {
background-color: #05370c;
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul {
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer {
clear: both;
}
nav {
color: height: 100%;
margin: 0;
background-color: #2c421f;
}
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="100%" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
It is the position:fixed on the .picture in your css that is causing your issue. Also I just noticed that your maincontainer does not have the closing div.
Remove position:fixed from your class picture
.picture{
display: inline;
margin: 0;
padding: 0;
z-index: -1;
background-size: 100%;
}
And your hyperlink seems to be working..Isnt that what you meant?
Use this one:
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="http://www.dvd-ppt-slideshow.com/images/ppt-background/background-5.jpg" width="100%" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
STYLE:
<style>
button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c;
}
.button-primary:hover {
background-color: #05370c;
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 100%;
margin: 0;
background-color: #2c421f;
}
</style>
Hope this will help you. If any other question let me know?
I'm having trouble with the header div of this website I'm making. There is padding or something appearing underneath my horizontal menu bar even though my padding is set to 0. I know that similar posts have been made about the but I have read quite a few and none of the answers seemed to do the trick for me. I have changed the background of the header div to yellow to make it more visible. There is also a pixel or two on either side of the menu bar which are unwanted. I'll put my css and html code below. screenshot
<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
<li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
<li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
<li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
<li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
</ul>
</ul>
And here is the relevant CSS. (The 'Big' class is what I'm using for all the major elements on the page.)
body {
background-image:url("Images/background.png");
background:tile;
}
.header img {
width: 100%;
}
.header {
background-color: yellow;
height: auto;
padding-top: 30px;
padding-left: 0px;
padding-bottom: 0px;
margin-top: 10px;
}
.big {
width: 80%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px #C5C5C5;
}
Here is the css for my navbar.
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
I have added an example to show http://codepen.io/simondavies/pen/jWjoBy
It working please check out the css, html etc
I have guestimated some stuff... Hope it will be a help
<div class="big header">
<div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<li><!--<ul class="logo"></ul>--></li>
</ul>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background-color: yellow;
height: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 150px;
padding: 30px 0 15px 0;
margin: 0;
}
.header-img img {
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.big {
margin: 0 auto;
padding: 0;
margin-top: 10px;
width: 80%;
box-shadow: 0px 0px 20px #C5C5C5;
}
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin: 0;
padding: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"] {
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float: right;
list-style-type: none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
You have an error in your HTML:
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
The only descendants of either <ul> or <ol> should be <li>. It is possible that this could be the issue.
I corrected the markup in two ways, without reproducing your issue:
By wrapping <ul class="logo"> inside of an <li> (essentially assuming it was a sublist in your list
By closing your first <ul>, and then letting the second list sit adjacent to it
But I also could not reproduce your issue by leaving the markup alone
So, the issue may be:
You need to use a CSS reset to remove default margins and paddings that the browser is providing
There is another ruleset that is adding padding to your .header
That other ruleset may have a higher specificity
That other ruleset may have an !important declaration