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?
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>
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>
Have done some researching on why it is doing this but, I can't seem too fix the problem. The header logo/text keeps overlapping. Anyone got an idea why it is doing this?
http://jsfiddle.net/uljima/bcm96v49/
resized:
http://i.stack.imgur.com/l2P3z.png
Tried many things but it keeps on overlapping the logo.
HTML:
<html>
<header>
<title>KeyStone Coffee</title>
<link rel="stylesheet" href="styles/styles.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</style>
</head>
<div class="wrapper">
<body>
<body>
<header>
<div class= "Company_Logo">
<img src="http://i.imgur.com/Qu8f4K3.png" title="source: imgur.com" alt="Company Logo" height="200" width="200"/>
</div>
<center>
<div class= "Company_Text">
<h1>Keystone Coffee</h1>
</div>
</center>
<div class="HPFGAC">
<nav>
<ul>
<center>
<li>HOME</li>
<li>PRODUCTS</li>
<li>FLAVORED COFFEE</li>
<li>GUIDE TO THE PERFECT TASTE</li>
<li>ABOUT</li>
<li>CONTACT</li>
</center>
</ul>
</nav>
</div>
</html>
</header>
CSS:
#wrapper {
height: 850px;
width: 960px;
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
}
.row:after{
clear: both;
}
.col{
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.row:after{
clear: both;
}
.col{
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.WebContainer{
width: 100%;
height: auto;
}
.articles{
width:90%;
height: auto;
margin: auto;
}
.DIV
{
margin-left:0px;
margin-right:0px;
}
.box2 {
display: inline-block;
width: 100%;
height: 100px;
margin: 1em;
}
html{
overflow: scroll;
height: 100%;
margin: auto;
width:100%;
}
body {
height: 960px;
margin: 0;
padding:0;
width:100%;
text-align:center;
}
header {
background: white;
color: Black;
padding: 0px 15px 15px 15px;
float: center-side;
margin-left: auto;
margin-right: auto;
}
header h1 {
margin: 0px;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul{
margin: 0px;
padding : 0 0 15px 0;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul li{
background: wwhite;
color: #9D795B;
display: inline-block;
list-style-type: none;
padding: 5% 15px 20px 15px;
margin: 0;
float: center-side;
margin-left: auto;
margin-right: auto;
font-size: 1.875em;
white-space:nowrap;
}
nav ul li a {
color: #9D795B;
float: center-side;
margin-left: auto;
margin-right: auto;
}
.Company_Logo{
float:center-left
clear: both;
position: absolute;
top: 0%;
right: 70.5%;
z-index: 9999;
display: block;
white-space:nowrap;
padding: 2px 2px 2px 2px;
}
.Company_Logo{
width:100px;
}
.Company_Text{
clear: both;
color:#9D795B;
font-size:50.5px;
font-family: 'Lobster', cursive;
display: inline;
white-space:nowrap;
}
.Company_Text{
clear: both;
position: relative;
top: 35px;
right: -2.75%;
z-index: 9999;
}
.HPFGAC{
clear: both;
font-family: 'Anton', sans-serif;
white-space:nowrap;
}
.HPFGAC a:link {
text-decoration: none;
}
.HPFGAC a:visited {
text-decoration: none;
}
.HPFGAC a:hover {
text-decoration: underline;
}
.HPFGAC a:active {
text-decoration: underline;
}
nice try but i must say you need some real work on your codes, it is pretty messed up.
HTML
<title>KeyStone Coffee</title>
<link rel="stylesheet" href="styles/styles.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</style>
</head>
<div class="wrapper">
<body>
<body>
<header>
<div class="Company_Logo"> <img src="http://i.imgur.com/Qu8f4K3.png" title="source: imgur.com" alt="Company Logo" height="200" width="200"/>
</div>
<center>
<div class="Company_Text">
<h1>Keystone Coffee</h1>
</div>
</center>
<div class="HPFGAC">
<nav>
<ul>
<center>
<li>HOME
</li>
<li>PRODUCTS
</li>
<li>FLAVORED COFFEE
</li>
<li>GUIDE TO THE PERFECT TASTE
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</center>
</ul>
</nav>
</div>
CSS
#wrapper {
height: 850px;
width: 960px;
margin:0 auto;
background-repeat: no-repeat;
background-position: center center;
}
.row:after {
clear: both;
}
.col {
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.row:after {
clear: both;
}
.col {
background: black;
border-radius: 5px;
color: white;
padding: .5px;
float: left;
margin: 1%;
width: 100%;
}
.WebContainer {
width: 100%;
height: auto;
}
.articles {
width:90%;
height: auto;
margin: auto;
}
.DIV {
margin-left:0px;
margin-right:0px;
}
.box2 {
display: inline-block;
width: 100%;
height: 100px;
margin: 1em;
}
html {
overflow: scroll;
height: 100%;
margin: auto;
width:100%;
}
body {
height: 960px;
margin: 0;
padding:0;
width:100%;
text-align:center;
}
header {
background: white;
color: Black;
padding: 0px 15px 15px 15px;
float: center-side;
margin-left: auto;
margin-right: auto;
}
header h1 {
margin: 0px;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul {
margin: 0px;
padding : 0 0 15px 0;
display: inline;
float: center-side;
margin-left: auto;
margin-right: auto;
}
nav ul li {
background: wwhite;
color: #9D795B;
display: inline-block;
list-style-type: none;
padding: 5% 15px 20px 15px;
margin: 0;
float: center-side;
margin-left: auto;
margin-right: auto;
font-size: 1.875em;
white-space:nowrap;
}
nav ul li a {
color: #9D795B;
float: center-side;
margin-left: auto;
margin-right: auto;
}
.Company_Logo {
float: left;
padding: 2px 2px 2px 2px;
}
header center{
overflow: hidden;
}
.Company_Text {
padding-top: 30px;
color:#9D795B;
text-align: left;
font-size:50.5px;
font-family:'Lobster', cursive;
white-space:nowrap;
}
.HPFGAC {
clear: both;
font-family:'Anton', sans-serif;
white-space:nowrap;
}
.HPFGAC a:link {
text-decoration: none;
}
.HPFGAC a:visited {
text-decoration: none;
}
.HPFGAC a:hover {
text-decoration: underline;
}
.HPFGAC a:active {
text-decoration: underline;
}
Link to Fiddle
i hope this helps, cheers.
.Company_Text {
clear: both;
color:#9D795B;
font-size:50.5px;
font-family:'Lobster', cursive;
display: inline;
position: relative;
white-space:nowrap;
}
.Company_Text {
clear: both;
position: relative;
top: 30px;
margin-left: 210px;
right: -2.75%;
z-index: 9999;
}
.HPFGAC {
clear: both;
font-family:'Anton', sans-serif;
white-space:nowrap;
margin-top: 60px;
}
Try this.
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;
}