So i have a slideshow, here's the css to start with:
#slideshow {
position:relative;
height:300px;
width: 477px;
border: 1px solid #FFF;
float: left;
margin-bottom: 30px;
margin-left: 20px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
And then i have a box, that i want to be on top of the slideshow.. but right now its under the slideshow, even if its position absolute..
#regForm {
position: absolute;
top: 120px;
left: 500px;
background: #000;
color: #FFF;
width: 500px;
height: 240px;
border: 6px solid #18110c;
text-align: center;
margin: 40px;
padding: 1px;
opacity: 0.75;
-moz-opacity: 0.75; /* older Gecko-based browsers */
filter:alpha(opacity=75); /* For IE6&7 */
}
How should i positioning it right so the div box comes on top of the slideshow and not under?
Add z-index:11; to the #regForm style declaration.
Related
I am trying to insert a close button on top right of the hover image in CSS.
However the image appear in the middle of the hover image. I am unsure of which area i made a mistake.
jsfiddle
these are my css code , also i have insert them to jsfiddle for my demo
body {
margin: 0;
padding: 0;
background: #EEE;
}
#pagecenter {
background-color: transparent;
width: 1200px;
min-width: 1200px;
height: auto;
min-height: 100%;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
position: relative;
border-collapse: collapse;
}
.wrap {
overflow: hidden;
margin: 50px;
}
/*20 for 5 box , 25 for 4 box*/
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
/*border width control*/
.boxInner {
position: absolute;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
overflow: hidden;
background: #66F;
}
.boxInner img {
height: 100%;
width: 100%;
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
/*This hover is for small image*/
.thumbnail:hover img{
cursor:pointer;
border: 1px solid transparent;
}
/*This hide the image that is in the span*/
.thumbnail span{
position: absolute;
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
/*This is for the hidden images, to resize*/
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
width:100%; /* you can use % */
height: auto;
padding: 2px;
}
/*When mouse over, the hidden image apear*/
.thumbnail:hover span{
position:fixed;
visibility: visible;
max-width:600px;
top: 0;
left: 0;
right:0;
bottom:0;
margin: auto;
z-index: 200;
}
.close{
position:absolute;
right:-10px;
top:-10px;
display:none;
z-index:1;
}
.thumbnail:hover span .close{
display:block;
}
you will need to give width and height
JS Fiddle
.thumbnail span .close{
position:absolute;
right:-10px;
top:-10px;
display:none;
width:30px;
height:30px;
z-index:1;
}
How can I center a div horizontally and vertically and adjust height to fit content?
fiddle
Here is my html code:
<div class="sprite">
</div>
<div class="content">
<span>close</span>
<div class="centered">
lorem lipsum.....
</div>
</div>
And css:
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.6;
}
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
height:30%;
width:30%;
text-align:center;
}
.content span{
position:absolute;
top:0px;
right:0px;}
.centered{
height:100%;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
This is what I want:
Edit .content class to have following css and remove position absolute
height:auto;
overflow:visible;
In your .content class, remove
position: absolute;
and add
margin-top:24%; to align it in vertically middle while taking the height of the content
absolute positioned attrib are rather difficult to style!
Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/
EDIT
Here you go mate
CSS to ammend :
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
/* height: 100%; */
background-color: gray;
opacity: 0.6;
border:1px solid #FFF;
text-align:center;
}
.content{
border:1px solid red;
position:relative;
z-index: 21; /* change this to less than 20 to overlay under sprite on scroll*/
margin:auto;
padding:10px;
width:30%;
margin-top:24%;
text-align:center;
}
.content span{position:absolute;right:0;top:0;text-align:right; border:1px solid #F00000}
Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/2/
Trick was to align a absolute <span> in relative content class....
.content{
border:1px solid red;
position:relative;
margin:auto;
padding:10px;
width:30%;
margin-top:4%;
text-align:center;
}
.content span{position:absolute;right:0;top:0;text-align:right;}
.sprite{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background-color: gray;
opacity: 0.6;
border:1px solid #FFF;
text-align:center;
}
does that help
replace your css with mine...
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.6;
}
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
width:30%;
text-align:center;
}
.content span{position:absolute; top:0px; right:0px;}
.centered{
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
You are making this hard on yourself, just change the Position to be Relative in the class content, see below;
.content{
border:1px solid red;
z-index:21;
position: absolute;
margin:auto;
padding:10px;
left: 0px;
top: 0px;
bottom:0px;
right:0px;
height:30%;
width:30%;
text-align:center;
}
I used 2 div's with fixed positioning, and after resize - opera doesen't redraw elements.
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
}
#label {
position: fixed;
bottom:0px;
left: 50%;
background-color: transparent;
z-index: 9999999;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
<div id="wrapper">
<div id="label">content</div>
</div>
U can see this bug here
http://jsfiddle.net/6Cm6J/1/
Just load page in Opera browser and resize window.
Pls help
Write this css
Live Demo
css
#wrapper{
position:fixed;
z-index:10000;
height: auto;
background-color: transparent;
margin: 0;
bottom:0;
left:0;
right:0;
}
#label {
position: relative;
bottom:0px;
left: 50%;
background-color: transparent;
height: 40px;
width: 200px;
border: 1px solid red;
margin-left:-100px;
}
I added carousel in my rails application. Which is working fine in firefox.
But when i saw chrome, I came to know that the position of the "next" button has been changed. I didn't found any fix till now.
Following is the css for all carousel
.proposal-section .carousel-previous {
background: url("/assets//previous.png") no-repeat scroll 0 0 transparent;
position: absolute;
margin-left: 3px;
margin-top: 70px;
z-index: 1000;
}
Chrome shows next button at extreme left of page with this property value, "margin-left: -35;", but ff is fine.
And ff shows this button out of view(on right hand side) on "margin-left: 950;" but fine in chrome. How do I fix this .
.proposal-section .carousel-next {
background: url("/assets//next.png") no-repeat scroll 0 0 transparent;
position: absolute;
margin-left: -35px;
margin-top: 71px;
}
.proposal-section .carousel-control {
overflow:hidden;
display:inline-block;
vertical-align:middle;
width:30px;
height:32px;
cursor:pointer;
line-height:999px;
zoom:1;
border:0;
text-indent:-9999px;
}
.proposal-section .carousel-control:hover {
-moz-opacity:.7;
opacity:0.70;
filter:alpha(opacity=70);
}
.proposal-section .carousel-wrap {
display: inline-block;
vertical-align: middle;
width: 99%;
border: 3px solid #473161;
border-radius: 5px;
height: 174px !important
}
Try this, it will make buttons in both the browsers (may be to all):
.proposal-section .carousel-control {
overflow:hidden;
display:inline-block;
vertical-align:middle;
width:30px;
height:32px;
cursor:pointer;
line-height:999px;
zoom:1;
border:0;
text-indent:-9999px;
}
.proposal-section .carousel-control:hover {
-moz-opacity:.7;
opacity:0.70;
filter:alpha(opacity=70);
}
.proposal-section .carousel-wrap {
display: inline-block;
vertical-align: middle;
width: 99%;
border-radius: 5px;
height: 174px !important
}
.proposal-section .carousel-next {
background: url("/assets//next.png") no-repeat scroll 0 0 transparent;
position: absolute;
margin-left: 5px;
margin-top: 65px;
height: 45px;
width: 23px;
opacity:0.4;
filter:alpha(opacity=40);
-moz-opacity: .4;
}
.proposal-section .carousel-previous {
background: url("/assets//prev.png") no-repeat scroll 0 0 transparent;
position: absolute;
margin-left: -10px;
margin-top: 65px;
height: 45px;
width: 23px;
z-index: 1000;
opacity:0.4;
filter:alpha(opacity=40);
-moz-opacity: .4;
}
Using this block of code to create an overlay and a box.
problem: the box is inheriting the opacity of parent and I will like it to have no transparency.
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}
<div id="overlay"><div id="formed">Enter Here</div></div>
That's the way it works, unfortunately. For the parent div, you can try using RGBA for the background color - background: rgba(0, 0, 0, 0.5); http://css-tricks.com/rgba-browser-support/
For something like this (assuming you don't need to support IE7 or earlier), apply the opacity to a pseudo-element as this fiddle does. Code:
CSS
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
text-align: center;
}
#overlay:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 0;
}
#formed{
background-color: white;
width:300px;
height:200px;
position:relative;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 1;
}
Thanks Guys. I was able to solve the problem by doing two things:
Taking the child div outside it's parent.
<div id="overlay"></div><div id="formed">Here</div>
Altering the positioning of both div's
#overlay{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
text-align: center;
display: none;
}
#formed{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: white;
width:300px;
height:200px;
position: absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
z-index: 12000;
border: 2px solid #eee;
display: none;
}