I have a css menu i'm working on. I'm trying to get the menu items inline, however, it they always display vertically instead. I've tried putting display:inline-block on all of the elements and it still doesn't want to go inline. Any suggestions? Code here: http://jsfiddle.net/3aShL/
<li>s are block-level items, so just because the <a> is, still means with every <li> you will get a new line.
http://jsfiddle.net/3aShL/1/
display: inline;
On the .nav-collapse_ .nav > li will fix it.
Just add this to css
li
{
display:inline;
}
display:inline; - By default, li elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
Demo fiddle
Related
Is there a way to display multiple li tags of HTML in a single line as shown below. Basically we need to display the first few li elements in a single line and rest in a list as shown below link. Thanks.
See CSS and positionning possibilities. You've to change regular comportements of li in layout (default one)by setting new rules. i.e.: using float CSS properties but they're many mny ways to set and place elements in the way you like in your page.
When using bootstrap you can even use grid predefine layout fitting what you want(so for example fill each grid cell with one li) but that seems more complex and make you write more i think.
Yes it is possible.
I created an example pen for you.
HTML
<ul>
<li>
<div>
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
<div>
</li>
<li>item 4</li>
</ul>
CSS
ul{
list-style-type:none;
display:flex;
justify-content:space-between;
flex-grow:1;
}
ul li{
display: inline-block;
}
Place your image files instead of the span tags. Make sure you add display:inline-block; property to them and give proper widths and heights to the image files.
The magic behind this is flexbox
What I want to do is break up the inline-block <li>s. The code is generated and I have no access to it before it is written to the page. Because the <li> elements have no white space between them, they are not split and won't justify across the page.
I don't mind if the solution is CSS or Javascript based.
I have tried various things in CSS 'content:' and 'after:'.
Please see this fiddle for a demo of the problem: http://jsfiddle.net/2L56N/5/
Edit: The result should like the top example. However, the generated code is like in the bottom example (no space between the tags, causing the inline-block to become one). Drag the width over so only 2 images show to see the justify effect I am looking for.
Unless I'm misunderstanding the question, you can simply add margins to the li elements like so:
ul li {
display: inline-block;
margin:5px;
}
http://jsfiddle.net/B7cL9/
You can use display:flex; with justify-content:space-between; to simulate your text-align:justify when white space are missing in between your inline boxes this will only work for younger browsers
:
ul {
display:flex;
justify-content:space-between;
text-align: justify;/* your code */
}
ul li {
display: inline-block;/* your code */
}
DEMO
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;
}
I have a drop down list that I'm trying to get working in IE7. Amongst other bugs, the one that has me beat is the anchors on hover not pushing the background to full padding height. It seems to stay within the dimensions of its li and ultimately the ul. I've tried expanding the height of both ul and li but this doesn't seem to work. Works correctly in all other browsers:
http://jsfiddle.net/gzLVR/2/
What you should see: The anchor tag, on hover, should expand at the bottom by 50px (as per the css #menu > ul > li:hover > a { padding-bottom:50px; }. This expansion is performed, but the background-color doesn't seem to push to the anchor's margins.
What am I doing wrong?
IE7 does not support :hover on items other than <a> tags. Since you have your :hover on an <li> it is not working in IE7.
You'll need to add some javascript to add a .hover class to the <li> when you mouseover, and then adjust your css to include it as well:
#menu > ul > li:hover > a,
#menu > ul > li.hover > a{
padding-bottom:50px;
}
[EDIT]
It appears this is only true when IE7 renders in quirksmode. If you are using a strict doctype, you should be able to use :hover on an <li>
I think trigger hasLayout will fix it; you can do it with somthin like this:
#menu > ul > li > a { display: inline-block;}
Be aware of that IE don't supports :last-child up to IE8, but you can use :first-child.
I would also suggest to use a pseudo element for the part you used the <i></i>, so you don't have unneccessary markup in your HTML.
I ended up finding the solution myself. Each li's anchors are by default set to wrap around it's content (display:inline?), and setting the display to inline-block is somewhat dangerous as its behavior in IE7 is somewhat unpredictable.
By simply setting the anchor to display:block, you allow it to take on dimensions of itself in IE7, so you break it away from having it simply wrap around its content. Thus, it's possible for it to affect the needed padding when on hover.
This will now work in IE7:
http://jsfiddle.net/gzLVR/5/
Have you tried changing the anchor to
display:inline-block;
zoom:1;
The zoom should only be required for IE7, it triggers 'hasLayout'
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>