I am trying to get the image caption which is a dd-element to break so it is as wide as it's dt-element. I don't want to use a width and using display: inline and float: left do not work. I have code and example here: http://jsfiddle.net/PnyHs/11/. I'm using Firefox 9 to test.
The only solution I can come up with right now is to use javascript to measure the dt-element and set that width to the dd-element.
Thanks in advance for any help and suggestions.
If you want to keep the structure of your HTML and not use max-width, I dare to say this is impossible, and here is why:
You are expecting the img object to constrain the dd element. However both elements are siblings and can only be constrained in terms of width by their parent (alternatively an element can be stretched out by its children). Hence, the dd will expand as much as it wants because the parent element is not limiting it.
Of course this could be solved by setting the width of the parent element, however you've mentioned that you don't want to do that since the pictures will have different sizes.
So unfortunately unless you change your HTML structure this won't be possible without JavaScript (unless I'm missing something obvious here).
Using dl markup for an image and a caption is artificial and doesn’t make styling any easier. The only approach to the problem (making the caption as wide as the image) that does not need scripting or setting image width explicitly seems to be to use a single-cell table with a caption element, see fiddle and my page on image captions. Example:
<table class="photo">
<caption align="bottom">Image Caption with a very very very very very long
text</caption>
<tr><td>
<img title="" alt="" src="http://dummyimage.com/120x100/82d91f/fff">
</td></tr>
</table>
Can you add a width to your dl element? The same width as your image like this http://jsfiddle.net/PnyHs/12/
Related
So I am asking an question, regarding to this bootstrap template:
https://startbootstrap.com/previews/landing-page/
As you can see, there are 3 sections saying "Fully Responsive, Bootstrap4 Ready and Easy to use"
My question is just, how do I insert an image into these sections?
I probably have to insert the image into this line of code:
<div class="features-icons-icon d-flex">
I already tried it by simply replacing the svg class with
style="background-image: url('img/hello.jpg');"></div>
However, the image wont appear.
Just try use <img> instead of styling
Wherever you want to insert an image, use the image tag.
<img src="img/hello.jpg">
The three 'images', a computer screen, stack, and a checkmark, aren't actually images, they are icons, represented by the i tag.
To style in the similar way as the icons (height, width) you will have to adjust the css to the way you see fit.
<img src="img/hello.jpg" style="height: 100px; width: 100px">
There's nothing wrong with your code, apparently, but your question is quite generic. So here are a few steps to consider:
1. Make sure you are using the right path to your image.
As stupid this tip may sound, there are some things to observe regarding paths in HTML.
Check your browser dev tools with inspect element in order to see if that image has been correctly loaded.
For better reference, check: https://www.w3schools.com/html/html_filepaths.asp
2. Set a height and width for your div.
Divs are block elements. That means that usually they will assume the size of elements inside it. If there is nothing inside that Div element, the block element width and height will be 0. So long you don't intend to insert anything inside, you should add the properties of width and height to your div as well, in order to ensure the element itself
doesn't depend on other elements to have height or width.
Inside your css file, make sure to have something like:
.features-icons-icon{
background-image: url('img/hello.jpg');
height: 50px;
width: 100px;
}
For better reference at block elements, please check: https://www.w3schools.com/html/html_blocks.asp
3. Make sure that, if you are using responsive width and height, the element that nests the div has width and height.
As the div element is nested inside another element, the element that nests that empty div, which uses relative css units, should have length and width on its own.
For better reference at relative units, please check:
enter link description here
I might have missed something, but those tips should suffice. My personal hunch is that you should check step 2, that you might have overlooked.
See My Fiddle:
http://jsfiddle.net/5BEsZ/
I've discovered something very strange that I haven't seen documented anywhere else... Was wondering if you all had a solution.
You'll notice the negative margin hits a limit at around -212% for image elements. Is there a reason for this? Can you think of a work around?
Why I Need This (what I've tried):
I'm making a fluid layout and I want to display a rating system. I have a sprite sheet of stars (similar to the one in the fiddle) that I want to reuse at various sizes.
Because the size changes I can't use a background image. So I decided to use an image inside a container with a variable width and overflow:hidden. The sprite sheet adjusts to the width of the container and the container's viewable content is determined by a padding-top:20%. This is so it can be fluid with its width (since every star is a box, the total height is 20% the width).
Then I try and position the star image inside the container with margin-top. I tried using position:relative and a top:-X%, but because the container technically has no height this was causing issue on mobile phones (-100% of 0 is 0, etc).
So I assumed negative margin would work, but then discovered this strange issue!
NOTE: Because it affects only the last row I can make it work in my situation by using a padding-bottom instead of top (thereby bumping every star row up 1), but this isn't an adequate solution for me because it just ignores the problem. What if I wanted quarter stars?
I've updated your fiddle. img tags are "inline" elements by default, which impacts the way margin is calculated relative to the containing element. By forcing the image element to be rendered like a block (display: block), you're able to achieve the results you were expecting. A div element is a block by default.
As a side note, you'll want to avoid using inline styles (a different sort of "inline"!) wherever possible. Typically your styles would be included in a stylesheet instead of in a style attribute directly on the element. I included the fix (display: block) in the attribute to match the code style of your html.
I don't know why, but if you float the image the problem goes away.
<img src="http://www.whitepages.com/common/images/sprite_stars.gif?1343868502" id="stars" style="width:100%; float: left;" />
So, the answer to fix your problem: http://jsfiddle.net/5BEsZ/2/
If anyone could explain why this happens?
I have emoticons in a css sprite image that I want to display within text, so I have spans inserted with background definitions but as these spans are inline elements I can not define the width and height.
The only thing I could think of is make them block elements and float left, but I'm not sure if this is the best approach. What do you think is the best way to do this?
try to use the css property and value display: inline-block
I do not think that display: inline-block is supported enough to rely on. Obviously I am talking about <=IE7, and possibly other mobile devices. Which unfortunately are still in use. However there comes a point when one stops supporting IE.
I would try using a div floated, with background attributes set. Failing that a single image.
I have a page with text, and a div with image and short text about the image in the right.
I want to set only the max-width of the image (and not the width) and I want the text of the image to be limited to the width of the image.
I used one of the answers here: Limit text to the width of sibling image / auto width in CSS - and set the right div: display:table and width:1px.
But now I have a problem in ie8, because ie8 has a bug described here: http://bytes.com/topic/html-css/answers/870359-ie8-display-table-cell-max-width-bug
- It gives wrong width to element when the child's max-width is smaller than intrinsic width.
In the link above there is a solution - to set table-layout:fixed, but it causes my div to be in width 1px.
Does anyone have a solution?
Thank you!
PS I have pictures that illustrate the problem, but I am a new user so I can not post them...
You can use the CSS letter-spacing property in combination with font-size for starters...
you_selector {letter-spacing: 2px;}
Looking at the jsFiddle code here are the changes you should make...
Add this CSS...
.ImageTextPanel {float: none;}
.ImageTextPanel span {letter-spacing: 0px;}
Keep all text inside of paragraph and span elements. While it is technically valid to put text directly in to division elements it's very poor practice.
<DIV class="ImageTextPanel"><span>Text about the image, may be multiple lines.</span></DIV>
Also don't use uppercase letters for HTML, that's junky. If you REALLY want to excel learn to program XHTML served as application/xhtml+xml (you can use XHTML5 too) as it's stricter rules make debugger much easier and you'll end up flying threw basic stuff much faster.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help