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.
Related
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>
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 want to center the practiceType div inside the practice div block. It is a jquery mobile page. Here is my code.
<body>
<div data-role="page" id="practice" >
<!-- /header -->
<div data-role="header" id="appheader">
<h2 style="text-align:center;">XXX - Practice Test</h2>
</div>
<!-- /content -->
<div role="main" class="ui-content" id="practiceType" style="margin-top:25%;margin-bottom:25%;">
<div data-role="main" class="ui-content" >
MATH PRACTICE TEST
ELA PRATICE TEST
</div>
</div>
<!-- /footer -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false" id="appfooter" >
<h6>Comprehensive Learning Resources</h6>
</div>
</div><!-- /page -->
</body>
</html>
how to vertically center an element
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
then, set the parent div to
position: relative;
so your new code will be:
#practiceType {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#practice {
position: relative;
}
You can use flexbox to achieve that.
.container {
width: 500px;
height: 200px;
background: blue;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 50px;
height: 50px;
background: red;
}
<div class="container">
<div class="child"></div>
</div>
Below css will help you center the div.
#outer{
background-color: #000;
float: left;
height: 200px;
width: 100%;
}
#centerDiv{
background-color: #fff;
height: 150px;
margin: auto;
width: 70%;
}
check this demo
Try below code for center the text
#outerDiv{
float: left;
width: 100%;
}
#outerDiv h2{
text-align:center;
}
I am new to this, so the page is for practice. I can't seem to get the "p" or "h1" tags to show up in, what should be the middle of my page. Here is my html code:
<body>
<div class="container">
<div id="top">
<div id="bottom">
<div id="left">
<div id="right">
</div>
<!--Attempted to use a p tag here -->
<!--right div end-->
</div>
<!--left div end-->
</div>
<!--bottom div end-->
</div>
<!--top div end-->
</div>
<!--container div end-->
<!--Attempted to use a p tag here as well thinking it may show up in a different location-->
</body>
My CSS looks like this:
#top,
#bottom,
#left,
#right {
background: #666666;
position: fixed;
}
#left,
#right {
top: 0;
bottom: 0;
width: 100px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#top,
#bottom {
left: 0;
right: 0;
height: 100px;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
If anyone could let me know what I am doing wrong it would be very appreciated. I tried to mess with the positioning a bit with no luck, and I also attempted to give the p tags a z-index but I don't know if that was even something that could have worked properly to begin with.
This is a perfectly acceptable and simpler way to achieve what you want.
body {
background-color: #666666;
width: 100%;
margin: 0;
}
#container {
background-color: blue;
width: 80%;
height: 100px;
margin: auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
<body>
<div id="container">
<h1>HEADER 1</h1>
<p>PARAGRAPH 1</p>
</div>
</body>
Go with float and clear in the css segments
<html>
<head>
<style type="text/css">
#wrapper{background-color:red;width:100%; margin: auto;}
#top{background-color:blue; height:100px;}
#left{background-color:green; width:10%; height:100px;float:left;}
#right{background-color:yellow; width: 10%; height:100px;float:right;}
#bottom{background-color:grey; height:100px;clear:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="left">left</div>background
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
A trick to center elements in the middle is:
#left{
margin-left: auto;
margin-right: auto;
}
but if you're just looking to center the <h1> or <p> then this would work:
p {
text-align: center;
}
h1 {
text-align: center;
}
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>