I'm trying to generate a "A4" html as a template previous for saving as PDF, my page has 5 divs that cover 100% of the area to print.
I am using position absolute for every div, but somehow they are overlapping a little bit, why that is happening??
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 210mm;
height: 297mm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
#media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
.area100{
border:1px solid black;
position:absolute;
width:210mm;
}
.area50{
font-size:9px;
padding:10px;
text-align: justify;
border:1px solid black;
position:absolute;
width:105mm;
height:98mm;
overflow:hidden;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<page size="A4">
<div id="header" class="area100" style="height:20mm;">
This is header
</div>
<div id="main" class="area100" style="height:129mm; top: 20mm;">
This is main
</div>
<div id="bottom-left" class="area50" style="top: 149mm">
{agreement}
</div>
<div id="bottom-right" class="area50" style="left:105mm; top: 149mm">
right
</div>
<div id="footer" class="area100" style="top: 247mm; height:50mm">
This is footer
</div>
</page>
</body>
</html>
Always set top and left attributes for position: absolute; because browser will try to guess it and sometimes it's not what you want.
Also element actual width consists of width + padding, so when you set width: 105mm; padding: 10px; than your actual width is 105mm + 20px
body {
background: rgb(204, 204, 204);
}
page[size="A4"] {
background: white;
width: 210mm;
height: 297mm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
#media print {
body,
page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
.area100 {
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
width: 210mm;
}
.area50 {
font-size: 9px;
padding: 10px;
text-align: justify;
border: 1px solid black;
position: absolute;
width: 99mm;
height: 98mm;
overflow: hidden;
top: 0;
left: 0;
}
<page size="A4">
<div id="header" class="area100" style="height:20mm;">
This is header
</div>
<div id="main" class="area100" style="height:129mm; top: 20mm;">
This is main
</div>
<div id="bottom-left" class="area50" style="top: 149mm">
{agreement}
</div>
<div id="bottom-right" class="area50" style="left:105mm; top: 149mm">
right
</div>
<div id="footer" class="area100" style="top: 247mm; height:50mm">
This is footer
</div>
</page>
Related
I am trying to put some margin to this border :
Here is the css code :
.select_dev {
width: 15vmax;
height: 100%;
background-color: #142431;
position: fixed;
left: 0;
top: 0;
z-index: 200;
border: 2.5px dashed #babfc5;
border-spacing: 15px;
}
I already tried border-spacing: 15px, but this doesn't work.. How can I do it please ?
Here is the HTML Code :
<div class="select_dev">
<div class="drgndrop">
<div class="textninput">
<center style="margin-top: 10px;">Faites glisser vos documents ici</center>
<center style="margin-top: 5px;"><img width="60" height="auto" src="plus2.png"></center>
</div>
</div>
<button onmouseover="help_hover(0, this)" onmouseout="hide_hover()" id="gear_button" style="background-color: Transparent; border: none; cursor:pointer; transform: translateX(+70px)"><img id="gear" src="UploadInactiv.png" style="width: 39px; height: auto"></button>
<button style="background-color: Transparent; border: none; cursor:pointer; transform: translateX(+100px)" onclick="delete_files_selected()" onmouseover="help_hover(1, this)" onmouseout="hide_hover()"><img src="delete.png" style="width: 40px; height: auto"></button>
<div class="acidjs-css3-treeview" style="margin-left: 5px"></div>
</div>
Thank you guys !
Margin adds 50 px on the outside of the div
Padding adds 50 px on the inside of the div
You can see the results of the margin and padding if you run the code snippet
body{
background-color: yellow;
}
#margin{
background-color: green;
margin: 50px;
}
#padding{
background-color: red;
padding: 50px;
}
<body>
<div id="margin"><h1>This div has margin</h1></div>
<div id="padding"><h1>This div has padding</h1></div>
</body>
For your code it would be something like this
Margin
.select_dev {
width: 15vmax;
height: 100%;
background-color: #142431;
position: fixed;
left: 0;
top: 0;
z-index: 200;
border: 2.5px dashed #babfc5;
border-spacing: 15px;
margin: 50px;
}
<div class="select_dev">
<div class="drgndrop">
<div class="textninput">
<center style="margin-top: 10px;">Faites glisser vos documents ici</center>
</div>
</div>
<div class="acidjs-css3-treeview" style="margin-left: 5px"></div>
</div>
Padding
.select_dev {
width: 15vmax;
height: 100%;
background-color: #142431;
position: fixed;
left: 0;
top: 0;
z-index: 200;
border: 2.5px dashed #babfc5;
border-spacing: 15px;
padding: 50px;
}
<div class="select_dev">
<div class="drgndrop">
<div class="textninput">
<center style="margin-top: 10px;">Faites glisser vos documents ici</center>
</div>
</div>
<div class="acidjs-css3-treeview" style="margin-left: 5px"></div>
</div>
I hope my answer was helpful
Try the code and let me know if it helped
Happy coding :)
you can add padding style to div.
.select_dev {
width: 15vmax;
height: 100%;
background-color: #142431;
position: fixed;
left: 0;
top: 0;
z-index: 200;
border: 2.5px dashed #babfc5;
border-spacing: 15px;
padding:10px;
}
If you want gap outside border then use margin
if gap inside border use padding
body{
margin: 0;
background-color: #ddd;
}
.box{
width: 15vmax;
height: 100%;
background-color: #142431;
position: fixed;
left: 0;
top: 0;
z-index: 200;
border: 2.5px dashed #babfc5;
border-spacing: 15px;
padding:10px;
margin:10px; // this is what you need
}
<div class="box"></div>
I am trying to use CSS+HTML to position a purple block at the top of the viewport. I want the purple block to be horizontally centered and appear on top of anything else. The way my code is organized, other elements (a green button) must appear above the purple block in my HTML file.
I'm using the HTML below. Properly positions the block at the top of the page and on top of other elements. But it is not horizontally centered. How can I make it horizontally centered using CSS?
Plunker here.
<!DOCTYPE html>
<html>
<head>
<style>
.pretty-button {
color: white;
background-color: rgba(17, 175, 29, 0.64);
border-radius: 0.6em;
border: 0.2em solid #73AD21;
padding: 0.5em;
}
.top-block {
position: absolute;
top: 0px;
height: 30px;
width: 60%;
margin: auto;
background-color: purple;
z-index: +1;
}
</style>
</head>
<body>
<button class="pretty-button">Button A</button>
<div id="div1">
<div id="div2">
<div id="div3" class="top-block">
</div>
</div>
</div>
</body>
</html>
apply below code z-index: 9999; margin-left: 20%;
.top-block {
position: absolute;
top: 0px;
height: 30px;
width: 60%;
margin: auto;
background-color: purple;
z-index: 9999;
margin-left: 20%;
}
Apply below code
.pretty-button
{
color: white;
background-color: rgba(17, 175, 29, 0.64);
border-radius: 0.6em;
border: 0.2em solid #73AD21;
padding: 0.5em;
display: flex;
margin: auto;
z-index: 9;
position: relative;
}
.top-block
{
position: absolute;
top: 0px;
height: 60px;
width: 60%;
margin: auto;
background-color: purple;
z-index: +1;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button class="pretty-button">Button A</button>
<div id="div1">
<div id="div2">
<div id="div3" class="top-block">
</div>
</div>
</div>
</body>
</html>
Just add this: transform: translateX(35%); and z-index: 999 to your .top-block class
This should help in centering the div horizontally!
<!DOCTYPE html>
<html>
<head>
<style>
.pretty-button {
color: white;
background-color: rgba(17, 175, 29, 0.64);
border-radius: 0.6em;
border: 0.2em solid #73AD21;
padding: 0.5em;
}
.top-block {
position: absolute;
top: 0px;
height: 30px;
width: 60%;
background-color: purple;
left: 20%;
}
</style>
</head>
<body>
<button class="pretty-button">Button A</button>
<div id="div1">
<div id="div2">
<div id="div3" class="top-block">
</div>
</div>
</div>
</body>
</html>
I am new with CSS and need some help, please. Although it seems to be simple to solve, I am already working in this problem for about 4 hours. I found many similar questions on internet, but each case is particulary different from mine, and the "solutions" can't solve my problem (already tried most of them).
Here is the basic structure of my html page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
And here is the CSS I am trying to implement:
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
width: 1000px;
// height: 100%;
// min-height: 100%;
margin: 0 auto;
// padding-bottom: 50px;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
// height: 100%;
// min-height: 100%;
background-color: #94C9FF;
}
#body #page {
overflow: hidden;
// height: 100%;
// min-height: 100%;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
Obs: Commented lines are SOME of the solutions I already tried.
Here is what I got so far:
And finally here is what I really need:
The reason you were having trouble getting the #body div to be the full height of the remaining space is because each of the wrapping elements needed height:100% not just one of them. That means #main, #body, #page and #menu.
html {
height: 100%;
}
body {
margin:0;
padding:0;
width:100%;
height: 100%;
min-height: 100%;
background: #DEDEDE;
}
#main {
width: 100%;
min-height:100%;
position:relative;
height:100%;
}
#head {
width: 100%;
height: 58px;
border-bottom: 1px solid #115293;
background-color: #1976D2;
}
#head #head_content {
width: 1000px;
padding: 6px;
color: #FFFFFF;
margin: 0 auto;
text-align: center;
}
#body {
height:100%;
width: 1000px;
margin: 0 auto;
border-left: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
}
#body #menu {
float: left;
width: 220px;
background-color: #94C9FF;
height:100%;
}
#body #page {
overflow: hidden;
padding: 10px;
color: #5C5C5C;
border-left: 1px solid #BFBFBF;
background-color: #FFFFFF;
height:100%;
}
#foot {
position:absolute;
bottom: 0;
left: 0;
width: 100%;
height: 58px;
color: #FFFFFF;
border-top: 1px solid #115293;
background-color: #1976D2;
}
#foot #foot_content {
position: relative;
width: 1000px;
padding: 6px;
margin: 0 auto;
text-align: center;
}
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
you can add the following to css based on the size of content you require the content to be, just change the pixels based on the content you want:-
div#page {
width: 100%;
height: 600px;
}
I hope it will help
You can do this in the following way--
Just use the height unit as vh(viewport height) relative to viewport. Add rest of your css to get desired width effect.
checkout the snippet
#main {
background-color:blue;
height: 10vh;
}
#body {
background-color:grey;
height:80vh;
}
#foot {
background-color:blue;
height: 10vh;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>Test</title>
</head>
<body>
<div id="main">
<div id="head">
<div id="head_content">
HEARDER
</div>
</div>
<div id="body">
<div id="menu">
MENU
</div>
<div id="page">
PAGE CONTENT
</div>
</div>
<div id="foot">
<div id="foot_content">
FOOTER
</div>
</div>
</div>
</body>
</html>
You can find compatibility here---
vh compatibility
EDIT
As fallback for vh unit I think you can use javascript . Through javascript you can get the window size. Then specify the height of the footer as percentage of the window height.
This question can be good starting point
My site code is very usual
<div class="header"></div>
<div class="site-inner"></div>
<div class="footer"></div>
How can I make header background like on the image?
Is the whole site content have to be position absolute and margin-top:-500px ?
Is that only case to do it?
I assume you mean the overlap.
Negative margin is one way.
.header {
height: 50px;
background: lightblue;
}
.site-inner {
width: 80%;
margin: auto;
height: 50px;
background: lightgrey;
margin-top: -30px;
box-shadow: 0 -2px 2px black;
}
<div class="header"></div>
<div class="site-inner"></div>
You can use:
.header{
width: 80%;
height: 75px;
margin: 0 auto;
margin-top: -20px;
background:#3A3A3A;
}
Take a look at positioning: Positioning, also z-index might be relevant: Z-index, notice in my example the negative index on .header-bg
A quick example:
.header-bg {
width: 100%;
height: 200px;
z-index: -1;
background: lightblue;
position: absolute;
top: 0;
left: 0;
}
.header {
margin-top: 50px;
height: 50px;
background: grey;
z-index
}
.menu {
height: 80px;
}
.site-inner {
height: 400px;
width: 100%;
background: red;
}
<div class="header-bg"></div>
<div class="header"></div>
<div class="menu">menu</div>
<div class="site-inner">Site inner</div>
<div class="footer"></div>
A negative z-index lets you put elements behind others. The answer is simple enough then.
<div class="color"></div>
<div class="fixed">
<div class="header">
</div>
<div class="nav">
Text
</div>
<div class="body">
</div>
</div>
html, body
{
height: 100;
margin: 0;
}
div.color
{
position: absolute; /*Take out of the flow*/
top: 0; /*Move to top left*/
left: 0;
z-index: -1; /*Place below normal elements in the flow*/
width: 100%; /*Fill whole width*/
height: 300px; /*300px tall*/
background: #c7edfb; /*Color specified*/
}
div.fixed
{
margin: 50px auto 0; /*push whole document down 50px and center*/
width: 600px; /*document is 600px wide*/
}
div.header
{
height: 150px; /*top gray block is 150px tall*/
background: #222; /*dark gray*/
}
div.nav
{
padding: 25px 0; /*Gap between blocks above and below*/
}
div.body
{
min-height: 300px; /*Force a height*/
background: #777; /*Light gray*/
box-shadow: 0 0 8px black; /*Drop shadow*/
}
JSFiddle
So I have this fixed header which has z-index:10, below that a fixed banner and then below that a relative content container. What I want is that the content scrolls over the banner but under the header. However, when I try to scroll it doesn't work. The strange part to me is that whenever I add box-shadow: 0px 0px 2px rgb(100,100,125); to the content container it does do what I want. I'm using the following code:
* {
padding: 0;
margin: 0 auto;
}
body {
background: rgb(223,227,238);
text-align: center;
}
#body_container {
padding-top: 80px;
}
#banner_container {
position: fixed;
left: 0;
right: 0;
}
#banner {
width: 1024px;
height: 300px;
}
#content_container {
background: rgb(243,247,248);
max-width: 1024px;
height: 100%;
position: relative;
top: 300px;
box-shadow: 0px 0px 2px rgb(100,100,125);
}
header {
min-width: 100%;
background: rgb(50,50,50);
height: 80px;
position: fixed;
z-index: 10;
}
/* Header styling, not relevant */
#header_container {
max-width: 1024px;
height: 100%;
}
#header_container div {
float: left;
display: inline-block;
width: 25%;
}
#logo {
width: 50%;
height: auto;
}
.menuItem {
padding-top: 29px;
height: calc(100% - 29px);
border: 0;
text-align: center;
font-family: Signika;
font-size: 25px;
color: rgb(203,207,218);
}
.menuItem:hover {
border-bottom: 4px solid rgb(59,89,202);
height: calc(100% - 33px);
color: rgb(160,170,218);
}
.menuLogo {
padding-top: 14.5px;
height: calc(100% - 14.5px);
border: 0;
text-align: center;
}
#mobile_menu_button {
display: none;
}
<header>
<div id="header_container">
<div class="menuLogo">
<img id="logo" src="img/desygn%20logo%20website.png">
</div>
<div class="menuItem">Home</div>
<div class="menuItem">Over</div>
<div class="menuItem">Contact</div>
<div id="mobile_menu_button">
</div>
</div>
</header>
<div id="body_container">
<div id="banner_container">
<img id="banner" src="img/banner_website.png">
</div>
<div id="content_container">
</div>
</div>
In your code you've not added any content under content_container. I don't see any issue with your code. It is working fine. Check here with content