This question already has answers here:
How do I justify a horizontal list?
(10 answers)
Closed 7 years ago.
I have used the code from this question to create a horizontal menu where each item is evenly spaced.
Here is my version:
<div id="navigation">
<ul>
<li class="first">
Home
</li>
<li>
About us
</li>
<li>
What we cover
</li>
<li>
Monitoring agencies
</li>
<li>
Publishers
</li>
<li>
News
</li>
<li>
Contact us
</li>
<span></span>
</ul>
</div>
And the CSS:
#navigation {
text-align: justify;
}
#navigation ul span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
#navigation ul {
display: inline;
list-style: none;
}
#navigation ul li {
display: inline
}
#navigation ul li a {
display: inline;
border-right: solid 1px #ccc;
}
#navigation ul li.last a {
border-right: none;
}
Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?
Here is a fiddle.
I've added an answer here.
Hack Using Extra Elements for the Spacer Motif
Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/
Consider the following HTML:
<div id="navigation">
<ul class="navigation">
<li class="first">
Home
</li>
<li class="spacer-motif">|</li>
<li>
About us
</li>
<li class="spacer-motif">|</li>
...
<li class="spacer-motif">|</li>
<li>
Contact us
</li>
</ul>
</div>
I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).
The CSS is as follows:
#navigation {
padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
display: table;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: table-cell;
text-align: center;
width: 1%; /* force cell to shrink-to-fit text */
outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
width: 10%; /* force spacers to take up a lot of space */
outline: none;
}
#navigation ul li a {
white-space: pre;
}
The layout is based on using table display types.
For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.
For li, use display: table-cell and text-align: center.
The trick is to force the table cells to shrink-to-fit the text labels by
setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force
the spacers to expand (evenly) to fill up the line.
To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).
Cleaning Up The Semantics
The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.
The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.
However, if the elements are a problem, they could be inserted using jQuery or JavaScript.
IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7
here take a look at this fiddle HERE
I made some small adjustments. I changed display:inline; to float:left; and centerd the text.
The space is coming from the 5px padding i gave to the
ul li a
I would use display: table on ul and display: table-cell on li for this.
and even padding on both sides for the a tag
Depending on the spacing your after, something like this should work:
#navigation ul li a {
padding-right: 10px;
}
Change the 'px' value to your needs.
You can try something like this:
#navigation ul li a {
display: inline;
margin-right: -14px;
padding-right: 14px;
border-right: solid 1px #ccc;
}
But it might not be cross-browser.
http://jsfiddle.net/gjFYf/2/
I found that padding-right: 30px; in #navigation ul li a worked nicely.
I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.
New styles...
#navigation ul li.line {
display: inline-block;
*display: inline;
zoom: 1;
width: 1px;
background-color: #ccc;
height: 24px;
position: relative;
top: 5px;
}
#navigation ul li a {
display: inline;
line-height: 36px;
height: 36px;
text-decoration: none;
font-size: 18px;
color: #14328C;
font-weight: bold;
}
New Html snippet...
<li>
Publishers
<li class="line" />
</li>
It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.
Its also now semantically incorrect.
Fiddle.
Related
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}
I'm having a design issue with my css vertical menu.
It's working but it does not have the effect i would like to have when I do a mouse hover on a category
Below, you will see a simple vertical menu which appears when you hover your mouse over the main category
However I would like to have a small effect :
When the mouse is hover a category, i would like to add a background color (black).
It's working but I would like that the height and the width of the background to stick exactly to the same height and width of the text. Currently, I dont know why; the height of the background is more than the height of my text.
Here is some pictures of how it's right now and how i would like to be be.
How it 's now:
How I would like it to be:
Here is my code Html code
<div id="menu">
<ul id="MenuDeroulant">
<li style="margin-left:-10px;">Main categorie
<ul>
<li><a href="" >Subcat 1</a></li>
<li><a href="" >Subcat 2</a></li>
</ul>
</li>
</ul>
Here is my css code:
#MenuDeroulant
{
margin: 0;
padding: 0
}
#MenuDeroulant li
{
float: left;
list-style: none;
}
#MenuDeroulant li a
{
display: block;
padding: 0px 0px;
text-decoration: none;
color: #000;
white-space: nowrap;
text-align:center;
}
#MenuDeroulant li a:hover
{
background: #000;
color: #FFF;
}
#MenuDeroulant li ul
{ visibility: hidden;
padding: 0px 0px;
}
#MenuDeroulant li ul li
{
float: none;
display: inline;
}
#MenuDeroulant li ul li a
{
width: auto;
padding: 0px 0px;
}
#MenuDeroulant li ul li a:hover
{
background: #0000;
padding: 0px 0px;
}
Thanks in advance for your help and I wish you a very nice day,
Anselme
Use width:100% to all your <li> or li a elements and a fixed width to your <ul>. This will solve your issue.
With that CSS your nested ul is permanently hidden. You'll need something like
#MenuDeroulant li:hover ul {
visibility:visible;
}
to show the nested menu items then maybe display: inline on the #MenuDeroulant li ul li a
You can add a class to your menu hyperlinks giving them a margin-bottom:3px and it should bump up the links in the container.
I'm creating a horizontal navigation bar. Here's its CSS:
#topnav {
clear: both;
overflow: hidden;
display: table;
}
#topnav ul {
display: table-row;
}
#topnav ul li {
display: table-cell;
vertical-align: middle;
background: #1b4260;
position: relative;
}
#topnav a {
display: block;
color: white;
padding: 10px 0px 15px 10px;
font-size: 14px;
width: 100px;
text-align: center;
}
#topnav ul li+li:before{
content: "*";
position: absolute;
top: 11px;
color: #ff0000;
float: left;
}
And here's the HTML:
<p>---</p>
<p>---</p>
<div id="topnav">
<ul>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</div>
This creates a navigation bar with little asterisk separators. It looks fine in every browser...
... except Firefox. Firefox ignores "position: absolute" on the generated content:
Why would it do that? Am I doing something wrong with my CSS?
You need to position the ul also:
#topnav ul {
display: table-row;
position:absolute;
}
See here: http://jsfiddle.net/k5hVP/1/
I know it's not ideal, but I found a way to do it without positioning to top and without absolutely positioning the ul. You remove the top positioning, and use a margin-top to adjust the position of the asterisk.
http://jsfiddle.net/ajPLB/7/
Jani's solution concerns me because position:relative should theoretically work, as well (and it'd be the less intrusive solution), but it doesn't, which means the solution doesn't have anything to do with normal positioning priorities, and seems to rely on some odd way Firefox handles positioning priority.
The point is to have a single line on this menu, wrapped.
Instead, we are getting "two lines" and I'm not getting why is he dropping the line.
Can anyone please drop me a quick look about how is this happening ?
The HTML
<div id="main-menu">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
CSS
#main-menu {
clear: right;
overflow: hidden;
margin-top: 75px;
float:right;
}
#main-menu ul {
overflow: hidden;
text-align: right;
border-radius: 5px;
background-color: #333;
}
#main-menu ul li {
display:inline-block;
padding: 2px 2%;
}
#main-menu ul li a {
color: #fff;
font-size: .9em;
}
#main-menu ul li:hover {
background-color: #EFAB00;
}
#main-menu ul li a:hover {
text-decoration: none;
}
Here an example:
http://jsfiddle.net/XRm6Q/2/
This isn't caused by the float, it's because of the padding you're applying to your lis (because when you have percentage paddings, the parent doesn't resize-to-fit). If you change your padding: 2px 2%; to padding: 2px; the wrapping will be gone: little link.
Hope that helped!
See http://jsfiddle.net/XRm6Q/10/
I used white-space: nowrap; on ul element and white space: normal on li elements. In this way you don't need to adjust the parent width (then just remove/adjust the extra padding on li elements or use a margin instead)
Doing so, all the items will stay in the same row
Either set a width on the menu, or use table-row display for it, and table-cell for the items. In the latter case you'll probably what white-space: nowrap on the items too, but it has advantages if you don't know what the width will be.
It's because the parent element (ul) is simply not wide enough to accommodate your lis.
Make the UL wider and it will work.
http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/8/
Add width: 100%; to the parent DIV, not the UL. Sorry :D
http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/16/
I am making one simple horizontal menu with CSS and simple unordered list. The HTML of the menu is following:
<div id="navigation">
<div id="nav-holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
And CSS is as follows:
#navigation
{
display: table;
height: 35px;
width: 100%;
#position: relative;
overflow: hidden;
background: Black;
}
#nav-holder
{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#navigation ul
{
#position: relative;
#top: -50%;
}
#navigation ul li
{
float: left;
}
#navigation ul li a
{
padding: 5px 10px;
margin-left: 2px;
background-color: Red;
text-decoration: none;
font-family: Verdana;
color: White;
}
I want the menu to have a 2px margin around all of the link elements.
The problem I am facing is that while it renders itself fine in IE with all of the rights margins but both Chrome and Firefox (both are latest) are having the following issues:
The problem does not seem to be related to only this particular implementation but Ive seen it rise up from veertically centering the links with line heights and so on too.
I would like to find a way to have all of the margins to look the same or some way to avoid this problem all-together.
Basically, I got this thing sorted out. I set the same line-height and height attribute to all of the following: ul, li, nav holder. I did it because when it was not done, all of these were rendered differently from browser to browser.
In addition, I removed the positionings, vertical alignings, hav-holder div entirely and then some.
try
display: inline-block;
for your #nav-holder