Div is sitting directly on top of another div
Multi tool use
Clash Royale CLAN TAG#URR8PPPDiv is sitting directly on top of another div
I am following a tutorial. I found on making a product showcase using css, it looks great but I want to add more to my page.
Underneath I would like to put a slider with more images, add text and include a footer.
However, when I add the slider, it just sits directly on top of my product showcase and the page doesn't scroll. I have searched and tried so many options but nothing is working for me - any advice?
html, body {
width: 100%;
}
/*----------------------------
Styling the presentation
-----------------------------*/
#impress {
width: 100%;
}
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font-family: 'Abril Fatface', cursive;
font-size: 42px;
color:#444648;
position:absolute;
/* z-index:10; */
}
#impress p{
font-family: 'Montserrat', sans-serif;
font-size: 18px;
color:#27333f;
position:absolute;
/* z-index:10; */
}
#impress img{
position:absolute;
/* z-index:1; */
}
.arrow{
width:32px;
height:54px;
background:url('./img/arrows.png') no-repeat;
position:fixed;
top:50%;
margin-top:-27px;
cursor:pointer;
text-indent:-9999px;
overflow:hidden;
opacity:0.8;
border:none !important;
text-decoration:none !important;
-moz-transition:0.2s opacity;
-webkit-transition:0.2s opacity;
transition:0.2s opacity;
}
.arrow:hover{
opacity:1;
}
#arrowLeft{
left:45px;
}
#arrowRight{
right:45px;
background-position:top right;
}
/*----------------------------
Slide 1 - Intro
-----------------------------*/
/*
#impress #intro{
width: 500px;
}
*/
#intro h2{
left: 300px;
top: 120px;
width: 80%;
}
#intro p {
font-size: 18px;
line-height: 1.4;
top: 230px;
left: 340px;
white-space: nowrap;
}
#phone-one{
right: 300px;
}
/*----------------------------
Slide 2
-----------------------------*/
#simplicity h2 {
margin-top: 130px;
left: -40px;
}
#simplicity p {
width: 50%;
margin-top: 220px;
line-height: 1.4;
}
#phone-two {
left: 300px;
}
/*----------------------------
Slide 3
-----------------------------*/
#connect h2 {
margin: 350px 30px 0 -30px;
}
#connect p {
margin-top: 440px;
line-height: 1.4;
text-align: left;
}
#phone-three {
bottom: 90px;
}
/*----------------------------
Slide 4
-----------------------------*/
#upload h2 {
margin-top: 120px;
left: -100px;
}
#upload p {
width: 60%;
margin-top: 210px;
line-height: 1.4;
left: -60px;
}
#phone-four {
left: 250px;
bottom: 0px;
}
/*----------------------------
Slide 5
-----------------------------*/
#music h2 {
margin: 0px 50px;
width: 80%;
}
#music p {
text-align: left;
width: 80%;
margin: 80px;
line-height: 1.4;
top: 10px;
}
#phone-five {
top: 100px;
left: 50px;
}
<html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Montserrat:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section class="header-section">
<div id="impress" class="impress-not-supported">
<!-- The Slides Will Go Here -->
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Quality Watch Photography</h2>
<p>We take the very best quality, realistic photography <br> of your new and pre-owned watches. We understand <br>the challenges in photographing different styles of <br>watch, carefully considering each component to ensure <br>the perfect representation of your watch.</p>
<img src="img/watch-one.png" width="700" height="700" alt="Galaxy Nexus" id="phone-one">
</div>
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>The Devil Is In The Detail</h2>
<p>We photograph using the ’focus stack' method to create the very best fully focused photography.
We position your watch and take many images closing in on each tiny detail, sometimes up to 35
images and then carefully select, process and blend to create one super crisp, detailed photograph.
We undertake all our processing and retouching in house to ensure quality in every photograph we take.</p>
<img src="img/watch-two.png" width="700" height="700" alt="Galaxy Nexus" id="phone-two">
</div>
<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Studio Or We Come To You</h2>
<p>We understand your watches are precious and extremely valuable, we are fully set up to photograph here in our studio, but we have created our own bespoke portable studio so we can come to you and photograph your watches in the security of your own home, shop or office.</p>
<img src="img/watch-three.png" width="700" height="700" alt="Galaxy Nexus" id="phone-three">
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Character & Condition</h2>
<p>We have the expertise and experience when photographing your vintage and pre owned watches. We work with retailers, dealers and auction houses photographing watches to capture the character and condition of each unique watch showing your customer a highly detailed and accurate photograph of the watch for sale.</p>
<img src="img/watch-four.png" width="700" height="700" alt="Galaxy Nexus" id="phone-four">
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Part Of Your Team</h2>
<p>We love working with client’s from all aspects of the watch industry, from small independent jewellers to established Swiss brands, unique micro brands to bespoke watch customisation and watch dealers and auction houses. We are fully client-focused and always here to provide you with the very best photographs of your watches.
</p>
<img src="img/watch-five.png" width="700" height="700" alt="Galaxy Nexus" id="phone-five">
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
</section>
<section class="gallery-one">
<div class="white-watches">
<h4>watch gallery</h4>
</div>
</section>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="./img/watch-slider-one.jpg" alt="Los Angeles">
</div>
<div class="item">
<img src="./img/watch-slider-two.jpg" alt="Chicago">
</div>
<div class="item">
<img src="./img/jewel-slider-one.jpg" alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
myCarousel
float:left
Could you please share you JS also and Can you replicate your problem in a code snippet ?
– Aravind S
3 hours ago
I haven't used any floats. I would love to show you a demo but I'm not sure how I do that. I have the whole folder on my desktop as I am using atom?
– Zoe
3 hours ago
why do you position everything inside impress absolutely? Seems like that will be the source of your problems
– Pete
3 hours ago
Hi Pete, that's what the tutorial code was, when I take it out the images move somewhere else
– Zoe
3 hours ago
1 Answer
1
Adding,
Clear: both;
to your slider div in your css file should do the trick
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
may be you can provide a working demo to look, i have inspected your code and see that the section above
myCarouseldiv has inline style offloat:left, try removing that float and the carousal div will be under the table section.– Abhishek Kumar
3 hours ago