i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
Related
I have a simple navigation Bar and some styling with CSS already.
The nav Bar will have a white border on along the top for the inner links.
For the two outer links I want there to be a border on the left for the left link and on the right for the right link and also curved corners but i don't know how to focus the CSS on just these two li's.
I tried to give the li an id of home but that didn't work
i'v also tried putting the curved corners code in the ul and the NavBar tags.
Here is wht I have tried
<div id="NavBar">
<ul>
<li id="Home"><strong>Home</strong></li>
<li><strong>About Us</strong></li>
<li><strong>Products</strong></li>
<li><strong>Policies</strong></li>
<li id="ContactUs"><strong>Contact Us</strong></li>
</ul>
And this is the CSS which i have tried to focus on the one li home.
#NavBar li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li Home {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
Thanks for any help
Created a JSFiddle: https://jsfiddle.net/b4ejndkz/
If you're going to use width:20% and specify a border width, you'll need box-sizing:border-box;, that way it'll take into account the border size when determining total width. Otherwise it'll split off into 2 lines like it is at the moment.
Then you can set a specific corner to apply a border radius on by doing: border-radius: 5px 0 0 0; (top left, top right, bottom right, bottom left).
You could do it with id selectors https://jsfiddle.net/b4ejndkz/2/... or instead use the CSS selectors :first-child and :last-child to select your first and last elements of your list:
#NavBar li {
box-sizing:border-box;
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
border:solid 3px #FFF;
border-bottom:0px;
width:20%;
}
#NavBar li:first-child {
border-radius: 5px 0 0 0;
}
#NavBar li:last-child {
border-radius: 0 5px 0 0;
}
https://jsfiddle.net/b4ejndkz/1/
Use :first-child and :last-child.
To access only the first or last element of your list, do something like this:
ul li:first-child {
Styles for first element
}
ul li:last-child {
Styles for last element
}
With that, you can apply the needed styles to the matching links.
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 trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
firefox is the only browser not showing this magic gap. i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution
here is my css menu code here is my css menu code here is my css menu code
#tabs {
font: bold 11px/1.5em Verdana;
float:left;
width:800px;
height:35px;
background:#FFFFFF;
font-size:93%;
line-height:normal;
}
#tabs ul {
margin:0;
padding:7px 10px 0 10px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("images/tableft14.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("images/tabright14.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */
#tabs a:hover span {
color:#000;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
This is the css code thats below the menu div
#main-lower {
height: 700px;
background-color:white;
}
#specials {
background-color:#F0F0F0;
width: 870px;
height: 100%;
float: left;
border:1px solid #e2e2e2;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
i don't really understand why this gap is showing up to be honest, i'm assuming some of you have ran into this and there is a simple solution
stright from source code
<div id="tabs">
<ul>
<li><a href='http://' title=''><span>New Deals</span></a></li><li><a href='http://' title=''><span>Liquor</span></a></li><li><a href='http://' title=''><span>Beverages</span></a></li><li><a href='http://' title=''><span>General</span></a></li><li><a href='http://' title=''><span>Fountain Drinks</span></a></li>
</ul>
</div>
Quite often you get "mysterious gaps" on lists if you have new lines between the <li> elements.
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Throw them on one line to see if that gets rid of your gap.
<ul><li></li><li></li><li></li></ul>
If that works then this is a duplicate of: Unwanted margin in inline-block list items
Since your gap is below your list you will want to inspect the css display for the item below it and possibly remove lines there as well. But without seeing your html this may not be the issue at all!
For an explanation on why gaps show up on inline elements see here:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Excerpt:
This isn't a "bug" (I don't think). It's just the way setting elements
on a line works. You want spaces between words that you type to be
spaces right? The spaces between these blocks are just like spaces
between words. That's not to say the spec couldn't be updated to say
that spaces between inline-block elements should be nothing, but I'm
fairly certain that is a huge can of worms that is unlikely to ever
happen.
Changed the padding top to 8px from 7px ->> padding:8px 10px 0 10px;
yea, i was pretty sure my html had nothing to do with it, and it wasn't a spacing problem cause i'm using php to call my li's
I'm trying to make a horizontal menu with CSS but i've run into a roadblock. What I'm trying to accomplish is to have the first link bblock and last link block have rounded corners using css3. I've managed to make the menu but I'm unable to achieve the desired affect.
I tried styling those individual list items but the effect doesnt show. I'm attaching my css and html for someone to look at. Any pointers would be appreciated
<ul id="nav">
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz- order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Events</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
#nav {
margin-left: 9px;
padding:0;
margin-top: 30px;
margin-bottom: 10px;
list-style:none;
clear:both ;
}
#nav li {
float:left;
display:block;
width:139px;
position:relative;
z-index:500;
margin:0 0;
border-left: 1px solid #5d564e;
}
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:500;
height:50px;
text-decoration:none;
background: #333;
color: #fff;
text-align:center;
border-left: 1px solid #000;
}
#nav li a:hover {
color:#fff;
background: #3e7e99;
text-decoration:underline;
}
#nav a.selected {color:#f00;}
Here's a jsfiddle using css3 to round the outside corners of the first and last items in the list - if I understand what you're trying to accomplish correctly.
One thing I'd add too is that moving your css from inline with the elements to a <style> section or even better a css file is preferable.
You have to set overflow:hidden; for the ul.
http://jsfiddle.net/KKPmL/1/
#nav{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
overflow:hidden;
}
This doesn't work if the screen isn't big enough to display the navigation on one line.
Second way:
http://jsfiddle.net/KKPmL/2/
#nav li:first-child a{
border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
#nav li:last-child a{
border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
px is not a valid value, You need 0px or just 0
Also it's better to use classes first and last (or similar) on li
Look here for an example
http://jsfiddle.net/WYuNR/