I have a website where some teaser text and a button are presented on a background image.
grosso modo:
<div class="background">
<div class="teaser">
Teaser text
</div>
</div>
In an effort to make a website responsive, this teaser text and button should appear underneath the div rather on top, because the image makes it difficult to read on smaller print. How can I make this nested div appear underneath? I tried using position: relative but then it won't take up space below the div, overlapping other content.
You say you've tried position: relative... Have you tried position: absolute on the nested div?
.background {
background-image: url(http://s3.india.com/wp-content/uploads/2015/07/species1.jpg);
background-size: cover;
height: 400px;
width: 600px;
position: relative;
margin-bottom: 20px;
}
.teaser {
position: absolute;
bottom: -20px;
}
<div class="background">
<div class="teaser">
Teaser text
</div>
</div>
<div>
More content outside of teaser.
</div>
The teaser is position: absolute to its nearest position: relative parent (.background). I've position: it -20px from the bottom of background and added 20px of margin to the bottom of background as compensation so teaser doesn’t overlap other content.
Related
I want to have an object falling from the sky while scrolling down the page. The idea is: You have the object div not moving. It should be in the center of the page (50 px from the top of its parent) and when you scroll down it should scroll down too.
Whats the catch? The object is in another div. I only want the object to be visible inside this div. So not on the entire website.
What have I tried?
1: Fixed positioning, but then it shows up on the entire page, z-index does not work with fixed.
2: Relative positioning on the parent and absolute on the child but then the object div does not go down the page when I scroll.
Visual representation::
On scroll down:
React Component:
<div className="container">
<div className="container--object">
<img src={object}/>
</div>
</div>
CSS
.container {
min-height: 100vh;
position: relative;
}
.container--object {
position: absolute;
top: 50px;
}
My parent component is the homepage. And the siblings of this react component are other div's. The functionality to make the div move down the page is what I am struggling with, how can I move the object div down? Is there a way to base it off the top of the browser?
Ok if i understood correctly, you want something like this? I used an image and some test text
.container {
min-height: 100vh;
height: 2500px;
position: relative;
}
.container_object {
position: fixed;
top: 50px;
}
<div class="container">
<div class="container_object">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
</div>
<div style="position: absolute; top:500px">
TEEEEEEEEEEEEST 111111111
</div>
<div style="position: absolute; top:800px">
TEEEEEEEEEEEEST 222222222
</div>
</div>
You should see this snippet in full page
I have a div with a bg image in a bootstrap col now my plan is to make the text in the div stick to the bottom I've tried with vertical-align but doesn't seem to be working
My html:
<div class="has-image col-md-6 nopadding">
<div style="background-image: url('img/st-jansvliet.jpg');">
<div class="stick-to-bottom">Sint Jansvliet- Antwerpen</div>
</div>
</div>
My css:
.stick-to-bottom{
vertical-align: bottom;
}
the div with the bg image has a height accordingly to the screen size that I set with jquery
I've fixed it with a position absolute like this:
position: absolute;
bottom: 0;
left: 5%;
right: 0;
top: 95%;
Add css position:relative in stick-to-bottom's Parent Div.Otherwise its possible that stick-to-bottom div sometimes outside of its Parent Div. And then add this
position: absolute;
bottom: 0;
left:0px;
right:0px;
It is a perfect Solution for all environment to make sure your stick-to-bottom remain in its parent div.
The template I am working with has a container, with content and navigation divs. The code looks something like this:
<div id="user_content" class="user_content">
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<div class="content_nav">
<div class="col-md-3"><a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a></div>
<div class="col-md-3"><a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a></div>
</div>
</div>
See Figure 1 below for drawing.
Relevant CSS for the main_content div:
.main_content {
position: relative;
left: 0px;
width: 100%;
display: block;
transition: transform 0.5s ease 0s;
height: auto;
}
I can change the PHP to generate the BACK and NEXT links without its own div, so it will look like this:
<div id="user_content" class="user_content">
<a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a>
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a>
</div>
</div>
What I don't understand is the proper CSS to make the <a> BACK and NEXT links to be on the left and right side of the main_content container. See Figure 2 below for drawing.
Here is a link to the JFIDDLE that I've tried: https://jsfiddle.net/7wet25zn/
Position absolute your anchors at top 50% and subtract 0.5em (half the font-size, or any other value):
.user_content {
position: relative;
background: #eee;
height: 160px;
}
.user_content a {
position: absolute;
top: calc(50% - 0.5em);
}
.user_content a.next {
right: 0;
}
<div class="user_content">
<div class="main_content"></div>
<a class="prev" href="#!">PREV</a>
<a class="next" href="#!">NEXT</a>
</div>
If your {content} part is tall and prev and next button should be in the middle of the viewport (not tall div), you may add display:block; position:fixed; top:50%; to prev and next links so it will be visible regardless of height of div.
I recently experienced a similar problem building tooltips on a page. It wasn't something I had encountered before and wanted to do it with HTML and CSS. What ended up working for me was defining a parent container and making the content you want floating like so:
<div class="parent-container">
<div class="child"></div>
<div class="child"></div>
</div>
And defining the CSS as such:
.parent-container {
position: relative;
}
.child {
position: absolute;
}
This allows you to set width and height on the child class as relative to the position of the parent container. Good luck!
Joomla-based website with DIV sections dividing the page within the template.
I need to display a graphic that displays on top of all content on the page. Using position: relative or position: absolute, it only adjusts the position within the current DIV section.
Using position: fixed, I am able to set its actual position, which is great. However, regardless of my z-index, some DIVs it appears above, others behind.
At a loss as to how to display this image over top of everything on the screen regardless as to its DIV, z-index, etc.
Use position absolute but adjust changes caused by not displaying img in that flow by for eg margin, padding, height etc. If you are floating img you will need to fix position too.
<div>
<div>before img</div>
<img class="img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute-fix">after img</div>
</div>
.img--absolute{
position: absolute;
}
.absolute-fix{
margin-top: 70px;
}
<div class="img-container--float-fix">beffor img</div>
<div>before img</div>
<img class="img--float img--absolute" src="http://placekitten.com/50/60"/>
<div class="absolute--float-fix">after img</div>
</div>
.img-container--float-fix{
position: relative;
}
.absolute--float-fix{
padding-right: 60px;
}
.img--float.img--absolute{
right: 0;
}
http://jsfiddle.net/o5sboe1s/
My div "inner_submit_data" is vertically aligned on my page using the code below. However, if I include further HTML elements below this div they appear at the top of my page, as if they are ignoring the presence of the vertically aligned div. Is there a way for HTML elements appearing after the vertically-aligned div to display below it on my page? I will be adding a lot of dynamic content to my page so I don't think absolute positions is the answer.
Here is my HTML:
<div id="outer_submit_data">
<div id="inner_submit_data">
<h3 id="instruct">STEP #1: Upload your .csv file</h3>
<div class="init_buttons" id="upfile1"></div>
<br>
<div class="init_buttons" id="upfile2">Continue</div>
</div>
</div>
and CSS to make it align vertically:
#inner_submit_data {
/* POSITION */
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 40%;
margin: -10% 0 0 -20%;
/* DIV DISPLAY PROPERTIES*/
color: #fdf2e3;
font-family: verdana,arial,sans-serif;
}