I'm creating simple horizontal menu. When I hover item it changes background color, but lefts some strange 3px space on left side of the link, and I cannot identify why it shows up, and how to remove it.
Menu is here: http://pokerzysta.site44.com/ (Linki, Posty, Forum, Dodaj)
Any idea what's wrong with it?
Thats because you're displaying the list in a horizontal manner with display: inline-block;.
What is rendered there are white spaces from your HTML markup (most likely line-breaks after the li-tags).
If you put the li-tags in your html without white-space and line-breaks this won't happen:
<ul id="main-menu" class="horizontal-list fleft">
<li>Linki</li><li>Posty</li><li>Forum</li><li>Dodaj<li>
</ul>
#cimmanon pointed to a great article by Chris Coyier about displaying list navigations horizontally: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
There're whitespaces between your LI-Elements. By removing them or using
float: left;
will solute also the problem (but after your UL you should use a clear: both)
your links are inline block, so the HTML whitespace actually uses space ;) A simple trick would be to set the font-size to 0 on the ul and reset the right font size in the li's
in your case:
.horizontal-list {
font-size: 0;
}
.horizontal-list li{
font-size: 17px;
}
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
How to you get rid of the white space between list items? I am trying to make it so that the images are right next to each other. Even though I have set the styling to margins: 0;, they are still separated.
CSS
ul.frames{
margin: 20px;
width: 410px;
height: 320px;
background-color: grey;
float: left;
list-style-type: none;
}
ul.frames li {
display:inline;
margin: 0;
display: inline;
list-style: none;
}
ul.frames li img {
margin: 0 0 0 0;
}
HTML
<li>
<img id="myImg" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg2" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg3" src="img.jpg" width="102.5px" height="80px"/>
</li>
<li>
<img id="myImg4" src="img.jpg" width="102.5px" height="80px"/>
</li>
Updated Sept. 1st, 2014
In modern browsers, flex-box is the preferred method of doing this. It's as simple as:
ul {
display: flex;
}
See a JSFiddle here.
For legacy browser support refer to the other options below, which are still just fine, albeit slightly more complex.
Though each of the other answers gives at least one good solution, none seem to provide all of the possibilities. And that's what I'll try to do here.
Firstly, to answer your implicit question of why there's spacing, it's there because you've set your LIs to display as inline elements.
inline is the default display value for text and images in all of the browsers that I know of. Inline elements are rendered with spacing between them whenever there's whitespace in your code. This is a good thing when it comes to text: these words that I've typed are spaced apart because of the space I've included in the code. And there's also space between each line. It's this very behavior of inline elements is what makes text on the web readable at all.
But sometimes we want non-text elements to be inline to take advantage of other properties of this display style. And this typically includes a desire for our elements to fit snugly together, quite unlike text. And that seems to be your problem here.
Without further ado, here are all the ways I know of to get rid of the spacing:
Keeping them inline
(Not recommended) Apply negative margin to the LIs to move them over.
li { margin: -4px; }
Note that you'll need to 'guess' the size of a space. This isn't recommended because, as Arthur excellently points out in the comments below, users can change the Zoom of their browser, which would more than likely mess up the rendering of your code. Further, this code requires too much guesswork and calculation. There are better solutions that work under all conditions.
Get rid of the whitespace
<li>One</li><li>Two</li>
Use comments to make the whitespace a comment JSFiddle
<li>One</li><!--
--><li>Two</li>
Skip the closing tag (HTML4 valid / HTML5 Valid) JSFiddle
<li>One
<li>Two
Put the whitespace in the tag itself (Note: Early Internet Explorers will not like this)
<li>One</li
><li>Two</li
>
Take advantage of the fact that the spacing between the elements is calculated as a percentage of the font size of the parent. Consequently, setting the parent's font size to 0 results in no space. Just remember to set a non-zero font-size on the li so that the text itself has a nonzero font size. View on JSFiddle.
Floating them
Float them instead. You'll probably want to clearfix the parent if you do this.
li { float: left; display: block; }
Incredible but no one here has provided the proper solution for this problem.
Just do this:
ul.frames {
font-size: 0;
}
ul.frames li {
font-size: 14px; font-size:1.4rem;
display: inline;
}
Keep in mind that we won't always have access to modify the markup. And trying to remove the spaces from the <li>s with JavaScript would be totally unnecessary when the solution is simply two font-size properties.
Also, floating the <li>s introduces another potential problem: You wouldn't be able center and right align the list items.
If you try to do float:right; on the <li>s then their order will be swapped, meaning: the first item in the list would be last, the second item is the one before the last, and so on.
Check out this other post here in SO: A Space between Inline-Block List Items
You should just remove all the spaces in the ul tags just like this: http://jsfiddle.net/dFRYL/3/
Since the <li> elements are inline, in you write spaces in or between them you will have spaces displayed.
The reason you get the spaces is because you have spaces between the elements (line break)
<ul>
<li>One</li><li>
Two</li><li>
Three</li>
</ul>
You can use negative margins like this:
margin-right: -4px;
margin-bottom: -4px;
Take a look here.
It also works up and down, I added another one to show that here.
Using display:inline; causes whitespace in your HTML to create whitespace when displaying the HTML.
There are two solutions to this:
1) Change how you make them appear inline, I would recommend using floats on all of the list items, then using a clearfix of sorts.
2) Remove all whitespace between your list items, e.g.
<li><img id="myImg" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg2" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg3" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li><li><img id="myImg4" src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="102.5px" height="80px"/></li>
Personally I would recommend option 1 (I hate display: inline)
here is my attempt at it. Hope it helps. As Sean Dunwoody mentioned, white space in your html can be a cause of the space, but I've floated the li and made the image to display:block;. Left comment on where I made changes. Hope it helps: http://jsfiddle.net/FJ3nV/
Here my small but main changes:
/*
* Added float left
*/
ul.frames li {
margin: 0;
list-style: none;
float:left;
}
/*
* Moved inline sizing here just to clear up obtrusive html.
* Added display block.
*/
ul.frames li img{width:102px; height:80px; display:block;}
I would change your li elements to inline-block.
One person did not recommend
li { margin: -4px; }
But making a slight change to it will cause it to work even when the font size changes or when the browser zooms in
li{ margin-right: -0.25em; }
That should fix that white space problem completely. However, if you are using a poorly designed font-face that doesn't follow correct letter-height standards then it may cause a problem. However those are harder to find and most of the fonts google hosts don't have that issue.
The navigation I'm referring to looks something like this:
home | about | contact
So what's the best and most flexible HTML/CSS to use for this type of navigation? The best thing I can come up with is to wrap the delimiters in a span so that I can control the spacing around them. For example:
home<span>|</span>about
Is that the best approach?
This all comes down to your target browsers, and if validating as strict HTML4.01 is important to you (ie: a boss/committee thinks it's a "big deal") or not.
Personally, for purposes of nav-menus, I go the route of wrapping everything in an unordered list.
If 4.01-compliance is important, I'll wrap that in a div.nav
If html5 is cool (which it is, with an oldIE JS-shim, as long as there are no committees involved), I'll wrap everything in a <nav id="main-nav"> or similar.
<ul><li>home</li><li>about</li></ul>
Then in CSS:
#main-nav li { display : inline-block; list-style : none; }
From there, you can set your padding on each <li> element to whatever you want.
You can use the :after pseudo-selector to inject "|" or any custom image you want, after each one (and you can use the :last-child:after to make sure that there's no image after the last one, if that's what you want).
You can even play around with the a, turning it into a block-element, and playing with padding to make the entire li block clickable, and not just the text.
See the oldIE-compatibility hack here: how to make clickable links bigger, if necessary.
You could simply add a left border to every element, except the first one:
HTML:
<ul id="nav-list">
<li>Home</li>
<li>Blog</li>
<li>Link</li>
</ul>
With the CSS:
#nav-list li {
display: inline-block;
border-left: 1px solid black;
padding: 4px;
}
#nav-list li:first-child {
border-left: 0;
}
See the above code in action on jsfiddle!
This is rather cross-browser compatible (IE7+) but it can be easily polyfilled with something like Selectivizr for IE6. Thanks to Rob W for suggesting to use border-left and first-child to reach more browsers!
I'm working on a website for a small law office. In the side-menu, I'm trying to highlight the "current page". I have tried changing the background of the LI, but this doesn't quite do the trick; the list item doesn't spread to the full width of the menu, so it looks bad.
Here's a jsfiddle. I would like the yellow section to highlight like the pink section is highlighted: filling up the full vertical and horizontal space, not just highlighting the text.
Any suggestions on how to do this? I've included the style tag in the html just for example, obviously, and my real solution will be a little different when it's done. But I can't move forward until I figure out how to somehow highlight the entire line.
One little issue: you're mixing em and px units for layout. This makes it a lot harder when trying to make things line up.
I've implemented it using a .selected class that would be applied to the selected elements, and a special case for the elements which are sub-menu items:
.selected
{
display: block;
background-color: #FCFFEE;
width: 15.4em;
margin-left: -0.6em;
padding-left: 0.6em;
}
.subMenuItem.selected
{
display: block;
background-color: #FCFFEE;
width: 13.4em;
margin-left: -2.6em;
padding-left: 2.6em;
}
And a jsFiddle fork of your original with the changes: http://jsfiddle.net/CkKc7/2/.
Good luck.
Remove the padding-left from the ul. Also remove the width.
Add display: block to the <a> tags.
Add the removed padding-left back, but on the <a> tags instead.
http://jsfiddle.net/7fEYx/4/
<li class="menuItem">Contact</li>
Is that what you are trying to achieve?
You should apply your style to the LI parent of the A tag, or make the A tag element block-level. Also, consider using a class instead.
I have already found following question with almost similar content: How to indent list items using CSS when you have floating blocks?
And here is my situation: if a list item gets too long, so that it automatically makes a line break, the text flow continues without the indentation.
Here is what I am expecting:
I can handle this using outside position property, modifying the margin or padding of an li element, if the text height is smaller than the image height. But if the text continues, especially on the bottom border of the image - it looks totally destroyed.
A good code to play with can be found here: http://csscreator.com/node/30984 on the second post.
Any help will be deeply appreciated
The most obvious, and simple solution, is to clear the list so that it's forced down under the floated elements, instead of sharing the same space as floated image, for instance, in this jsfiddle.
img {
float: left;
}
ol {
clear: both;
}
Of course, there will be other problems depending on the situation you're using this in, but otherwise it should solve your problem.
There are two ways to do this, either of which work with the code sample you linked to.
ul, ol {
display: table;
list-style-position: inside;
padding-left: 22px;
}
or
ul, ol {
overflow: hidden;
list-style-position: inside;
padding-left: 22px;
}
There are subtle differences, such as overflow: hidden not allowing you to have something like tooltips pop up without being cut off, but no biggie here.
Not sure if this was all even available in 2010, but it is where I live (the future).
I've been trying to get this horizontal navigation sorted for the past few hours now and nothing is working. I've tried reset.css stylesheets, *{padding: 0; margin: 0) etc. and I still have gaps inbetween my image links.
You see, the navigation is made up of an unordered list of image links displayed inline, but there are gaps in between each image, left, right, top and bottom and I can't see why. It's the same in all browsers.
Here is a link to the page, and so source: Beansheaf Temporary
Link to css: http://pentathlongb-yorkshire.co.uk/tomsmith/Beansheaf/styles/fund2.css
The rest of the site is obviously still not done, it's just the navigation I'm worried about right now.
To avoid floating the navigation lis, you've got -at least- two options to remove the spaces between inline elements.
<ul>
<li><img src="../hotel.jpg" /></li
><li><img src="../foodDrink.jpg" /></li
><li><img src="../meetingsConferences.jpg" /></li>
</ul>
Note that the closing </li> tag is closed on the subsequent line (except for the last one), which is valid and maintains readability (for me, at least).
The other option is slightly messier
<ul>
<li><img src="../hotel.jpg" /></li><!--
--><li><img src="../foodDrink.jpg" /></li><!--
--><li><img src="../meetingsConferences.jpg" /></li>
</ul>
And just uses html comments <!-- ... --> to comment-out the spaces that would otherwise be collapsed into a single space.
I do wish there was some way of specifying (for example):
ul li img {whitespace: none-between; }
Another approach, avoiding floats, is to set the font-size on the container to 0, and then re-set it back up for the LIs, like this:
#mainNav
{ font-size: 0}
#mainNav li
{
display: inline;
list-style-type: none;
font-size: 1em
}
the gap below images links is due to the image being aligned with base text line by default, you can solve it simply declaring
li img {
vertical-align:bottom;
}
magic!
Try removing all spaces and line-breaks between the li elements.
Because you are displaying them inline, spaces in the HTML will act as if they were a space in inline text and cause a gap to be left when rendering.
Add
#mainNav li {
float:left;
}
to your CSS.
It is because a new line in an HTML document will be interpreted as a space in the printed content. Since all of your 'li' elements are on new lines, it is adding a space between each of them. Make sure you display them as block elements and float them to the left so they run evenly together.
You can float the list elements, then the white space doesn't interfer:
#mainNav li
{
float: left;
list-style-type: none;
}
I use the line-height attribute on the li tag to fix this.
ul li { line-height:0; }
Best solution to this comes from http://www.cssplay.co.uk/menus/centered.html. And quoting:
All we need to do is enclose the ul tag in an outer container that has a width of 100% and overflow set to hidden.
The <ul> tag is then styled with a relative position and floated left with a left position of 50%.
Finally the <li> tag is also styled with a relative position, floated left but this time with a right position of 50%.
...and that as they say is all that is needed.
if you are using xslt to show these element, you should make the following:
<xsl:template match=".//text()">
<xsl:value-of select="normalize-space(.)" />
</xsl:template>