i'm trying to create a horizontal navigation which is aligned to the right side of the parent element. You can see the navigation at http://kaffeeprinzen.jag-aelskar.de/ where it says "Espresso".
My HTML is:
<ul id="menu-standard">
<li id="menu-item"><a>Item 4</a></li>
<li id="menu-item"><a>Item 3</a></li>
<li id="menu-item"><a>Item 2</a></li>
<li id="menu-item"><a>Item 1</a></li>
</ul>
My CSS is:
.menu li {
float: right;
margin-left: 20px;
}
It works like this, the only problem is that the order in the list is wrong. The first item is the last one in the html code.
Any tips for me? Thanks a lot!
Yannis
Try floating the ul right rather than each li. Each li can float left.
#menu-standard {
float: right;
}
#menu-standard li {
float: left;
}
Example: http://jsfiddle.net/hunter/HsUTQ/
float: right will float the items, in order, to the right. Meaning the 1st element will be the right-most, then 2nd element the next-right-most, etc.
Related
I'm wondering what some good practices are for styling li elements like buttons. Any examples would be appreciated. I'm guessing a box shadow and a background color would go a long way, but that alone does not seem to be enough.
Edited the question to make it more useful.
Okay I think what your after is to make the whole link clickable rather than just the text. All you need to do is make your anchor a block element, then it will take the full width of the li:
.nav a {
display:block;
}
<ul class="nav">
<li>Home</li>
<li>About us</li>
</ul>
I assume you try to make menu and want bigger buttons than just link text.
You should set links inside list elements as you shown and then make links as buttons.
Very simple css example for horizontal menu would be something like this:
.nav li {
list-style-type: none;
padding 0px;
margin 0px;
float: left;
}
.nav li a {
text-decoration: none;
display: block;
padding: 0px 15px;
line-height: 25px;
}
For horizontal menu you should make width with padding and height with line-height. Unless you want every button to be same sized, then you just could use width.
More in-depth example would be this one http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
I think your issue may be that you have styled the <li> to look like the menu button, but the text is the only part that is clickable, is this correct?
What you need to do, is not style the <li> as the menu button but instead the <a> within it.
Here is a demo: https://jsfiddle.net/arrx7dL7/
As you can see the styles are applied to the links, rather than the li
HTML:
<ul class="menu">
<li><a class="menu-item" href="#">Item 1</a></li>
<li><a class="menu-item" href="#">Item 2</a></li>
<li><a class="menu-item" href="#">Item 3</a></li>
<li><a class="menu-item" href="#">Item 4</a></li>
</ul>
CSS:
.menu {
list-style:none;
}
.menu-item {
color:black;
text-decoration: none;
background: #eee;
border: 1px solid #ccc;
padding:20px 30px;
display:block;
}
I think this is what you mean, if so I hope it is helpful.
I have the following code: https://jsfiddle.net/u8db2j75/1/ and it works fine, I have the effect I wanted - a picture and some text next to it. But now I want to add another component, a navigation bar - and I want to add it on top of the page. So what I followed the example given here http://css-snippets.com/simple-horizontal-navigation/ and I created the code like this:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about">About</li>
<li class="news">Newsletter</li>
<li class="contact">Contact</li>
</ul>
</div>
https://jsfiddle.net/u8db2j75/2/ however, after modifying css as well -as you can see - the effect is far from what I expected... What did go wrong here?
Give your .nav ul and .nav a min-width of 100%.
Example:
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
https://jsfiddle.net/u8db2j75/4/
I don't have 50 reputation to comment the answer above, but:
List item needs to be displayed inline, or floated to the left so the result will be a horizontal navigation as per the examble shown in the issue.
Here's my code:
jsfiddle.net/q49hb
<ul id="navigation">
<li><a class="" href="#">Home</a></li>
<li><a class="" href="#">Blog</a></li>
<li><a class="" href="#">Services</a></li>
<li><a class="" href="#">About</a></li>
</ul>
There's a little caret cursor in between each list item when hovering over. I noticed floating to the left will get rid of it, but then I can't center the navigation, which I am also trying to do. Any help?
So to re-cap, I'm looking to:
Space out the list items, leaving no excess space.
Not show a carrot cursor when hovering in between the items.
Centering the unordered list nav on the page.
None of the answers above are correct or even close. You need users to know what is clickable and what isn't. The caret is in fact misleading and distracting between list items. This is bad UX. You cannot blitz the ul with cursor: pointer; then everything will seem clickable, even bewteen li's.
reset the entire ul's clickable area (even between list items)
ul{
cursor:default;
}
Now define what is clickable.
ul li{
cursor:pointer;
}
You can do one of two things.
You can set the parent element (#navigation) so cursor: pointer; which will stop the caret from showing in between links:
http://jsfiddle.net/q49hb/1/
#navigation {
cursor: pointer;
}
Or you can remove the whitespace between the <li>s, which is what's causing the default caret cursor type to show.
http://jsfiddle.net/q49hb/2/
<li><a class="" href="#">Home</a></li><li><a class="" href="#">Blog</a></li><li><a class="" href="#">Services</a></li><li><a class="" href="#">About</a></li>
EDIT: Option 2 is better, (but the code isn't very neat,) because Option 1 gives users the illusion that the space is clickable when it isn't (thanks #JoshC)
you can set a minus margin-left to force the LI to be together and a set a width for the anchors:
demo
#navigation li {
display: inline;
margin-left: -4px;
}
#navigation a{
width: 60px;
display: inline-block;
}
I have made a horizontal navigation bar using styles, but I've encountered a major issue... Since <li> is a block element, I can't align it using text-align:right, which makes me unable to align it properly. I've tried using the display:inline; syntax for the list-item element, but that doesn't make any difference either (which makes sense actually).
My question being, is there any way of aligning horizontal <li>, without having to use float:right;? I want it to fit the current list's format (which I've adjusted to fit a parent div), and using float isn't really a good or safe method. Here's a screenshot of what I got so far (layout is slightly messed up due to recent addition of image). As you can see, I have managed to get the "My page" and "Log out" properly placed, but as soon as I add something more "complex" (like the "+", which now is placed in the normal list), it gets screwed up... I really don't get how other websites manages to get this right.
You must define text-align: right for the containing element
HTML:
<ul class="nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
You can split the menu to a left and right part, if you like. Add or remove padding and margin as needed
HTML:
<ul class="nav left-nav">
<li class="menu">1</li>
<li class="menu">2</li>
<li class="menu">3</li>
</ul>
<ul class="nav right-nav">
<li class="menu">4</li>
<li class="menu">5</li>
</ul>
CSS:
.nav {
margin: 0;
padding: 0;
}
.left-nav {
text-align: left;
}
.right-nav {
text-align: right;
}
.menu {
display: inline;
}
JSFiddle
Here you go i think this is what you are looking for:
jsfiddle.net/Sdw5h/
On this website, the menu has the following structure:
<ul>
<li class="page_item page-item-2 current_page_item">
Home
</li>
<li class="page_item page-item-7">
Features
</li>
<li class="page_item page-item-18">
News & Reviews
</li>
<li class="page_item page-item-20">
Contact
</li>
</ul>
The current_page_item class changes the background of the currently selected menu item to black via the following rule:
.mainnav li.current_page_item a {
background: url("images/bg_nav_hover.png") no-repeat scroll right center transparent;
}
This works for the Home menu item, but for all others a small gap is left on the left-hand side of the selected menu item, highlighted by the yellow circle in the image below
I can't seem to figure out why this problem occurs for all menu items except Home.
Your <li> tags are display: inline-block; and there are spaces between the tags.
Because your <li> tags are inline-block, they respect whitespace in the HTML, just like inline elements and text.
In the end, the background image is covering the background of the element correctly. Your best option to get rid of the spacing is to remove all whitespace between </li> and the next <li> tags.
As mentioned by #ajp15243 below, you can omit the closing tag, or use some wacky tricks to get the HTML to swallow up the whitespace.
You should use display:table-cell for .mainnav_wrapper .mainnav ul li class.
then add a padding to center the menu items to your ul element:
.mainnav_wrapper ul {
padding-left:192px;//this is especially for this project
margin: 0 auto;
overflow: hidden;
padding: 0;
text-align: center;
width: 960px;
}
and you are ready to go...