Please help,
i want to align the header menu/nav links to vertically align. See:
http://hyindia.com/demo/myoffshore/index.html
See the CODE here:
nav ul { list-style-type:none; padding:0px; margin:0px; float:left; width:100%;}
nav ul li { float:left; width:119px; height:66px;}
nav ul li a {
float:left;
width:119px;
height:66px;
font:bold 15px 'Myriad Pro';
color:#fff;
text-shadow:1px 1px #1f1f1f;
text-align:center;
}
<nav>
<ul>
<li>HOME</li>
<li>HEALTH INSURANCE</li>
<li>LIFE INSURANCE</li>
<li>OVERSEAS MORTGAGES</li>
<li>ESTATE PLANNING</li>
<li>BANKING</li>
<li>WEALTH MANAGEMENT</li>
<li>QROPS</li>
</ul>
Since some of your nav items have text spanning several rows you won't be able to use the classic line-height-trick (which would be to set the line-height equal to the height).
Instead I'd suggest changing your menu styling to use display: table/table-row/table-cell since tables are excellent at vertically aligning things in the middle.
What you need to do is to change your entire nav styling to this:
nav {
display: table;
width: 100%;
}
nav ul {
display: table-row;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: table-cell;
vertical-align: middle;
}
nav ul li a {
display: block;
padding: 5px 10px;
}
Remove all the floats and widths + heights (using padding on the a instead) etc (what I have above is all you should have).
You'll also need to move the actual background styling from the as to the lis since the as won't be equal in height any more (but the lis will).
Here is five methods very well explained : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
Related
I have a nav / menu bar with a max-width of 900px. Inside the nav bar is five links:
<nav>
<ul>
<li>Workshops</li>
<li>Production workshop</li>
<li>About us</li>
<li>News</li>
<li>Contact us</li>
</ul>
</nav>
I would normally make the five links 20% width, to fill the width of the nav bar and be fluid.
However, because the link text has very different lengths "Production workshops" compared to "News", I want the widths of the links/tabs to be based on the text. I've added left and right padding to the links. But now this is not fluid (it breaks below 900px width) and I can't accurately get the links to fill the width of the nav bar.
Is there a way for the links to fill the width of the nav bar, have a flexible width and for the widths of the links/tabs to be different (based on the width of the text)?
A link to JS Fiddle:
https://jsfiddle.net/j0g53wnu/
<nav>
<ul>
<li>Workshops</li>
<li>Production workshop</li>
<li>About us</li>
<li>News</li>
<li>Contact us</li>
</ul>
</nav>
nav {
background-color:brown;
max-width:900px;
}
nav ul {
font-size:21px;
line-height:60px;
overflow:auto;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
text-align: center;
list-style: none;
margin: 0;
padding: 0;
}
nav a:link { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:visited { color:rgb(255,255,230); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:hover { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
nav a:active { color:rgb(51,153,51); background-color:rgb(0,0,0); border-right:1px solid rgb(255,255,230); display:block; padding:0 38px; }
You can make it fuild with CSS Grid in many different ways, one quick easy approach would be like this:
ul {
list-style-type: none;
display: grid;
grid-template: ". . . . .";
}
li {
background-color: grey;
text-align: center;
}
Here you can check a working version based on your same example:
https://jsfiddle.net/j0g53wnu/4/
Change the result area to see how it fixes the width.
Hope this help :)
Have you considered flexbox?
Just changed a little, including flex-grow (to allow for the different sizes of the items.)
nav ul {
font-size:21px;
line-height:60px;
overflow:auto;
text-align: center;
display: inline-block;
margin: 0;
padding: 0;
display:flex;
box-sizing:border-box;
}
nav ul li {
flex-grow:2;
text-align: center;
list-style: none;
}
1) add this code to Cascade style sheet file
.display-flex {
display:flex;
}
.fill {
fill:1 1 auto!important
}
2) add class display-flex to UL tag
<ul class="display-flex"></ul>
3) add class fill to each Li tag
<li class="fill"></li>
If you need another solve,
You can come with me via email
I'm doin' a navigation bar for a website. I created it etc. but when I go to one of the sub menu's it disappears..
here's my HTML:
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
and my CSS:
/* nav */
nav{
text-align:center;
}
nav a:visited{
color:black;
}
nav a{
text-decoration:none;
color:black;
}
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
border:1px solid black;
margin-left:10px;
margin-top:5px;
border-radius:4px;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
color:orange;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:6px;
margin-right:1px;
padding: 2px;
}
/*#menu, #menu ul {
margin:0 auto;
padding: 0;
}*/
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
and a little JSFiddle for ya: http://jsfiddle.net/nv741s01/
If you hover your mouse over a menu option [that has a sub-menu] long enough and then do it, it works, but people won't be willing to wait three seconds every time they want to visit a sub menu, so how do I resolve it so that it works as soon as you go to it?
any help would be much appreciated, thanks in advance :)
It was because there was a little gap between the sub menu and the menu, here is the fixed JSFiddle:
http://jsfiddle.net/nv741s01/3/
And here is what I changed:
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top: 1px;
margin-right:1px;
padding: 2px;
}
I changed the margin-top to 1px.
The margin of an element doesn't capture hover events. Use padding instead. Make these changes:
#menu li {
float: left;
position: relative;
list-style-type: none;
background:white;
padding-left:10px;
padding-top:5px;
margin:0;
}
/* add this rule */
#menu li a {
border:1px solid black;
border-radius:4px;
}
#menu li ul {
background: none repeat scroll 0 0 #ffffff;
margin-top:0px;
margin-right:1px;
padding: 2px;
}
Fiddle: http://jsfiddle.net/nv741s01/2/
You are using margin to position the submenu away from the main item. Since margin isn't part of the actual element it doesn't trigger any hover behaviours. Instead, use padding on the child ul element, since padding is actually considered part of the child's box. This will make the hover behaviours trigger consistently when moving the mouse from parent to child.
You also describe that there's a 3 second delay somewhere - that's impossible from this code, and I cannot reproduce it obviously.
Your dropdowns are disappearing because as you move your mouse cursor down, there's a gap between the parent menu item and the child menu item.
When the mouse leaves the parent li space, it no longer applies to the hover state, and so the CSS rule is ignored, leaving the child menu hidden.
If it helps, I tend to use a combination of margins and padding, to 'bump together' the parent and child menus, to help navigation.
I'm creating a page where I have two vertical menus that each have a header, and then directly underneath navigation type links.
I'm using an UL for the two headers, and would like to use sub UL for the rest of each menu. I'm having a problem where the sub UL takes on the properties of the parent and is displyaing inline instead of vertically. Also, the submenu links are indenting instead of positioning directly under the headers. I'm still fairly new at CSS, so if I'm going about this incorrectly, I really appreciate any advice. Thanks for your help
#Contentmenu ul {
margin: 0;
padding: 40px;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentmenu li {
display: inline;
padding:10px;
float: left;
}
#contentmenu a {
display:block;
padding:10px;
width:200px;
color:#ffffff;
font-size:26px;
background-color:#c7daff;
}
#Contentsubmenu ul {
margin: 0;
margin-left:auto;
margin-right:auto;
width:960px;
list-style-type: none;
list-style-image: none;
}
#contentsubmenu li {
display:block;
floa:left;
}
#contentsubmenu a {
display:block;
width:200px;
color:#000000;
font-size:20px;
border-bottom:solid;
border-bottom-width:1px;
background-color:#ffffff
}
HTML
<div id="contentmenu">
<ul>
<li>Header 1
<div id="contentsubmenu">
<ul>
<li>Article 1</li>
<li><a href="#" Article 2</a></li>
</ul>
</div>
</li>
<li>Articl3</li>
</ul>
if you want to only target the top-level , you would use this:
#contentmenu > ul
and
#contentmenu > ul > li
Also, CSS is case-sensitive, so make sure you are using #contentmenu
Does this fix your other issue as well?
Your CSS code is wrong at the element #contentsubmenu li. You use floa: left;, which is a incorrect CSS code. Additionally, just use float: none; on this element instead of float: left; and it will work as desired.
Demo on JSFiddle
Therefore that you are new in CSS:
Try to write clean code with correct indentations.
I've tried different tactics on making my menu fluid but none seem to work. I current have an interactive menu. Sometimes I want 6 items to show and sometimes I want 7 items to show.
When I have 7 items the menu is properly aligned over the entire width but when I have 6 items there's a lot of space on the right side of the menu.
I don't want to change the entire code every time I have deactivated an item and hope to be able to resolve this problem with just CSS.
Is it possible to fill this space up with the items?
I know I can do this with tables but I don't want to use tables.
HTML:
<nav id="menu_container">
<ul id = "menu">
<li class="menu_1 active">Home</li>
<li class="menu_2">test</li>
<li class="menu_3">test 2</li>
<li class="menu_4">bigger-menu-item</li>
<li class="menu_5">another-big-menu-item</li>
<li class="menu_6">Contact</li>
</ul>
</nav>
CSS:
#menu_container {
background: transparent url('/img/menu-bg.png') no-repeat;
float:left;
position:relative;
z-index: 999999;
width: 690px;
height:42px;
margin:29px 0 29px 19px;
}
#menu_container > ul {
padding: 0;
margin: 0;
margin-left:29px;
}
#menu_container > ul > li {
color: #ffffff;
float: left;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
When I add a width to the items some show the text on two rows and I don't want that.
I hope I made it clear what I want to do. Thank you.
Update: jsFiddle: http://jsfiddle.net/UDv2A/1/
If you just want to center the contents you could remove the float and display the lis as inline-block:
#menu_container > ul {
padding: 0;
text-align: center;
}
#menu_container > ul > li {
color: #ffffff;
display: inline-block;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
}
See jsFiddle.
If you want to expand the widths of the lis aswell, use display: table;:
#menu_container > ul {
padding: 0;
margin: 0 auto;
display: table;
width: 100%
}
#menu_container > ul > li {
color: #ffffff;
list-style-image: none;
position: relative;
text-align:center;
height:31px;
padding:11px 7px 0;
display: table-cell;
width: auto;
}
See jsFiddle.
And if you want this to be fluid when you resize down... make sure to give #menu_container a width of 100%.
I'd have another solution:
jsfiddle
/* five items */
#menu_container > ul > li:first-child:nth-last-child(5),
#menu_container > ul > li:first-child:nth-last-child(5) ~ li {
width: 20%;
}
/* six items */
#menu_container > ul > li:first-child:nth-last-child(6),
#menu_container > ul > li:first-child:nth-last-child(6) ~ li {
width: 16.66%;
width: calc(100% / 6);
}
Or you can try using 100% insted of fixed width.
#pscheuller just gave the right way to fill the container.
But I think this kind of styles has one problem, just in my point of view, that is the paddings of items are not the same. Items with longer text will have larger paddings. So I prefer to have space in both left and right, put <ul> in the center of container and give each item the same padding.
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.