I have modified the bootstrap alerts so they show on the top of the content without moving down any other div, but the issue i have is that the application can show at the same time warnings, errors or success messages but they are overlapping each other.
Here is my alert's css:
.alert {
position: absolute;
z-index: 999999;
width: 800px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Edit: Here is the Example in jsfiddle
Edit 2: Thanks to Praveen, here is the code that suits my app: Final code on jsfiddle
Since the position is absolute, you are facing this problem. Make them relative this way:
.alert {
position: relative;
Fiddle: http://jsfiddle.net/praveenscience/Q6nA9/2/
Related
i have not used this module much so having very little knowledge.
I am having a very strange issue of multi select drop down is going over the header I found the solution for this is to change the z-index of it but can do it, below I have shared my css code
.multiselect-dropdown .dropdown-list {
position: absolute;
padding-top: 6px;
width: 100%;
z-index: 10;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
margin-top: 10px;
box-shadow: 0 1px 5px #959595;
}
this shows when i inspect it
enter image description here
I am having an issue with a shadow displaying incorrectly in CSS. It is set to drop on on the bottom and to the right of the box but for whatever reason it is being cut off and I can't work out why.
JS Fiddle
http://jsfiddle.net/jyb5V/
#content {
padding: 0 270px 0 0;
margin-bottom: 50px;
height: 800px;
background-image: url("images/mainbg.jpg");
border:1px solid #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
box-shadow: 4px 4px 2px #000000;
}
Website
http://www.debbie.travismoore.co.uk/
Any help is appreciated,
Thanks
Remove overflow: hidden;
#container {
width: 100%;
float: left;
overflow: hidden; // remove this line
}
Demo
I have a fiddle here:
http://jsfiddle.net/45jQm/6/
How do I get the logo portion to be curved also without specifying? Seems this should be possible. Here is the code...
#wrapper {
position: relative;
background-color:rgba(255,255,255,0.5);
width:200px;
min-height: 985px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 20px;
box-shadow: 10px 0px 10px -7px #333, -10px 0px 10px -7px #333;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;
}
.logo {
position: static;
background-color:rgba(0,0,102,0.7);
padding-top: 10px;
}
.logo {
....
border-radius: inherit;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
http://jsfiddle.net/45jQm/11/
Adding the overflow:hidden to the parent div should hide the corners from any child div. No need to add any css to the child div (like the logo in your example).
.parent {
…
border-radius: 5px %* or whatever you choose *%
overflow: hidden;
}
an example: https://jsfiddle.net/uxrzgojh/
This answer is for the future explorers!
So I am attempting to make a really simple lightbox that I can use for something, however for whatever reason the div thats supposed to darken the background is canceling out any background attribute.
HTML
<div class="zoom-placeholder">
<div class="zoom-container">
<img class="zoom" src="image.png" />
</div>
</div>
CSS
.zoom {
margin: 1em 0em; padding: 1em;
background: #f9f9f9;
border: 1px solid #ccc; border-bottom-width: 2px;
box-shadow: rgba(0,0,0,0.075) 0px 2px 3px, inset rgba(255,255,255,0.5) 0px 0px 25px;
user-select: none;
user-drag: none;
}
.zoom-container, .zoom-placeholder {display:table-cell}
.zoom-container.open {
position: fixed;
z-index: 999;
width: 100%; height: 100%;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
background: rgba(0,0,0,0,0.5); /* <--- Not Working --- */
}
.zoom-container.open .zoom {
width: auto;
height: auto;
position: absolute;
margin: 0em;
border-color: rgba(0,0,0,0.1);
box-shadow: rgba(0,0,0,0.5) 0px 10px 30px, inset rgba(255,255,255,0.5) 0px 0px 25px;
}
There isn't anything I have that's writing it over but its still not displaying correctly.
You can see this in use here:
http://jsfiddle.net/JamesKyle/8H7hR/34/
Look at the CSS background: rgba(0,0,0,0,0.5); /* <--- Not Working --- */ is not working because that's invalid CSS3 should be background: rgba(0,0,0,0.5);
Notice the missing 0 you had 1 too many. R ed, G reen, B lue, A lpha transparency. :]
Your problem is you have too many parameters in the statement that is not working (you have 5 when there should only be four):
background: rgba(0,0,0,0.5);
Side note: please improve your acceptance rate.
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.