Click here to Skip to main content
15,394,939 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi, I am trying to put a div containing buttons under another div. When I put the div, the div will go on top the other div. This is how the buttons are positioned: [^].
This is the html:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<head>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/turn.min.js"></script>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>

<div class="flipbook-viewport" style="display: inline-block;">
	<div class="container" style="display: inline-block;">
		<div class="flipbook" style="display: inline-block;">
			<div style="background-image:url(brochure/Brochure_Main.jpeg)"></div>
			<div style="background-image:url(brochure/Brochure_Mobile_Ordering.jpg)"></div>
      <div style="background-image:url(brochure/Brochure_POS_Automobile.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Beauty_Wellness.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Food_Beverage.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Hair_Salon.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Minimart.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Mobile_Phone_Shop.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Retail.jpg)"></div>
			<div style="background-image:url(brochure/Brochure_POS_Wholesale.jpg)"></div>
		</div>
	</div>
</div>

<div class="buttons" style="display: inline-block;">
						  <button type="button" onclick="thePreviousPage()" class="button">Previous</button>
              <button type="button" onclick="theHomePage()" class="button">Home</button>
						  <button type="button" onclick="theNextPage()" class="button">Next</button>
</div>

<script type="text/javascript">

	// Create the flipbook

  $('.flipbook').turn({

			// Elevation

			elevation: 50,

			// Enable gradients

			gradients: true,

			// Auto center this flipbook

			autoCenter: true

	});

  function thePreviousPage()
  {
    $('.flipbook').turn('previous');
  }

  function theHomePage()
  {
    $('.flipbook').turn('page',1);
  }

  function theNextPage()
  {
    $('.flipbook').turn('next');
  }

</script>

</body>
</html>


This is the css:
CSS
body{
	overflow:hidden;
	background-color:#fcfcfc;
	margin:0;
	padding:0;
}

.flipbook-viewport{
	overflow:hidden;
	width:100%;
	height:100%;
  margin-right: -50%;
}

.flipbook-viewport .container{
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  height: 90%;
  width: 90%;
}

.flipbook-viewport .flipbook{
	width:90%;
	height:90%;
  top: -50%;
  left: -50%;
}

.flipbook-viewport .page{
	width:461px;
	height:600px;
	background-color:white;
	background-repeat:no-repeat;
	background-size:100% 100%;
}

.flipbook .page{
	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin:0;
}

.flipbook-viewport .shadow{
	-webkit-transition: -webkit-box-shadow 0.5s;
	-moz-transition: -moz-box-shadow 0.5s;
	-o-transition: -webkit-box-shadow 0.5s;
	-ms-transition: -ms-box-shadow 0.5s;

	-webkit-box-shadow:0 0 20px #ccc;
	-moz-box-shadow:0 0 20px #ccc;
	-o-box-shadow:0 0 20px #ccc;
	-ms-box-shadow:0 0 20px #ccc;
	box-shadow:0 0 20px #ccc;
}


Edit: The image is blurred out for privacy reasons.

What I have tried:

I have tried adding style="display: inline-block" to the divs but they will still not stack. I am also using turnjs and when I change the position from absolute to relative, the flipbook will not appear on the page. Is there anyway to stack the divs?
Posted
Updated 22-Jul-21 2:37am
v2
Comments
Member 11746136 15-Sep-21 9:45am
   
I think you need adjust css .flipbook-viewport .container{
position: absolute;
margin: auto;
top: 10%;
left: 10%;
height: 90%;
width: 90%;
}

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900