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.
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.
This seems so simple but I seem to be failing at it for some reason. So I have 3 images and each image has a link above it. I want them to appear inline and I can't use a table so I tried divs but they appear one after the other instead of inline. note: my page width is 1000px
<!-- First Div with link and image-->
<div style="float:left;width:33%">
BarTop Epoxy
<img style="margin: 15px;"src="image1" width="300" height="315">
</div>
<!-- Second Div with link and image-->
<div style="float:left;width:33%">
Countertop
<img style="margin: 15px;" src="image2" width="300" height="315">
</div>
<!--third Div with link and image-->
<div style="float:left;width:33%">
Flooring
<img style="margin: 15px;" src="image3" width="300" height="315">
</div>
There are two things you need to check:
That the DIVs are not clearing--they should have clear:none declared or inherited.
That there is enough space in your container for all of these items. Your floats contain elements 300 pixels wide with an extra 30 pixels of margin. Is your container 990px wide? Or even 660px wide? Floats will bump down to underneath the previous float if there is not enough room for them.
By default divs have a display: block; property, which means they will not appear on the same line.
You can fix this by making the display float, like you've done, but you should also add the styling clear: none; to be sure the floated elements are allowed to be side by side.
Alternatively, you could use display: inline-block;, which may work better for what you are trying to do, and here's a jsfiddle with this option.
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">
I am having an issues getting my HTML to format the way i need it too.
I am creating div dynamically (parent). In each div there are two divs inside (div one & two).
Div one is text that can be any length or variable length. Div two contains an image.
Regardless of the size of the parent div, the text needs to fill as much width as possible. But i need the 2nd div with the image, to float above the text right at the end of the line. I also need all the image divs, to vertically line up.
This parent div is re-sizable and can get either smaller of bigger but the floating image must always be sitting in the sentence line but on the right of the container.
If the text is wider than the div parent, the image needs to float against right hand side of the parent container on the same line as the text. If the text is smaller than the parent the image must still be on the right hand side of the parent div.
Think of it as a floating image full stop, if that makes sense. where every sentence has its full stop in one long vertical line.
I have tried both divs and tables but am getting garbled results.
Here is my current code:
<div>
<div style="display: inline; float: left;">
Text Goes here</div>
<div style="display: inline; float: right; z-index: 1000;">
<img src="info.png" /></div>
</div>
<div>
<div style="display: inline; float: left;">
Next line of Text Goes here</div>
<div style="display: inline; float: right; z-index: 1000;">
<img src="info.png" /></div>
</div>
Thanks
I think it's a bit hard to visualize what result you're trying to get. Can you draw a diagram that illustrates your desired results?
As best I can tell, you're looking for this (view results at JSFiddle): http://jsfiddle.net/kcschaefer/GYQea/9/
Code is:
<div id="parent" style="width: 100%;">
<div>
First text goes here
<img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
<div style="clear: both;"></div>
<div>
Next line of really long text that demonstrates how the float will work would go right here, and you can see that the info thingie goes all the way to the end of the div, no matter how long this is.
<img src="http://www.kendraschaefer.com/images/info.png" style="float:right; z-index: 1000;" />
<div>
</div><!-- end parent -->