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.
Related
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.
Why is the height of the div not 400px like the image inside it?
<div>
<img height ="400px" src="http://davidrhysthomas.co.uk/img/dexter.png" />
</div>
<span>
<img height ="100px" src="http://davidrhysthomas.co.uk/img/mandark.png" />
</span>
http://jsfiddle.net/ZB3QD/28/
Given only the code you have provided in the question: It does.
The code you link to is different. The div has an explicit height defined in the stylesheet, and that takes precedence.
I'm creating a gallery and have a list of div's floated left, each with a child div thats absolutely positioned relative to the parent div.
(by default the tooltip div is hidden)
ie:
<div>
<div class="tooltip"><p>text</p></div>
<img src="/images/tmp-gallery.jpg" width="136" height="90" />
</div>
<div>
<div class="tooltip"><p>more text</p></div>
<img src="/images/tmp-gallery.jpg" width="136" height="90" />
</div>
I have a function that can show/hide the toolip div.
This works perfectly in all browsers bar IE6. In IE6 the tooltip div dissappears off the page (I can find it using the debug tool bar sitting top left)
There is one way of fixing the issue, removing float left from the parent div.
Can anybody help me out with this annoying bug? Thanks.
add
*float:none;
in your parent div
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.
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">