In my new site I have an image set to width 100% and then a some text underneath that. How to I change the position of the text based on the height of the image?
.pic {
position: absolute;
left: 0;
width: 100%;
}
.pic img {
position: absolute;
width: 100%;
}
.text {
position: relative;
margin-top: 10px;
}
<div class="pic">
<img src="#" />
</div>
<div class="text">
<h3>Some Important Message</h3>
</div>
As requested, here is the fiddle https://jsfiddle.net/sLx3n2vz/
Please try this:
Remove all you css and add only
.pic{
width:100%;
}
.pic img{
width:100%;
}
.text{
margin-top:10px;
}
DEMO
The way you are positioning your HTML element is wrong. Please correct it.
Related
I am trying to build an overlay (mouseover) on a image with dynamic height:
<div id="one-third">
<div class="over_menu">Text</div>
<div class="menu_bg"><img src="one.jpg" class="resp-img"></div>
</div>
CSS
.one-third { width: 33.3333%; }
.menu_bg img { width: 100%; height: auto; }
.menu_bg { position:relative; width: 100%; }
.over_menu { position: absolute; z-index:2; background-color:rgba(0,0,0,0.5); color: #FFFFFF; height: 100%; }
Unfortunately the height of "over_menu" is too large, it shows until the whole rest of the page. How else can I fix this?
Give position: relative; to the parent, so that its boundaries are within it:
.one-third { width: 33.3333%; position: relative; }
You should move the over_menu to inside menu_bg
<div id="one-third">
<div class="menu_bg">
<div class="over_menu">Text</div>
<img src="one.jpg" class="resp-img">
</div>
</div>
Of course you should change your :hover condition as well. It would be helpful if you could add a JSFiddle to your question.
I'm working with absolute positioning within a relative div. The code is as such: http://jsfiddle.net/32mq5v6L/1/
HTML
<div id="container">
<div id="featured-posts">
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/star-wars-droid.jpg" /></div>
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/han-solo-1140x350.jpg" /></div>
</div>
<div id="other-content">
Other Content
</div>
</div>
CSS
#container { width: 100%; margin: 0 auto; background: #eee; }
#featured-posts { position: relative; width: 100%; height: auto;}
.slide { width: 100%; height: 20px; position: absolute; top: 0; }
#other-content { }
My problem is the other-content div appears underneath #featured-posts unless I apply a set height to that container, which I can't do since the goal is to make all of this responsive.
Where am I going wrong?
If you plan to have #other-content after positioned container, you will have to create new stacking context in order to move it above. One way to do it since it's not positioned is to set very little opacity:
#other-content {
z-index: 10;
opacity: .99;
}
Demo: http://jsfiddle.net/32mq5v6L/1/
I have the following markup (Fiddle Example Here: http://jsfiddle.net/9gvj11o5/8/)
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt=""/>
</div>
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
<div class="content">content</div>
And the following CSS:
.header {
position: relative;
}
.image {
position: absolute;
}
img {
width: 100%;
height: auto;
outline: 0;
}
I need the image to be responsive and have 100% width aligned to top.
But I also need the menu and tools to be over the image and having their normal flow.
Content should be after the image, so after the header.
The image would be the "background" of the header div. (I cannot use background-image)
I am using position but the menu and tools disappear the moment I use it.
What am I missing? Do I need another wrapper div somewhere?
I would wrap the 2 divs .menu & .tools so you need only to apply z-index to the wrapper div instead of each child. which make .menu & .tools (wrapped) in front of the .image.
then change position:absolute to position:relative to .image in order to have .content below header.
Below you can see the snippet, very lightweight.
.header {
position: relative;
}
.image {
position: relative;
z-index:1
}
#menu-all {
position:absolute;
top:0;
z-index:2
}
img {
width: 100%;
height: auto;
outline: 0;
}
<div class="header">
<div class="image">
<img src="http://placehold.it/2200x800" alt="" />
</div>
<div id="menu-all">
<div class="menu">This is the menu</div>
<div class="tools">These are the tools</div>
</div>
</div>
<div class="content">content</div>
You can use z-index to define the layer order of your elements. The smaller the number, the closer to the "bottom" of the stack. So we give the img a very small number, and menu and tools a very large one.
.header {
position: relative;
}
.image {
position: absolute;
z-index: 1; /* here you can use -1 as Paulie_D points out in the comments */
}
img {
width: 100%;
height: auto;
outline: 0;
z-index: 2; /* here you can use -1 as Paulie_D points out in the comments */
}
.menu {
position: absolute;
top: 0;
left: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
.tools {
position: absolute;
top: 0;
right: 0;
z-index: 888; /* You can remove this declaration entirely if you set -1 above */
}
I am trying position 2 or more images on top of another, so I have been testing the following code
#wrapper div{
width: 100%;
}
#header div{
width: 100%;
clear: both;
}
#content div{
position: relative;
overflow: scroll;
}
#image1
{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
#image2
{ margin-left:3px;
position: absolute;
left: 25%;
top: 150px;
z-index: 3;
}
#footer div{
width: 100%;
float: left;
clear: both;
}
<div id="wrapper">
<div id="header">
<h3>Testing Header</h3>
</div>
<div id="content">
<img id="image1" src="http://i.stack.imgur.com/dgg87.png" />
<img id="image2" src="http://i.stack.imgur.com/j7Jpc.png" />
</div>
<div id="footer">
<h3>Testing Foorter</h3>
</div>
</div>
However the header and footer wont show up, I am not sure if I must float something or clear it, I have been testing this on jfiddle and in my own server and nothing, the image tags fill the page, can anyone please show me how to solve this.
Change your CSS rule:
#content div{
position: relative;
overflow: scroll;
}
to:
#content {
position: relative;
overflow: scroll;
height:500px;
}
jsFiddle example
First, #content div isn't being applied to anything since it's looking to select divs within #content which don't exist. By removing the div part of that rule, you apply relative positioning to the content div which allows the absolutely positioned children to be positioned relative to the content container, not the entire page, as what was previously occurring.
Then you can specify a height of the content div as needed.
You can just refer to your header,content and footer as #footer #header #content. There is no need to specify the div tag after them in the css.
Edited JFiddle:
http://jsfiddle.net/50b7qxjs/1/
This is because the z-index in your
#image1{
width:100%;
top: 0;
z-index:2;
position: absolute;
left: 0;
}
Working Demo
Change the z-index value with z-index:-1
Updated fiddle for your requirement.
Hi Folks Here is what i got in css:
#loading {
background:#000 url(loading.png) center;
opacity:0.5;
cursor:auto;
min-height:250px;
z-index:15;
}
#main {
padding: 10px;
z-index:1;
}
and in html:
<div id="loading">
<div id="main">Something here</div>
</div>
and i expect the loading.png to cover the div#main but it doesn't and "Something here" stays on the top of loading.png !?
Update: background is in CSS not an image in loading div.
Your HTML is wrong. The div main should be outside the div loading:
<div id="main">
<div id="loading"></div>
Something here
</div>
You also need to position the latter div using CSS so that it does not just push the main content out from underneath it, as well as sizing the div at 100% of its container's width and height:
#main { position: relative; }
#loading {
background: url("loading.png");
opacity: 0.5;
cursor:auto;
width: 100%;
height: 100%;
z-index:15;
/* Positioning */
position: absolute;
left: 0;
top: 0;
}