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
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 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.
i have 3 images. One per layer. Each picture must change its size and still be positioned with relative to each other. First layer is like i bg for second, and third is just glare fore bg and second layer. I try some kind, but my second layer width does not match to the parent div.
<div class="parent">
<img src="_/pic/bg.jpg" alt="" class="bg"/>
<div class="cont">
<img /> or some text
</div>
<img src="_/pic/shine.png" alt="" class="fr"/>
</div>
sorry for bad English
should look like this http://i5.photobucket.com/albums/y155/R_E_D/example.jpg
also i use
img {max-width: 100%;}
feel free to change html and css
your second layer doesn't match up because it doesn't have the same relationship as the other two layers with the parent div. The second layer is inside of a div.
Moreover, unlike img's, div's are dimensionless by default. You have to set the width on those too to have it be resizeable to match the parent div like the other two layers.
Given your HTML above, try this CSS:
img, .cont {max-width: 100%;}
try to place the layers in a fluid-container, and make the container responsive, create a container if you already don't have one
.container {
position: relative; /* Important */
width: 200; /* Any width */
height: 200; /* Any height */
top: 0;
left:0;
margin:auto;
}
after that add each layer in a class inside the container and make sure you use the absolute position in each layer..
adjust the layout for responsiveness and let the container use do the magic
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
I am trying to create a full width background image that aligns vertically with a centered div. Should I create a wrapper around all the content, or is there another way to do this (without absolute positioning)? Thanks.
alt text http://img229.imageshack.us/img229/7391/99479284.png
EDIT: Sorry if I didn't explain this very well. I've changed the image.
Background images do not display outside of their containing elements. That doesn't mean that all or part of a background image cannot be positioned outside its element, just that the parts that are outside the element boundary won't be displayed when the page is rendered.
So in short, yes. You'll have to use a wrapper div.
Yes, you want to use a wrapper:
CSS:
#wrapper { width: 100%; background: url(yourimage.png) left center repeat-x; }
#content { width: 960px; margin: 0 auto; }
HTML:
<div id="wrapper">
<div id="content">
My content
</div>
</div>