I am trying to create a navigation bar that is horizontal although display:inline-block; isnt working for me. On Google Chrome and IE it still appears vertically.
This is my HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Clowning Around</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<div id="header">
<div class="wrap">
<div class="logo">
!# insert logo picture
</div>
<div id ="content">
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>News & Events</li>
<li>Classes & Camps</li>
<li>Gallery</li>
<li>Contact us</li>
<li>Enrol Now</li>
</ul>
</div>
This is my CSS
#content {
width: 40em;
margin: 0 auto;
padding: 40px 0;
}
ul#nav {
position: absolute;
right: 50%;
left: 50%;
list-style: none;
margin: 0;
padding: 0;
}
ul#nav li a {
float: left;
display: inline-block;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
text-decoration: none;
padding: .2em 1em;
Try this css :
#content {
width: 40em;
margin: 0 auto;
padding: 40px 0;
}
ul#nav {
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
ul#nav li {
position: relative;
float: left;
display: inline-block;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
text-decoration: none;
padding: .2em 1em;
}
you need to set float:left; to the <li>
http://jsfiddle.net/ySE2V/
ul#nav li {
float: left;
}
ul#nav li a {
display: inline-block;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
text-decoration: none;
padding: .2em 1em;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
padding: 8px 5px 3px 5px;
margin-right: 5px;
background-color: #034a7f;
}
You can try below code:
Working Demo
#content {
width: 50em;
margin: 0 auto;
padding: 40px 0;
}
ul#nav {
right: 50%;
left: 50%;
list-style: none;
margin: 0;
padding: 0;
}
Related
I've been trying to make a navbar, but even when I set the width to 100%, it doesn't take up the width. I attached my code here.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav {
display: block;
padding: 8px;
background-color: #dddddd;
}
<ul>
<li>Home</li>
<li>Generator</li>
<li>Contact</li>
<li>About</li>
</ul>
Remove the default margin on the body or add left:0 to your ul rules:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav {
display: block;
padding: 8px;
background-color: #dddddd;
}
body {margin:0;}
<ul>
<li>Home</li>
<li>Generator</li>
<li>Contact</li>
<li>About</li>
</ul>
*{
box-sizing: border-box;
margin: 0;
padding:0;
}
ul{
width: 100vw;
height: 10vw;
background-color: #003580;
display: flex;
justify-content:flex-end;
align-items: center;
}
ul li{
background-color: #dddd;
border-radius: 3px;
padding: 0 2px;
margin-right: 10px;
list-style: none;
}
.nav{
color: black;
text-decoration: none;
font-size: 25px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Barra de navegación</title>
<link rel="stylesheet" href="./stylos.css">
</head>
<body>
<header>
<ul>
<li>Home</li>
<li>Generator</li>
<li>Contact</li>
<li>About</li>
</ul>
</header>
</body>
</html>
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 2 years ago.
I'm coding a website annd a background picture isn't fitting the whole screen and there is white space between the picture and the border of the screen.I've searched on google for an hour and "margin:0; padding:0; border:0;" all haven't worked.
This is my code:
nav ul {
border-style: solid;
border-width: 0px;
padding: 10px;
margin: 0px 0px 0px 0px;
background-color: none;
text-align: center;
}
nav ul li {
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;
color: black;
font-size: 150%;
}
nav ul li a {
text-decoration: none;
color: black;
}
#big {
text-align: right;
color: black;
margin: 10px 0px 0px 0px;
padding: 10px 0px 0px 0px;
}
#first {
background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px 0px 0px 0px;
display: block;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
#text1 {
text-align: center;
}
#nav1 {
position: fixed;
text-align: center;
height: auto;
width: auto;
}
jpg {
line-height: 0px height:100%;
}
h1 {
margin-top: 5in;
}
<div id="first" background-image="Logo.jpg">
<header>
<nav id="nav1">
<ul>
<li>Home</li>
<li>Join</li>
<li>Contact us</li>
<li>About us</li>
<li>Subscriptions</li>
</ul>
</nav>
</header>
<br><br>
<h1 id="big">############################.</h1>
<p>.</p>
<br><br><br><br><br>
</div>
Sorry my code is poorly arranged and unprofessional.
I'd really appreciate an answer.
I believe you should add in your css
html,
body {
padding: 0;
margin: 0;
}
By default, the document body has a margin around it, that's why you saw a white border around your picture
html,
body {
margin: 0;
padding: 0;
}
nav ul {
border-style: solid;
border-width: 0px;
padding: 10px;
margin: 0px 0px 0px 0px;
background-color: none;
text-align: center;
}
nav ul li {
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;
color: black;
font-size: 150%;
}
nav ul li a {
text-decoration: none;
color: black;
}
#big {
text-align: right;
color: black;
margin: 10px 0px 0px 0px;
padding: 10px 0px 0px 0px;
}
#first {
background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px 0px 0px 0px;
display: block;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
#text1 {
text-align: center;
}
#nav1 {
position: fixed;
text-align: center;
height: auto;
width: auto;
}
jpg {
line-height: 0px height:100%;
}
h1 {
margin-top: 5in;
}
<div id="first">
<header>
<nav id="nav1">
<ul>
<li>Home</li>
<li>Join</li>
<li>Contact us</li>
<li>About us</li>
<li>Subscriptions</li>
</ul>
</nav>
</header>
<br><br>
<h1 id="big">############################.</h1>
<p>.</p>
<br><br><br><br><br>
</div>
This space is coming from the body tag. Just disable it using:
body {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav ul {
border-style: solid;
border-width: 0px;
padding: 10px;
margin: 0px 0px 0px 0px;
background-color: none;
text-align: center;
}
nav ul li {
list-style-type: none;
display: inline;
margin-right: 10px;
margin-left: 10px;
color: black;
font-size: 150%;
}
nav ul li a {
text-decoration: none;
color: black;
}
#big {
text-align: right;
color: black;
margin: 10px 0px 0px 0px;
padding: 10px 0px 0px 0px;
}
#first {
background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-repeat: no-repeat;
background-size: cover;
margin: 0px 0px 0px 0px;
display: block;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
#text1 {
text-align: center;
}
#nav1 {
position: fixed;
text-align: center;
height: auto;
width: auto;
}
jpg {
line-height: 0px height:100%;
}
h1 {
margin-top: 5in;
}
<div id="first" background-image="Logo.jpg">
<header>
<nav id="nav1">
<ul>
<li>Home</li>
<li>Join</li>
<li>Contact us</li>
<li>About us</li>
<li>Subscriptions</li>
</ul>
</nav>
</header>
<br><br>
<h1 id="big">############################.</h1>
<p>.</p>
<br><br><br><br><br>
</div>
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>
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?