http://glowing-fire-495.heroku.com/users/3
I was wondering if anyone knows why the tags in the yellow box is cut off like that on the right side?
How can I make it so it doesnt do that?
add to your css
#tagsDiv a {
white-space:nowrap;
}
Change the margin and display in#tagsDiv a to:
#tagsDiv a {
margin: 2px;
display: inline-block;
}
Tested with Firebug, looks alright. The code above will keep it from being cut off, and it'll space them out a little bit so they aren't top-to-bottom.
The tag is not cut off, there is just an (automatically inserted) line break in its text. Set
white-space: nowrap;
on the tag elements.
Related
I need to keep a group of images from wrapping.
I was hoping the css below would do it, but it's still not working.
img {
display: inline;
vertical-align: top;
float: none;
}
Here's the demo: http://plnkr.co/edit/BwM8SuOpV49MuxXSnfP6?p=preview
Is there a way to do this?
Thanks!
-- EDIT --
Here's a better example: http://plnkr.co/edit/WwIh6EoHcpHO18Ln06Td?p=preview
This shows a sentence (with each character rendered as an image) being wrapped at the wrong spot. Is it possible to set a css nowrap value per image?
...ok, figured it out: the solution is to wrap each word in an inline-block span
CSS clear property
http://www.w3schools.com/cssref/pr_class_clear.asp
clear: none|left|right|both|initial|inherit;
Inline elements are great, because their width is the width of the content and because it's possible to center them with on rule of CSS:
text-align: center
But inline elements stay on the same line. Is it possible to align them vertically?
Fiddle: http://jsfiddle.net/_bop/NhVaF/
Full screen fiddle: http://jsfiddle.net/_bop/NhVaF/show
Please don't:
Change the HTML in the example. Change the CSS!
Come up with other techniques to center elements, unless you have a better solution that works on elements with unspecified width and doesn't need tons of containers and/or float hacks.
Thanks in advance!
In your markup, if the span are on different rows you could add on the parent container:
white-space: pre-line;
With this CSS declaration, your span are still centered, and you don`t have to add HTML markup.
pre-line
- This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever
necessary to fill line boxes, and at new lines in the markup (or at
occurrences of "\a" in generated content). In other words, it’s like
normal except that it’ll honor explicit line breaks.
You can find more informations here about white-space:
http://reference.sitepoint.com/css/white-space
http://www.w3.org/TR/css3-text/#white-space
For an IE7 compatibility, you could also add on the parent container:
*white-space: pre /*FixIE7*/;
You need some holding block to hold your spans if you want to display it on top of another. This is the best I can do.
http://jsfiddle.net/NhVaF/5/
If you want to make it work without altering the html, then your best bet is to simply float: left; clear: left; like so:
span {
float: left;
clear: left;
color: #FFF;
padding: 30px;
}
display: block; will not work because it requires you to set a width (or else they'll fill the available space).
display: inline-block; will not work because still display on the same line.
I was just playing around with this too, and found my solution by simply placing <br> after each inline-block element. I know it's altering the html but only slightly!
If you want to create line breaks with CSS try using the :after pseudo class. Would something like this work?
div.class:after {
content:"\a";
white-space: pre;
}
break :after trick: https://stackoverflow.com/a/10934138/6586407
I'm sure the answer is obvious, but I haven't been working with html/css that much...
There is a gap of white space in between the top of the browser and the first div. I don't really get why the gap is there. I didn't use margin-top or padding-top or border-top in the css, so why is there a gap?
Thanks!
While it would be extremely helpful if you actually posted some code or a link to the site, I would assume it's just the default padding. Most browsers have default styles for things like body that you may want to clear. Try something like this:
html, body{
padding: 0;
margin: 0;
}
If that doesn't fix it you'll need to give more information.
Without seeing anything I'd imagine you either need to clear the default padding on the body element or you have a heading tag in that div that is adding some extra goodness.
Are you using a reset? http://meyerweb.com/eric/tools/css/reset/
if the page is wrapped with a wrapper, use:
#wrap{
margin:0 auto;
padding:0
}
Once again, some context would be nice but if these solutions aren't cutting it, then there's a good change your a victim of collapsing margins. Try setting the overflow property of the body to auto
I had the same problem. Floating the upper divs solved it.
I had the same problem. It was fixed when I added 30px of padding to my div container. I used
.top-container {
padding-top: 30px;
}
My problem happened after I set some images to an absolute position in my div (which had a position of relative.) For some reason that gap appeared, but setting the padding worked for me.
I know this is 9 years old but...
body { margin:0; }
type that in between the Tags and it should work
I'm trying to hide some text inside an <li> element using CSS by setting text-indent: -999px;.
For some reason this doesn't work when I set the direction of the document to "rtl" (right to left - my site is in Hebrew).
When direction is "rtl" the text still shows...
Anyone knows why, and a way around this?
Along with text-indent: -9999px try using display: block;. It solved for me.
Additionally, if you need the li elements to float horizontally (e.g. a horizontal menu), use float: left;.
What about setting direction:ltr on the elements you're trying to give negative text-indent?
Demo: jsfiddle.net/Marcel/aJBnN/1/
My problem was with text-align. In case you modify align mode of the element or parent element(s) wrapping it to left, you must give a negative index for text-indent. Otherwise you must give a positive value.
.case1{text-indent:-999px;text-align:left;overflow:hidden;display:block}
Otherwise
.case2{text-indent:999px;text-align:right;overflow:hidden;display:block}
Try setting text-alignment to match the direction in which you are indenting text.
For example, if you use LTR and want to indent text negatively, besides adding display: block, you should also add left alignment.
Not sure for RTL, but seems logical you should indent it positively and use right alignment.
I found the best way is to make the text a transparent color:
color: rgba(0,0,0,0);
Note:
This bug still exists in firefox 12 (text-indent value is ignored on rtl)
color: transparent;
or
font-size:0px;
You can use line-height specifying a large value, say 100px for a 30px high container.
only works if your container is limited in size. you may have to specifically set height if it isn't yet.
I prefer this solution:
.hide_text { text-indent: 100%; white-space: nowrap; overflow: hidden; }
The text-indent: -99px is an old trick, which is not the optimal way to hide text. Why not use visibility:hidden instead?
text-align: right; works for me
Add overflow hidden then it will work fine.
div{
text-indent: 100%;
overflow: hidden;
}
<div>
search
<input type="text">
</div>
If I add this to my CSS...
small a:hover, a:hover {background-color: #CCC; }
This happens to all images that are also links when viewing in IE 8 (fine in firefox)...
They look right...
http://notails.com/nothover.jpg
until I hover over them...
http://notails.com/hover.jpg
If I remove the line of CSS the behaviour goes away. I've tried googling this but I just get unrelated problems.
By default, images align their bottom edges with the baseline of the text. That grey space you're seeing is the space below the baseline, used by decenders like q, p, y, etc. (The fact that you have no text is irrelevant - space for descenders is still reserved.)
You can get rid of it like this:
a img { /* You might want to make this rule more specific! */
vertical-align: bottom;
}
See That mysterious gap under images for a full discussion of this.
You might also try setting line-height on that item to 0.
try
a {
margin: 0px;
padding: 0px;
}
I think you probably need to set the border for the image to none, so border:none;