How do I get my nav bar to span my web page? I have it set up to be 850px. The container div is set up to be 850px.
Here's the link and the code:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav {
width:850px;
}
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Your nav is 850px, however your black background ( ul ) is not.
To solve: Set the black background to nav instead.
The <ul> doesn't automatically fill the width of the 850-pixel container <div>. Set the <ul> width to 100% and it will.
ul {
width: 100%;
}
If having it 100% of the width of the container is what you want just assign the width of ul as 100%
Related
When I hover over the html section the html & css nav option is moved to the right for some reason, how do I get it to align with the other nav options.
http://codepen.io/anon/pen/bEqPRQ
#nav {
list-style: none;
text-align: center;
padding: 1.250em 0 1.250em 0;
background: #ffffff;
font-size: 106.25%;
font-family: 'Oxygen';
}
#nav li a {
text-decoration: none;
text-align: center;
color: #FFF;
}
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: fixed;
z-index: auto;
left: 400;
vertical-align: left;
}
#nav ul li:hover ul.dropdown {
display: block;
}
#nav ul li ul.dropdown li {
display: block;
}
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
}
#nav > ul > li > a {
text-decoration: none;
color: #000000;
}
#nav > ul > li > a:hover {
color: #00c5a2;
}
Your <ul> has a default styling (padding-left) which has to be removed. Adding
#nav ul li ul.dropdown {
padding-left: 0;
}
moves your text to the left.
You should also check your CSS, vertical-align: left and left: 400 (doesn't have a unit) aren't valid and won't work.
You can solve the problem adding padding left = 0 in the css of #nav ul li ul.dropdown :
#nav ul li ul.dropdown {
padding-left: 0;
}
Try changing the .dropdown style as follows:
#nav ul li ul.dropdown {
background-color: #000000;
display: none;
position: absolute;
z-index: auto;
left: 0;
vertical-align: left;
}
Then the parent li position to relative:
#nav > ul > li {
display: inline-block;
margin-right: 2%;
padding: 4.375em 1.250em 4.375em 1.250em;
position: relative;
}
This ensures the dropdown always positions itself absolute to its parent (the li).
Also adding padding: 0 to the dropdown ul:
#nav ul li:hover ul.dropdown {
display: block;
padding: 0;
}
Fiddle: https://jsfiddle.net/04zospoj/
I have some HTML code of a menu, I have started creating the CSS for the menu but I have come to a halt as I am not sure where to go next
I have added this CSS so far:
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra li {
display: inline;
margin-right:10px;
}
ul.sub-menu {
display:none;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
}
So, this shows the menu in a horizontal position but I want to display the sub menus in a vertical list below the parent item.
I created a fiddle here:
I made it work by implementing the box-sizing:border-box attribute:
/*Initialize*/
ul#menu-my-integra, ul#menu-my-integra ul.sub-menu {
padding:0;
margin: 0;
}
ul#menu-my-integra li, ul#menu-my-integra ul.sub-menu li {
list-style-type: none;
display:inline-block;
width:20%;
background: #666;
text-align:center;
}
/*Link Appearance*/
ul#menu-my-integra li a, ul#menu-my-integra li ul.sub-menu li a {
display: inline-block;
text-decoration: none;
color: #fff;
padding: 8px;
display:inline-block;
margin:0;
box-sizing:border-box;
}
/*Make the parent of sub-menu relative*/
ul#menu-my-integra li {
position: relative;
}
/*sub menu*/
ul#menu-my-integra li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
ul#menu-my-integra li:hover ul.sub-menu {
display:block;
}
NOTE: you will have to adjust the % width of the 'li' elements depending on how many there are. Hope that helps!
I have a drop down menu and when you hover over an option it shows the submenu, but then when you move the cursor down; sometimes the rest of the menu will hide. I have noticed there is a little bit of space (margin? border?) underneath that I am assuming is the culprit unless someone can tell me differently.
Below is an image to show what I mean; there is a small gap between the two options and I am assuming when you make the cursor go over that point it comes off "hover" and hides it
Any help would be greatly appreciated.
.menu ul { margin = ..;}
The above code makes the margin bigger, however even when it is set to 0 it still seems to be there..
This is my HTML for the menu
<td align="center" bgcolor="#666666">
<div class="menu" align="center">
<ul>
<li>Bar Equipment
<ul>
<li>Tills</li>
<li>Bar Furniture</li>
<li>Bar Sundries</li>
...
</div></td>
This is the Css for the menu class
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
margin: 0px;
text-align: center;
background: #efefef;
padding: 0px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #efefef;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
margin: 0px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding: 10px;
color: #757575;
text-decoration:none;
}
.menu ul ul {
background: #efefef;
padding: none;
position: absolute;
top: 100%; /* ?? */
}
.menu ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
see the jsfiddle: http://jsfiddle.net/p1kuzzdo/
try this css:
#charset "utf-8";
* {
margin: 0px; padding: 0px;
}
.menu {
background: none repeat scroll 0 0 #efefef;
height: 50px;
line-height: 50px;
margin: 0;
padding: 0;
text-align: center;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
height: 50px;
line-height: 50px;
list-style: outside none none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
padding: 0 10px;
}
.menu ul li:hover {
background: #999;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
color: #757575;
display: block;
text-decoration: none;
}
.menu ul ul {
background: none repeat scroll 0 0 #efefef;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
border-bottom: 0 solid pink;
border-top: 0 solid #6b727c;
float: none;
margin: 0;
padding: 0;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#fff;
display: block;
}
.menu ul ul li a:hover {
background: red;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 0px solid #6b727c;
border-bottom: 0px solid pink;
position: relative;
}
.menu ul ul ul li a {
color: #fff;
}
.menu ul ul ul li a:hover {
background: red; */
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
}
I have a CSS menu using the following CSS.
What is the best way to center the whole menu on the page?
I have tried using another <div> outside <nav> and setting margins but its just aligning left all the time.
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
jsfiddle : http://jsfiddle.net/njuVm/
You can center the navigation bar by using the following CSS rules:
nav {
margin: 0 auto;
text-align: center;
border:1px solid black;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0; /* << add this */
padding: 0; /* << add this */
display: inline-block; /* << add this */
vertical-align: top; /* << add this */
}
nav ul li {
float: left;
margin: 0; /* << add this */
padding: 0; /* << add this */
}
nav ul li:hover a {
color: #000000;
}
nav ul li a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
background-color: pink; /* optional... */
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
See demo at: http://jsfiddle.net/audetwebdesign/DP6Ax/
The key is to set display: inline-block for nav ul, which will allow your text-align: center rule to take effect.
Make sure to zero out margins and paddings on the ul and li elements. Everything else that you did was more or less right, so you should be good.
Instead of floating the li, you can display them as inline-blocks.
Then, they will be centered relatively to the ul because of text-align: center.
Since the ul is as wide as the nav by default, the li will look like centered relatively to the nav.
nav {
text-align: center;
border: 1px solid black;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
padding: 10px 15px;
color: #000000;
text-decoration: none;
}
nav li:hover > ul {
display: block;
}
nav > ul ul {
display: none;
position: absolute;
}
nav > ul ul > li {
border-bottom: 1px solid #000000;
}
nav > ul ul a:hover {
color: #666666;
}
<nav>
<ul>
<li>Add Contact</li>
<li>View Contact</li>
<li>Tickets
<ul>
<li><a>TEST1</a></li>
<li><a>TEST2</a></li>
</ul>
</li>
<li>Invoices</li>
<li>Itemised Calls</li>
</ul>
</nav>
First, when you float the ul's you have to clear the float by adding clear div:
HTML :
<div class="clear"></div>
CSS :
.clear{
clear:both;
}
And for centring the menu you should specify a width of the ul as in example and randomly I have set the width to 560px :
nav ul {
list-style: none;
width : 560px;
margin: 0 auto;
}
Take a Look:
http://jsfiddle.net/njuVm/6/
I know I've been asking a lot of questions and you guys have been great. There are two problems I'm having with my Nav.
1) First, the NAV isn't spanning the whole way.
2) For whatever reason, under "Services", the dropdown is spanning out long enough to fit all the links, but under "About Us", "Photo Credit" isn't.
Here's the link:
http://matthewtbrown.com/jeffandcricketquilt/index2.html
nav li {
font-family: 'bitterregular';
font-size:16px;
}
nav ul {
background: #000; /* Old browsers */
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
color:#fff;
}
nav ul li:hover a {
color:#FFF;
}
nav ul li a {
display: block;
padding: 10px 40px;
color:#FFF;
text-decoration: none;
}
nav ul ul {
background: #FFF;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #444;
border-bottom: 1px solid #444;
border-color:#FFF;
position: relative;
background-color:#000;
font-size:12px;
}
nav ul ul li a {
padding: 8px 40px;
color:#FFF; }
nav ul ul li a:hover {
background-color:#000;
color:#999;
}
nav ul li a:hover {
background-color:#000;
color:#999;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
It looks to me like your <nav> element actually is spanning the full width, but nav ul is not.
Remove display: inline-table; and it spans the full width. This should fix the "Photo Credit" link as well.
Remove the display: inline-table; from the nav ul. This should fix both problems. :)