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.
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 would like to layer two aligned images in a scrolling <div>.
At first I tried:
<div style="width:300; height:300; overflow:scroll;">
<img src="bottom.jpg"
style="width:400; height:800">
<img src="top.png"
style="width:400; height:800; position:absolute; top:0; left:0;">
</div>
(this is a simplified example -- the actual site has a separate CSS sheet etc.)
I would like the two images to behave as one when the <div> is scrolled, but the "absolute" positioning of the second image causes it not to scroll at all and to go outside the borders of the <div>.
I have also tried changing the style of the second image to:
<img src="top.png"
style="width:400; height:800; position:relative; top:-800; left:0;">
but then there are 800px of extra white space in the bottom of my <div>.
Is there any CSS I can use on the second image that will align it on top of the first image and still allow both of them to be scrolled together?
[update] The working solution is at ozake.com
you just need to add position: relative to the parent (div). When you use position:absolute if you do not contain that element in a parent set to relative it will contain itself within the body. SO what's happening is top.jpg is scolling with it's parent div but bottom.jpg is staying with the body. Once you contain them both inside the parent, then you can set the 2nd image to top: 800px to align it just below the other image
<div style="width:300; height:300; overflow:scroll; position: relative;">
<img src="top.jpg" style="width:400; height:800"/>
<img src="bottom.jpg" style="width:400; height:800;position:absolute; top:800px; left:0;"/>
</div>
FIDDLE
Do you want this: Jsfiddle
If so, here you go:
<div style="width:300px; height:300px; overflow:scroll;">
<div id="container" style="position: relative">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg/785px-Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg" style="width:400px;">
<img src="http://pixabay.com/static/uploads/photo/2014/04/02/17/07/hat-308003_640.png" style="width:250px; position:absolute; top:75px; left: 125px;">
</div>
</div>
Use some units in your style, for example pixels.
If you are styling element with position absolute it will be positioned relatively to the document itself, so you should set position: relative to a parent element to bind absolutely positioned element to this parent element and not to the whole document. In our case we made a container for our images with position: relative.
So we have the #container which is scrolling inside our overflow:scroll div, and our image aligned relative to this container.
I have two divs (the left one is an image) inside a wrapper that are meant to be next to each other, the div on the right being positioned absolute with right:0 and bottom:0 so it positions to the bottom of the div image on its left. The issue is, when the screen gets small enough the position absolute one overlaps the image. I have added a div that just occupies space in the wrapper and I've avoided the overlap, but now when you make the screen smaller the div goes under the image but it doesn't reposition itself right underneath; it shifts to the right. Here is an example on JSfiddle:
http://jsfiddle.net/xbdsq7zj/
Here is the html:
<div class='ideaside'>
<div class='ideaphoto'>
<img src='http://www.devsourcecodex.com/images/advertisingexamples/200x200.png'></img>
</div>
<div style="float:left; width:150px; height: 120px;"> </div>
<div class='ideainfo'>
<p clas='glyphicon glyphicon-star unclickable'></p>
<span>Followers</span></p>
<p><strong>
Phase 1
</strong></p>
<p>By <%= render #idea.user %></p>
<i>2 hours ago </i>
</div>
</div>
<br>
<p class='doc'>
<b>Brief:</b>
t's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
</p>
Here is the css:
.ideaphoto {
float:left;
}
.ideainfo {
position:absolute;
bottom:0;
right:0;
}
.ideaside {
position:relative;
overflow:hidden;
}
I'd like it to go to reposition so that it is directly under the image rather than next to some whitespace under the image. Is that possible without using Jquery collision detection?
Thanks.
Edit: I am using Bootstrap, and this is all taking place in col-md-4. The image is always 200px, but the text div's width is sort of variable depending on the user's name.
I think bootstrap's function, (assuming your using bootstrap for this because of the glyphicon) will be of use to you. You don't have to use float anymore because bootstrap will do it for you.
<div class="row">
<div class="col-md-6 col-sm-12 ideaphoto"> <!--If viewport is regular it will take up half of the page. But if viewport is smaller it will consume a row, thus repositioning the .ideainfo below it.-->
<!--Enter your Image code here.-->
</div>
<div class="col-md-6 col-sm-12 ideainfo">
<!--Enter your IdeaInfo here.-->
</div>
</div>
I have a div with an image positioned absolutely. But I want to have the height be dynamic, so that it shows the image. Right now, the div ignores the image and will collapse to the content of the text. How can I get the div to show the whole image?
<div style="position:relative; height:auto">
<img style="position:absolute; top:100px; left:100px;"/>
</div>
Elements that are absolutely positioned are removed from the normal flow. That means that all elements will ignore it, as if it didn't exist. To solve your problem, you need to use JavaScript to get the height of the image and adjust the div's height accordingly.
I have this http://jsbin.com/AKUtEYu/1/edit.
Here, I want to show an image inside the div1 and below this div1, i also want to show a submit button inside the div2. The problem I have here is that the second div appears underneath of the first div.
P.S 1: I need to use position:absolute in the first div. I know if i remove it, the problem seems to be fixed, but i am looking for a way with it.
P.S 2: I used solid borders to see what is going on.
As stated slightly ahead of me, move your submit button inside the #container parent block:
<div id="container">
<img src="http://31.media.tumblr.com/tumblr_m50exyThDb1r4kc3co1_500.jpg" />
<div id="footerSubmit">
<input type="submit" alt="Submit" id="SubmitSelections" name="Submit">
</div>
</div>
Otherwise, you will have to set a height on #container and absolute or relative position on the #footerSubmit, which is a lot more work...
What if you put the second div inside the first? After all, the divs are just containers - the important thing is for the button to be placed under the picture.
If you know height of your absolutde element/div then you can use it's height to position your relative element. for example change your div2 css as
#footerSubmit{
position:relative;
top:350px;
float:right;
border: 10px solid;
color:red;
}
Otherwise put your div2 inside div1 and position it as bottom:0; and float:right;