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>
Related
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 get my nav bar to display horizontally in a line at the top of my web page below my h1 tag. I tried all sorts of different methods to get it to line up horizontally but it won't change. My nav bar continues to display vertically centered. I want it to be a thin bar up at the top below the h1. As of right now, it displays with each li stacked on top of the other instead of side by side. Any help or ideas are appreciated.
#wrapper{
background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid ;
text-align: right;
display:inline-block;
}
nav a{
text-decoration: none;
border: 1px solid;
width: 100%
}
nav a:link{color:cyan;}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
Make the li elements inline-block, and add box-sizing:border-box:
CSS: #wrapper {
background-color: #FFFFFF;
color: #000066;
width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main {
margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
box-sizing: border-box;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
box-sizing: border-box;
}
nav {
display: inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav a {
text-decoration: none;
border: 1px solid;
width: 100%;
}
nav a:link {
color: cyan;
}
nav a:visited {
color: #6699FF;
}
nav a:hover {
color: gold;
}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
I don't understand your question. what did you want?.But Is this you want?
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
}
h1 {background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 3em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;}
main {margin-left: 180px;
padding-bottom: 100px;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 98% !important;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
}
nav ul {
list-style: none;
width: 100%;
border: 1px solid;
text-align: right;
display: inline-block;
}
nav > ul > li {
float: left;
display: inline-block;
}
nav a{text-decoration: none;
border: 1px solid;
}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
<div id="wrapper">
<header>
<h1>Polar Bar</h1>
<nav>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
</header>
</div>
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>
It seems that when I zoom in on my browser, my navigation buttons completely go on top of each other. Check the following images:
Normal: http://i.imgur.com/yFxwrXw.png
Zoom: http://i.imgur.com/OnUP6Sg.png
Does anyone know a way to prevent this / stop this from happening?
body {
width: 100%;
height: 100%;
padding: 0;
max-width: 960px;
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 0.4166666666666667% 2.5%;
background: #595959;
margin: 0 10px;
border:1px solid #828282;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
width: 99.79166666666667%;
min-height: 50%;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="logo">
<img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
padding: 0;
min-width: 960px; /* Change max-width to min-width */
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
Set min-width: 960px; in body
DEMO
Here is a Fiddle
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;
}