I've got menu items that look like this
<ul>
<li>Item1<span class="context-trigger"></span></li>
<li>Item2<span class="context-trigger"></span></li>
<li>Item3<span class="context-trigger"></span></li>
</ul>
with CSS that turns the above into a horizontal menu, and JS that turns the [spans] into buttons that bring up contextual menus. Vaguely like this:
Item1^ Item2^ Item3^
If the menu gets too wide for the browser width, it wraps, which is what I want. The problem is that sometimes it's putting in line-breaks before the [spans]. I only want it to break between [li]s. Any ideas?
try using
white-space: nowrap;
in the css definition of your context-trigger class.
Edit: I think patmortech is correct though, putting nowrap on the span does not work, because there is no "white space" content. It might also be that sticking the style on the LI element does not work either, because the browser might breakup the parts because the span is a nested element in li. You might reconsider your code, drop the SPAN element and use css on the LI elements.
You need to put the following to keep your list item from wrapping (putting it in the context-trigger class would just keep the span contents from wrapping):
li { white-space:nowrap; }
If you float the <li> elements, you should get the effect you want.
Related
I am trying to understand html/css menu bar and my problem is at the display property,
I do know about this property very well, but if you take a look at this Link,
just a simple menubar, but the problem is that i dont understand why does the li tag and the a tag at the css style include display property inside them when the float do the job and you can delete them and the menu looks the same, i know that there is a resone for thoes display properies to be there at thoes both tags styles but i dont get it, if can some one please help me understand why the display property with the value of inline at the li css style, and with value of block at the li a at the css style, and again its not that i dont know about this property it just i dont understand why its there, thank you all and have a nice day.
display:inline used in li's is to make li aligned Horizontal or side by side.
display:block is used in li a so the a should take the complete with of the li so that if you click anywhere inside li the <a> tag will work & will not only work on clicking on the text.
Each link in the menu on the left has padding-left: 15px; the reason for this is so I can add a background image (the blue arrow).
But now, when the text wraps (see "Paintings, prints, and watercolours"), it ignores the padding.
After searching around I can't find any similar cases at all, is that because I am going at this wrong?
If what I have at the moment is fine, how can I fix the wrapping issue?
Padding only applies to block-level elements. Either assign your menu's a elements a display:block; or display:inline-block; to get them to respond properly to padding.
You should place the padding on a div instead - http://jsfiddle.net/qHGrJ/1/
Paddings don't work that way for span style elements. Alternatively you could probably use display:block on the link.
Given the way you're using these anchors you can just set them to display:block.
A more ideal way to mark up this menu (especially since you're using HTML5) would be to use a menu tag containing a list of links.
<menu>
<ul>
<li>My Menu Item</li>
<li><a href="mySecondMenuItem.html>My Second Menu Item</a></li>
</ul>
</menu>
This is more semantic and also gives you the li's as hooks to add a margin to.
Add display:block to your anchors. I would suggest against using inline-block as it isn't fully supported cross-browser (i believe IE7 and below).
Add display block on line 13 of view.css like so
#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}
My biggest gripe with HTML is that line breaks add a tiny bit of space between elements. (jsFiddle.)
This can screw up layouts where child elements are sized to exactly fit their parents.
I read somewhere that you can remove this implicit padding - while still keeping the code somewhat legible - by using comments like this:
<!--
--><div>Foo</div><!--
--><div>Bar</div><!--
--><div>And so on...</div><!--
-->
This works, but I feel like there has to be a better solution. What other ways are there to work around the line-break padding?
That isn't "a little bit of space", but literally a space character. You are using display: inline-block to align your elements horizonally, and that's how "inline" works.
If you want to use inline-block you need to remove the white space between the elements as you are doing it.
Otherwise you can use one of the other methods to horizontally align, for example floating or display: table-cell.
A solution would be to use some HTML compressor before publishing your pages to remove unneeded space from your markup, like in this example.
From what I've seen though, they tend to leave always one space at least, because they don't know if you really wanted that space or not, and since browsers considers only the first space if there are more than one, compressors leave one space there.
You should try font-size:0px; line-height:0px for outer div.
Something like this:
<div class="outer">
<div class="inner">123</div>
<div class="inner">34556</div>
</div>
<style>
.outer {
font-size:0px;
line-height:0px;
}
.inner {
font-size:14px;
line-height:16px;
display:inline-block;
}
</style>
This is because you use display: inline-block; for the div elements.
Block elements strip white space around them, inline elements don't.
Try float: left; instead.
I'm using visibility:hidden to hide certain elements, but they still take up space on the page while hidden.
How can I make them totally disappear visually, as though they are not in the DOM at all (but without actually removing them from the DOM)?
Try setting display:none to hide and set display:block to show.
use style instead like
<div style="display:none;"></div>
Toggling display does not allow for smooth CSS transitions. Instead toggle both the visibility and the max-height.
visibility: hidden;
max-height: 0;
To use display:none is a good option just to removing an element BUT it will be also removed for screenreaders. There are also discussions if it effects SEO. There's a good, short article on that topic on A List Apart
If you really just want hide and not remove an element, better use:
div {
position: absolute;
left: -999em;
}
Like this it can be also read by screen readers.
The only disadvantage of this method is, that this DIV is actually rendered and it might effect the performance, especially on mobile phones.
Look, instead of using visibility: hidden; use display: none;. The first option will hide but still takes space and the second option will hide and doesn't take any space.
display: none is solution, That's completely hides elements with its space.
Story about display:none and visibility: hidden
visibility:hidden means the tag is not visible, but space is allocated for it on the page.
display:none means completely hides elements with its space. (although you can still interact with it through the DOM)
The answer to this question is saying to use display:none and display:block, but this does not help for someone who is trying to use css transitions to show and hide content using the visibility property.
This also drove me crazy, because using display kills any css transitions.
One solution is to add this to the class that's using visibility:
overflow:hidden
For this to work is does depend on the layout, but it should keep the empty content within the div it resides in.
display:none to hide and set display:block to show.
here's a different take on putting them back after display:none. don't use display:block/inline etc. Instead (if using javascript) set css property display to '' (i.e. blank)
$('#abc').css({"display":"none"});
this hides the content and also does not leave empty space.
above my knowledge it is possible in 4 ways
HTML<button style="display:none;"></button>
CSS #buttonId{ display:none; }
jQuery $('#buttonId').prop('display':'none'); & $("#buttonId").css('opacity', 0);
display:none is the best thing to avoid takeup white space on the page
Thanks to this question. I wanted the exact opposite, i.e a hidden div should still occupy its space on the browser. So, I used visibility: hidden instead of display: none.
If somehow all the other options to hide an element do not suit you, there is another option which I do not see mentioned. It works assuming the element has no children.
It will hide an element without occupying space:
display: contents;
Check the browser support as it is a newish CSS feature.
With visibility set to hidden the only way I know of to make it not take up space is to use position:absolute and then set the top, left, etc., parameters. It's not ideal but it works.
As I have been troubleshooting this issue and researching, I thought I'd share my insight. If you've gotten yourself to this page, I assume you are trying to figure out why your element is taking up space on your page even with style.display = "none".
Most likely, the reason for this is NOT the element in question; but a child, parent, or sibling of it. Open up your console and go to the Elements tab. Look in there for clues as to what could possibly be taking up space. Maybe you're using a template-engine and didn't realize a <br> was rendering outside of a dynamic <div>. Or maybe you should be targeting a more nested element. Try to think along these lines while troubleshooting.
if display: none; doesn't work you have to add clear: none;
In a chain of list elements (<li>) with display: inline, is there a way to force a line break using a CSS property?
Using a <br> within a <li> feels dirty, and outside a <li> is probably forbidden.
to clarify:
I need them "display: inline" because I may need to center them within the UL
I need only some of the elements to have a line break.
Why do you use display:inline?
display: list-item; does exactly what you need (which is default for li)
You can have all <li> elements rendered with float:left and then set on one of them clear:left. This will cause it to "jump" to the next line.
Alternatively, float:right and clear:right will do a similar thing.
Do you want a "line break" after each <li> or just after a few certain ones?
For the former: If you set the width wide enough to fill the container, they will line wrap (actually, they only have to be wide enough to fill 51% of their container, since two could no longer fit on one line). -- but in this case, you probably don't need them to be inline at all.
For the latter: You would probably be better off using float: left with a clear: left on each one you want to start a new line with.
Try putting display:block; on the particular <li> that you want on the next line.
You could try and use the :after pseudo-element but I haven't played with it much.
li.class:after { content: "\a"; white-space: pre; }
works for me.