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;
}
Related
It's not visible everywhere, just on some devices. Literally a huge white field below footer. Another person has shown it to me, it's not visible even on my PC.
Here's a visualisation of what I am talking about: nikosis.mzonespace.co.uk/108.jpg
Here's a CSS code:
Footer
//=======================================================================*/
#footer {
position: relative;
}
#footer .widget{
margin: 0;
}
#footer .ft-bg{
background: url("../images/icons/bg-slider-matt-1.png") repeat-x top center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
#footer .ft-bg.style2{
background: url("../images/icons/bg-footer-style2.png") repeat;
top: 100px;
bottom: 80px;
opacity: 0.2;
}
#footer .ft-img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
#footer .ft-img img{
width: 100%;
max-width: none;
height: auto;
}
#footer a{
color:#efefef;
}
#footer h3 span{
text-transform: uppercase;
font-size: 24px;
font-weight: 300;
color: #464646;
}
#footer-wrapper{
color: #464646;;
padding:163px 0 0;
width: 100%;
max-width: 1170px;
margin: 0 auto;
font-size: 13px;
font-weight: 400;
position: relative;
}
.footer-top{
background:url("../images/icons/bg-dot.jpg") repeat-x ;
/*margin-bottom: 150px;*/
}
.style2 .footer-top{
background:none;
/*padding-top:74px;*/
}
.footer-top .span4{
padding-right: 120px;
}
.footer-top .span4:last-child{
padding-right: 0;
}
.footer-bottom{
color: #fff;
font-size: 14px;
font-weight: 300;
padding-bottom: 30px;
padding-top: 25px;
}
.style2 .footer-bottom{
color: #464646;
padding-top: 50px;
}
.footer-bottom .span6:last-child{
text-align: right;
font-size: 15px;
}
#copyright-wrapper {
font-size:12px;
padding: 15px 0;
background-color:#fff;
}
#copyright-wrapper [class*="span"]{
min-height:1px;
}
#copyright-wrapper #secondary-nav ul{
margin:0;
}
#copyright-wrapper #secondary-nav ul li{
line-height:100%;
padding:0 10px;
border-left:1px solid rgba(255, 255, 255, 0.1);
}
#copyright-wrapper #secondary-nav ul li:first-child{
border:none;
}
.scrollTop{
position:fixed;
bottom: 55px;
right:15px;
display:none;
}
.scrollTop a{
text-indent:-9999px;
background: #d3d3d9 url(../images/icons/scroll-top.png) no-repeat center;
width:40px;
height:40px;
display:block;
}
/*=========================================================================
Here's the page: nikosis.mzonespace.co.uk/blog-full-layout/
I have noticed that after the layout collapses for mobile/tablet, the white area appears. The corresponding CSS is called #footer-wrapper.
#footer-wrapper: padding-top:400px;
It should be in a file called responsive.css .. I have removed the padding and the white area disappeared. Also, the footer-wrapper contains some test1 and test2. I don't see any codes or other content loaded in it. So, you might as well remove it from your code. Or even set it to display:none in case you don't know where is it. However, since you are on wordpress, it could be in your template files in footer.php or something similar.
Hope this helps!
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;
}
I am on the process in learning css.
I am trying to display the image in the middle of the screen upon user hover their mouse in the gallery.
however, the image hover within the image itself.
this is my code.
jsfiddle.net/y9w5ym72/1/
body {
margin: 0;
padding: 0;
background: #EEE;
font: 10px/13px 'Lucida Sans',sans-serif;
}
.wrap {
overflow: hidden;
margin: 50px;
}
.box {
float: left;
position: relative;
width: 25%;
padding-bottom: 25%;
color: #FFF;
}
.boxInner {
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
overflow: hidden;
background: #66F;
}
.boxInner img {
width: 100%;
}
.thumbnail:hover img{
border: 1px solid transparent;
}
.thumbnail span{
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{
border-width: 0;
width:70%;
height: auto;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}
First point is you need to hide the first image. So that only you can see the second one. Second point is no need position:absolute, left:-1000px; styles for the inside span.
.thumbnail:hover > img{
border: 1px solid transparent;
display:none;
}
.thumbnail span{
/*position: absolute;
left: -1000px;*/
padding: 5px;
visibility: hidden;
color: black;
text-decoration: none;
}
DEMO
you have to use position :absolute to achieve that fiddle
.box:hover{position:absolute; top:38%; left:38%; z-index:200;}
i create image map with css but don't work.
i have a image in background and i want to create a image map for background picture .but when my mouse hover an link background image not change.
this is my html code.
<section id="centersectioncontact" class="colortext">
<ul id="cantact">
<li id="linkin">Link in </li>
<li id="twiter"> twiter</li>
</ul>
</section>
and this is my css code.
#centersectioncontact {
position: absolute;
top: 14%;
left: 31%;
width: 426px;
height: 426px;
bottom: 25%;
right: 25%;
z-index: 2;
}
ul#cantact
{
list-style:none;
background:url(../Images/contact.png) no-repeat 0 0 ;
position:relative;
width:426px;
height:420px;
margin:0;
padding:0;
opacity:0.5;
}
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
ul#cantact a{
display: block;
height: 100%;
text-indent: -9000px;
}
#linkin {
width: 215px;
height: 140px;
top: 0px;
left: 0px;
}
#twiter
{
width: 215px;
height: 140px;
top: 0px;
left: 215px;
}
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;}
.colortext{
margin-top: 7px;
margin-left: 16px;
top: 2%;
left: 2%;
color: #FFFFFF;
text-align: left;
font-size: xx-large;
z-index: 10000000;
}
there is a couple of contradictions in your css code. One of these and an extra '}' cause the problem:
from
ul#cantact li{
position: absolute;
border: 1px solid #000;
}
}
delete the extra "}"
and you should remove also:
ul#cantact li#linkin a:hover {
background-position: 0 -426px;
}
ul#cantact li#twiter a:hover{
background-position: 0 -426px;
}
In the code you have already defined background-position as 0 0 in
ul#cantact li a:hover {
background:url(../Images/contact.png) no-repeat 0 0;
}
And besides, with the -426px horizontal setting the img won't reveal on the screen.
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.