I'm having a design issue with my css vertical menu.
It's working but it does not have the effect i would like to have when I do a mouse hover on a category
Below, you will see a simple vertical menu which appears when you hover your mouse over the main category
However I would like to have a small effect :
When the mouse is hover a category, i would like to add a background color (black).
It's working but I would like that the height and the width of the background to stick exactly to the same height and width of the text. Currently, I dont know why; the height of the background is more than the height of my text.
Here is some pictures of how it's right now and how i would like to be be.
How it 's now:
How I would like it to be:
Here is my code Html code
<div id="menu">
<ul id="MenuDeroulant">
<li style="margin-left:-10px;">Main categorie
<ul>
<li><a href="" >Subcat 1</a></li>
<li><a href="" >Subcat 2</a></li>
</ul>
</li>
</ul>
Here is my css code:
#MenuDeroulant
{
margin: 0;
padding: 0
}
#MenuDeroulant li
{
float: left;
list-style: none;
}
#MenuDeroulant li a
{
display: block;
padding: 0px 0px;
text-decoration: none;
color: #000;
white-space: nowrap;
text-align:center;
}
#MenuDeroulant li a:hover
{
background: #000;
color: #FFF;
}
#MenuDeroulant li ul
{ visibility: hidden;
padding: 0px 0px;
}
#MenuDeroulant li ul li
{
float: none;
display: inline;
}
#MenuDeroulant li ul li a
{
width: auto;
padding: 0px 0px;
}
#MenuDeroulant li ul li a:hover
{
background: #0000;
padding: 0px 0px;
}
Thanks in advance for your help and I wish you a very nice day,
Anselme
Use width:100% to all your <li> or li a elements and a fixed width to your <ul>. This will solve your issue.
With that CSS your nested ul is permanently hidden. You'll need something like
#MenuDeroulant li:hover ul {
visibility:visible;
}
to show the nested menu items then maybe display: inline on the #MenuDeroulant li ul li a
You can add a class to your menu hyperlinks giving them a margin-bottom:3px and it should bump up the links in the container.
I Have a <li> menu items with 2px border bottom as underline and a bold hover which makes other elements move while hovering. I tried to change the padding on the hover but without a result. (I think the problem is the added underline of border bottom)
#menu {
list-style: none outside none;
margin-top:40px;
text-align: center}
#menu li {
margin-right: 26px;
display:inline;}
#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}
<ul id="menu">
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
http://jsfiddle.net/tGcfh/
Try something similar:
HTML
<div id="menu_container">
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
</ul>
</div>
CSS
#menu_container {
width: 100%;
display: table;
}
#menu_container ul li {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 50px;
}
#menu_container ul li a {
font-size: 14px;
}
#menu_container ul li a:hover {
font-size: 24px;
}
This will work perfectly as expected, but have in mind that display:table is not supported in IE7 and bellow.
make the font size same in hover time and normal time on hover time font-size:16px is there and normal time font-size:14px is there... and hover time font weight bold is there.
just give the following css for hover. You have gave bold, border bottom and size change, it causes alignment issue. Otherwise you have to give specified width to each link.
#menu2 a:hover {
text-decoration:underline;
}
if change this
#menu a:hover {
border-bottom:2px solid #ac9962;
font-size:16px;
letter-spacing: -2px;
white-space: nowrap;
font-weight:bold;}
delete
font-size:16px;
letter-spacing: -2px;
font-weight:bold;
This may fix your problem
I have created a navigation bar that is centered with CSS which works. Each li item is separated with a border which is a background image. When hovering on the nav items, the separator disappears because the hover changes the background (I guess) but I wonder how I can fix this, padding or margin can't work because it will just shift the li element.
Second problem is that the sub menu items aren't displaying correctly and I have no idea why...
Demonstration: http://jsfiddle.net/Xenios/tfbhh/9/embedded/result/
The code: http://jsfiddle.net/Xenios/tfbhh/9/
I'm trying to get this to work for almost a week, and I'm quite tired of it, so I'm looking here for support.
Separator
As you know the main bar (nav_container) has a background image, which makes up the look of the button. The background for each button is the separator and nothing else (10px on the right). So, when your on hover background shows, because its park of the non-hover background.
In order to fix this you need to put the separator in it's own <li>, with the non-hover background. Then when you hover the elements they can easily change to your current on hover image with.
If you don't want to separate the <li> elements then, you will have to will have to make individual full width images for each button, but looking at the way you've gone about making this menu, I doubt you will want to do this.
Here is your working example (I only did the first few buttons): http://jsfiddle.net/tfbhh/43/
Submenu
As I mentioned above, you have set the container background image, you haven't done this on your submenu items, so thats why they don't have a larger looking button. Use your developer toolbar (F12) to see the styling and this should clear it up.
You can use a left padding equal to the width of the separator on the li and change only the background on the a. Also I noticed you used class="separator" on all but the first list item. You could replace that with the :first-child pseudo selector. Then you would get something like this:
li:first-child { padding-left: 0; background: transparent; }
li { padding-left: 3px; background: url(separator.png) no-repeat; }
li a { line-height: 40px; padding: 0 15px; }
li a:hover { background: url(anchor-hover.png) repeat-x; }
Edit: The CSS above covers the core styling of this solution. Here's a working example (using background colors):
http://jsfiddle.net/haa5X/3/
The complete CSS:
ul { overflow: hidden; background: green; }
li:first-child { padding-left: 0; }
li { padding-left: 3px; float: left; background: red; }
li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
li a:hover { background: purple; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Edit 2: Sorry, missed the part of the submenu:
http://jsfiddle.net/haa5X/4/
The complete CSS:
ul { overflow: hidden; margin: 0; background: green; }
ul > li:first-child { padding-left: 0; }
ul > li { padding-left: 3px; float: left; background: red; }
ul > li a { float: left; line-height: 40px; padding: 0 15px; background: yellow; }
ul > li a:hover { background: purple; }
li ul { display: none; position: absolute; margin-top: 40px; }
li:hover ul { display: block; }
li li { padding-left: 0; float: none; display: block; }
li li a { float: none; display: block; width: 100%; }
The complete HTML:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>First sub item</li>
<li>Sub item 2</li>
<li>Last sub item</li>
</ul>
</li>
<li>Item 3</li>
</ul>
I can't get this footer to align and sit on the bottom properly - it should be 3 column and centered on the page. Can anyone help?
/* FOOTER */
#footer {
line-height: 80px;
width:100%;
color: #fff;
height: 80px;
background-color: #111;
padding: 30px 0px 0px 0px;
}
/* column width */
#footer > ul > li {
width: 250px;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px;
}
#footer > ul > li > ul {
font-weight: normal;
list-style:none;
font-size: .80em;
}
#footer a, #footer a:visited, #footer a:active {
color: #ffffff;
}
#footer a:hover {
color: #ffffff;
}
<div id="footer">
<ul>
<li>
<ul>
<li>About</li>
<li>Contact</li>
<li>Spare</li>
</ul> </li>
<li>
<ul>
<li>Terms</li>
<li>Privacy</li>
<li>Disclaimer</li>
</ul> </li>
<li>
<ul>
<li> or content on this website. Full disclaimer</li>
</ul>
</ul>
The padding and margin on the body element needs to be zero if you want elements to be flush against the browser window.
I don't think you can center a group of elements if they're floated. Have you considered applying display:inline-block to the column LIs, instead of float:left?
Set #footer width property to as much as you want (750px min since you set the li width to 250px) and then set margin-left and margin-right to auto. This will center the footer. As far as the bottom position goes you could adjust it by changing the setting/changing the margin-top property of the #footer div ... i don't understand exactly what "sits on the bottom properly" means
Simple, Give each group a width of about 32% then give the footer a padding so the left on is not flush with the edge.
#footer > ul > li {
width: 32%;
list-style:none;
float: left;
border-left: 1px solid #fff;
padding-left: 10px;
}
I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.
Here is my code:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><span>Om kampanjen</span></div></li>
<li id="node_id_65"><div><span>Fakta om inneklima</span></div></li>
<li class="lastli" id="node_id_66"><div><span>Statistikk</span></div></li>
</ul>
<!-- Top menu content: END -->
</div>
UPDATE
I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion.
But the list items are still floated left within the ul.
Do I need Javascript to accomplish this?
From http://pmob.co.uk/pob/centred-float.htm:
The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.
Code
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
<ul>
<li>Button 1</li>
<li>Button 2's a bit longer</li>
<li>Butt 3</li>
<li>Button 4</li>
</ul>
</div>
This works for me. If I haven't misconstrued your question, you might give it a try.
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}
<div id="centerDiv">
<ul class="centerUL">
<li>Amazon 1 </li>
<li>Amazon 2 </li>
<li>Amazon 3</li>
</ul>
</div>
With CSS3 flexbox. Simple.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
This is the simplest way I found. I used your html. The padding is just to reset browser defaults.
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64">
<div><span>Om kampanjen</span>
</div>
</li>
<li id="node_id_65">
<div><span>Fakta om inneklima</span>
</div>
</li>
<li class="lastli" id="node_id_66">
<div><span>Statistikk</span>
</div>
</li>
</ul>
<!-- Top menu content: END -->
</div>
Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Try this:
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
Do it like this :
<div id="footer">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
And the CSS:
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}
Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.
It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
Demo - http://codepen.io/grantex/pen/InLmJ
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Menu</li>
<li>Others</li>
</ul>
</div>
.navigation {
max-width: 700px;
margin: 0 auto;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 10px;
width: 100%;
}
Omg so much cleaner.
Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.
To align text and inline level elements within a block level element use text-align:center;. So all together something like...
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
... should work.
The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...
ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods
(".").
I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)
/*ul wrapper*/
.gallery_wrapper{
width: 958px;
margin: 0 auto;
}
/*ul list*/
ul.gallery_carrousel{
display: inline-block;
margin: 0 auto;
}
.contenido_secundario li{
float: left;
}
i use jquery code for this. (Alternative solution)
$(document).ready(function() {
var margin = $(".topmenu-design").width()-$("#topmenu").width();
$("#topmenu").css('margin-left',margin/2);
});
div {
text-align: center;
}
div ul {
display: inline-table;
}
ul as inline-table fixes the with issue. I used the parent div to align the text to center.
this way it looks good even in other languages (translation, different width)
#Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.
[it was set up using robusto's sample code]
HTML:
<div id="centerDiv">
<ul class="centerUL">
<li><img src="http://placehold.it/200x150> </li>
<li><img src="http://placehold.it/200x150"> </li>
<li><img src="http://placehold.it/200x150"></li>
</ul>
</div>
CSS:
div#centerDiv {
width: 700px;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
}
.centerUL li {
display: inline;
text-align: center;
}
ul{margin-left:33%}
Is a decent approximation on big screens. Its not good, but a good dirty fix.
What worked for me was just setting the li item's display property to inline-flex:
li {
display: inline-flex;
}
<ul>
<li>Item 1</li>
<li>Item 1</li>
</ul>
You may choose to add justify-content: center to the lis, and padding: 0 to the ul to straighten things out.
.topmenu-design
{
display: inline-table;
}
That all!