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;
}
Related
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
So I want to create something what you can see in Codepen however as I was getting into point to add arrows into both ends I realized that I have started that all out in a wrong way. My CSS will grow way to long for such small thing and will have probably problem with other elements on the page. I could not figure out what's the best approach to create these left and bottom lines with arrows in both ends and value from attribute so I hope some of you can point me out to right direction.
.ruler-left:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom {
position: relative;
display: inline-block;
text-align: center;
width: 225px;
height: 2px;
float: right;
margin-right: 5px;
margin-top: 110px;
font-size: 0px;
}
.ruler-bottom:before {
content: '';
position: absolute;
top: -5px;
left: 0;
border-top: 5px solid Gainsboro;
border-right: 10px solid black;
border-bottom: 5px solid Gainsboro;
background-color: Gainsboro;
}
.ruler-bottom:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
<div class="shape-container">
<hr class="ruler-left" data-height="30 mm">
<div class="shape">Shape image</div>
<hr class="ruler-bottom" data-width="30 mm">
</div>
I played with your problem a little...
See my Fiddle
I kept most of your CSS, but dropped the :before pseudos wich were rendering arrows.
I kept the :after pseudos wich show dimentions.
To draw the left and right arrows, I used classes wich only draw a triangle with the border of an element.
I applied those two classes on another element (I used hr again... Could be something else) placed before and after your «ruler» hr.
These three hr are wrapped in a div for positioning and rotation.
CSS
.arrowRight{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent #000000;
}
.arrowLeft{
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 16px 8px 0;
border-color: transparent #000000 transparent transparent;
}
/* -------- */
.shape {
position: absolute;
margin-left: 30px;
margin-top: 5px;
background: white;
height: 225px;
width: 225px;
text-align: center;
line-height: 230px;
}
.shape-container {
display: block;
position:absolute;
width: 260px;
height: 260px;
background: Gainsboro;
padding: 2px;
}
.ruler-left-div {
position:absolute;
left:-104px;
top:110px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
transform: rotate(-90deg);
}
.ruler-left {
display: inline-block;
width: 190px;
height: 2px;
}
.ruler-left:after {
content: attr(data-width);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
.ruler-bottom-div {
position:absolute;
bottom:10px;
right:8px;
display: inline-block;
text-align: center;
width: 225px;
height: 20px;
}
.ruler-bottom {
display: inline-block;
width: 190px;
height: 2px;
margin-bottom:8px;
}
.ruler-bottom:after {
content: attr(data-height);
display: inline-block;
position: relative;
top: -15px;
padding: 0 10px;
background-color: Gainsboro;
color: #8c8b8b;
font-size: 12px;
line-height: 25px;
}
HTML
<div class="shape-container">
<div class="ruler-left-div"><hr class="arrowLeft"><hr class="ruler-left" data-width="30 mm"><hr class="arrowRight"></div>
<div class="shape">
shape image
</div>
<div class="ruler-bottom-div"><hr class="arrowLeft"><hr class="ruler-bottom" data-height="30 mm"><hr class="arrowRight"></div>
</div>
I'd like to connect some CSS circles with a vertical line between them.
I've attempted to use the pseudo-element :after selector as follows:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 18px;
top: 0;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
But I'm not getting any result at all.
Photo for reference of what I'd like to accomplish:
Use the :before pseudo element this way:
* {font-family: 'Segoe UI'; font-size: 10pt;}
.circle {position: relative; border: 2px solid #999; border-radius: 100%; width: 50px; line-height: 50px; text-align: center; margin-top: 50px; background-color: #fff; z-index: 2;}
.circle:first-child {margin-top: 0;}
.circle:before {position: absolute; border: 1px solid #999; width: 0; height: 50px; display: block; content: ''; left: 50%; z-index: 1; top: -54px; margin-left: -1px;}
.circle:first-child:before {display: none;}
<div class="circle">Step 1</div>
<div class="circle">Step 2</div>
<div class="circle">Step 3</div>
You do have to give your :before element a width and a height if you want ti to appear as a line. Have a look at this:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
border: 1px dotted;
border-width: 0 0 0 1px;
width: 1px;
height: 100px;
}
<div class='circle'></div>
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;
}
I need show a notication modal window.. But since its a fluid layout the position changes on bigger screens.
How can i position the modal window below the link like in image. I want it in the exact position. How do i go about doing it?
This should work as a base for you.
HTML
<div class="notificaton-bar">
<div class="notice">Notification
<div>
Here is the applicable note.
</div>
</div>
</div>
CSS
.notificaton-bar {
background-color: #999999;
padding: 0 10px;
}
.notice {
position: relative;
display: inline-block;
background-color: inherit;
font-size: 1.5em;
min-width: 140px;
padding: 10px 5px;
text-align: center;
}
.notice div {
display: none;
width: 130px;
padding: 10px;
font-size: .75em;
text-align: left;
background-color: inherit;
border-radius: 10px;
position: absolute;
top: 100%;
left: 50%;
margin-left: -75px;
margin-top: 10px;
}
.notice div:before {
content: '';
display: block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 11px solid #999999;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.notice:hover div {
display: block;
}