Hi guys i'm trying to learn css ul and li menu bar. i'm trying to create this design http://s13.postimg.org/5bz1a4kw7/divider.jpg having the spaces and the divider per each menu bar, i can't seem to get the spacing, i tried adjusting it, but i can't get a grip on how to have this spacing per menu bar (li). Can you please get me to the right direction? Thanks
here's what i've done so far
http://jsfiddle.net/blackknights/Wbfjg/
<ul id="mcolor">
<li><font color="#000000"> Home </li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I have updated your code.
li a{
display:block;
padding:5px 10px;
background:#ccc;
border-right:1px solid #fff;
}
li a.last{
border-right:none;
}
Check the jsfiddle
Try this Fiddle. Basically, make use of padding-left and padding-right and min-width for li elements.
Related
Here I have this markup:
<div class="cabinet">
<ul>
<li>This is short</li>
<li>This one is longer</li>
<li>Yet this one is a lot more longer</li>
</ul>
</div>
And here's the CSS:
div.cabinet{
width:120px;
border-right:5px solid #e7e8e1;
white-space:nowrap;
}
I need the content not to overlap the right border of the div but instead be padded some 5px away. Here's the jsfiddle. I tried to play with z-index but it didn't help. What should I do?
Demo Fiddle
How about the following:
div.cabinet{
border-right:5px solid #e7e8e1;
white-space:nowrap;
display:inline-block;
padding-right:5px;
}
Use inline-block to make the div fit the content, then add padding. If you only wish the child ul to do this, simply apply those properties to div.cabinet ul instead (as well as the border).
Add a Padding to your UL or LI tag,
ul{padding:5px;} /** Will be applicable to all li's or you can also give it seperately **/
you can change that 5px value, but it will be enough !
I have a navigation menu and I wanted to have a dropdown menu for subpages. I created it and everything is ok except that the pages links in the top menu slide over to the right when the dropdown shows when I hover the page link with subpages.
What is it that I am missing here?
Thanks for the help in advance.
Here is the jsfiddle:
jsfiddle.net/AC8XK/
What I have is not 100% like that, since there is a lot missing, but it shows exactly the problem I mentioned.
I managed to get the menu working properly. The solution to the initial problem was, as mike said, changing the dropdown ul position from relative to absolute.
As for the positioning of the dropdown, I solved the problem by using padding-top instead of top or margin-top.
Thanks to everyone that tried to help.
The code you supplied in jsfiddle was..well...a bit of a mess. I had to strip a lot of it down and generate some base formatting for the dropdown. I will comment the important bits, but it should be more or less copy & paste. The code is solely the layout text for the menu - no visual or positional styling stuff.
Key Concepts: 1 - Set your LIs to width:auto and the li>ul to position: absolute;width:100%. This allows positioning and makes sure the individual ul ul lis are on separate lines.
2- You had the display:none and display:block correct. Alternatively, you can use off-the-screen positioning for the same purpose.
3- Remember to do ul ul {position:absolute;} to allow positioning of the submenus relative to the parent li!
HTML:
<div class="greenbar">
<nav>
<ul id="menu-navigation-menu" class="navigation">
<li id="menu-item-107" class="menu-item">About
<ul class="sub-menu">
<li id="menu-item-116" class="menu-item">Terms of Use</li>
<li id="menu-item-119" class="menu-item">Just another link</li>
</ul>
</li>
<li id="menu-item-106" class="menu-item">Services
<ul class="sub-menu">
<li id="menu-item-120" class="menu-item">Another link again</li>
</ul>
</li>
<li id="menu-item-105" class="menu-item">Clients</li>
<li id="menu-item-104" class="menu-item">Resources</li>
</ul>
</nav>
</div>
CSS:
nav ul {
list-style-type: none;
position: relative;
display: inline-table;
}
nav ul li {float: left;}
nav ul li a { display: block; text-decoration: none;}
nav ul ul {
display: none;
position: absolute;
width: auto;
}
nav ul li:hover > ul { display: block;}
nav ul ul li { width: 100%;}
I have this site here: http://jamessuske.com/freelance/seasons/
At the bottom you will see social media icons and the issue I am having is when I put my mouse over them, they are not clickable, only when I move my mouse to the left a little bit and I do not understand what I did wrong:
HTML
<ul class="social-media">
<li class="twitter"> </li>
<li class="instagram"> </li>
<li class="facebook"> </li>
</ul>
CSS
ul.social-media{
padding-top:30px;
}
ul.social-media li{
float:left;
padding-left:5px;
list-style:none;
}
ul.social-media li.twitter{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
}
ul.social-media li.instagram{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-26px;
width:25px;
height:26px;
}
ul.social-media li.facebook{
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:-52px;
width:25px;
height:26px;
}
Any help would be appreciated. Thanks.
The size of the clickable area depends on the content of the a tag. Your a tag does not have any content.
One solution is to apply your background image directly to the a tag and changing the display attribute to block.
ul.social-media li.twitter a {
background-image:url(http://jamessuske.com/freelance/seasons/images/social.png);
background-position-x:0px;
width:25px;
height:26px;
display: block;
}
Note that we also need to set display to block since the anchor tag is an inline element by default. The width and height attributes only have an effect on block elements.
It's because of the padding-left you have set on the li element
it is probably because your links are so small.
try this :
.social-media a {
display:block;
height:100%;
width:100%;
}
So they fill entire <li> and stand over sprite.
As in the title - I want to stretch the last li tag in horizontal menu till end of menu. Here is my code:
#menu{width:600px; height:50px; background-color:#666; }
ul{padding:0; margin:0;}
ul li{list-style:none; height:20px;}
li{
float:left;
background-color:#999;
display:block;
padding:10px;
border-right-style:solid;
border-right-width: 1px;
border-right-color: #000;}
<div id="menu">
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li class="last"></li>
</ul></div>
Just simply add
.last {
float: none;
}
and the complete thing will be as wide as it can because it's display is set to block.
Alternately you could just set the background-color of the ul.
UPDATE
The solution doesn't work perfectly, as it does span the li over the complete ul.
The fix is actually pretty simple:
.last {
float: none;
overflow: hidden;/* Add this */
}
See updated jsfiddle: http://jsfiddle.net/BsrLD/8/
You can take off the float on the last li and it gives the result i think you want.
.last{float:none}
You can see in this FIDDLE
I have this ul menu:
<ul id="superfish-1">
<li class="active-trail">Inicio</li>
<li class="trail">Quienes somos</li>
<li class="trail">Contacto</li>
</ul>
and I need to align it horizontally.
I saw this question but positioning the ul as postion:relative; and setting left:50% didn't make it.
I also found this question but in my case I can't set the width manually because the menu load its content dinamically, then the width changes all the time.
This is what I need:
Write like this:
#superfish-1{
text-align:center;
}
li{
display:inline-block;
*display:inline;/*For IE7*/
*zoom:1;/*For IE7*/
}
Check this http://jsfiddle.net/SdkKd/
Add margin:0 auto; to css of ul.
Check this fiddle: http://jsfiddle.net/dURBJ/1/