I have a label inside of a div. I want to position the label in the middle of the div and the text on the left side of the label, vertically aligned to center. How can I do this without padding and margin?
http://jsfiddle.net/E3Wb4/
<div class="center">
<label style="width:255px;height:40px;display:inline-block;float:center">Test</label>
</div>
.center {
padding:0px;
background:#B3B3B3;
height:44px;
width:400px;
border-top:2px solid red;
border-bottom:2px solid red;
border-left:2px solid red;
border-right:2px solid red;
}
label{
border-top:2px solid yellow;
border-bottom:2px solid yellow;
border-left:2px solid yellow;
border-right:2px solid yellow;
}
THe best way is to add margin: 0px auto; to Label.
http://jsfiddle.net/WZ5MU/
you can also shotcode border by using border: 2px solid red;
border: <border-width> || <border-style> || <color>
you can set line-height: 44px for div.center
.center{
position: relative;
}
label{
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
That's good way to center elements.
Related
I am trying to make this in CSS.
But this is how it renders in IE11.
My code below works in Chrome, but not in IE 11. "www.CanIUse.com" says the clip rule works in IE11. What is wrong with my CSS?
body{margin: 50px;}
.bracket-container {
position: relative;
border: 0px solid green;
width: 25px;
height: 58px;
width: 25px;
padding: 0;
margin: 0;
}
#square-clip{
width: 24px;
height: 50px;
background: none;
border: 4px solid red;
border-left: 0;
border-radius: 8px;
clip: (0, 0,0, 25px);
position: absolute;
left:0;
}
#triangle-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 10px solid red;
border-bottom: 8px solid transparent;
position: absolute;
right:-12px;
top: 21px;
}
<h3>Using the new CSS Clip-path</h3>
https://caniuse.com/#search=clip-path</br>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip-path"></div>
</div>
<div class="bracket-container">
<div id="triangle-right"></div>
<div id="square-clip"></div>
</div>
No need to use clip at all, nor multiple divs.
Use just one, adjust the borders as needed for the bracket body, then a pseudo element for the triangle with the good ol' borders triangle technique
.bracket{
border: 4px solid red;
width:100px; height:150px;
border-left:none;
border-radius:0 10% 10% 0;
position:relative;
}
.bracket::after{
content:"";
width:20px; height:20px;
position:absolute;
left:100%;
top:50%; transform:translateY(-50%);
box-sizing:border-box;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
border-left:15px solid red;
}
<div class="bracket"> </div>
This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 7 years ago.
I am trying to figure out how to use CSS to create the below effect.
I've tried to do this by creating 4 divs within a parent div and positioning them on all four sides.
This works, but breaks when I need those 4 divs to be transparent to the background and not a single color.
For example, I want to try to make this work again a picture background and not just a solid background.
If the background is solid I can make the 4 divs the same color as the background, the problem is that if the background is a picture I can't have the 4 divs match the background.
Also, I understand my fundamental approach to the problem might be wrong. I heard someone mentioning using a pseudo :before and :after to accomplish this effect for effectively, but I'm not sure how to do that.
Here I made it as close as I could get with the least code:
.daysleft {
position: relative;
padding: 20px;
width: 100px;
text-align: center;
}
.daysleft span {
display: block;
z-index: 2;
position: relative;
}
.white {
background-color: #fff;
height: 20px;
width: 101%;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
transform: translateY(-50%);
}
.daysleft:before {
height: 100%;
content: "";
position: absolute;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
left: 0px;
top: 0;
}
.daysleft:after {
height: 100%;
content: "";
position: absolute;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
right: 0px;
top: 0;
}
<div class="daysleft"><div class="white"></div><span>37 Days left</span></div>
EDIT:
Found a way to interupt the borders! Awnser updated.
I'm guessing this is the sort of thing you want.
.container {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 15px;
background: #ccc;
}
#content {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 10px;
background: #ccc;
font-size: 38px;
color: #333;
}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:15px;
height: 15px;
border-color:#777;
/* or whatever colour */
border-style:solid;
/* or whatever style */
content:' ';
}
#content:before {
top:0;
left:0;
border-width: 2px 0 0 2px
}
#content:after {
top:0;
right:0;
border-width: 2px 2px 0 0
}
#content>:first-child:before {
bottom:0;
right:0;
border-width: 0 2px 2px 0
}
#content>:first-child:after {
bottom:0;
left:0;
border-width: 0 0 2px 2px
}
<div class="container">
<div id="content">
<p><i>37</i> days left</p>
</div>
</div>
Example:
http://jsfiddle.net/link2twenty/5gjh6jkx/
demo
Try out this... here am using background as image
<div class="parent">
<div class="child">
37 days Left
</div>
</div>
CSS:
.parent{
background-color : #ccc;
padding : 20px;
width : 100%;
margin : 0 auto;
}
.child
{
width: 100%;
padding: 10px;
text-align : center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 15px solid #ccc;
border-image: url('https://i.stack.imgur.com/1WlsT.png') 34% repeat;
}
Try something like this FIDDLE
DEMO CODE
HTML
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
CSS
.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}
I am trying to make a basic button box with an arrow at the top of it...
http://jsfiddle.net/8K4qB/ --this is what it comes out to.. i can't make it align at the top in the middle of the bottom.
HTML Code
Read More
CSS Code
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
}
.test:before {
content:'';
position: absolute;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
I'd like it to look like the pic
In order to achieve the specific behaviour you're after you need to change your HTML as well as your CSS- otherwise centrally justifying a pseudo element correctly will elude you.. Change the elements in the example as required (e.g. the top level div can be changed to a.button.test)
REVISED FIDDLE
HTML
<div>
<div></div>
<div>text goes here</div>
</div>
CSS
div {
display:inline-block;
text-align:center;
}
div div:first-child {
display:block;
width: 0;
height: 0;
border-bottom: 10px solid darkorange;
border-right:30px solid transparent;
border-left:30px solid transparent;
margin: 0 auto;
}
div div:last-child{
display:block;
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: darkorange;
position:relative;
text-transform:uppercase;
}
Try this ,display:block so that your arrow still in the middle: DEMO
CSS:
.button {
font-size: 15px;
color: white;
text-align: center;
padding:10px 30px 10px 30px;
margin:0 auto;
background: #2ecc71;
display:block;position:relative;top:20px;
}
.test:before {
content:'';
position: absolute;
top:-20px;
width: 0;
height: 0;
border-bottom: 20px solid #3498db;
border-right:50px solid transparent;
border-left:50px solid transparent;
}
.middle{
padding-left:15px;
}
HTML:
<span class="middle">Read More</span>
I would like to create a tab or label like look using only CSS and no images if possible. Here is what I mean:
I can create one end but I have not been able to create the triangle point. Is it possible to do this with only CSS?
There are indeed ways to create CSS triangles, here's a part from css-tricks.com:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
http://css-tricks.com/snippets/css/css-triangle/
Yes, but not while supporting IE7:
<a class="tab">Your label text</a>
.tab {
background: black;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: relative;
}
.tab::before {
content: " ";
position: absolute;
right: 100%;
top: 0;
width: 0;
height: 0;
border-width: 35px; /* play with this value to match the height of the tab */
border-style: solid;
border-color: transparent black transparent transparent;
}
This should be a good beginning
http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="arrow-left"></div>
<div class="arrow-body"></div>
CSS
.arrow-left { float:left; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid blue; }
.arrow-body{ float:left; width:200px; height:40px; background-color:Blue;}
Here is another one
<div></div>
div{
width:500px;
height:100px;
background-color:black;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
margin-left:100px;
}
div:before{
width:0;
height:0;
content:"";
display:inline-block;
border-top:50px solid transparent;
border-right:100px solid black;
border-bottom:50px solid transparent;
position:absolute;
left:0;
}
http://jsfiddle.net/e8feE/
Please see the demo here: http://jsfiddle.net/Freewind/Vkp4U/
The html:
<div class="outer">
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</div>
The css:
.outer {
border: 1px solid black;
overflow: scroll-x;
}
.x {
width: 400px;
border: 1px solid red;
float:left;
}
.y {
width: 400px;
border: 1px solid yellow;
float:left;
}
.z {
width: 400px;
border: 1px solid blue;
float:left;
}
How to let the 3 inner divs displayed in line, won't wrap if I resize the browser to smaller?
Limitations:
the width of outer div should not be specified
the width of inner divs are fixed
Hi you can define display table and table-cell in you css properties as like this
Css
.outer {
border: 1px solid black;
overflow: scroll-x;
display:table;
}
.x {
width: 400px;
border: 1px solid red;
display:table-cell;
}
.y {
width: 400px;
border: 1px solid yellow;
display:table-cell;
}
.z {
width: 400px;
border: 1px solid blue;
display:table-cell;
}
HTML
<div class="outer">
<div class="x">x</div>
<div class="y">y</div>
<div class="z">z</div>
</div>
Live demo http://jsfiddle.net/Vkp4U/5/
this may work:
The idea here is to set the outer as relative postion. now all the absolute sub div will refer to their parent relative div. (demo here:http://jsfiddle.net/Vkp4U/7/)
.outer {
border: 1px solid black;
overflow: scroll-x;
position:relative;
}
.x {
width: 400px;
border: 1px solid red;
float:left;
position:absolute;
left:0px;
}
.y {
width: 400px;
border: 1px solid yellow;
float:left;
position:absolute;
left:400px;
}
.z {
width: 400px;
border: 1px solid blue;
float:left;
position:absolute;
left:800px;
}
Use % in css width...
.outer {
border: 1px solid black;
overflow: scroll-x;
}
.x {
width: 30%;
border: 1px solid red;
float:left;
}
.y {
width: 30%;
border: 1px solid yellow;
float:left;
}
.z {
width: 30%;
border: 1px solid blue;
float:left;
}