I have a jsfiddle here - http://jsfiddle.net/w2tbefap/
It's a simple css problem.
I have a two separate elements (div's here).
The two elements have different widths.
I need to responsively center the elements next to each other so it is positioned like in the bottom example. The bottom example is just a centered image.
.block-1{
border: 1px solid red;
height: 100px;
}
.content{
border: 1px solid green;
position: relative;
}
.block-1-1{
background: blue;
width: 100px;
height: 50px;
//float: left;
position: absolute;
right: 50%;
margin-right: 20px;
}
.block-1-2{
background: yellow;
width: 300px;
height: 50px;
//float: right;
position: absolute;
left: 50%;
//right: 0;
}
.block-2{
border: 1px solid red;
height: 100px;
}
.content-2{
text-align: center;
}
Try this CSS for the blocks, and add text-align:center; to .content:
.block-1-1 {
background: blue;
width: 100px;
height: 50px;
margin-right: 20px;
display:inline-block;
}
.block-1-2 {
background: yellow;
width: 300px;
height: 50px;
display:inline-block;
}
jsFiddle example
Do you have to use position: absolute; ?
I suggest inline-block:
http://jsfiddle.net/w2tbefap/4/
.content{
border: 1px solid green;
position: relative;
text-align: center;
}
.block-1-1, .block-1-2 {
display: inline-block;
width: 100px;
height: 50px;
}
Related
This question already has answers here:
Curve bottom side of the div to the inside with CSS
(2 answers)
Closed 4 years ago.
I have added 2 pictures here. You can see that first curve is down curve and second one is up curve.
Now, I have a rectangle box using CSS. I want to make the top and bottom border should be like the picture.
I can use CSS border-radius property to make a border curve. But I don't understand how can I make this type of border curve using CSS3?
Updated:
Here is the full output I desire:
I used before after to achieve this
div{
width: 400px;
height: 200px;
background-color: #333;
position: relative;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
div:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
<div></div>
Update
after OP's recent comment, here you can add content in content-main div
.content{
background-color: #333;
width: 400px;
}
.content-top, .content-bottom{
width: 400px;
height: 100px;
background-color: #333;
position: relative;
overflow: hidden;
}
.content-top:before {
content: "";
position: absolute;
top: -10%;
width: 100%;
height: 50%;
background-color: white;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.content-bottom:after {
content: "";
position: absolute;
width: 100%;
bottom: -10%;
height: 50%;
background-color: white;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.content-main{
padding: 10px;
}
<div class="content">
<div class="content-top"></div>
<div class="content-main">
<h1>Cat</h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS11TbGOYA0EmL-usNpArFE8o17OSRSilYYohX1lgyxaP43M2Pt">
</div>
<div class="content-bottom"></div>
</div>
You can achieve this using two Divs one with black background and the children with white background and rounded borders. The wrapper should have a padding to simulate border thickness:
#wrapper{
background:#000000;
width:600px;
height:200px;
padding:10px;
}
#roundCurve{
background:#ffffff;
width:600px;
height:200px;
border-bottom-left-radius:50% 50px;
border-bottom-right-radius:50% 50px;
border-top-left-radius:50% 50px;
border-top-right-radius:50% 50px;
}
<div id="wrapper">
<div id="roundCurve"></div>
</div>
Here is an example you can follow:
body {
background: black;
}
.roundCorner {
width: 150px;
height: 100px;
padding: 2em;
border-bottom: 0;
position: relative;
background: white;
border-radius: 1em 1em 0 0;
}
.roundCorner:before {
position: absolute;
left: -1px;
right: -1px;
top: 0;
height: 1.5em;
border: 1px solid black;
border-top: 0;
border-radius: 0 0 3em 3em;
content:'';
background: black;
}
.roundCorner:after {
position: absolute;
left: -1px;
right: -1px;
bottom: 0;
height: 1.5em;
border: 1px solid black;
border-bottom: 0;
border-radius: 3em 3em 0 0;
content: '';
background: black;
}
<div class="roundCorner"></div>
You can change background of body, .roundCorner, .roundCorner:before, .roundCorner:after to see how it's working.
Considering the dark gray section is the element sitting below, how can the golden shape in the picture be drawn with css exclusively?
This is my code so far:
.Header--wrapper {
position: relative;
background-color: #42424C;
}
.Header--start-small {
width: 25%;
position: absolute;
background-color: #BCB097;
color: white;
margin-top: -10px;
margin-left: 15px;
padding-bottom: 57px;
display: inline-block;
}
<div className="Header--wrapper">
<div className="Header--start-small"></div>
</div>
Please refer blow code, I have update css and html.
.Header--wrapper {
position: relative;
background-color: #BCB097;
height: 40px;
overflow: hidden;
}
.Header--start-small {
width: 25%;
position: absolute;
background-color: #42424C;
color: white;
margin-top: -10px;
margin-left: 0px;
padding-bottom: 57px;
display: inline-block
}
.Arrow{
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 10px;
border-color: transparent transparent transparent #42424c;
display: inline-block;
left: 25%;
position: absolute;
}
<div class="Header--wrapper">
<div class="Header--start-small"></div><div class="Arrow"></div>
</div>
#container {
height: 80px;
width: 300px;
background: #ebebeb;
}
#container:before {
content: " ";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 0 40px 20px;
border-color: #ebebeb #ebebeb #ebebeb white;
}
<div id="container"></div>
Note that you can adjust the depth of the cut out by changing the last value in the border-width relative to the other values
I have this div here
<div class="example"></div>
and here is the CSS
.example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}
What I am trying to do is add line after this box that is touching the right side of the box in the middle, how would I accomplish this?
You need to use ::after pseudo-element
.example {
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
box-sizing: border-box;
}
.example::after {
content: " ";
display: block;
position: absolute;
height: 5px;
background: black;
width: 40px;
left: 100%;
top: calc(50% - 2px);
}
<div class="example"></div>
.example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}
.example:after{
content:"";
position:absolute;
top:50%;
left:100%;
width:200px;
height:2px;
margin-top:-1px;
background:red;
}
<div class="example"></div>
.example:after {
content: '';
width: 100px;
height: 5px;
background: black;
display:inline-block;
position: absolute;
top: 50%;
left: 100%;
transform: translate(0,-100%);}
There are multiple ways to do that. You could, for example add following css:
.example:after {
content: '';
position: absolute;
top: 50px;
left: 100%;
border-top: 1px solid #000;
width: 100px;
}
I am looking for a way of creating a "Spiral" in CSS.
Here is an image to make it a bit more clear what I am trying to achieve:
So a partial circle with an outline that gets bigger.
Ideally I want to be able to set the length of the Spiral. (from (0) to 360°)
Also it would be nice to place a cricle at the end (just like in my sample)
Here is a codesnippet of what I came up so far.
* {margin: 0; padding: 0;}
div {
box-sizing: border-box;
width: 200px; height: 200px;
margin: 0 auto;
background: #fff;
border-top: 30px solid #fd0;
border-right: 40px solid #fa0;
border-bottom: 60px solid #f50;
border-left: 0 solid blue;
border-radius: 50%;
position: relative;
}
div::after { /* kreis */
content: "";
position: absolute; top: 80%; left: 8%;
width: 90px; height: 90px;
background: red;
border-radius: inherit;
}
div::before { /* hide the stuff that is too much. */
content: "";
position: absolute; top: 50%; left: 0;
width: 50px; height: 100%;
background-color: inherit;
}
<div></div>
I would also accept an svg way of doing this.
this what i came up with some tweaking Css and html i guess it similar to the image DEMO Not tested on IE not sure whether responsive it is
.spiral{
background-color:black;
width: 100px;
height:100px;
border-radius:50%;
}
.spiral:before{
content: '';
width: 27px;
height: 43px;
background-color: white;
position: absolute;
border-top-right-radius: 144px;
border-bottom-left-radius: 61px;
border-bottom-right-radius: 88px;
left: 53px;
top: 25px;
}
.spiral:after{
content: '';
width: 68px;
height: 52px;
background-color: white;
position: absolute;
left: 4px;
top: -11px;
transform: rotateZ(200deg);
}
<div class="spiral"></div>
Can anyone figure out a fix for making the table version look like the div version in IE9?
http://jsfiddle.net/tCT9b/2/
<table class="foo"></table>
<div class="foo"></div>
div.foo {
float: right;
}
table.foo {
float: left;
}
.foo {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #999;
border-radius: 5px;
position: relative;
}
.foo:empty:before {
position: absolute;
background: #eee;
width: 50px;
height: 50px;
content: 'None';
border: 1px solid #999;
border-radius: 5px;
top: 50%;
left: 50%;
margin-left: -25px;
margin-top: -25px;
text-align: center;
display: block;
line-height: 50px;
}