I have a traditional nav created. between each li I put one div with 1px width and slightly smaller height than nav bar.
Basically I was going for this look:
http://subalee.com/nav.jpg
HTML:
<nav>
<ul>
<div></div>
<li>Domov</li>
<div></div>
<li>Služby</li>
<div></div>
<li>O nás</li>
<div></div>
<li>Kontakt</li>
<div></div>
</ul>
</nav>
CSS:
nav ul div {
height:31px;
width:1px;
background-color:#34b9ff;
display:inline-block;
}
nav ul li {
display:inline;
}
nav ul li a {
display:inline-block;
padding:10px;
When I change div to display:inline; text works properly but those visible spaces somehow dissapear.
Problem 1:
You are not allowed to place ANYTHING else into a ul except li.
I'd consider another approach to skip the syntactically useless styling-divs:
JS-Fiddle Example
nav ul li {
font-size: 16px;
display:inline;
padding: 2px 0px;
border-right: 1px solid blue;
}
You can avoid spaces between inline elements by setting font-size to 0 and resetting it on the li.
I don't think you can have a DIV within UL.
I'm sure you could achieve the same results with LIs only, by adding the appropriate style.
if you do not want any change in the way the elements are declared in your html then
use
border-left:1px solid #34b9ff;
instead of background-color:
and use display:inline;
Full css would look like
nav ul div {
height:31px;
width:1px;
border-left:1px solid #34b9ff;
display:inline;
}
Here's the fiddle
The main problem in these cases is that you can't have ANY whitespace between li's as this will show up.
Following jsFiddle show exactly your code with space removed results in what I think is what you want.
http://jsfiddle.net/jPF2p/
Related
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/
i am new to css, i have written code to display some text on hover. But it is not working
HTML:
<div id="onHover"> 5
<span>
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</span>
</div>
CSS:
#onHover span:hover
{
bottom:130px;
left:105px;
padding:8px 8px 10px 8px;
display:block;
border:1px dashed #09f;
background-color:#FFF;
min-width:170px;
position:relative;
z-index:101;
}
#onHover span:hover ul {
font-weight:normal;
list-style:none;
margin:10px 0 0 0;
padding:0;
position:relative;
}
span {
display:none;
}
you can also see this fiddle http://jsfiddle.net/ankurdhanuka/ccFxu/
please help
Thanks in Advance
Your HTML should look like this (the span is useless, so I took it out, it also isn't allowed in HTML4. It is in HTML5 tho...):
<div id="onHover"> 5
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</div>
Then you can add a :hover effect on the div, like this:
#onHover ul {
display: none;
}
#onHover:hover ul {
display:block;
}
As you can see, the :hover is on #onHover, but it triggers the ul within it.
DEMO
Nice Try, friend. Give :hover to #onHover as 5 is enclosed within #onHover.
Use position only if it is required.
check this.
http://jsfiddle.net/ccFxu/3/
You are setting display:none to the span through css.
The elements which are set as display:none will not be visible and are actually take no space in the view. Hence you cant able to hover on span which is actually not available because of display:none.
I am trying to make a CSS based nav bar that converts a UL/LI list (including sub UL/LI lists that display on hover) into a horizontal nav bar and a sub horizontal nav bar. My current implementation (see picture) works except the sub list is using position:absolute to get its position below the hovered element. I believe that is the source of my problem, as the absolute positioned sub menu doesnt respect the edges of the container, so if the browser gets too small it bleeds off the edge of the container while the top level menu wraps. The other problem i'm having is that it doesnt expand the page vertically when the top level menu wraps, so even though its taking up more space the paragraph following doesnt move down and gets overlapped.
Does anybody have any CSS tips or know of any good examples of a menu like the one I'm trying to make?
Link to image:
http://i47.tinypic.com/288tbn7.png
To this day, the article "Son of Suckerfish Dropdowns" by HTML Dog is still a classic on clean CSS menus with hover.
http://www.htmldog.com/articles/suckerfish/dropdowns/
Hey now create this menu easily used to ul li simply as like this
HTML
<ul class="menu">
<li>Home</li>
<li>Home2</li>
<li>Home3
<ul class="submenu">
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Home4</li>
<li>Home5</li>
</ul>
Css
.menu{
display:block;
list-style:none;
border-bottom:solid 1px red;
float:left;
}
.menu > li{
float:left;
position:relative;
}
.menu > li + li{
border-left:solid 1px red;
margin-left:10px;
}
.menu > li > a{
display:block;
margin-left:10px;
}
.submenu{
display:none;
list-style:none;
position:absolute;
top:20px;
left:-39px;
white-space:nowrap;
}
.menu > li:hover .submenu{
display:block;
}
.submenu li{
display:inline;
}
.submenu li + li {
border-left:1px solid green;
margin-left:10px;
}
.submenu a{
display:inline-block;
vertical-align:top;
margin-left:10px;
}
Live demo
and now change css according to your layout this is basic step
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.
My css for ul is:
ul {list-style-type: none; margin:auto; border-top: 1px solid #0093a7; border-bottom: 1px solid #0093a7; margin: 20px 0;}
ul li {float:left; padding:5px;}
The UL tag:
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
Now both borders are on the top of the UL.
How to make bottom border then?
You need to apply overflow:hidden to your ul so that your floats are cleared and are contained within the ul.
Currently your ul is collapsing since it contains only floated elements.
If you need to support IE6(?!) then you will need to make sure your container (ie. ul) hasLayout for the overflow trick to work. You can do this by applying a width.