If you visit a website I am working on foramtionMTL on firefox, you will notice that the background of the last element in the header menu "CONTACT US" doesn't span the entire length of the field.
Why is that? and how can I fix it?
HTML:
<div class="headmenus">
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>COURSES</li>
<li>VACANCIES</li>
<li>CONTACT US</li>
</ul>
</div>
CSS:
.headmenus {
background: none repeat scroll 0 0 #0086B2;
display: inline;
float: left;
margin: 0;
width: 100%;
}
.headmenus ul {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
display: inline;
float: left;
font-family: 'texgyreadventorregular';
font-size: 14px;
margin: 0;
padding: 0;
width: 100%;
}
.headmenus ul li {
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
display: inline;
float: left;
list-style-type: none;
padding: 0;
text-align: center;
width: 19.895%;
-moz-box-sizing: border-box;
}
.headmenus ul li a {
color: #FFFFFF;
display: inline;
float: left;
font-family: 'texgyreadventorregular';
font-size: 14px;
list-style-type: none;
text-align: center;
width: 100%;
padding:5px 0px;
}
.headmenus ul li:hover {
background: #89ab20;
cursor: pointer;
}
.headmenus ul li.active {
background: #89ab20;
}
headmenus ul li:last-child {
border-right: 0 none;
float: right;
width: 19.9%; !important
}
You are setting in your width value this:
.headmenus ul li {
width:19.895%;
}
Change it to 20% then the five items can be full 100% of the parent:
.headmenus ul li {
width:20%;
}
In addition include box-sizing for all browsers you only include that for -moz- prefix:
.headmenus ul li {
box-sizing:border-box;
-moz-box-sizing:border-box;
}
You have a typo in your css selector for the last element. It says headmenus ul li:last-child { instead of .headmenus ul li:last-child {. If you fix that you should be fine.
.headmenus ul li {
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
display: inline;
float: left;
list-style-type: none;
padding: 0;
text-align: center;
width: 20%;
-moz-box-sizing: border-box;
Try this
Related
My navigation bar doesn't work in Firefox. You can't click on any of the child items. I apologize if I'm putting too much code here, but I really don't know what's causing the issue. I've removed as much of the trivial stuff as I could.
#navbar {
width: 100%;
border-top: 1px solid #879478;
height: 35px;
}
#navigation {
width: 1000px;
margin-left: auto;
margin-right: auto;
margin-top: -10px !important;
}
#nav {
float: left;
width: 1000px;
height: 35px;
list-style: none;
}
#nav a {
text-indent: 0;
display: inline-block;
margin-top: -1px !important;
font-weight: normal;
border: 1px solid transparent;
font-style: normal;
height: 35px;
line-height: 35px;
text-decoration: none;
text-align: center;
}
#nav ul {
position: absolute;
list-style: none;
display: inline-table;
margin-top: 1px !important;
height: 35px;
}
#nav li:hover > ul {
display: block;
}
#nav li {
float: left;
}
#nav ul {
display: none;
}
#nav ul a {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
display: inline-block;
width: inherit;
text-align: center;
display: block;
font-weight: normal;
}
#nav ul {
padding: 0px;
z-index: 100 !important;
}
#nav ul li {
float: none;
}
#nav ul ul {
width: 141px !important;
padding-top: 1px !important;
border-top: 1px solid #6f8059 !important;
position: absolute;
margin-top: -38px !important;
left: 100%;
margin-left: 1px;
z-index: 100 !important;
}
<div id="navbar">
<div id="navigation">
<ul id="nav">
<li><a style="width: 150px !important;">subject 1</a>
<ul>
<li>child 1
</li>
<li>child 2
</li>
</ul>
</li>
</ul>
</div>
</div>
As #Nitin Garg said, #nav ul { display: none; } line is hidding child elements.
However, if you want to show childs element on parent li hover, you have to add this line :
#nav li:hover ul {display: block; }
I have a fairly simple navigation bar with a bottom border but I would like to box it off on either side - but not the top. So I get a |______________| surrounding all of my links but I am just starting out and whatever I try seems to border every single link which I don't want.
<nav>
<div align="center">
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>News</li>
<li>Careers</li>
<li>Contact Us</li>
</ul>
</div><!--navigation-->
</nav>
and css
nav {
width: 100%;
margin:0 auto;
}
nav ul li {
width: 16.6%;
float: left;
border-bottom: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
padding-left: 8px;
color: #202020;
font-family: "Myriad Pro Light";
text-transform: uppercase;
text-decoration: none;
font-size: 12pt;
}
nav ul li a:hover {
color: #89ccca
}
nav ul{
width: 80%;
list-style: none;
margin: 0;
padding: 0;
}
Use first-child and last-child properties and apply it like below.
CSS
nav ul li:first-child
{
border-left: 1px solid #A2A2A2;
}
nav ul li:last-child
{
border-right: 1px solid #A2A2A2;
}
FIDDLE DEMO
maybe i can help you
try this
nav ul li {
width: 16.0%;
float: left;
border-bottom: 1px solid #A2A2A2;
border-right: 1px solid #A2A2A2;
list-style-type: none;
display: inline;
}
nav ul li:first-child{border-left: 1px solid #A2A2A2;}
fiddle here
http://jsfiddle.net/zfdxko8h/
try including this one..
#navigation ul li:first-child {
border-left: 1px solid #A2A2A2;
}
#navigation ul li:last-child {
border-right: 1px solid #A2A2A2;
}
Here is The Fiddle
HTML :
<nav>
<ul>
<li>Home</li>
<li>History</li>
<li>Appointments</li>
<li>Contact us</li>
</ul>
</nav>
CSS :
nav {
position: relative;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
display: center;}
nav ul li {
display: inline;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 5px 0;
width: 100px;
background: #Cc3399;
color: #eee;
float: left;
text-align: center;
border-left: 1px solid #fff;
}
nav ul li a:hover {
background: #a2b3a1;
color: #000
}
Basically, I've managed to make this navigation bar, that fits my specifications. However, it's not centered, it's in position vertically, but horizontally it's way left and no where near the center of the page.
One solution is to replace inline to inline-block and use text-align: center to parent(also display: center is not valid css):
nav {
position: relative;
margin: auto;
padding: 0;
list-style: none;
width: 100%;
text-align: center;/*add text align-center*/
}
nav ul li {
display: inline-block;/*replace inline to inline-block*/
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 5px 0;
width: 100px;
background: #Cc3399;
color: #eee;
float: left;
text-align: center;
border-left: 1px solid #fff;
}
nav ul li a:hover {
background: #a2b3a1;
color: #000
}
<nav>
<ul>
<li>Home
</li>
<li>History
</li>
<li>Appointments
</li>
<li>Contact us
</li>
</ul>
</nav>
Since you have given margin as 100% for it will not have impact on margin.. So try giving 50% width to and it should work.
You can change like this...
nav
{
position: relative;
margin: auto;
padding: 0;
list-style: none;
width: 50%;
display: center;
}
to horizontally center an element, this element needs to be display:block; and it should have a width that is less than 100%
Here is the css, slight modification based on what you have
nav {
position: relative;
/*** centers the nav block ****/
margin-left: auto;
margin-right: auto;
width: 80%;
}
nav ul{
padding: 0;
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
display: inline-block;
text-decoration: none;
padding: 5px 0;
width: 20%; /*** make the centering look more vivid ****/
background: #Cc3399;
color: #eee;
float: left;
text-align: center;
border-left: 1px solid #fff;
}
nav ul li a:hover {
background: #a2b3a1;
color: #000
}
You can view it on jsfiddle
Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin
Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?
Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
I am new to CSS and I am trying to pop up a sub menu in my vertical menu, but it is not doing it... Please see my CSS and HTML below:
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position: relative;
top: 15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size: 120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
// IE only. Actual menu width minus left padding of A element (10px)
* html .glossymenu li a{
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float: left;
width: 150px;
}
and my HTML:
<div id="side">
<ul class="glossymenu">
<li>MENU</li>
<ul class="sub-level">
<li><span>Appetizer</span></li>
<li><span>Beverages</span></li>
<li><span>Desserts</span></li>
</ul>
<li>LOCATIONS</li>
<li>HOURS</li>
</ul>
</div>
The submenu element should be inside one of the li elements.
Check this out.
HTML
<div id="side">
<ul class="glossymenu">
<li>MENU
<ul class="sub-level">
<li><span>Appetizer</span></li>
<li><span>Beverages</span></li>
<li><span>Desserts</span></li>
</ul>
</li>
<li>LOCATIONS</li>
<li>HOURS</li>
</ul>
</div>
CSS
.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 130px;
border: 1px solid #9A9A9A;
border-bottom-width: 0;
position:relative;
top:15px;
}
.glossymenu li a{
background: white url(../images/glossyback.gif) repeat-x bottom left;
font: bold 11px/1.5em Verdana;
font-size:120%;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
}
* html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 130px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url(../images/glossyback2.gif);
}
ul.sub-level {
display: none;
}
.glossymenu li:hover > .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 100px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}