I have a container div which has 5 images, all absolutely positioned. I've added the top and left values for all of them but as soon as you define the last element as absolutely positioned, all other images lose their positions and stact at the top.
The container is relatively positioned
.responsive-container{
position: relative;
}
And it has the images inside
<img src="img/responsive-mac.png" id="res-mac">
<img src="img/responsive-laptop.png" id="res-lap">
<img src="img/responsive-tab.png" id="res-tab">
<img src="img/responsive-phone-portrait.png" id="res-ph-1">
<img src="img/responsive-phone-landscape.png" id="res-ph-2">
With following Css applied
.responsive-container{
position: relative;
}
#res-mac{
position: absolute; width: 97%; top: 0%;
}
#res-lap{
position: absolute; width: 85%; top: 232%; left: 30%;
}
#res-tab{
position: absolute; width: 35%; top: 414%; left: 7%;
}
#res-ph-1{
position: absolute; width: 20%; top: 573%; left: 36%;
}
#res-ph-2{
position: absolute; width: 25%; top: 26%; left: 28%;
}
In the demo here, you can just remove the position: absolute; from the 5th image and others would start working. It's not that particular image which is the problem, if you remove the 5th image completely, the 4th image will start doing the same thing.
I've tried removing all css and javascript to narrow down the cause but it;s still not working. What gives?
Try this:
.responsive-container { height: 66px; }
Related
I have an image located inside a div, I am trying to move it 50 px down and 50 px left in order to have everything complete. But I am not sure how to edit the image in the CSS since I don't know what code to put in to connect the photo to the css.
My code:
#OverviewText4 img:MoneyIcon.png {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
Thanks for helping
Remove the image name from your declaration and make sure your container is set to position: relative so that your image is absolutely positioned against the right containing element in this instance #OverviewText4
#OverviewText4 {
position: relative;
}
#OverviewText4 img {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
You have to add position:relative to parent <div> and then add position: absolute; to the <img>. Like this:
#OverviewText4{
position: relative;
}
#OverviewText4 img{
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
There are many ways to do this in CSS as per the multitude of answers. If I might suggest, since the image name in your example is related to iconography a slightly different approach:
#OverviewText4 {
position: relative;
}
#OverviewText4:before {
content: "";
background: transparent url(MoneyIcon.png) scroll no-repeat 0 0;
background-size: cover;
width: 150px;
height: 150px;
position: absolute;
display: block;
top: 50px;
left: 50px;
}
https://jsfiddle.net/zk8su1qw/
This way you don't even need an img tag in the HTML, which is desirable if its just presentational.
There is also an assumption in this answer that you want the image displayed over the top of any content in the OverviewText4 div, rather than having content flow around the image. If this is not the case you would want to use margins and keep the image position: static or relative.
Right, your CSS is fine but your selector is not. I think this is what you were going for.
#OverviewText4 img[src="MoneyIcon.png"] {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img src="MoneyIcon.png" />
</div>
I've changed img:MoneyIcon.png (which doesn't mean anything to CSS) to img[src="MoneyIcon.png"] which means an img tag where the src = MoneyIcon.png
The main problem here is if you change the src you have to change your CSS also, I'd recommend having a class like this:
#OverviewText4 img.money-icon {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<div id="OverviewText4">
<img class="money-icon" src="http://placehold.it/150x150" />
</div>
I hope you find this helpful.
You can simpy do this with padding
#OverviewText4 img {
padding:50px 0 0 50px;
}
Use the marginattribute for creating a margin around an element. You can also use padding on the div element.
Try it like this:
#OverviewText4 img: MoneyIcon.png{
width: 150px;
height: 150px;
position: absolute;
margin-top: 50px;
margin-left: 50px;
}
You can link an image to a CSS class by adding the class name inside the tag <img>
Working Example:
body {
background: #111
}
.OverviewText4 {
width: 150px;
height: 150px;
position: absolute;
top: 50px;
left: 50px;
}
<body>
<img src="MoneyIcon.png" class="OverviewText4" />
</body>
If I understand your question correctly all you have to do is add this style to your div where the image is located.
div > img {
margin-top: 50px;
margin-left: 50px;
}
I have a problem with some CSS ,maybe someone can help me out .
I dont see any margin or padding there that will be the problem.Only that the height is to big or something.
I am using wordpress Sydney theme.
This is the website.
How can i get the space out between the banner and the content of the page ?
Here is a screenshot of what i mean.
Thank You.
#sf-slider-overlay {
position: absolute;
top: 230 px;
z - index: 999;
width: 1170 px;
margin - left: auto;
margin - right: auto;
}
you only have to do this..
Position : absolute
Will work ☺
There is one element (#sf-slider-overlay) with wrong position.
#sf-slider-overlay {
position: relative;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
Change it to,
#sf-slider-overlay {
position: absolute;
top: 230px;
z-index: 999;
width: 1170px;
margin-left: auto;
margin-right: auto;
}
So Simple just add below code to custom css style of your theme
#sf-slider-overlay {
position: absolute;
}
Your problem will be solved or put above code in your page css.
That's because the space isn't caused by any margin or padding. The space is caused by an element that has been moved out of the way using position relative.
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: relative;
top: 230px;
width: 1170px;
z-index: 999;
}
If you change this to have a position:absolute; it fixes the extra space that you had.
Like this:
#sf-slider-overlay {
margin-left: auto;
margin-right: auto;
position: absolute;
top: 230px;
width: 1170px;
z-index: 999;
}
You may have to fiddle with the positioning slightly to get it right, I noticed that once absolute has been set, the word "Domestic" sits right on the edge of the screen, so perhaps add a left:2em; to the property, or even padding-left:2em;
You are using position: relative; in the element #sf-slider-overlay. position: relative; takes an element out of the float, but the space remains there.
You can use position: absolute; but have to set the left property to get the same result as now:
#sf-slider-overlay {
position: absolute;
left: 50%;
translate: translateX(-50%);
}
I've got a fixed container which is vertically and horizontally centred on the page, and an element within that container. Ideally I would like to have this element positioned in the very top left of the window, however I'm struggling to make it work.
This JS Bin illustrates the problem.
https://jsbin.com/nodonatifo/edit?html,css,output
Initially I thought I would just be able to do something like this on the element.
#container {
width: 300px;
height: 400px;
background-color: #55ffdd;
/* Center on page */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 0px;
}
<div id="container">
<div id="element-actual"></div>
</div>
However that just fixes the element in the top left corner of the parent container, rather than the window.
Is this possible with my current styles?
#container {
width: 300px;
height: 400px;
position: fixed;
top: 50%;
left: 50%;
background-color: #55ffdd;
margin-top: -200px;
margin-left: -150px;
}
If you use translate property then its children div will place relatively to the parent div only even when it is position:fixed so you can use the above code to place #container in center and you red div will be placed relatively to the window not the parent div :)
As Gaurav Aggarwal already pointed out, the fixed element will still be relative to the parent's transformed positioning. If you want the container element to be dynamically positioned (even if it has unknown dimensions), then you could use the following approach and avoid using transform: translate(-50%, -50%) for vertical/horizontal centering.
This method essentially positions the container element to fill the height/width of the window element with top: 0/right: 0/bottom: 0/left: 0, and then centers it vertically/horizontally using margin: auto.
Example Here
#container {
width: 300px;
height: 400px;
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
margin: auto;
background-color: #55ffdd;
}
#element-actual {
background-color: red;
width: 100px;
height: 100px;
position: fixed;
top: 0;
left: 0;
}
<div id="container">
<div id="element-actual"></div>
</div>
Easy, add this to the child:
position: sticky;
So I'm having some difficulties making a list of images into working links. This is an example how they are addressed in my HTML:
<img src="img/plnt1_.png">
and then how they are referred to in my CSS:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
now, the problem is, when i put the 'a' in front of my CSS part, my image disappears... but when I do it without an 'a', there is no link.
Try this
.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
The mistake here is the positioning:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
width: 50%;
top: -20%;
}
positions your link outside of your viewport (or at least outside of the parent element which may hide overflowing children), I created a fiddle where you can see that:
http://jsfiddle.net/3ajrw1yg/
So, you need to reconsider what it is that you want to achieve position-wise and change your css accordingly.
You're not giving it height, when you have a position absolute, you must have your sizes defined, try this:
a.plant1 {
position: absolute;
z-index: 1;
left: -20%;
top: -20%;
width: 50%;
height: 100px;
}
and you should also close your IMG tag if you're not using HTML5...
<a href="plantvb1.html" class="plant1">
<img src="img/plnt1_.png" />
</a>
Ok I am running into a little problem positioning an image inside a DIV.
<div id="wholePage">
<img src="theImages/header_shadow_flip.png" id="hF" />
<div id="pageWrapper"><img src="theImages/header_shadow.png" id="bF" />
</div>
</div>
I have the following CSS for both DIVs
#wholePage {
position: relative;
width: 1000px;
padding: 0 10px;
padding-top: 35px;
margin: 0 auto;
}
#pageWrapper {
position: relative;
width: 960px;
padding: 0 10px;
padding-top: 37px;
margin: 0 auto;
}
The CSS for the top shadow, which works just fine. no need to change, is:
img#hF {
position: absolute;
left: 50px;
top: 56px;
z-index:2;
}
But the bottom footer image is giving me issue and the css is:
img#bF {
position: absolute;
left: 50px;
top: 1657px;
z-index:2;
}
Two examples of the page is below:
www.interfaithmedical.com/CheckSite/index.html
www.interfaithmedical.com/CheckSite/ms_gynecology.html
How do I align the bottom shadow image to match the pageWrapper DIV so it is positioned right below it? and doesn't position based on the page itself like it did on the second link. (On the second link, you can see it uses the original spacing and extends beyond page content)
Instead of setting the top: property of bF, try setting the bottom: property of bF to -4px. That way you aren't tied to your page being 1657px tall every time.
img#bF {
left: 50px;
position: absolute;
bottom: -4px;
z-index: 2;
}