I'm trying to get a border around a fieldset and its legend, without having the bottom part of this border on the legend.
Here's the default behavior:
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
}
legend {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 15px;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
I would like the legend to be "part of the fieldset", like this:
I tried many tricks, playing with border-bottom and box-shadow without success.
Does anyone knows a way to achieve this properly?
Thanks.
If you add an inner <span> to the legend, you can acheive this effect with a little css hackery.
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
margin-top: 20px;
}
legend {
border: 1px solid #ccc;
border-bottom: 0;
border-radius: 5px 5px 0 0;
padding: 0 18px;
position:relative;
top: -10px;
}
legend span {
position:relative;
top: 8px;
}
<fieldset>
<legend><span>Legend</span></legend>
</fieldset>
If you can't add the inner span, you can get a similar effect, but it's not quite as perfect.
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
margin-top: 20px;
}
legend {
border: 1px solid #ccc;
border-bottom: 0;
border-radius: 5px 5px 0 0;
padding: 8px 18px 0;
position:relative;
top: -14px;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
Here is a solution idea with no added markup. Use a pseudo element with the same background color as the legend and fieldset to hide the bottom portion of the legend.
Here's a sample. Tweak as needed.
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
position: relative;
margin-top: 30px;
}
legend {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 15px;
position: absolute;
top: -25px;
left: 20px;
background-color: #fff;
}
legend::after {
content: '';
background-color: #fff;
height: 7px;
right: -1px;
left: -1px;
bottom: -1px;
border-radius: 0 0 5px 5px;
position: absolute;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
Reading all answers, I came to a satisfying solution, without any shift, nor additional markup:
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
}
legend {
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 15px;
line-height: 18px;
}
legend:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
height: 13px;
z-index: 1;
border: 1px solid white;
border-top: none;
border-radius: 0 0 5px 5px;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
Related
So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
For this particular example you ca do this:
.wrapper{
display: inline-block;
}
.outter-h2 {
float: left;
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
margin-top: 4%;
}
.outter-span {
float: left;
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 0 10px;
}
<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>
You can easily create a fake space using CSS box-shadow property (this is assuming the shadow color and the background color are the same)
All you have to do is add this line to .outer-span:
box-shadow:0 0 5px 20px #FFF;
This solution keeps the HTML intact.
Demo:
body {
background: #FFF;
}
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
position: relative;
z-index:1;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
position: relative;
z-index:3;
box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span><h2 class="outter-h2"></h2>
.outter-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 10px;
float:left;
}
try this i think this is the solution you wanted. please let me know if i am correct or not
This is done(corrected) exactly what you want.
.outer-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outer-span {
background: #fff;
padding: 0px 10px;
color: #bec3c7;
margin: 10px;
float:left;
}
<h2 class="outer-h2"></h2><span class="outer-span">?</span><h2 class="outer-h2"></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span>
<h2 class="outter-h2"></h2>
Click here for DEMO
I ave a div that popups up over my input boxes (javascrip auto complete). The div currently pops up behind the input boxes, how can I have this appear ontop?
screenshot of issue:
CSS Code is:
body {
font-family: Helvetica;
font-size: 11px;
color: #000;
}
h3 {
margin: 0px;
padding: 0px;
}
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
HTML Code is:
<div>
<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
</div>
Thanks as always for the help,
Try using z-index property on .suggestionsBox
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 999; <------ Here
}
Set the z-index property.
.suggestionsBox {
position: absolute;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #000;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
z-index: 100;
}
I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two. As this is a little hard to explain I created a jsFiddle here that shows what I have already.
Here is a screenshot
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
You can do this without the extra DIV for the arrow by using a UTF-8 "right arrow" and the :before pseudo class. This will give you a little more control over the style of the arrow.
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: relative;
margin-top:15px;
text-shadow: 0 1px #FFFFFF;
}
#alertdetails::before {
content:"\25b6";
position:absolute;
top:20px;
left:-20px;
font-size:60px;
color:#ffffff;
}
You just need to add a second triangle that is slightly bigger.
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-white"></div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
#arrow-white{
position: absolute;
top: 44px;
left: 15px;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 22px solid #ffffff;
}
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.
I am trying to work this shape around an ad but still allow for normal text flow within it. You can see it is a quote and i have been making different id's and class's for curves. So it is really 3 elements with the borders overlapping as of right now but I feel it is making more work than it needs to be.
http://jsfiddle.net/dUKQe/
This is not 100% perfect yet (there seems to be some slight pixel variation between browsers to hammer out--I've spent too long on it already), but in general, this gets really close to what you seek through judicious use of pseudo-elements.
See the example fiddle.
HTML
<div id="text3" class="text">
<h4>Bruce Lee</h4>
<p><q>Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way around or through it. If nothing within you stays rigid, outward things will disclose themselves. Empty your mind, be formless. Shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot. Now, water can flow or it can crash. Be water, my friend.</q>
</p>
</div>
CSS
#text3 {
position: absolute;
top: 5px;
left: 5px;
z-index: 0;
}
.text h4 {
width: 228px;
color: #ffffff;
background-color: #012E40;
margin: 5px 5px 0 5px;
padding: 10px 10px 0 10px;
border: 3px solid #000000;
border-bottom-width: 0;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
position: relative;
}
.text h4:before {
content: '';
position: absolute;
width: 3px;
height: 3px;
right: -3px;
bottom: 0;
background-color: #012E40;
}
.text h4:after { /*upper light blue bkg */
content: '';
display: block;
background-color: #1B4E59;
border: 2px solid #000000;
width: 210px;
height: 3em;
padding: 5px;
margin-top: -9px;
margin-left: 2px;
margin-bottom: -2px;
border-bottom-width: 0;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
position: relative;
top: 10px;
z-index: 1;
}
.text p {
color: #ffffff;
margin: -3em 5px 5px 5px;
padding: 0 5px 5px;
width: 448px;
position: relative;
}
.text p:before { /* inset border corner */
content: '';
display: block;
width: 200px;
height: 3em;
float: right;
margin: -3px 0px 3px 15px;
border: 3px solid #000000;
border-top-width: 0;
border-right-width: 0;
-moz-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
.text p:after { /* lower dark blue bkg */
content: '';
display: block;
position: absolute;
top: 3em;
right: 0;
bottom: 0;
left: 0;
margin-top: -3px;
background-color: #012E40;
border: 3px solid #000000;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
z-index: -1;
}
.text p q {
display: block;
margin: 0 10px 10px;
padding: 5px;
position: relative;
z-index: 2;
}
.text p q:before { /* 2nd inset border corner */
content: '';
display: block;
height: .5em;
width: 202px;
position: absolute;
top: 3em;
right: 3px;
border: 2px solid #000000;
border-top-width: 0;
border-right-width: 0;
-moz-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
z-index: 3;
}
.text p q:after { /* lower light blue bkg */
content: '';
display: block;
position: absolute;
top: 3.5em;
right: 0;
bottom: 0;
left: 0;
background-color: #1B4E59;
border: 2px solid #000000;
border-top-width: 0;
-moz-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
z-index: -1;
}