I have the following html structure:
<div class="parent">
<img src="image.png" class="child"/>
</div>
<div class="container">Page goes here.</div>
And the following css:
.container, .parent{
position: relative;
}
.child{
display: block;
max-width: 100%;
height: auto;
position: fixed;
}
Because the image is fixed the parent's height is probably 0. Therefore the container is placed over the image. However I want to have the image fixed and the container to be placed after the image, while keeping it responsive.
Any help would be appreciated!
UPDATE: I'm trying to get the scrolling behavior shown in this JSFiddle, but to make the container always be at the bottom of the image, even if the screen width is (let's say) under 300px.
In your Fiddle, I was able to achieve the desired behavior by changing the .container property from
margin-top: 300px to margin-top:50%
You'll likely not see a change if you add a position class to the image. That's used on div tags. Try adding that class to a new div tag with which you surround your image.
Alternatively, you could add a display: block to your image, but that makes things more complicated.
I think this is what you're asking, but I'm still a bit confused.
Related
I started learning HTML and CSS and encountered the following problem.
It is said, that a child element is always (as of now) smaller than the parent container.
Here is the thing I don't understand.
.img-container {
border: 10px solid crimson;
width: 100px;
}
.img {
width: 300px;
}
<div class="img-container>
<img
scr="apple.jpg"
class="img"
/>
</div>
And this is what I get in the browser:
index.html
I've researched a lot but still didn't get it.
Why is the child element (the image) wider than the parent container?
you do understand that you gave the image a width of 300px when your container has a width of 100px right? i mean you literally made the image wider than container yourself
you can use overflow to handle this. give overflow:hidden to your container to hide anything that does not fit inside it. or overflow:auto to scroll.
I'm trying to implement an image that has an image overlayed on it. Since I need to tell that this image has a video content on it. Now from some post here I've encountered this code (pardon me I lost the link) which actually works but problem is it also overlay the text content below the images. For reference of what exactly I'm trying to achieve I have this code here. I just hardcoded on what I wanted to see and here's the code anyways:
<div class="container">
<div class="imageOne image"></div>
<div class="imageTwo image"></div>
</div>
<div><br /><br /><br /><br /><br /><br />Text should be below the image</div>
I just need to fix the part where images overlaps on my text as well. Thanks!
Fixed version in jsfiddlehttp://jsfiddle.net/uS7nw/270/
Just a few tweaks needed. Specifically using
position:relative
on .container and .imageOne
and
top:0
on .image
Currently your divs overlap because you have the parent container set to a fixed position, therefore it will be anchored to (0,0) of its parent, any other elements are then drawn to the default (0,0) coords of there parent (body in this case).
In order to fix this, make the .container elements position relative, the text div will now have its position drawn at (0,100) as container has a height of 100px relative to the body.
This also makes sense for the case that you want your .image to overlap in .container, both .image divs have their position set to absolute meaning they will be drawn at (0,0) within their parent (.container in this case).
Updated css would look like this:
.container {
position: relative;
width: 100px;
height: 100px;
}
.image {
position: absolute;
width: inherit;
height: inherit;
border: 1px solid red;
}
Please note that the parent div now contains information of the width and height, the children images now inherit this information from the parent, however you could make them smaller. Hope this helps :)
JSFiddle Solution
Why does padding and margin work on block img, but not on inline.
I am having a layout problem with my images in CSS. I want no pixels (no margin, no padding) between each image, and I want a row of 4 images.
The only way padding or margin (setting to 0) works is if I use display:block as part of the style for the image. As soon, as I use inline, there are several pixels between each image and the padding and margin is ignored.
Anyway that I can get my own paddings and margins in images that are inline?
So you want an image to display inline, but act as a block?
Have you tried display: inline-block;?
I've found wrapping all img to div as a really useful practice.
<div class="image">
<img src="/path/to/image.jpg">
</div>
It is userful for adding any additional actions with images.
For example, you want to crop all of them to fit 400x200 block. You just do:
<style>
.-crop {
overflow: hidden;
}
.-crop img {
min-width: inherit;
min-height: inherit;
}
.image {
width: 400px;
height: 200px;
min-width: 400px;
min-height: 200px;
}
</style>
<div class="image -crop">
<img src="/path/to/image1.jpg">
</div>
<div class="image -crop">
<img src="/path/to/image2.jpg">
</div>
When images are wrapped, it is easier to solve some tasks. You need to make images bigger on hover? They are wrapped, you change img size, but not div, so your layout is ok. You need images to slide up with 20px on click? Same strory. You want them to be in center of some 400x200 area? They are wrapped, add vertical-align and text-align to div.
Of course, in common cases just img is fine. But when suddenly you have to add some additional actions -- you need to wrap them. So i wrap them everytime even if there is no need at the moment. Just for future.
You could use display: block and float:left if you want to have more images in one row.
I'm working on creating an image gallery where an image is centered in the entire page. The horizontal part is of course easy, but the vertical part is giving trouble.
I'm familiar with using display: table-cell; and vertical-align: middle; (or using line-height, but am not having success when using them along with trying to get the element to fill the page.
<div id='contain'>
<img src='url' />
</div>
I can't set the line-height of #contain since the height of the container will vary based on the size of the window.
If I absolutely position #contain, applying vertical-align:middle no longer centers the image vertically, regardless of how I set the size of the box.
If I try to size #contain to fill the window without absolute positioning, width: 100% and height: 100% (or using min-width/min-height) do not fill the page. Again, I can't specify exact values since they'll vary.
I know I can always set the image to be the background of #contain (or use JavaScript to figure out the heights), but if there's a CSS/HTML way of solving this without tables I'd prefer to use that.
Try to wrap your img in an extra div and then use the following css:
#contain {
display: table;
width: 100%;
height: 100%;
}
#contain div {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id='contain'>
<div><img src='url' /></div>
</div>
I have to create a div that should look like
<div id=1>
<img></img>
<div id=2></div>
</div>
the div with id 2 should appear at bottom-right corner of image, and the size of image is not fixed what should be the css applied to div with id=2
div with id =1 has no position defined so uses default and same is with image and i cannot change these
only div with id=2 is editable to me. Please suggest something
If you need to position the second DIV on top of the first DIV, then the best solution would be to position the first DIV with position:relative; and then use absolute positioning on the second DIV. The first DIV would have to have a fixed width or to be floated to limit it's width to that of the image.
If you have no way to control the first div, you are in a bit of a tight spot. You still need to make sure that the first div has the same width as the image, either by setting width explicitly or by using a float. You could then position the second DIV with negative margin and using position:relative in conjunction with z-index to make it flow on top of the image. But that would mean you'd have to know the height of the second DIV to make up for that exact amount using negative margin. It would work, but the solution wont be as robust as the first.
If you just need to have the text below the image it's a bit easier, just using plain old floats. I've coded up a very basicc version of all the three scenarios here: http://jsfiddle.net/laustdeleuran/7CnSh/
I hope it's useful.
If you cannot edit the CSS for div #1, you're sort of screwed.
If you could just add {position:relative} to that div, you'd be in business. Absolute positioning will target the first parent with 'Relative' positioning. Since the default of div 1 is 'Static'...Positioning won't work.
'Float' might work, div 2 would technically need to come before div 1 - thus causing div 1 to inherit the float of div 2; however, that would also stack your image atop div 2 rather than below it. ... So Float is out as well.
IF you can add CSS to div 1 and div 1 img, then an easy fix is this:
* { margin:0; padding:0 }
#one {position:relative; text-align:right;}
#two {position:absolute; bottom:0; right:0}
Good luck...
I think you are looking for float style.
Using numeric ids is a bad idea, so let's say you've called your divs div1 and div2.
As you can't style #div1 or the image, the only thing you might try is setting a negative margin on #div2. Try either one of:
#div1 { display: inline-block; width: 100px; margin-left: -100px }
Or, simply:
#div1 { margin-top: -100px }
Where the 100px values are just arbitrary and you'll need to decide on appropriate values depending on what you're putting in #div2
First, some valid HTML. But I guess that wasn't your real HTML?
<div id="div1">
<img [..] />
<div id="div2"></div>
</div>
You could this with position: absolute and negative margins.
#div1 { display: table; position: relative; }
#div2 {
position: absolute;
width: 50px;
height: 50px;
margin-top: -50px;
right: 0;
}
display: table should make the first div match the width of the image. position: relative so the second div will position itself relative to first div.
This might work (not sure of relative+table). But I haven't tested it. If it does't work, I suggest that you work with JS to position the second div, it's very easy.
try this:
<div id="d1">
<img src="https://encrypted.google.com/images/logos/ssl_logo_lg.gif"></img>
<div style="margin-left:225px;margin-top:-25px;z-index:1000;position: relative;" id="d2">Your Text</div>
</div>
you can play with the margin-left and margin-top