can someone help me with a little trick in css? I need to put an image (<a><img/></a>) inside a text block (<p></p>) like the image above:
Like #StephanMuller said, that's not possible, i was looking for a float:center, that doesn't exist, but i can work around with some float:left, and right! Thanks again everybody, sorry for not been so clear, please don't downvote me ! SOLVED :)
This is not possible with a simple html/css construction. You're looking for float:center-like behavior, which unfortunately doesn't exist.
The main problem here is that images inside text are inline (or inline-block) elements per definition (if you make it a block it breaks up the flow of the text). This in it's turn means that other lines of text are not aware of where the image is. float was deviced to solve this, but it only works on the left and right side of something, not in the middle.
The closest I could get was this: http://jsfiddle.net/5HPMq/
As you can see, I hardcoded some heights to be able to easily set the right negative margins on the images. This way the height of the image doesn't influence the line-height of the rest of the line, but as I stated the other lines are not aware of where the image is, so they will flow behind it.
TL;DR: Sorry, you can't do this.
addition
I was assuming you want the text to flow around tie image. If you merely want to overlap the images on the lines above and below it, use my jsfiddle and see if you can work from there.
I assume you want the image just in front of your text.
This might help:
<img style="position:absolute; TOP:100px; LEFT:100px; WIDTH:50px; HEIGHT:50px" SRC="image.jpg">
top:100px; and left:50px; are the starting points. Just find out the coordinates.
tried it myself and it looks like this for me:
Related
Surprisingly, I cannot find an answer to the simple question - how to wrap text around image?
I have dynamically generated (user-entered) text and image, and I need to fit it in the div, like that:
Or, in case there's not enough text, it shall be like that:
In other words, image shall be displayed in place it is set to and shall be wrapped by text. I thought it would be easy but suddenly cannot find how to do that, please help, I suppose there's a simple way to achieve that.
I believe it's possible but it's so advance that you need a lot of js and css to manipulate the flow. Assuming the blue rectangles are html tag where you can put your text, let's say a div. For example the text from rA will continue to rB then to rC. This one will continue downwards until its total height is equal to the height of the element in the middle, let's say an image. Basically the thought is making the texts jump from one div to the other when it overflows. Found this one on this website .
Any css tricks for getting text of any size to appear on the baseline for children inside one element that has float:left and another that has float:right?
Check out the jsfiddle link below to see what I'm talking about. Notice how the word "One" has a larger font so it bumps all of it's siblings in the float:left down, but it does not influence the spans in the float:right div.
http://jsfiddle.net/QeRhU/
I'd like for them all to appear on the same baseline. I'm hoping for a solution that still uses float:left; float:right; because I still want the liquid behavior that it gives when a user scales the page.
Try this, it's not the clean solution, but rather a workaround that could get the job done if you don't find a cleaner css solution.
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
I'm pretty well versed with HTML and CSS, but I'd like your opinion on this one!
I need to center the text in the arrow, but place a check box next to the centered text. Because of this, I can't user text-align on all of the contents of the arrow, like I normally would. If I include the check in the centering, the anchor point shifts off of the text to include the check, and the text isn't truly centered.
Thanks!
Make the check an absolutely positioned span, set as display:block, positioned relative to the text. Check out this jsFiddle for a basic idea. Your HTML may be set up differently:
http://jsfiddle.net/cGG3W/1/
Without seeing the code, you could
use text-align:center; on the text in the div.
place the checkmark in another div and position it where necessary. You may need to adjust the stack.
Please have a look at this page www.pixeli.ca/issue.
I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens.
Thanks.
Simply adding float:left to the image fixes it.
<img src="imagetop.png" style="float: left;"/>
Not quite sure why or if there's a slightly more accurate method but hey, there you are.
Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.
set image to display:block and it should work.