I have an inline element with a line break in it. It has padding on all sides. However, the side padding on where the line break cuts the element is not there.
This is what i mean:
http://jsfiddle.net/4Gs2E/
There should be 20px padding on the right of tag and left of with but there isnt.
The only other way I can see this working is if i create a new element for every line but this content will be dynamically generated and will not be in a fixed width container so i dont see that working out. Is there any other way I can do this in css without any javascript?
I want the final result to look like this :
http://jsfiddle.net/GNsw3/
but without any extra elements
i also need this to work with display inline only as I want the background to wrap around the text as inline block doesnt do this
Is this possible?
edit, altered the examples to make what i want more visible:
current
http://jsfiddle.net/4Gs2E/2/
what i want it to look like
http://jsfiddle.net/GNsw3/1/
In some cases you can use box-shadow for a workaround.
Move the right and left padding of the element to its parent and add two box-shadows.
The result: http://jsfiddle.net/FpLCt/1/
Browser support for box-shadow: http://caniuse.com/css-boxshadow
Update:
There is also a new css property for this issue called box-decoration-break. It is currently only supported by opera, but hopefully more browsers will implement this soon.
Hope this helps
Found a solution for you, but it ain't pretty :)
Since you can't target the <br> element with css, you have to use javascript. Here's how you can accomplish what you want with jQuery:
// Add two spaces before and after any <br /> tag
$('br').replaceWith(' <br /> ');
Play with the number of elements to acheive your padding on both ends.
Here's an updated Fiddle demo:
http://jsfiddle.net/4Gs2E/8/
Maybe you can use float: left instead of display: inline:
http://jsfiddle.net/GolezTrol/4Gs2E/1/
Usually that is implemented by wrapping each word in an own SPAN which has border.
I just wanted to make css-animated menu for myself. Workaround I have found is to wrap your INLINE-BLOCK element (change in css if necessary, lets call it a span with such an attribute for purpose of this solution) into block element. Then I'm using margins of span as it was padding for the surrounding div.
div.menuopt {
margin: 10px;
padding: 0px;
padding-left: 0px;
overflow: hidden;
width: 500px;
height: 150px;
background: grey;
}
span.menuopt {
display: inline-block;
margin: 0px;
padding: 0px;
margin-left: 150px;
margin-top: 10px;
font-size: 25px;
}
Example:
http://jsfiddle.net/ApbQS/
hope it will help anyone
Related
I've been trying to center my YouTube video embed but it just won't work properly.
I've tried flexbox and center tags in html, this is the closest I've gotten, really need some help here
My Code:
CSS
.Video {
display: inline-block;
position: absolute;
padding-left: 15px;
padding-right: 15px;
transform: translate(0,-50%);
}
The issue is your css is wrong. Get rid of the position, display and transform. I'm pretty sure you don't need any of those.
Checkout this jsfiddle I made. I think you're looking for margin: 0 auto;. Make sure the embedded videos are wrapped in a div, then apply the margin. If you already have a margin-top or margin-bottom, then just set margin-left: auto and margin-right: auto;
To use flex-box, this works:
Embed your .video in a .flex-container. Give this .flex-container a width and a height. And add the following properties to the .flex-container: justify-content and align-items set them both to center. Thats it.
Check this codepen. I used joes (above) HTML markup.
Also take a look at the out-commented markup above the codepen.
It's just important that the elements you want to center are direct children of the element the flex property is applied to.
I've been searching around for a while (for the answer) with no success, so I guess I did "my homework"...
So basically I've a gap between 2 divs.
You can see it here.
on your content class
.content {
background: url("panel.png");
padding: 0;
margin: 0;
float: left; /*new style*/
width: 100%; /*new style*/
}
Give overflow:hidden to your .bigtext, like this:
.bigtext{
overflow:hidden;
}
This problem is called "collapsing margins".
Check this http://reference.sitepoint.com/css/collapsingmargins
http://www.w3.org/TR/CSS2/box.html
The gap is caused by the p element.
You need to take the margins off - browsers default behaviour is to add 1em before and after the paragraph.
If you use google chrome, you can right click and goto inspect element. From there you can see what default behaviours have been applied to certain elements on the page. You can even see visually what space has been created by margins. Your gap was one of them. =)
See screenshot below - this is showing the margin applied to another p element.
Try margin: 0; for those divs.
you can hack it by applying margin-top:-23px to the .content div
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 working on theming a drupal site (http://dev.thompsonsurgical.com/), and I can't figure out the positioning of the search items in the top-right. I put a container with a 1px border around the elements in question, and to help illustrate the issue. I can't figure out what is making the input field drop down by about 5px. Can anyone point me in the right direction?
this does it :
#edit-search-block-form--2 {
border: 1px solid #E8E8E8;
height: 18px;
margin-top: 0;
padding: 0;
vertical-align: top; // modified
}
I just played around with your css in firebug and it looks like this is the culprit:
.container-inline div, .container-inline label { display:inline }
If I get rid of that and add float:left it goes to the top. Because of other html elements it is on the right. Try playing around with that and you'll get it to work
For some reason your <label> tag is hidden or wrapping your input, when I viewed it in Chrome's Inspector the label was pushing down the content, you can try relatively positioning the input and setting a negative top property
It's due to the baseline default vertical-align which let some space below images. So the <input /> is just aligned with links.
Add vertical-align:middle; for <img /> and <input /> elements.
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>