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>
Related
I am trying to write some HTML that looks like this:
But what I currently have looks like this:
This my code:
<style>
div.relative {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.absolute {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
</style>
<div class='relative'>phone <b> 07010710811</b>
shot code <div class='absolute'> <b>123456 </b></div>
</div>";
What should I do to get my desired output?
I would create another div for your "shot code", and "phone" text. I've used similar properties to what you have been using before so that it should fall in line with the rest of your styling.
I would also consider renaming your div's to something that isn't a CSS property.
div.container {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
text-align: center;
}
div.shot_code {
position: absolute;
top: 28px;
right: -2px;
width: 200px;
height: 40px;
border: 2px solid #73AD21;
text-align: center;
}
div.shot_text {
position: absolute;
top: 36px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
div.phone_text {
position: absolute;
top: 5px;
left: 0;
width: 100px;
height: 40px;
text-align: center;
}
<div class='container'>
<div class='phone_text'>phone</div> <b> 07010710811</b>
<div class='shot_text'>shot code</div>
<div class='shot_code'> <b>123456 </b></div>
</div>
Assuming you can modify the HTML I would restructure it somewhat. That will make your life a lot easier when it comes to getting this styled right, and also styling it in the future.
.wrapper {
position: relative;
width: 300px;
height: 70px;
border: 2px solid #73AD21;
left: 32px;
}
.phone-num{
font-weight:bold;
margin-left: 45px;
}
.shot-code-num {
position: absolute;
top: 28px;
right: 0;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
.shot-code{
margin-top:20px;
margin-left:20px;
}
<div class="wrapper">
<div class='phone'>phone
<span class="phone-num">07010710811</span>
</div>
<div class="shot-code">
shot code
<div class='shot-code-num'> <b>123456 </b></div>
</div>
</div>
You can quite possibly also remove the absolute positioning as well, and replace it all with inline-blocks. It looks like you are going for something more like this:
.wrapper {
position: relative;
width: 300px;
border: 2px solid #73AD21;
text-align:right;
}
.field{
display:inline-block;
position:relative;
width:300px;
}
.field-label{
display:inline-block;
width:70px;
text-align:left;
padding:10px;
}
.field-value {
display:inline-block;
width: 200px;
height: 40px;
line-height:40px;
border: 2px solid #73AD21;
text-align: center;
font-weight:bold;
}
<div class="wrapper">
<div class="phone field">
<span class="phone-label field-label">phone</span>
<span class="phone-value field-value">07010710811</span>
</div>
<div class="shot-code field">
<span class="shot-code-label field-label">shot code</span>
<span class="shot-code-value field-value">123456</span>
</div>
</div>
But I'm not sure what other requirements you have, so can't say for sure. You have a few options here. Hope some of it is helpful.
You could use float and with properties, like that :
.box{
float :left;
text-align: center;
width: 300px;
}
.top{
width: 100%;
}
.cut{
width: 50%;
float:left;
box-sizing: border-box;
}
.border{
width: 50%;
float:left;
}
<div class="box">
<div class="top">
Phone 07010710811
</div>
<div class="cut">
shot code
</div>
<div class="cut border">
123456
</div>
</div>
Of course, you have to adapt this code to your case.
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>
Im currently trying to make a square with 4 small squares inside, and I have been having troubles with a way I was trying to do.
So this is the code:
#grandbox {
position: absolute;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
I wanted to make the css style of the borders:
border: 2px solid black
But if I do that the boxes just break out of the bigger box and are display vertically.
I'm pretty newbie with this, as I currently started my carreer, but I cannot understand why doesn't it work.
PS: Sorry if bad english, not my first language.
Normally, border widths are added to the given width. With the box-sizing: border-box; rule, you can include the border into the width, so that you have no break anymore. See this snippet:
#grandbox {
position: absolute;
width: 200px;
height: 200px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
box-sizing: border-box;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
See https://developer.mozilla.org/de/docs/Web/CSS/box-sizing for more information about box-sizing.
EDIT: My answer is more of a hack solution. The accepted answer above that incorporates the box-sizing automatically including borders into the width is a better answer.
In your original calculation of height and width (204) I don't think you were accounting for both sides of each square being an additional 4 pixels larger.
Adjusting the width and height to 208px should solve your problem.
#grandbox
{
position: absolute;
width:208px;
height:208px;
border: 2px solid black;
left:40%;
top: 8%;
}
div.smallbox
{
border: 2px solid black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<body>
<div id="grandbox">
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
<div class="smallbox">
</div>
</div>
</body>
The outer box should be positioned relative and the four inside boxes absolute. Then you just need to position them using left right top bottom properties.
#grandbox {
position: relative;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
position: absolute;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
div.sb1 {
top: 0;
left: 0;
}
div.sb2 {
top: 0;
right: 0;
}
div.sb3 {
left: 0;
bottom: 0;
}
div.sb4 {
right: 0;
bottom: 0;
}
<div id="grandbox">
<div class="smallbox sb1">
</div>
<div class="smallbox sb2">
</div>
<div class="smallbox sb3">
</div>
<div class="smallbox sb4">
</div>
</div>
Here's a jsbin version.
I really need your help,
I can't seem to figure out as to why my div #text spills out past my container div? It should fit nicely inside its container?
Here is the CSS markup:
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
display: none;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
height: 100%;
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
}
#text {
height: 100%;
border: 1px solid red;
}
HTML:
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
</div>
Here is a snapshot of the problem:
The height of #text is 100% which means it gets the height of the containing block, in this case #container. Both the height of #text as well as the #container are 500px. But #text is being pushed down by it's sibling .topbar, causing it to overflow.
To solve this you can use the css property overflow:auto as suggested by Jarred Farrish in the comments
Because #test {height:100%;} it will look for it's parent's height, all the way to #wrapper which is set to height:100px, so #test will get the same height, plus the borders, and the #container doesn't have enough space to hold it (due to the extra blue bar), so it overflows.
I also noticed the layout can be done simpler as follows.
#wrapper {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-bottom: -50px; /*half height*/
margin-right: -250px; /*half width*/
position: absolute;
/* display: none; */
}
#container {
background: #FFF;
border: 2px solid rgb(100, 139, 170);
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100, 139, 170);
padding: 4px;
font-weight: bold;
}
#text {
border: 1px solid red;
}
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div>
<div class="topbar" style="text-align: right;">Close</div>
<div id="text">
<p>test</p>
</div>
</div>
</div>
You are taking the height of the #container but remember that there is also sort of a header at the top of the container so the text height should be < 100% because you have to substract the height of the dialog header.
Amir got point, the way you can "fix" this is to add padding to content, so you got safe space.
CodePen Sample
<div id="wrapper">
<div id="container">
<div style="float:left;" class="topbar">Custom Dialog Box</div><div class="topbar" style="text-align: right;">Close</div>
<div id="text"><p>test</p></div>
</div>
#wrapper{
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
margin-right: -250px;
position: absolute;
border: 1px solid yellow;
}
#container {
background: #FFF;
left: 0%;
padding-bottom: 30px;
top: 0%;
margin: 0;
height: 100%;
border: 2px solid rgb(100,139,170);
position: relative;
}
.topbar {
cursor: pointer;
color: white;
background: rgb(100,139,170);
padding: 4px;
font-weight: bold;
border: 1px solid green;
}
#text {
height: 100%;
border: 1px solid red;
}
I also fixed positioning for you.
I need to create a html box which is not just a simple box, but it has a little tip at the bottom. I created this with HTML and CSS as you can see in the code below. First watch that.
.item{
width: 200px;
height: 130px;
background: gray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
float:left;
}
.title{
position: absolute;
bottom: 0px;
background-color: white;
height: 30px;
line-height: 30px;
width: 160px;
}
.tip{
position: absolute;
bottom: 0px;
right: 0px;
height: 30px;
width: 40px;
border-left: 25px solid transparent;
border-bottom: 30px solid white;
}
*{
box-sizing: border-box;
}
<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
<div class="title">Lorum Ipsum</div>
<div class="tip"></div>
</div>
<div class="item" style="left:230px;">
<div class="title">Lorum Ipsum 2</div>
<div class="tip"></div>
</div>
As you can see the image in the background is also in the tip at the bottom. At the right, you seen the same but without an image and a gray background. But this background actually needs to be white with an gray border in the contour of the gray background. So also the version with the image needs this border. Below an image of what I mean.
Is it possible to create this with only HTML and CSS with support for older browsers (at least IE9). Thanks in advance!
here is one solution that works in old browsers; I made the border red for visibility.
.item{
width: 200px;
height: 130px;
background: gray;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
float:left;
border:1px solid red;
}
.title{
position: absolute;
bottom: -1px;
left: -1px;
background-color: white;
height: 30px;
line-height: 30px;
width: 160px;
border:1px solid red;
border-width: 1px 1px 0 0;
}
.tip{
position: absolute;
bottom: -1px;
right: -1px;
height: 30px;
width: 40px;
border-left: 25px solid transparent;
border-bottom: 30px solid white;
}
.tip-border{
border-bottom-color:red;
bottom:0;
}
*{
box-sizing: border-box;
}
<div class="item" style="background-image: url('http://img.dummy-image-generator.com/buildings/dummy-400x400-Window-plain.jpg')">
<div class="title">Lorum Ipsum</div>
<div class="tip tip-border"></div>
<div class="tip"></div>
</div>
<div class="item" style="left:230px;">
<div class="title">Lorum Ipsum 2</div>
<div class="tip tip-border"></div>
<div class="tip"></div>
</div>
http://fiddle.jshell.net/2bgdjckq/