I have a button with position: fixed at the bottom of a web page. How do I make it so that the page content scrolls behind the button?
Here's an image with more detail on what I mean:
Here's some code I tried:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#content {
height: 150px;
width: 100%;
background-color:lightpink;
padding:25px;
margin:20px;
}
#header{
color:white;
width:100%;
height:40px;
left:0;
top:0;
position:fixed;
background-color:black;
}
#sidebar{
top:0;
left:0;
width:90px;
height:100%;
position:fixed;
color:white;
background-color:steelblue;
}
.btn-bottom-center {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
</style>
</head>
<body>
<div id="defaultFragment" fragment="defaultFragment">
<div id="header"> <center><h3>Header</h3></center> </div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
<!--Get Started-->
<input id="get_started" type="button" class="btn-bottom-center" value="GET STARTED" />
</body>
</html>
The dimensions are not really important. I just need to know the logic of how to make a div scroll behind a button with a fixed position at the bottom of a web page. I tried adding a margin-bottom to the page content but it didn't work. Thanks already
Wrap the button in a fixed-position div that has a defined height, left: 90px;, right: 0, bottom: 0 and a non-transparent background:
html,
body {
margin: 0;
}
#content {
height: 150px;
width: 100%;
background-color: lightpink;
padding: 25px;
margin: 20px;
}
#header {
color: white;
width: 100%;
height: 40px;
left: 0;
top: 0;
position: fixed;
background-color: black;
}
#sidebar {
top: 0;
left: 0;
width: 90px;
height: 100%;
position: fixed;
color: white;
background-color: steelblue;
}
.btn-bottom-center {
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
.bottom {
height: 80px;
background: green;
position: fixed;
bottom: 0;
left: 90px;
right: 0;
}
<div id="defaultFragment" fragment="defaultFragment">
<div id="header">
<center>
<h3>Header</h3>
</center>
</div>
<div class="main-container container-fluid">
<div class="page-container">
<div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
<div id="content" layout:fragment="content"></div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</div>
<!--Get Started-->
<div class="bottom">
<input id="get_started" type="button" class="btn-bottom-center" value="GET STARTED" />
</div>
Related
I have an issue. I'm trying to make bootstrap grid system with 4 rows, but the problem some rows are overlapped. I don't know from where comes this problem.
this fiddle shows my issue
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
position: absolute;
/*top: 0;*/
width: 100%;
background-color: green;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
if you have any ideas please help me solve this issue.
You need to remove position: absolute
html, body{
width: 100% !important;
height: 100% !important;
padding:0;
position: relative;
}
#header-sec{
width: 100%;
background-color: green !important;
height : 15%;
min-height: 30px;
}
#footer-sec{
position: absolute;
bottom: 0;
width: 100%;
background-color: black;
height : 5%;
}
#data-viewer{
height : 60%;
}
#zone-geog{
height : 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div id="header-sec" class="row">
<div class="col-sm-12">header</div>
</div>
<div id="zone-geog" class="row">
<div class="col-sm-12">
zone geog
</div>
</div>
<div id="data-viewer" class="row bg-primary">
<div class="col-sm-9">map</div>
<div class="col-sm-3">idica evolu</div>
</div>
<div id="footer-sec" class="row">
<div class="col-sm-12">footer</div>
</div>
</div>
</body>
I am trying to make a layout where #txt-bar and #main-content-area will overlap on #image. ( #txt-bar is overlapping on #image with following CSS ) but to achieve overlapping of #main-content-area on #image if I use top:-60px at #main-content-area then it will leave a gap between #main-content-area and #footer. I don't know how to solve this issue. Please help me.
/* CSS */
body {
position: absolute;
}
#top-bar {
background-color: black;
color: white;
}
#txt-bar {
height: 40px;
background-color: pink;
position: relative;
z-index: 4;
}
#link-bar {
background-color: red;
height: 40px;
z-index: 4;
}
#image {
position: relative;
z-index: 3;
}
.line {
width: 100%;
position: relative;
border-bottom: 4px solid black;
}
#main-content-area {
position: relative;
background-color: red;
top: -60px;
z-index: 4;
}
#footer {
background-color: green;
position: relative;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" id="txt-bar">
<h1>Greetings</h1>
</div>
<div class="col-sm-6" id="link-bar">
<h1>Link bar </h1>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="image">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300" class="img-responsive" />
</div>
</div>
<div class="line"></div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8" id="main-content-area">
<h1>Main content area </h1>
</div>
<div class="col-sm-2">
</div>
</div>
<div class="row" id="footer">
<div class="col-sm-12">
<h1>Footer Element </h1>
</div>
</div>
</div>
Wrap all divs (#txt-bar #main-content-area and #image) in a parent div with position:relative then use position:absolute for #main-content-area and #txt-bar, this will solve your issues.
.wrap{position:relative;max-width:300px;}
#txt-bar {
height: 40px;
background-color: pink;
position: absolute;
top:10px;
width:100%;
}
#main-content-area {
position: absolute;
bottom:10px;
width:100%;
background-color: red;
}
<div class=wrap>
<div id=txt-bar>txt-bar</div>
<div id=image><img src=https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300></div>
<div id=main-content-area>main-content-area</div>
</div>
More Info
I have a row of divs that I am trying to build a gallery row with.
Despite using align: auto; on the images, They still seem to align to the left.
I was wondering if I am missing something.
here is my fiddle: http://jsfiddle.net/82nrw19x/
here is my code:
CSS:
.galleryRow{
}
.galleryIconOuter{
background-color: gray;
width: 20%;
height: 70px;
border-radius: 5px;
}
#wrapper {
min-width:100%;
min-height:100%;
border: 4px gainsboro solid;
margin: 0auto;
position: relative;
}
#im {
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://s31.postimg.org/x8rd1797f/product1.png");
background-repeat: no-repeat;
background-size: contain;
}
HTML:
<section id="products" class="about">
<div class="container">
<div class="info col-lg-12 text-center">
<h2>Products</h2>
<div class="galleryRow w3-row">
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
<div class="galleryIconOuter w3-col">
<div id="wrapper">
<div id="im">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
any help or advice is appreciated.
Thank you in advance.
You are including the img as backgrounds, then you just need to set
background-position to center:
Try this:
#im {
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("https://s31.postimg.org/x8rd1797f/product1.png");
background-repeat: no-repeat;
background-size: contain;
/* ADD THIS LINE*/
background-position:center;
}
Or the shorthand:
background: url("https://s31.postimg.org/x8rd1797f/product1.png") no-repeat center/contain;
Updated Fiddle
Do you mean like this?
.galleryRow{
position: relative;
width: 80%;
left: 10%;
right: 10%;
}
Is that what you mean by wanting them to "align to middle?"
I'm currently working on a chat project with Bootstrap and I have issues positioning my divs. Here's my pattern:
<div class="container">
<div class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>
Basically what I want is to fit these 3 row sections into the browser's height, so that the input zone is always at the bottom of the screen and the page is not scrollable, but I want both the #chatbox and the #users to be scrollable so that they fit in the #main.
Here is what I've done so far:
html, body {
height: 100%;
margin: 0;
}
body > .container {
height: 100%; /* Fit the container into the window */
}
.row#main > div {
max-height: 100%; /* This doesn't */
overflow: auto; /* work :( */
}
.row#input { /* Stick the input zone at the bottom */
position: absolute;
bottom: 0px;
width: 100%;
margin-bottom: 0px;
}
But when I extend the #chatbox or the #users, I don't get a good result :(
Anyone's got an idea? I'd like a full-CSS solution if possible :3
Thanks ^^
I've made a little demo for you to resolve this issue. Its pure CSS and suitable for any responsive layout.
You need to use the absolute position cleverly.
demo http://jsfiddle.net/h87p14tx/2/
HTML
<div class="row header"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div class="row main"> <!-- #main -->
<div class="col-sm-9 chatbox"> <!-- #chatbox -->
<ul>Chat messages</ul>
</div>
<div class="col-sm-3 users"> <!-- #users -->
<ul>Users list</ul>
</div>
</div>
<div class="row input"> <!-- #input -->
<form>Input zone</form>
</div>
CSS
.header, .input {
width: 100%; position: absolute;
background: red;
}
.header {
top: 0;
height: 70px;
}
.input {
bottom: 0;
height: 50px;
}
.main {
width: 100%; position: absolute; top: 70px; bottom: 50px;
background: green;
overflow: auto;
}
.chatbox, .users{
height: 100%;
}
.main .chatbox{
width: 70%;
float: left;
background: blue;
}
.main .users{
width: 30%;
float: right;
background: yellow;
}
Assuming you are essentially creating a header/body/footer layout, this should do the job:
html,
body {
min-height: 100%;
padding:0;
margin:0;
}
#main {
position: absolute;
padding: 100px 0;
top:0;
bottom:0;
left:0;
right:0;
background-color: red;
}
#header {
margin-top:-100px;
height:100px;
background-color: blue;
}
#body {
min-height: 100%
}
#footer {
height: 100px;
margin-bottom: -100px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div id="main" class="container">
<div id="header" class="row"> <!-- #header -->
<h1>Header stuff</h1>
</div>
<div id="body" class="row"> <!-- #main -->
<div class="col-sm-9">
<ul>Chat messages</ul> <!-- #chatbox -->
</div>
<div class="col-sm-3">
<ul>Users list</ul> <!-- #users -->
</div>
</div>
<div id="footer" class="row"> <!-- #input -->
<form>Input zone</form>
</div>
</div>
I have 4 divs which stands as my background color, I wanted to to have slanted bottom borders just like this:
this: http://onepagelove.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/opl-big36.jpg
here is my code:
<html>
<head>
<style>
html, body { height: 200%; padding: 0; margin: 0; }
#first {
top: 0;
background-color: orange;
height: 50%;
}
#second {
bottom: 0;
background-color: green;
height: 50%;
}
#third {
top: 0;
background-color: blue;
height: 50%;
}
#fourth {
bottom: 0;
background-color: red;
height: 50%;
}
</style>
</head>
<body>
<div id="first"> </div>
<div id="second"> </div>
<div id="third"> </div>
<div id="fourth"> </div>
</body>
</html>
You will want a grid like Foundation or Bootstrap. You will want like:
<div class="row" id="firstBackground">
<!-- Contents... -->
</div>
<div class="row" id="secondBackground">
<!-- Contents... -->
</div>
<div class="row" id="thirdBackground">
<!-- Contents... -->
</div>
<div class="row" id="forthBackground">
<!-- Contents... -->
</div>
I hope it helps.