I want to set a background image in a div class, and want to add some text on the image, with 5px padding but my text is overflowing, please see my css and demo here http://jsfiddle.net/LcQzG/ and help me with it. Thanks.
You should set a width and add
word-wrap:break-word;
example : http://jsfiddle.net/LcQzG/6/
Either make the background image higher, make the text smaller, make the box wider or add this to add a scroll bar:
overflow: auto;
or to hide the overflowing text:
overflow: hidden;
You need to set a width on the containing div. The width would be the width of the image - 10px (the sum of the left and right padding).
Related
If I add a background image to a div using CSS, I can't view the image until I add some content/text inside of the div.
Why is that?
Because background image does not give div content.
An empty div without width/height defined will not show. A div does not have natural padding/margin so without content it has a height of 0 so you don't see it
i will assume that the div have no height, so it will take height: 0; in case no data.
try giving it height.
Add background-size property to div.
As background-image doesn't have height and width. Cross check your html in Developer console. You'll find that div is present.
background-size: 100% 200px
I am trying trying to make a div's width as wide as it's content. Here's a fidle to show what I mean:
http://jsfiddle.net/djxpU/
I want the blue area to be as wide as the white. I tried float:left and display:inline-block, however they won't work with position:absolute;. Any workarounds?
If you want the white area to fit the blue parent, you'd set the width of the white to 100% #X{
width:100%;
}
Block-level elements actually do this naturally. The problem you have is, absolute positioned elements are taken out of the normal flow, so the block can't wrap around your white boxes.
Is there a reason you need them positioned absolute?
EDIT: If you just wanted the white boxes to be centered, here you go: http://jsfiddle.net/Marconius/djxpU/1/
Code (because I have to): margin: 0 auto;
By default a div will be the width of its parent and will display as block. Here is an example of the divs filling the available space while still maintaining the left margin.
Apply this to your 'X' divs: { margin-left: 120px; height: 40px; background-color: white;}
http://jsfiddle.net/yz3Dk/
How to fix the height of the vertical text? It is not working properly with line-height or height property
Here is my demo
http://jsfiddle.net/BsZ8f/1/
I tried my hand on the code but couldn't figure out. My solution would be to use just css2 to create vertical text, for this you just need to give the .title a fixed width say 10px just enough to hold one character, this way the text will automatically get aligned vertically and give height: auto; overflow: auto; to make sure the height adjusts.
I have the following HTML & CSS: http://jsfiddle.net/j8aFS/1/
When you decrease the window size, the red box and the text expands over the grey area because of the word wrap.
What can I do to prevent this? Can I prevent this?
What I have tried so far:
using the CSS white-space: nowrap; property, but it seems that this
isn't the best solution.
simply leaving space below the red box, but this really influences the design too much.
What I want to achieve: The grey box should grow so the red box never expands over the grey box. The text inside the red box should not be cut off.
What do you want to happen instead?
If you make the gray box position relative and set it's overflow to hidden, the red box gets cut off.
.div1 {
height: 62%;
background-color: grey;
overflow: hidden;
position: relative;
}
DEMO
Unless you specify a set width for the red box, making the window smaller will cause it to get taller and overflow. You can hide it (my solution), let it overflow (current behavior) or not do the position absolute and let it make the gray box bigger. In your question it isn't clear at all what you want it to do.
Updated demo
You could set a width: 180px for your red box
The viewport for smaller screens.
If you would'nt position your box absolute, the box below would float down as well
I am trying to resolve an issue in IE7.
My text area has a background image behind it which then scrolls with the text when the text exceeds the height of the text area and begins to scroll with the text.
Anyone know why this is happening and what the solution this would be?
Thanks,
James
This is a problem that only happens with IE 6 and 7, which has been resolved in IE8.
To fix the problem, try wrapping the <textarea> in a <div>. Apply the background and border properties of the <textarea> to the <div>, then set the border and background of the <textarea> to none.
You'll probably still need to tweak the margin and padding of both the <div> and the <textarea> to get it look just right, but now you should be pointed in the right direction.
Have you tried setting the background-position to background-position: top center;?
(Or something like background-position: 50px center;.)
Using:
textarea { background: transparent url(/images/test-bg.jpg) no-repeat top left; width: 500px; height: 230px; }
should give you a background image that is fixed to the top left of the textarea box that is fixed when the text exceeds the initial dimensions.