I've tried making a fieldset with the react app but it seemed difficult so i managed to make it look like with some css, and now i'm pretty curious about how to border the comlpete box just like this
<div class="fieldset">
<div class="legend">Text</div>
Text2
</div>
Customised Styles:
.fieldset{
width: 200px;
height: 300px;
border: 1px solid black;
padding: 30px;
margin: 30px;
position: relative;
}
.legend{
font-size: 45px;
position: absolute;
top: -8%;
left: 50%;
transform: translate(-50%);
background: #fff;
}
this way you can goes near your goal.
Hope it's work for you.
.fieldset{
border: 1px solid black;
padding: 30px;
margin: 100px 30px 30px;
position: relative;
font-size: 45px;
width: 200px;
border-radius: 10px;
}
.legend{
position: absolute;
width: fit-content;
top: -74px;
left: 0;
right: 0;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
border-bottom: 1px solid #fff;
border-radius: 10px 10px 0 0;
}
<div class="fieldset">
<div class="legend">Title</div>
Content
</div>
Related
I have code that looks like:
.bubble {
background-color: white;
border-radius: 12px;
border: 1.3px solid black;
width: 90%;
max-width: 800px;
padding: 8px 12px;
position: relative;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
text-align: justify;
word-break: break-word;
hyphens: auto;
}
.tail {
position: absolute;
overflow: hidden;
top: 12px;
left: -10px;
height: 12px;
width: 10px;
}
.tail::after {
background: #ffffff;
border: 1.3px solid black;
content: '';
height: 100%;
position: absolute;
right: -6px;
top: -9px;
transform-origin: 0 100%;
transform: rotate(47deg);
width: 100%;
}
<div class='bubble'>
<div class='tail'></div>
Hi!
</div>
<style>
However, on MacOS Chrome there is a thin line in place of the border where there shouldn't be any line at all. Why is that happening and how can I remove it? Thanks!!
I'm trying to draw a circle with tick/checkmark inside it using pure css3
.success-checkmark {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 17px; height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
How can i achieve i have tried with the above code?
You can use content: '✔'; only on pseudo elements, so try using the following selector:
.success-checkmark:after {
content: '✔';
position: absolute;
left:0; top: 2px;
width: 20px;
height: 20px;
text-align: center;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></div>
.wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.circle {
position: relative;
background: #00B01D;
border-radius: 100%;
height: 120px;
width: 120px;
}
.checkMark {
position: absolute;
transform: rotate(50deg) translate(-50%, -50%);
left: 27%;
top: 43%;
height: 60px;
width: 25px;
border-bottom: 5px solid #fff;
border-right: 5px solid #fff;
}
<div class="wrapper">
<div class="circle">
<div class="checkMark"></div>
</div>
</div>
I found a template online to which I made modifications. Kindly check if this works for you.
:root {
--borderWidth: 7px;
--height: 25px;
--width: 12px;
--borderColor: white;
}
body {
padding: 20px;
text-align: center;
}
.check {
display: inline-block;
transform: rotate(45deg);
height: var(--height);
width: var(--width);
border-bottom: var(--borderWidth) solid var(--borderColor);
border-right: var(--borderWidth) solid var(--borderColor);
}
.behind {
border-radius: 50%;
width: 40px;
height: 40px;
background: black;
}
<div class="behind">
<div class="check">
</div>
</div>
css
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
}
vertical adjustment
line-height:20px;<--- adjust vertical alignment
.success-checkmark:after {
content: '✔';
position: absolute;
text-align: center;
line-height:20px;
width: 90px;
height: 90px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 50%;
box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
}
<div class="success-checkmark"></div>
I have an old piece of code that pops up a message on moseover. It is coded with absolute positioning and works fine. But I need to change it to relative positioning so the code works better with mobile devices. In this jsfiddle the top line is using relative and doesn't work. The bottom line is using absolute and is working. Would someone please point out where I am going wrong? Here's my code:
<style>
.tooltips {
position: relative;
display: inline;
}
.spank{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spank:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spank:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showhim:hover .spank{
display : block;
left:5px;
top:1px;
margin-left: 50px;
z-index: 999
}
.showhim {
left: 50px;
position: relative;
top: 80px;
width: 100px;
}
.spankme{
position: absolute;
width:250px;
color: #000;
background: #FFFFFF;
border: 1px solid #ccc;
padding:10px;
text-align: center;
display:none;
border-radius: 7px;
box-shadow: -1px 0px 7px #ccc;
}
.spankme:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -12px;
width: 0; height: 0;
border-top: 10px solid #ccc;
border-right: 10px solid transparent;
border-left: 12px solid transparent;
}
.spankme:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #FFFFFF;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.showme:hover .spankme{
display : block;
left: 10px;
top:10px;
margin-left:50px;
z-index: 999
}
.showme {
position: relative;
width: 100px;
}
</style>
<div class="showme">
<div class="showme tooltips">Mouse me</div>
<span class="spankme">Text on popupPlace</span>
</div>
<div class="showhim">
<div class="showit tooltips">Mouse me</div>
<span class="spank">Text on popupPlace</span>
</div>
For the hover that applies to .spankme, you aren't targeting the parent like you did with .spank. The following will allow the parent to reference the child on hover.
Change
.showme:hover .spankme
to
.showhim:hover .spankme
Also, you have three z-index: 999 properties that are missing a closing semi-colon.
I am trying to make a popover with an error, but I am having trouble making the arrow appear above the border of the div I am attaching it to. I would appreciate any help.
This is what I have so far...
This is the CSS code I am using, but cant get it to work:
1.DIV for the entire popover:
<div class="info-popover">
<div class="inner"></div>
<div class="arrow"></div>
</div>
2.CSS for each:
.info-popover {
height: 250px;
margin-top: -255px;
position: absolute;
width: 400px;
}
.info-popover .inner {
background-color: #FFFFFF;
border: 1px solid #003366;
border-radius: 10px 10px 10px 10px;
height: 240px;
margin-top: 0;
width: 100%;
}
.info-popover .arrow {
background: url("/images/dock/popover-arrow.png") no-repeat scroll center -5px transparent;
height: 15px;
position: relative;
width: 100%;
z-index: 999;
}
CSS solution:
http://jsfiddle.net/wn7JN/
.bubble
{
position: relative;
width: 400px;
height: 250px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after
{
content: "";
position: absolute;
bottom: -25px;
left: 175px;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
.bubble:before
{
content: "";
position: absolute;
top: 250px;
left: 174px;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}
Easiest way:
HTML:
<div class="meow">
</div>
CSS:
.meow {
height: 100px;
width: 300px;
margin: 30px;
background: linear-gradient(#333, #222);
-o-border-radius: 4px;
-ms-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.meow:after {
content: " ";
border-top: 11px solid #222;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
position: relative;
top: 111px;
right: -140px;
}
Live preview: CodePen.io
Just do some few edits.
Try this:
HTML
<div class="info-popover">
<div class="inner"></div>
<p class="arrow"></p>
</div>
CSS
.info-popover {
position: relative;
/* any other CSS */
}
.arrow {
background: url("/images/dock/popover-arrow.png") no-repeat 0 0;
height: 15px;
width: 20px; /* width of arrow image? */
display: block;
position: absolute;
bottom: -15px;
left: 0; margin: 0 auto; right: 0; /* to center the arrow */
}
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
Maybe try something like this: http://jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
This is not possible with CSS.
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
Use z-index property.
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.