I have some trouble putting just simple text over an image in IE. The image has a lower z-index than the text so I am not sure what it can be. I also tried to give the text a relative position rather than a absolute one. But it’s still not working. Has anybody please any ideas??
Thanks
IE doesn't handle z-index as the standard states. The best solution is to put the image as a background-image property to a container (for example a div) and the text inside that div. This way all the browsers recognize the correct order.
The second solution is to place both the img and the span (containing the text) in a div with the following properties:
<div style="position:relative">
<img src="a.jpg" style="position:absolute;" />
<span style="position:absolute">your text here</span>
</div>
Put the image and text in a div container set to 'relative' position.
Set the image to position 'absolute'
The text will appear ontop of the image
To control the text put it in another div and use the margin property to move it.
<div id="container" style="position: relative;">
<img style="position: absolute;" src="#" />
<div id="textcontainer" style="margin: 10px 10px 10px 10px">
Text to float on image here
</div>
</div>
No need for z-index :) Different versions of IE don't like it anyway.
<img src="myimage.jpg" title="Text over image here">
Related
I'm making a replacement for <marquee>. I have a <div> with <image>s inside. In order to move the <image>s I need them to be position:absolute, and the <div> must have overflow:hidden to hide the "excess" on the sides, here is the code :
<div style="overflow:hidden;position:relative">
<img src="photo.jpg" style="position:absolute" name="img" />
... (many more images)
</div>
The javascript part is just a timer decreasing the left attribute of the <image>s.
The problem is that the <div> shrinks and disappears when the <image>s are position:absolute and this happens because of the overflow:hidden. I tried using an outer <div> but the same happened. I cannot set a fixed height to the <div> because the user can upload any size of images, big or small, and in any number.
¿How to keep the <image>s absolute and hide the "excess" outside the <div> without shrinking?
Not sure if your approach will work, but this should answer your question. Just add a "hidden" image, which has no position absolute:
<div style="overflow:hidden;position:relative">
<img src="photo.jpg" style="visibility:hidden" name="img" />
<img src="photo.jpg" style="position:absolute" name="img" />
... (many more images)
</div>
With visibility:hidden the element will not be visible, but the space will be used. You can probably remove that, since the other images will overlap.
I hope it helps.
I am trying to make the captions appear centered below the images with the following code :
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="width:100px;text-align:center;">{text}</div>
</div>
</div>
However, the end result is that the text is centered indeed, but placing the beginning of the text in the center of the div, thus making the text appear to the right.
How can I prevent this?
You can remove the margin:18px and the width:100px of the div which contains the text, since its parent div already has width:100px:
<div style="float:left;width:100px;" class="dataview">
<div style="width:100px;height:80px;margin:18px;" class="thumb-wrap">
<img src="{src}" class="icon" />
<div style="text-align:center;">{text}</div>
</div>
Since you need to keep the caption center to the image, the width of div consisting the text should have same width as the img. and to make text center apply attribute align='center' to the div itself instead of giving css text-align:center
<img src="{src}" class="icon" />
<div align="center" style="width:width of image;">{text}</div>
This will solve your problem
I've got a question about positioning of multiple elements with a text right of a "picture". The situation itself is explained below. My question here is how can I best go about positioning the elements. I've tried around a bit with relative positioning, fixated and absolute, but didn't find a good functioning variant. Thus the question is if someone could give me an advice on how to best go about the positioning itself there (what should be put into relative,....)
Situation:
Every "part" consists of a <div></div> with multiple elements in it. Each of these div's includes a heading text, then a picture part and right of the picture some text.
The parts themselves are situated in a <div id="content"> themselves (thus all parts are children of this main div, which is centered horizontally on the screen and situated below the mainmenu (relative)).
The picture part is a div which contains 2 canvases which are displayed at the same position so that a transition effect can be made on mouseover.
The number of "parts" is known and also the elements of which the div consists of don't change.
Detailed picture
Example sourcecode
<div id="content" width="800px">
<div id="part1">
<span class="highlight">Headling</span>
<div id="part1image" class="floatleft">
<canvas height="100" width="100" id="part1image1"></canvas>
<canvas height="100" width="100" id="part1image2"></canvas>
</div>
<span class="text2">Text</span>
</div>
<div id="part2">
<span class="highlight">Headling</span>
<div id="part2image" class="floatleft">
<canvas height="100" width="100" id="part2image1"></canvas>
<canvas height="100" width="100" id="part2image2"></canvas>
</div>
<span class="text2">Text<br/> Text line 2</span>
</div>
</div>
This (link) is the closest I can come. I had to add an extra wrapping <div>, to make sure the headings did not become inline.
A summary of the code:
The elements are inline-block, to make sure they are in line
The .floatleft class has relative positioning, so that the canvases can stack. It also has a fixed width and height because there are no elements in the div that are positioned normally.
Im trying to do something that seems fairly simple.
Im trying to show a couple of images all in a row. with each image, i want to show text directly under it. When I try this it either wraps the lines and I can't get the images next to each other OR it does everything inline and the 3rd image wraps the screen.
any thoughts?
here's some code...
<div style"display:inline">
<img src="img/test.jpg" />
Features
<img alt="Watch a Video" src="img/test.jpg" />
Watch a Video
<img src="img/test.jpg" /><br/>
Excetera
</div>
Wrap de images in div's. Put the text in a span in the same div; and put it under the image by giving it a style="clear:both"
You can make the div float and put them in a bigger div if you don't want to set their width manually.
For example:
<div>
<div style="width:100px; height:100px; border: 1px solid red; diaply:inline;"></div>
<span style="clear:both">Textg</span>
</div>
Where the inline div acts as image.
The text appears under the image
I am trying to make a shopping cart layout and am having a hard time getting the checkboxes to appear at the right spot. The code here:
http://jsfiddle.net/35Hkj/1/
renders wrong on jsfiddle itself and internet explorer/firefox... It looks right in expression web 4 and chromium. Should be a checkbox beside each color.
If I position one check box with absolute in a relative container it works on all browsers perfectly but loses the flow meaning it doesn't expand the div container dynamically.
Is there a way to position absolute (relative to the parent) without losing the flow??
I'm guessing slicing up the image with css and positioning a checkbox beside each sliced part wouldn't be correct or easy.
Position absolute will allways "lose the flow".
However, you can position the divs absolutely, if they are in the same container as the image. Just change the left value accordingly. The container will be strechted to image's height as the image will remain in the flow.
Wrap the texts beside checkboxes in a label. More semantic + container divs will have enough height to not lose the flow so that you can absolutely position the checkboxes within.
An element with position:absolute is always taken out of the regular flow of relative elements.
What you could do is use a sprite for the background image. Place your checkboxes and your image in float:left and float:right divs or float both of them left and keep a margin between them and modify the background position of the sprite. If you wanted to, you could also use images, though I feel that using a sprite would be faster. For eg.
<div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img1.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="skin" />skin
</div>
</div>
<div class='item'>
<div class='image'>
<img alt="" src="http://www.ahornblume.ch/images/img2.jpg" />
</div>
<div class='checkbox'>
<input name="product1[]" type="checkbox" value="face" />face
</div>
</div>
</div>
.item{
float:left;
width:auto;
}
.image{
float:left;
width:auto;
}
.checkbox{
float:right;
width:auto;
}
If you wanted to use sprites, you could give each div an id and define a background position, depending on the image-checkbox pairing.