The link elements don't display correctly. I tried to set a line-height property for it, but it didn't work. Instead of this <li> elements got height property.
P.S Sorry for my english
footer {
width: 100%;
background: #eee;
position: fixed;
bottom: 0;
text-align: center;
}
footer p {
line-height: 40px;
display: inline-block;
margin:25px 20px 25px 0;
padding: 0 25px;
border-right: 1px solid #aaa;
}
footer ul {
display: inline-block;
width: 140px;
list-style: none;
margin: 25px 0;
padding: 0;
line-height: 40px;
}
footer li {
display: inline-block;
line-height: 40px;
}
footer a {
font-size: 25px;
color: #aaa;
text-decoration: none;
margin: 0 10px;
}
<footer>
<p>Some text</p>
<ul>
<li></li>
<li></li>
<li><a href="#" class='fab fa-behance'></a></li>
</ul>
</footer>
footer {
width: 100%;
background: #eee;
position: fixed;
bottom: 0;
text-align: center;
}
footer p {
line-height: 40px;
display: inline-block;
margin:25px 20px 25px 0;
padding: 0 25px;
border-right: 1px solid #aaa;
}
footer ul {
display: inline-block;
width: 140px;
list-style: none;
margin: 25px 0;
padding: 0;
}
footer li {
display: inline-block;
}
footer a {
font-size: 25px;
color: #aaa;
text-decoration: none;
vertical-align:middle;
margin: 0 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>
<footer>
<p>Some text</p>
<ul>
<li></li>
<li></li>
<li><a href="#" class='fab fa-behance'></a></li>
</ul>
</footer>
this what u looking for?
Related
I have 2 issues with my test page. I'm trying to get header to take up width of page. I set the width to 100% but it still will not expand out to width of page. And the dropdown for the "Links" item appears behind the wrapper element and therefore it is not possible to click on any of the underlying links. Thank you.
Codepen: https://codepen.io/centem/pen/dBdwxw
header {
margin: 0 auto;
width: 100%
height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display:none;
}
ul li:hover ul li {
display: block;
}
header is already set to 100% witdth. However, you've set fixed width and the background to the li. You can simply use flexbox and set flex: 1 to the items without worrying about their width.
body {
margin: 0 auto;
font: 1.1em;
background-image: url('CNDsplash.jpg');
background-repeat: no-repeat;
background-position: center;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
}
header {
margin: 0 auto;
width: 100%;
height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
}
header ul li {
height: 40px;
flex: 1;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
#title-heading {
float: left;
}
.hidden {
display: none;
}
.wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 2px solid #eee;
background: #fefefe;
opacity: 0.9;
filter: alpha(opacity=90);
/* for ie8 and earlier */
}
.upload-console {
/*background: #fefefe;*/
/*border: 2px solid #eee; */
padding: 20px;
/*opacity: 0.9;*/
/*filter: alpha(opacity=50);*/
/* for IE8 and earlier */
}
.upload-console-header {
padding: 0 0 20px 0;
margin: 0;
border-bottom: 2px solid #eee;
font-weight: 600;
margin-bottom: 20px;
}
.upload-console-drop {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
.upload-console-drop.drop {
border-color: #222;
color: #222;
}
.upload-console-body {
margin-bottom: 20px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-bottom: 20px;
}
.bar-fill {
height: 30px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
}
.bar-fill-text {
color: #fff;
line-height: 30px;
margin-left: 5px;
}
.upload-console-upload {
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.upload-console-upload span {
float: right;
}
<header>
<ul>
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li><a>Docs</a></li>
<li><a>Links</a>
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</li>
</ul>
</header>
<div class="wrapper">
<div id="form-heading">
</div>
<div class="upload-console">
<br>
<h2 class="upload-console-header">FTS</h2>
<div class="upload-console-body">
<h3>Select files</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed Files</h3>
</div>
</div>
</div>
</div>
body {
margin: 0 auto;
font: 1.1em;
background-image: url('CNDsplash.jpg');
background-repeat: no-repeat;
background-position: center;
}
h1,
h2,
h3,
h4,
h5 {
font-weight: 400;
}
header {
margin: 0 auto;
width: 100% height: 40px;
}
header ul {
height: 40px;
margin: 0px;
padding: 0px;
list-style: none;
display: flex;
z-index: 1;
position: relative;
}
header ul li {
display: flex;
flex-grow: 1;
height: 40px;
background-color: black;
opacity: .75;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white;
}
header ul li a {
text-decoration: none;
display: block;
width: 100%;
}
header ul li a:hover {
background-color: green;
}
header ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
#title-heading {
float: left;
}
.hidden {
display: none;
}
.wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
border: 2px solid #eee;
background: #fefefe;
opacity: 0.9;
filter: alpha(opacity=90);
/* for ie8 and earlier */
}
.upload-console {
/*background: #fefefe;*/
/*border: 2px solid #eee; */
padding: 20px;
/*opacity: 0.9;*/
/*filter: alpha(opacity=50);*/
/* for IE8 and earlier */
}
.upload-console-header {
padding: 0 0 20px 0;
margin: 0;
border-bottom: 2px solid #eee;
font-weight: 600;
margin-bottom: 20px;
}
.upload-console-drop {
height: 200px;
border: 2px dashed #ccc;
line-height: 200px;
color: #ccc;
text-align: center;
margin-bottom: 20px;
}
.upload-console-drop.drop {
border-color: #222;
color: #222;
}
.upload-console-body {
margin-bottom: 20px;
}
.bar {
width: 100%;
background: #eee;
padding: 3px;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-sizing: border-box;
margin-bottom: 20px;
}
.bar-fill {
height: 30px;
display: block;
background: cornflowerblue;
width: 0;
border-radius: 3px;
-webkit-transition: width 0.8s ease;
transition: width 0.8s ease;
}
.bar-fill-text {
color: #fff;
line-height: 30px;
margin-left: 5px;
}
.upload-console-upload {
border-bottom: 2px solid #ccc;
margin-bottom: 10px;
padding-bottom: 10px;
}
.upload-console-upload span {
float: right;
}
<header>
<ul>
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li class="dropdown"><a>Links</a>
<ul class="dropdown-content">
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
</ul>
</li>
</ul>
</header>
<div class="wrapper">
<div id="form-heading">
</div>
<div class="upload-console">
<br>
<h2 class="upload-console-header">FTS</h2>
<div class="upload-console-body">
<h3>Select files</h3>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="files[]" id="standard-upload-files" multiple>
<input type="submit" value="Upload files" id="standard-upload">
</form>
<h3>Or drag and drop files below</h3>
<div class="upload-console-drop" id="drop-zone">
Just drag and drop files here
</div>
<div class="bar">
<div class="bar-fill" id="bar-fill">
<div class="bar-fill-text" id="bar-fill-text"></div>
</div>
</div>
<div id="uploads-finished" class="hidden">
<h3>Processed Files</h3>
</div>
</div>
</div>
</div>
<script src="upload.js"></script>
<script src="global.js"></script>
I can't get the submenu to be displayed.
Here's my code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?php echo $title; ?></title>
<style type="text/css">
body
{
font-family: lucida grande ,tahoma,verdana,arial,sans-serif;
background-color: #e9e9e9;
}
body p
{
font-size: 0.8em;
line-height: 1.28;
}
#wrapper
{
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner
{
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area
{
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar
{
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer
{
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation
{
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav
{
list-style: none;
}
#nav ul
{
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li
{
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover
{
color: lightblue;
}
#subnav
{
list-style:none;
}
#subnav ul
{
margin: 0;
padding: 0;
width: auto;
display:none;
}
#subnav li
{
font-size: 24px;
float:inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link, nav a:active, nav a:visited
{
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover
{
color: lightblue;
}
.imgLeft
{
float: left;
width: 240px;
height: 150px;
margin: 0px 10px 10px 0;
padding: 10px;
}
.imgRight
{
float: right;
width: 200px;
height: 250px;
margin: 0px 0 10px 10px;
padding: 10px;
}
</style>
</head>
/*Master page code */
/*the submenu 'subproducts' is not displayed when i ran my code */
<body>
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<?php echo $content; ?>
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
</body>
</html>
I added this:
#nav li:hover ul {
display: block;
}
body {
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
background-color: #e9e9e9;
}
body p {
font-size: 0.8em;
line-height: 1.28;
}
#wrapper {
width: 1080px;
background-color: white;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
}
#banner {
background-repeat: no-repeat;
background-size: cover;
border: 5px solid #dedede;
height: 200px;
}
#content_area {
float: left;
width: 750px;
margin: 20px 0 20px 0;
padding: 10px;
}
#sidebar {
float: right;
width: 250px;
height: 400px;
margin: 20px 10px;
padding: 10px;
border: 2px solid #E3E3E3;
}
footer {
clear: both;
width: auto;
height: 40px;
padding: 10px;
border: 3px solid #E3E3E3;
text-align: center;
color: #fff;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
text-shadow: 0.1em 0.1em #333;
background-image: url(../Images/bar_background.png);
}
#nav {
list-style: none;
}
#nav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li:hover ul {
display: block;
}
#nav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#subnav {
list-style: none;
}
#subnav ul {
margin: 0;
padding: 0;
width: auto;
display: none;
}
#subnav li {
font-size: 24px;
float: inside;
position: relative;
width: 180px;
height: 50px;
}
#subnav a:link,
nav a:active,
nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#subnav a:hover {
color: lightblue;
}
<div id="wrapper">
<div id="banner">
</div>
<nav id="navigation">
<ul id="nav">
<li>Home</li>
<li>Products
<ul id="subnav">
<li>SubProducts</li>
</ul>
</li>
<li>Shop</li>
<li>About</li>
</ul>
</nav>
<div id="content_area">
<!--<?php echo $content; ?>-->
</div>
<div id="sidebar">
</div>
<footer>
<p>All rights reserved</p>
</footer>
</div>
I'm trying to align the dropdown menu when I hover over get started, but it doesn't work.
I tried adding the code left:auto; right:0; margin-right:-10px; to my CSS (as you'll see below) but it did nothing.
How do I fix this or add another code to make my menu aligned?
Is there a certain CSS trick to solve this?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
margin: 10px 0 0 10px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
margin-right: -10px;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
You should go with this:
left: 50%;
transform: translateX(-50%);
also, take a look at my comments in your CSS
nav ul {
background: transparent;
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #DDD;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
/*
margin: 10px 0 0 10px;
Use Equal margins: */
margin: 5px;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li a:hover {
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
/* important: */
position: relative;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* Position */
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
For nav ul li a
I set this margin: 10px 0 0 0px;
This would align the "Get Started" header with the drop down values Aligned Dropdown Img
Is this how you wanted ?
nav ul {
background: url(transparent.png);
width: 100%;
height: 52px;
text-align: center;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
position:relative
}
nav ul li >a {margin: 10px 0 0 10px;}
nav ul li a {
text-decoration: none;
color: #000;
letter-spacing: 0.2em;
font: normal 100% arial, sans-serif;
text-align: center;
display: inline-block;
padding: 9px 26px 9px 26px;
text-transform: uppercase;
}
nav ul li:hover a{
color: #000;
background-color: #fff;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
background: #f9f9f9;
min-width: 160px;
position: absolute;
display: none;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
left: 10px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #bada55;
left: auto;
right: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header>
<h1>Model United Nations Conference</h1>
<img src="dove.png" alt="a simple dove logo">
<nav>
<ul>
<li>Home</li>
<li class="dropdown"><a id="start" href="#">Get started</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li>Gallery</li>
<li>Contact Us</li>
<li>Forum</li>
</ul>
</nav>
</header>
So, on a page I'm making, I have a menu bar and a black box that changes color on hover. When I try to open the menu, and move the mouse over the black box (still in the boundaries of the dropdown), the drop down disappears and the black box :hover selector is called.
Basically, :hover is being detected when it's behind an element. I tried searching, but the only results I'm getting are how to force it to detect behind an element. I want to prevent that.
http://jsfiddle.net/yFD2E/13/
Important HTML:
<div class="menuBar">
<ul>
<li>Home
<ul>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</li>
<li>Home 2
<ul>
<li>Item 1</li>
</ul>
</li>
</ul>
</div> <!--End menu bar-->
<div class="center">
<div class="buttonGroup">
<div class="buttonMain">
<p class="hover">Plot</p>
<p class="show title">Plot</p>
<a class="show inFront" href="#">Test</a>
</div>
</div>
</div>
menubar.css:
.menuBar {
height: 50px;
width: auto;
background-color: #E9523F;
border-radius: 5px;
box-shadow: 0px 0px 10px #DA281F;
z-index: 10000;
}
.menuBar ul {
padding: 0;
list-style-type: none;
positoin: relative;
}
.menuBar ul li {
float: left;
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
border-radius: 5px;
}
.menuBar ul ul {
visibility: hidden;
position: absolute;
width: 80px;
border-radius: 0pxx 5px;
}
.menuBar ul ul li{
width: 80px;
height: 50px;
float: none;
position: relative;
}
.menuBar ul li a {
text-decoration: none;
color: #FAE12D;
text-align: center;
width: 80px;
line-height: 50px;
margin: 0;
padding: 0;
font-size: 17pt;
height: 50px;
display: block;
font-weight: 800;
}
.menuBar ul li:hover ul {
background-color: #DA281F;
box-shadow: 0px 0px 10px #DA281F;
}
.menuBar ul li:hover {
background-color: #DA281F;
box-shadow: 0px 0px 10px #DA281F;
}
.menuBar ul li:hover ul {
visibility: visible;
}
.menuBar ul li li:hover {
background-color: #FE3845;
}
buttons.css
.buttonMain {
height: 400px;
width: 400px;
background-color: #000;
float: left;
margin-left: 20px;
margin-right: 20px;
line-height: 400px;
}
.buttonGroup {
height: 500px;
}
.buttonMain .hover {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: center;
overflow: show;
color: #FFF;
}
.buttonMain .show {
position: absolute;
width: inherit;
height: inherit;
line-height: inherit;
margin: 0;
padding: 0;
text-align: center;
overflow: show;
color: #FFF;
background-color: #AAF;
opacity: 0;
}
.buttonMain:hover .show {
opacity: 1;
}
.buttonMain:hover .hover {
opacity: 0;
}
.inFront {
background-color: transparent !important;
}
.title {
line-height: normal !important;
text-decoration: underline;
font-size: 30pt;
font-weight: 600;
}
z-index will do the trick like following
.menuBar ul {
padding: 0;
list-style-type: none;
position: relative; // Just changed the spelling of position
z-index:1000; // Added
}
http://jsfiddle.net/peqh662a/
<div id="navbar">
<ul>
<li id="nav">
Home
</li>
<li id="nav">
HTML/CSS
</li>
<li id="nav">
PHP/MySQL
</li>
<li id="nav">
Contact
</li>
</ul>
</div>
This is all the html i'm currently using for my navigation bar. The CSS is:
#bar {
height: 3px;
width: auto;
background: rgb(100,100,100);
margin-left: -10px;
margin-right: -10px;
}
#navbar {
background: rgba(125,125,125,0.5);
width: auto;
height: 20px;
padding: 10px;
padding-left: 80px;
margin: -10px;
}
li#nav:hover{
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
list-style-type: none;
display: block;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
float: left;
padding: 10px;
margin-top: -26px;
}
I can not get the buttons to stay in the center. I've tried display: block inline and block-inline and none of those work like when other people use them. It currently looks like this:
http://i.gyazo.com/ad8ca7626594348dc1141bcbea8079d2.png
I'd like a little bit of space between the buttons but that should be easy with some margins.
Try this:
<style>
html, body{
padding: 0;
margin: 0;
}
#navbar {
background: rgba(125, 125, 125, 0.5);
width: auto;
height: 40px;
text-align: center;
}
li#nav:hover {
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
list-style-type: none;
display: block;
padding: 0;
margin: 0;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
display: inline-block;
padding: 10px;
}
</style>
<div id="navbar">
<ul>
<li id="nav">Home</li>
<li id="nav">HTML/CSS</li>
<li id="nav">PHP/MySQL</li>
<li id="nav">Contact</li>
</ul>
</div>
Check it out here: jsFiddle
Try the following css:
#bar {
height: 3px;
width: auto;
background: rgb(100,100,100);
margin-left: -10px;
margin-right: -10px;
}
#navbar {
background: rgba(125,125,125,0.5);
width: auto;
height: 20px;
padding: 10px;
padding-left: 80px;
margin: -10px;
}
li#nav:hover{
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
margin: 0 auto;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
float: left;
padding: 10px;
margin-top:-10px;
}
Here is the example.