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;
}
Related
How to reproduce this shape using CSS ?
How to shift the top-right corner ?
<span>Shift top-right corner</span>
<style>
span {
border: 4px dashed blue;
border-radius: 8px 0px 8px 0px;
padding: 6px;
font-size: 18px;
display: inline-block;
}
</style>
Something like this but still hard to master. I would consider using an image.
span {
border: 2px dashed blue;
border-radius: 8px 0px 8px 0px;
padding: 6px;
font-size: 18px;
display: inline-block;
background:#0CF;
position:relative;
box-sizing: border-box
}
span:after{
content:"";
width: 15px;
height:90%;
position:absolute;
right:-8px;
top:-2px;
background:#0CF;
transform: skewX(-20deg);
border-top: 2px dashed blue;
border-right: 2px dashed blue;
box-sizing: border-box
}
<span>Shift top-right corner</span>
if you need for the opposite side
.text {
z-index: 13;
position: relative;
}
.info {
margin: 100px;
padding: 6px 0px 6px 6px;
margin-top: 20px;
font-size: 18px;
display: inline-block;
background: #000;
color: #fff;
box-sizing: border-box;
position: relative;
}
.info:after {
content: '';
width: 35px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: 1;
left: -20px;
top: -0px;
background: #000;
transform: skewX(20deg);
box-sizing: border-box;
}
<div class="info">
<div class="text">Shift top-right corner</div>
</span>
I wanted to set up an image as a transparent background image for my website but anything I try just doesn't wanna work. I've seen on the internet how it works for others, but for me it just doesn't. I converted my image from png to jpeg, but that didn't brought success
Here is my full CSS file
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: url(DS Organization logo.jpg)
}
.header {
width: 30%;
margin: 50px auto 0px;
color: white;
background: #050505;
text-align: center;
border: 1px solid #000307;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 30%;
margin: 0px auto;
padding: 20px;
border: 1px solid #000000;
background: rgb(99, 99, 99);
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #050505;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
The url-path is treated as a string and it needs to be enclosed in quotes. For more information on url(), visit mdn
I've try to made in CSS a "clamp effect".
See image:
https://s27.postimg.org/j6m72z5kj/h_transylvania.png
I do not know exactly how this effect is named, so I called him "clamp effect".
Can someone tell me why ::after does not working?(to can have that "clamp effect" - see link with the image).
My code:
h2 {
margin-top: 40px;
}
.container {
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 1px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-right-color: transparent;
position: absolute;
top: 29px;
left: 0;
}
<div class="container">
<h2>Beautiful Flower</h2>
<img class="mypicture" src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Frangipani_flowers.jpg" />
<div class="recomandded">RECOMMENDED</div>
</div>
An absolute element will relate to it's parent only if it's in non static, default, position, therefore I've added position: relative to the container, in the example.
I've also fixed the required definitions to match the provided example image.
Here is the fixed CSS:
h2 {
margin-top: 40px;
}
.container {
position: relative;
background-color: #fff;
width: 250px;
height: auto;
padding: 20px;
}
img.mypicture {
width: 230px;
}
.recomandded {
position: absolute;
display: inline-block;
top: 125px;
left: 8px;
color: #fff;
background-color: #ff0047;
font-size: 13px;
font-weight: 700;
font-family: Lato,Arial,sans-serif;
padding: 3px 16px 3px 6px;
border-radius: 4px 0 0 4px;
box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.4);
}
.recomandded::after {
content: "";
display: inline-block;
border: 6px solid #dd0843;
border-bottom-color: transparent;
border-left-color: transparent;
position: absolute;
top: 20px;
left: 0;
}
Or have yourself a fiddle example
Hope it helps
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>
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.