Simple question: I need an image to appear in the middle of a paragraph of text, however, the image is slightly larger than the height of each line of the font, so it pushes open a horizontal "gap" in the text to make room for itself. To fix this, I could:
1) Shrink the image, so that it is not larger than the font.
2) Use Position:Absolute
But I don't want to shrink it any further, it is small enough already to "technically fit" between each line of text, except that it would need to use up a few pixels of the white area above and below the line of text it is in.
And I can't use position:absolute, because then the image's position would be in the top left corner of the window, instead of in the paragraph where I want it.
I thought perhaps I could put a dummy "placeholder" image of size 1 pixels into the paragraph. Then, use Position:Absolute on my real image, and continually set my real image to be at the same location where the dummy image is. I haven't researched to see if that is possible, but it seems a bit excessive for such a simple thing. Is there an easier way?
EDIT: I found that adding: margin:-20px; to the image's style works!!!
margin:-20px;
JSFiddle example: http://jsfiddle.net/j7tLX/3/
Images are block level elements if you want them to appear inline with the paragraphs. Do this.
img {
display: inline;
}
You can use vertical-align: top
http://jsfiddle.net/j7tLX/4/
See http://css-tricks.com/what-is-vertical-align/
Related
I am using an XML editor called Madcap Flare that allows me to create image maps using a GUI. Since that makes the maps easily editable, I would rather use that technique. Unfortunately, the code it renders is not a CSS image map, but an HTML one (map, area, etc.). I do not want to switch to a CSS image map, because I want to do easy editing in the GUI.
I want my image map to align right with text to the left of it. I have tried the following techniques with the indicated results:
Technique 1: I floated the div containing the image right with CSS.
Result: The image map no longer works, but the image floats right and the text wraps.
Technique 2: I floated the image right with CSS.
Result: The image floats right, but the div remains on the left. The text does not wrap and the image map no longer works.
Technique 3: I set the div align="right" and removed the CSS completely.
Result: The image floats right and the image map works, but the text no longer wraps.
I've noticed the image map only breaks when I float the image or its container; I even floated left to experiment and saw the same results. Is there no way to float an image map? I wondered if the issue were an image resizing issue, but I inspected the code and the image map is no inheriting any image size styles. I also set the image to max-width and max-height 100% in my tests to make sure it wasn't shrinking at all, but I saw the same results again. I also think that the HTML align=right experiment indicated that the problem was not an inherited style.
Any tips/tricks? Or any confirmation that you cannot float an image map? Thanks.
If the div containing the image map has a fixed size and is at the upper border of its parent DIV, you could do the following:
Create an empty DIV with the same size as the one containing the image map and make that float right (at the top). No border, no background, no contents. The text will float around that one.
Apply position: relative to the parent DIV and position: absolute to the div containing the image map. Apply top: 0;, right: 0 and the width and height as the empty floated DIV.
This places the image map above the empty floated DIV and the text floats around it.
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
jsfiddle link: http://jsfiddle.net/djDWF/84/
The problem is, the inner container (text-padding) margin/width for the text/images is affecting the center background image. The repeated image that touches the footer does not extend to full height, and cuts off so the center and footer images do not match up (it is kind of hard to tell, but if you add or remove text in my jfiddle example you can see the center image change where it meets the footer.).
This is for a school project, and though I did not need to actually do this type of image background, I got this far so might as well continue. I don't want to use javaScript if possible because that is not part of the course yet.
I tried removing the text wrapper and styling each p tag individually but the same effect occurs.
I also tried mathematical combinations using line-height and margins. If I set the line-height to equal the right and bottom margins, and the left margin to equal the height of the footer then the effect works, but because my footer image is so large this is not a workable solution.
Mathematically I tried to keep the same ratios with the footer height but this did not work either (or else I did this wrong. I tried dividing each by the same amount.)
Is there any way to do this using only CSS and and not having to resort to tables?
So in short the problem is: You can see a line showing up at the footer separation because the repeated centre background isn't fully showing it's last repeat as the container isn't big enough.
The solution: If it doesn't need to be variable and you know how much content you will be putting in you can just set a height: Live example - http://jsfiddle.net/djDWF/85.
div#background-center{
background:url(http://i.imgur.com/gsNFa.png) repeat-y;
float:left;
width:700px;
height: 1604px; /* add this */
}
Obviously, pick whatever height is right to fit your final text.
With your current images there is no way to do this automatically without using JavaScript.
I want to achieve something like this:
A) Is an square image, say 65x65.
B) This icon is another image which
need to be floated inside A.
C) The minimum length of the row is
the height of A. The maximum depends
of the length of the text
description.
Usually when I have floating images like A and B, I would put my container position as relative, and obsolute for the floating image, and that will do it, but I'm a little lost with the text here.
This is just going to be used on webkit browsers, if that is of any use.
If the image size is fixed and unlikely to change in the future, then I'd recommend applying position absolute to the image (what you're saying). I'm guessing your problem is that if the text is too short, the height of the image would exceed the height of the container. This is easily fixable with min-height:
.module {
min-height: 65px; /*your image height*/
}
You can view a demo here:
http://jsfiddle.net/RkeJJ/
This should work all the way down to IE7.
If your image size is variable, then I'd recommend display: table/table-row/table-cell, but this will work only on IE8+ and the rest of the modern browsers.
Me debes una caña! ;)
You know the width of image A (the large image). The title goes in a h1 for example, and the text in a p (or div), so set these two elements to have a left margin greater than the width of image A.
You can then float image A to the left and position the icon B over the image using absolute positioning.
Finally, I would have a wrapper div with overflow: auto to have a border (if needed) and to allow for a bottom margin to provide white space between the following element.
Partial answer: see my code snippet at http://jsfiddle.net/audetwebdesign/Nam52/
You just need to add the date element after the title.
I floated 3 images in divs in the middle of a long section of text. I want to float them so the site keeps it's 'liquid' design, adapting to any width browser window. But if text starts wrapping to the left of them on wide Windows, it looks bad. I'd like them to float, but still be able to clear text around them so they look like a block element. How can I do that?
I thought maybe of sticking in a 100% width div right after the image divs, that's 1px high, and filled with a 1px image that's just the background color. Will that work?
http://www.briligg.com/frailty.html
The images in question are the ones at the beginning of the 'the cause of addiction is stress' section. Line 134 to 146, references the internal style sheet.
Put a clear: left on your section of text following the images.
That appears to be your div with class text though I don't know if you would want to universally apply the clear to all the divs with that class.