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.
Related
Sorry for asking stuff that's already been explained a lot but none of the solutions that I saw so far on StackOverflow is actually working for me(table-cell, text-align, vertical-align...nothing).
Here's the deal: all of my code is inside a #box div which is the one dealing with the centering and containing all the elements. The first div after this is #menu and it's like this:
<div id="menu">
<img src="img/logo.jpg" alt="logo">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
Nothing special actually, it's pretty simple. My CSS looks like this:
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 1280px; }
#menu img {
float: left; }
#menu ul {
float: right;
list-style: none;
line-height: normal; }
#menu li {
display: table-cell;
padding-left: 20px;
vertical-align: middle; }
Be ware that I'm using a basic CSS Reset to avoid most problems when I'll go test cross-browsing.
The problem here is no matter which of the solutions I try from StackOverflow, only the IMG or the UL vertically centers or they're slightly non-aligned.
What I'm asking for is: what's the BEST WAY today to do such a simple task with html/css only(the img size won't change) and have a logo image and a menu on its right perfectly center on the vertical space in a div with known width and height?
I obviously cleaned cache, refreshed, did everything so I'm sure changes are taking effect...I'm just missing something really stupid probably but I really can't center both.
To better show what I want I made this, this should be really a basic menu setup yet something ain't working as expected. Here's my desired outcome, just remember I didn't write any rule to move img and #menu ul from the left/right borders because, obviously, right now they're on the side borders...I'll give margins later.
perhaps this is what you want? Fiddle
you just need to make the li to inline-block, add line-height to the div #menu with the same value as height, and add style vertical-align: middle to the img, here's the full CSS needed with the same HTML as yours
#menu {
background-color: #babadc;
height: 100px;
line-height: 100px;
margin: 0 auto;
width: 1280px;
}
#menu img {
height: 50px;
vertical-align: middle;
}
#menu ul {
margin: 0;
float: right;
list-style: none;
}
#menu li {
display: inline-block;
padding-left: 20px;
/*vertical-align: middle; this is not needed because already declare line-height in parent*/
}
note that the vertical-align: middle for image work because it's following the other inline or inline-block element, and the inline or inline-block element is in the middle because of the line-height that's set on the #menu. And you also need to make sure that the container width is always greater then the total of image width and ul width for this to work
If the height is known and fixed, I would suggest
ensure that there is no top/bottom padding/margins on ul, li and a. Set line-height to 1 on a
manually set top margins for img and ul based on the height of nav and height of images. ul height will be your font-size once all extra padding is removed. (margin-top = nav height minus half of image/ul height)
See this fiddle: http://jsfiddle.net/no5wo77a/1/
Maybe you can work from this?
Fiddle
HTML
<img src="http://www.thenextbestweb.com/wp-content/uploads/2014/06/shell.jpg" alt="logo" height="80%" width="auto">
CSS
body {
outline: 0;
margin:0;
}
#menu {
background-color: #babadc;
height: 100px;
margin: 0 auto;
width: 100%;
position: relative;
}
#menu img {
float: left;
top: 10%;
position: absolute;
}
#menu ul {
float: right;
list-style: none;
line-height: normal;
background-color: #FF0000;
height: 20px;
margin-top: 40px;}
#menu li {
display: table-cell;
padding-left: 20px;
}
Just look at the fiddle....
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.
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
Like many people, I am having trouble with floating elements in IE7 (and 6, but I don't care about that!)
http://www.storybox.co.nz/wordpress/
Looks fine in every other browser, but in IE7 the navigation links sit under each other:
HTML (inline styles are from js dropdown script):
<div id="primary-menu">
<div class="menu">
<ul>
<li>Work.
<ul class="sub-menu" style="float: none; width: 1em; visibility: hidden; display: none;">
<li style="white-space: normal; float: left; width: 100%;">Spatial /</li>
<li style="white-space: normal; float: left; width: 100%;">Web /</li>
<li style="white-space: normal; float: left; width: 100%;">Graphic</li>
</ul>
</li>
<li>Lab.</li>
<li>About.</li>
</ul>
</div>
</div>
CSS:
#primary-menu {
margin:-30px auto 30px;
}
#primary-menu ul {
float:right;
}
#primary-menu li {
float: left;
list-style: none;
margin-left: 10px;
display:inline;
}
#primary-menu ul li a {
float: right;
}
I have tried display:inline on the li items as well as on the a items, but that doesn't work.
Any other tips? Thanks!
the problem is probably width: 100% for li. If ul is 100px, then each of li will also have 100px = they will be displayed as shown. Try to set fixed width for them, but 3x width ( + padding, margins ) should be less than width for ul. You can also try 33%. BT
float: right puts display: block on item and it makes no sense to add display: inline together with float: right. My guess is that IE ignores display: inline. It makes also no sense to put width for inline element. Your CSS simple does not make sense :)
I tested on IE 7 and below is the updated CSS.
#primary-menu {
/* margin:-30px auto 30px;*/ /*Avoid negative margins*/
}
#primary-menu ul {
float:right;
}
#primary-menu li {
float: left;
list-style: none;
margin-left: 10px;
display:inline;
}
#primary-menu ul li a {
/* float: right;*/ /*This caused the issue*/
}
Hope this helps
I'm looking for a quick cross browser solution to my need for auto margins.
I have a simple list:
<ul>
<li>text</li>
<li>text</li>
<li class="possibly_last">text</li>
</ul>
With a width of 600px.
What I need is CSS code to make sure there is an even margin between each <li>.
So that they stretch across the full 600px evenly.
I may need to as a "last" class, but that's fine.
I just want a browser friendly way to do this.
Any help would be great, Thanks!
Try this:
<style>
li {
display: block;
float: left;
width: 32%;
}
</style>
If that does not work, try this:
<style>
li {
display: block;
float: left;
width: 200px; // or less
}
</style>
I take it you mean you don't want a margin after the last li? In that case, use the CSS :last-child selector:
ul li
{
margin-right: 10px;
width: 190px; // 190px = 200px - margin width
display: inline-block;
zoom: 1;
*display: inline;
}
ul li:last-child
{
margin-right: 0px;
}
Please note that this will NOT work in any internet explorer except IE9. Sorry :-(
As a fix, you could use JavaScript (notably jQuery) to edit the CSS of the last child.
An example here: http://jsfiddle.net/WtLAm/2/
Are you intending to float the list items so they stretch horizontally to fill the ul that way? if so, something like
<style type="text/css" media="screen">
ul {width: 600px;}
li {display: inline; float: left; width: 33%;}
</style>
would work.
I think this can't be done with margins, I suggest you this solution:
http://jsfiddle.net/wY5t6/
css:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
width: 600px;
overflow:hidden;
}
If you need to set padding, background etc on list item than you can do it this way:
http://jsfiddle.net/wY5t6/1/
HTML:
<ul>
<li><span>text</span></li>
<li><span>text</span></li>
<li class="possibly_last"><span>text</span></li>
</ul>
CSS:
ul li {
margin: 0;
display: block;
float: left;
width: 200px;
text-align: center;
}
ul {
border: 1px green dotted;
width: 600px;
overflow:hidden;
}
li span {
background: yellow;
padding: 5px;
}