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/
Related
I'm working with Bootstrap. I'm trying to add an image as number icon to my list. It is kind of a bad practice to add <div> tag inside <ul> tag, so is it possible to add icon with ::before?
Here's my code:
<ul class="lizt" id="sub-lizt">
<li class="item">1. Bunch of geebrish</li>
<li class="item">2. Bunch of geebrish</li >
</ul>
ul {
list-style-image: url('/your_img_path.jpg');
}
You can use this in your CSS. For in-depth just take a look Here.
Putting a div inside an li tag is not a bad practice. It would be wrong to put a div directly inside a list ol/ul, but not inside a list item.
That being said, you don't need a div to put a numbered image as bullet for your list, because, in fact, list-style property allows using an image as bullet.
.item {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=1');
}
.item:nth-child(2) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=2');
}
.item:nth-child(3) {
list-style: url('http://via.placeholder.com/32x32/000/fff?text=3');
}
<ol class="lizt" id="sub-lizt">
<li class="item">Bunch of geebrish</li>
<li class="item">Bunch of geebrish</li >
<li class="item">Bunch of geebrish</li >
</ol>
You'd probably want your images vertically aligned in the middle with your text. In that case, you have many options, like moving up your a elements from its relative position.
.item a {
display: inline-block;
position: relative;
top: -0.75em;
}
I ran into a problem trying to build a dropdown menu in a navbar, using nested lists.
Here's a snippet of the code :
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
}
.dropdown:hover + .dropdown-content {
display: block;
}
.dropdown-content a {
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
<nav class="navbar navbar-default" role="navigation" data-600='opacity:0' data-1000='opacity:1'>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul id=navbar class="nav navbar-nav">
<li class="dropdown"><a href=index.html>Jeux de vilains ▼</a></li>
<div class="dropdown-content">
<ul class="nav navbar-nav navbar-right">
<li class=secondary><a href=/carto2016-jeuxvideos/article-1.html>Tomb Raider</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-2.html>GTA</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-3.html>SimCity</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-4.html>Call of Duty</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-5.html>Resident Evil 5</a></li>
<li class=secondary><a href=/carto2016-jeuxvideos/article-6.html>Civilization</a></li>
</ul>
</div>
</ul>
</div>
This part was solved :
Basically, my problem is that I want my "dropdown" div to have no
style of its own, but to inherit the style of the navbar.
The weird thing is that the nested navbar is properly styled, but the
dropdown div follows the style of general a and hover:a elements.
If you look at the beginning of my HTML, you'll see the culprit: <div
class="dropdown">, which appears completely differently from the
rest. I don't understand why the class in which it is nested (the nav
class) is not considered the parent, especially since the following
list is properly styled.
I attached a screenshot of what it looks like: "Jeux de vilains"
looks weird, when it should look like "Règles du jeu".
This has been solved too
Well thank you all for you swift and kind help, I took out the
unwanted div and put the dropdown class in the corresponding li.
However, while the list does appear on hover, it disappears as soon as
the mouse is not hovered. I'd like to make it so the secondary menu
appears as long as either the parent li or the secondary menu itself
are hovered. How could I do that ?
Here's the website :
http://medialab.github.io/carto2016-jeuxvideos/index.html
Thanks in advance for everyone's help.
Question solved.
Your first instinct would be to use JavaScript but for this but there's a slick way to accomplish this with what are essentially operators in CSS...
Use the :hover pseudo-class on a parent element and look for the instance of the dropdown.
.nav:hover .dropdown-content {
display: block;
}
Because you're selecting the parent element, it applies to both the dropdown and what you hover over to show it over so it's displayed whenever it's within those realms. Make more and they'll work just the same respective to their individual dropdowns.
https://jsfiddle.net/ksxk33w4/1/
So, i am creating a menu, and i noticed that there is some unexplainable margin between li's. It also can not be seen in dev's console. Here is the code:
HTML
<div class="navbar">
<ul class="navbar_ul">
<li class="navbar_list_item navbar_main">Point Blank</li>
<li class="navbar_list_item navbar_main">Tanki Online</li>
<li class="navbar_list_item navbar_main">Dota 2</li>
<li class="navbar_list_item navbar_main">Warface</li>
<li class="navbar_list_item navbar_minor">Топ аккаунтов</li>
<li class="navbar_list_item navbar_minor navbar_last_item">О нас</li>
</ul>
</div>
And, here is the CSS:
.navbar_list_item {
display: inline-block;
}
.navbar, .navbar ul, .navbar li {
text-align: center;
padding: 0;
}
.navbar_ul {
width: 100%;
}
.navbar_list_item {
color: white;
width: 16.3%;
margin: 0;
height: 40px;
}
.navbar_main {
background-color: #3978C2;
}
.navbar_minor {
background-color: #2E3A86;
}
Here is the screenshot of menu:
Thank you!
This looks like the space/new line characters between </li> and <li> tags. Try to write the markup as such:
<li>content</li><li>content</li><
li>another content</li><li>yet another one</li>
The space is there is a 'side effect' (actually confusing but intended behavior) of how display: inline-block works. Inline block elements are rendered the same as inline elements, namely it assumes that they should be part of a line of text. Add to that the fact that HTML compresses all whitespace (space, tab, newline) into a single space and what happens is the newline character between each LI becomes a space character and you have a small visible gap between elements.
There are several methods to fight this. You might
Use negative margins to bump the elements back in line
Use zero-sized font
Use display: block and float: left
Use display: table
Remove all whitespace characters between LIs in your code
And there are other methods. Each has its own advantages and disadvantages.
A nice writeup of different solutions can be found here: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
There are no margin between li element. the space between each li is related to your
width: 16.3%;
so you have 6 li element proportionally spaced ..
This mean that for each element the width is fixed..
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.
I have a main menu, and in the HTML code, it is in the correct order, but when viewed in the browser, it is reversed. Why?
HTML:
<div class="header">
<img src="images/JTS_1_B_FL31.png" alt="J.T.S Logo" class="logo" />
<ul class="menu">
<li class="current">Home</li>
<li>Services</li>
<li>Support</li>
<li>Contact Us</li>
<li>My Account</li>
</ul>
</div>
CSS:
.header{
width: 100%;
height: 30px;
background-color: #1D242D;
}
.logo{
padding: 5px 0 0 5px;
float: left;
}
.menu{
float: right:
}
li{
display: inline;
list-style: none;
float: right;
padding: 5px 5px 7px 5px;
}
Screenshot:
You have the LI's floated: right, as well as the #menu floated right, which will layout from right to left. You might try float: left on them, maybe try without a float attribute on either #menu and the LI.
When you use CSS to float things right, they are attached to the right of the page in the order that you list them.
In this case, 'Home' is getting attached to the right of the page, then 'Services' is attached as far right as possible (which ends up being to the left of 'Home').
You either need to reverse the order of your list (since this is expected behaviour), or possibly put the entire list in a single div which is floated right.
You are floating each list item <li>. This causes each new list item to appear to the left of the previously floated items.
float: right within the same box element will put elements added later to the left of a previously right-floated element. if you don't like Jared's suggestion, you can add them in reverse order.
Because you've told the list-elements to float: right. They're doing exactly what you told them to. If you leave the li elements with display: inline and remove the float declaration they should appear in the right order, with the menu itself still floated to the right.
Seems to work (please note the colour change of the a elements, blue-on-black was painful to try and read): JS Fiddle.