I am using Brandon Pierce's https://css-tricks.com/circular-3d-buttons/ but want to replace 'fontello' icons by icons of my choice like this one https://image.flaticon.com/icons/svg/451/451694.svg.
I just can't seem to get it done!
Tried replacing the icon classes by a 'image1' class of my own with random image as background but it just wouldn't show.
Please help!
.nav1 {
list-style: none;
text-align: center;
}
.nav1 li {
position: relative;
display: inline-block;
margin-right: -4px;
}
.nav1 li:before {
content: "";
display: block;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: -1;
}
.nav1 a {
display: block;
background-color: #f7f7f7;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7);
background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7);
color: #a7a7a7;
margin: 36px;
width: 144px;
height: 144px;
position: relative;
text-align: center;
line-height: 144px;
border-radius: 50%;
box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}
.nav1 a:before {
content: "";
display: block;
background: #fff;
border-top: 2px solid #ddd;
position: absolute;
top: -18px;
left: -18px;
bottom: -18px;
right: -18px;
z-index: -1;
border-radius: 50%;
box-shadow: inset 0px 8px 48px #ddd;
}
.nav1 a:hover {
text-decoration: none;
color: #555;
background: #f5f5f5;
}
/* Random class I made to replace icon by image */
.image1 {
background: url("https://www.w3schools.com/css/trolltunga.jpg");
width: 100%;
}
HTML
<nav1>
<ul class="nav1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav1>
Need to do a couple things. Here's a demo.
This is your icon
.image1:after {
background-image: url("https://image.flaticon.com/icons/svg/451/451694.svg");
background-size: cover;
display: block;
content: '';
width: 100%;
height: 100%;
}
add these two styles to make it sit in the middle of the button without overflowing
.nav1 a
{
......
box-sizing: border-box;
padding: 17px;
}
Related
I'm building an image component with caption.
When the user mouse hover on the text on hover of the div element, it is changing the position of the text:
JSFiddle URL: https://jsfiddle.net/9jkze0o4/
CSS:
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
border-style: solid;
border-width: 28px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
On hover of the image, how to keep the text position as is?
Looks like your selector is not right when hovering. When hovering the inner-div all the styles applies to everything inside that block including the caption. To overcome this problem you will need to give the :hover to the box.
You can change this,
innder-div:hover
to be this,
box:hover
in your styles.
See the fiddle - https://jsfiddle.net/anjanasilva/jkwL3n0g/
Hope this helps.
Cheers.
You have to change inner-div:hover to box:hover
Here's a working Fiddle: https://jsfiddle.net/9jkze0o4/3/
This issue is because of the border-width:28px to class .inner-div:hover remove .inner-div:hover and give border to class .inner-div:hover .box as shown below:
.inner-div:hover .box {
border: 28px solid rgb(67, 67, 67);
}
* {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
.inner-div {
position: relative;
display: inline-block;
box-shadow: 0 0px 15px 0px #d5d5d5;
padding: 0px;
margin: 0px;
position: relative;
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: rgb(67, 67, 67);
background-color: rgb(204, 204, 204);
width: 150px;
height: 150px;
}
.inner-div:hover {
box-shadow: 0 0px 15px 0px #d5d5d5;
background-color: rgb(204, 204, 204);
}
.inner-div:hover .overlay {
display: block;
opacity: 1;
background: rgba(52,152,219,0.49);
border-radius: 13px;
text-align: center;
}
.inner-div .overlay:hover .overlay-icon i {
display: block;
position: absolute;
top: 40%;
-webkit-transform: translateX(-50%) translateY(-4%);
-ms-transform: translateX(-50%) translateY(-4%);
transform: translateX(-50%) translateY(-4%);
opacity: 1;
left: 50%;
}
.inner-div:hover .box {
border: 28px solid rgb(67, 67, 67);
}
.box {
height: 100%;
display: block;
}
.box-label {
display: list-item;
margin: 0px auto;
line-height: 100%;
vertical-align: middle;
height: 100%;
overflow: hidden;
}
.box-label img {
position: relative;
top: 50%;
transform: translate(100%, -50%);
vertical-align: middle;
border-radius: 0px;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
.overlay {
background: rgba(52,152,219,0.49);
color: #FFFFFF;
text-align: center;
font-size: 40px;
border-radius: 13px;
margin-top: 0px;
cursor: pointer;
display: none;
vertical-align: middle;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
opacity: 1;
width: 100%;
height: 100%;
z-index: 1;
transition: display 0.5s;
}
.overlay-icon {
color: #FFFFFF;
font-size: 40px;
line-height: 100%;
}
.overlay-icon i {
display: block;
border-radius: 5px;
overflow: hidden;
vertical-align: middle;
opacity: 0;
top: 100%;
left: 50%;
transition: all ease-in-out 0.4s;
-webkit-transition: all ease-in-out 0.4s;
transform: translateX(-50%);
}
.caption-box {
font-size: 16px;
text-align: center;
color: #000000;
font-weight: bold;
margin-top: 0px;
word-break: break-word;
word-break: break-all;
line-height: normal;
vertical-align: middle;
display: inline-block;
z-index: 2;
text-align: center;
margin: 10px auto 20px auto;
height: auto;
width: 150px;
}
.caption-label {
vertical-align: top;
margin: 0px auto;
padding-right: 3px;
display: list-item;
line-height: 100%;
overflow: hidden;
word-break: break-word;
font-weight: inherit;
border: none !important;
min-width: 100px;
max-width: 150px;
}
<div class="inner-div">
<div class="box">
<label class="box-label">
<img src="https://img00.deviantart.net/f33c/i/2011/139/f/c/vertical_panorama_by_verticaldubai-d3gp1ja.jpg" alt="Image" />
<div class="overlay">
<div class="overlay-icon">
<i class="fa fa-hand-o-up"></i>
</div>
</div>
</label>
</div>
<div class="caption-box">
<label class="caption-label">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</label>
</div>
</div>
I've got one problem.
There is a jQuery "more text" animated div (slideToggle) and showed text jumps. I don't know why. Could somebody help me?
HTML:
<div class="slide-button two">
<span>More</span>
<div class="hidden">
<p>hidden</p>
</div>
</div>
jQuery:
$(document).ready(function () {
$('.hidden').hide();
$('.slide-button').click(function () {
$('.hidden').slideToggle('slow');
});
});
ISSUE on jsfiddle
Just remove float:left from the span:
.slide-button span {
display: block;
font-family: "Playfair Display";
font-size: 20px;
font-weight: 400;
color: #da3c2b;
width: 90%;
margin: 0;
}
JSFiddle Demo
You can remove float: left as suggested by Jacob Gray, but you can also try adding overflow: hidden; to the class .slide-button .hidden
As an example:
$(document).ready(function() {
$('.hidden').hide();
$('.slide-button').click(function() {
$('.hidden').slideToggle('slow');
});
});
.slide-button {
display: block;
width: 94.230769%;
-webkit-box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
background-color: #f7f7f7;
background: -webkit-linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
background: linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
padding: 25px 0 0 30px;
position: relative;
margin-bottom: 30px;
min-height: 57px;
overflow: hidden;
}
.slide-button span {
display: block;
font-family: "Playfair Display";
font-size: 20px;
font-weight: 400;
color: #da3c2b;
float: left;
width: 90%;
margin: 0;
}
.slide-button:after {
position: absolute;
content: '';
background: url(../imgs/arrow.png) no-repeat;
display: inline-block;
width: 20px;
height: 20px;
top: 40px;
right: 30px;
}
.slide-button:hover {
background-color: #f7f7f7;
background: -webkit-linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
background: linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
}
.slide-button .hidden {
width: 100%;
display: block;
position: relative;
overflow: hidden;
}
.slide-button .hidden p {
padding: 25px 0 40px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button two">
<span>More</span>
<div class="hidden">
<p>content jumps</p>
</div>
</div>
I'm a novice so this may seem like a rather basic problem.
A html page has 4 html embedded audio players which looked as styled and worked fine.
I then added a slide player called Fancy Box. The CSS and JS files are linked to separate folders than the CSS and JS files of the audio player.
The audio players continue to work fine however, the style attributes no longer show up, instead the browser’s audio player shows. Fancy Box works fine.
Is there a CSS or JS conflict of some sort?
Any advice is much appreciated in solving my dilemma.
(Sorry for all my incompetence.)
Here is the HTML and Both CSS.
/** audio player styles **/
.audio-player,
.audio-player div,
.audio-player h2,
.audio-player a,
.audio-player span,
.audio-player button {
margin: 0;
padding: 0;
border: none;
outline: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div.audio-player {
position: relative;
width: 300px;
height: 70px;
margin: 0 auto;
}
.audio-player h2 {
position: absolute;
top: 7px;
left: 10px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 11px;
color: #000000;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
/* play/pause control */
.mejs-controls .mejs-button button {
cursor: pointer;
display: block;
position: absolute;
text-indent: -9999px;
}
.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
width: 34px;
height: 34px;
top: 32px;
left: 7px;
background: transparent url('playpause.png') 0 0 no-repeat;
}
.mejs-controls .mejs-pause button {
background-position: 0 -35px;
}
/* volume scrubber bar */
.mejs-controls div.mejs-horizontal-volume-slider {
position: absolute;
top: 23px;
right: 85px;
cursor: pointer;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
width: 85px;
height: 11px;
background: #212227;
-webkit-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
box-shadow: inset 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px rgba(255, 255, 255, 0.25);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
position: absolute;
width: 0;
height: 9px;
top: 1px;
left: 1px;
background: #c82530;
background: -webkit-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -moz-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -o-linear-gradient(top, #c82530 0%, #c82530 100%);
background: -ms-linear-gradient(top, #c82530 0%, #c82530 100%);
background: linear-gradient(top, #c82530 0%, #c82530 100%);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
/* time scrubber bar */
.mejs-controls div.mejs-time-rail {
width: 160px;
}
.mejs-controls .mejs-time-rail span {
position: absolute;
display: block;
width: 160px;
height: 12px;
top: 40px;
left: 55px;
cursor: pointer;
-webkit-border-radius: 0px 0px 2px 2px;
-moz-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
.mejs-controls .mejs-time-rail .mejs-time-total {
background: #565860;
width: 160px !important;
/* fixes display bug using jQuery 1.8+ */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-loaded {
top: 0;
left: 0;
width: 0;
background: #7b7d82;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.mejs-controls .mejs-time-rail .mejs-time-current {
top: 0;
left: 0;
width: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #00873d;
background: -webkit-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -moz-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -o-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: -ms-linear-gradient(top, #00873d 0%, #83bb63 100%);
background: linear-gradient(top, #00873d 0%, #83bb63 100%);
}
/* metallic sliders */
.mejs-controls .mejs-time-rail .mejs-time-handle {
position: absolute;
display: block;
width: 20px;
height: 22px;
top: -6px;
background: url('handle-lg.png') no-repeat;
}
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
position: absolute;
display: block;
width: 12px;
height: 14px;
top: -1px;
background: url('handle-sm.png') no-repeat;
}
/* time progress tooltip */
.mejs-controls .mejs-time-rail .mejs-time-float {
position: absolute;
display: none;
width: 33px;
height: 23px;
top: -26px;
margin-left: -17px;
z-index: 9999;
background: url('time-box.png');
}
.mejs-controls .mejs-time-rail .mejs-time-float-current {
width: 33px;
display: block;
left: 0;
top: 4px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
color: #666;
text-align: center;
z-index: 9999;
}
/** clearfix **/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Paul Minotto: Music</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
a:link {
color: #00873d;
text-decoration: none;
}
a:visited {
color: #cc3333;
text-decoration: none;
}
a {
font-size: 14px;
}
a:hover {
color: #cc3333;
text-decoration: none;
}
a:active {
text-decoration: none;
}
h1 {
font-size: 36px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.green {color: #11772E;
}
.red {color: #cc3333;
}
#rcorners { border-radius: 45%;
border: 5px solid #000000;
padding: 0px;
width: 700px;
height: 130px;
}
.color {
color: #FFF;
}
</style>
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css"/>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
<title>slideShow</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen"/>
<link rel="stylesheet" href="/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen"/>
<script type="text/javascript" src="/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-thumb").fancybox({
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
});
</script>
</head>
CSS for slide show player.
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #FFF;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 0px;
background: #000;
background: rgba(0, 0, 0, 0.8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
Here's the JSFiddle http://jsfiddle.net/7mzH2/ It's an easy version of what I have right now.
I have two problems which I can't seem to figure out.
The first problem: I want the dot to stay filled when it's on the active page.
Second problem: I want a label to appear on the right of the menu when you hover the dots.
I've tried several ways and in other designs I never had this problem, so I don't understand what I should do.
Hope someone can help me out.
This is the HTML
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav> Home
De mogelijkheden
Restauratie
Het Proces
Werkplaats
Ambacht en Handwerk
Mogelijkheden
Contact
</nav>
</div>
<ul class="content">
<li class="first" id="first">
<div id="pagina01"></div>
<li class="second" id="second">
<div id="pagina02"></div>
</li>
<li class="third" id="third">
<div id="pagina03"></div>
</li>
<li class="fourth" id="fourth">
<div id="wrapper04">
<div id="first04"></div>
<div id="second04"></div>
</div>
</li>
<li class="fifth" id="fifth">
<div id="pagina05"></div>
</li>
<li class="six" id="six">
<div id="pagina06"></div>
</li>
<li class="seven" id="seven">
<div id="pagina07"></div>
</li>
<li class="eight" id="eight">
<div id="pagina08"></div>
</li>
</ul>
This is the CSS
body {
background: white;
min-width: 300px;
height: 100%;
font:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:100;
}
ul.options {
margin-top: 0px;
width: 100%;
}
ul.options li {
display: inline-block;
margin-bottom: 20px;
}
ul.options li h4 {
color: rgba(0, 0, 0, 0.8);
text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.4);
}
ul.btn-group {
color: #000;
margin: 10px;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9);
}
ul.btn-group li {
background: #7958b8;
border-bottom: 1px solid #563f83;
border-left: 1px solid #563f83;
border-top: 1px solid #563f83;
cursor: pointer;
display: inline-block;
float: left;
margin: 0;
padding: 7px;
}
ul.btn-group li:hover, ul.btn-group li.active {
background: rgb(150, 110, 226);
}
ul.btn-group li:first-child {
border-radius: 2px 0 0 2px;
padding-left: 7px;
}
ul.btn-group li:last-child {
border-radius: 0 2px 2px 0;
border-right: 1px solid #563f83;
padding-right: 7px;
}
ul.content {
margin-top: 0px;
width: 100%;
}
ul.content li {
display: block;
height: 100%;
width: 100%;
}
ul.content li h1 {
color: #000;
padding-top: 20px;
}
.scroller {
background: #CCC;
box-shadow: inset 0 0 5px 0 black;
height: 1px;
overflow: hidden;
}
.scroller h3 {
color: rgba(0, 0, 0, 0.3);
font-size: 30px;
margin-top: 20px;
text-align: center;
}
ul.content li.first {
background: url('../inhouds/images/page01.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.second {
background: url('../inhouds/images/page02.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.third {
background: url('../inhouds/images/page03.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fourth {
background: url('../inhouds/images/page04.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.fifth {
background: url('../inhouds/images/page05.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.six {
background: url('../inhouds/images/page06.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.seven {
background: url('../inhouds/images/page07.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
ul.content li.eight {
background: url('../inhouds/images/page08.png');
width: 100%;
background-repeat:no-repeat;
background-position:center;
}
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 50px;
top: 50%;
width: 10px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
position: relative;
z-index: 999;
color: transparent;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid #666;
}
.cbp-fbscroller > nav a:hover {
display: block;
position: relative;
z-index: 999;
color: transparant;
width: 10px;
height: 10px;
outline: none;
margin: 10px 0;
border-radius: 50%;
border: 1px solid transparant;
background:#666;
}
#pagina01 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8ffff;
}
#pagina02 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beff;
}
#pagina03 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #b8beb0;
}
#pagina04 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6abeb0;
}
#pagina05 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: white;
}
#pagina06 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #6a6d6d;
}
#pagina07 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d6d;
}
#pagina08 {
margin-left: auto;
margin-right: auto;
width: 600px;
padding-top:500px;
background-color: #366d39;
}
Sorry for the long code's but I though maybe this will make it easier to help.
For the labels you can use CSS3 pseudo-elements to create a custom tooltip, and HTML5's data- tag to get the content (text) of the tooltip.
Pseudo-elements are :after and :before
To create a label or tooltip, try to add this to your CSS code:
nav a:hover:before {
pointer-events: none;
content: attr(data-name);
position: absolute;
display: block;
width: 30px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
background: #000;
top: -4px;
right: -40px;
}
..and in your HTML add this to your links: data-name="your text here".
(You can call the data attribute whatever you want. It just has to start with data-).
To make the dots stay filled, you can use jQuery.
When you click on the nav a it adds an .active-class to the <a> which make the dot stay filled. But first we have to make sure that all the other dots gets inactive. Else we suddenly would have every dots active. To do that we first remove the .active-class on all dots. Then we add an .active-class, on that <a> we have clicked on:
$(document).ready(function() {
$('nav a').click(function() {
$('nav a').removeClass('active');
$(this).addClass('active');
});
});
Then we change the .cbp-fbscroller > nav a:hover in your css to .cbp-fbscroller > nav a:hover, nav a.active. Now the active dot, has the same style like when we hover it.
You can test it all, in this Fiddle:
http://jsfiddle.net/7mzH2/3/
P.S:
I think it's better to move the tooltip/label to the left instead of to the right. Right now, you can't add much text, because of the space.
Hope this helped.
I'd like to change the look of the controls for this rotating banner. They are currently just grey (and the current/selected one is black). I want the dots to be white with a grey outline (and the selected/current one to be orange with a grey outline).
Here's the css (I believe the selector is: .rslides_tabs a):
.rslides_container
{
position: relative;
}
.rslides
{
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li
{
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child
{
position: relative;
display: block;
float: left;
}
.rslides img
{
display: block;
height: auto;
float: left;
width: 100%;
max-width: 100%;
border: 0;
}
.rslides_tabs
{
margin-top: 10px;
text-align: center;
}
.rslides_tabs li
{
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.rslides_tabs a
{
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-background-clip: padding-box;
background: #ccc;
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.rslides_tabs .rslides_here a
{
background: #222;
}
.rslides_nav
{
position: absolute;
-webkit-tap-highlight-color: #000;
top: 50%;
left: 0;
-webkit-opacity: 0.7;
-moz-opacity: 0.7;
-o-opacity: 0.7;
filter: alpha(opacity=70);
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url( '../images/responsiveslides.gif' ) no-repeat left top;
margin-top: -45px;
}
.rslides_nav:active,
.rslides_nav:hover
{
-webkit-opacity: 1;
-moz-opacity: 1;
-o-opacity: 1;
filter: alpha(opacity=100);
opacity: 1;
}
.rslides_nav.next
{
left: auto;
background-position: right top;
right: 0;
}
If you need any more code to help me out, please let me know.
.rslides_tabs .rslides_here a
Is the one where you currently are
.rslides_tabs a
Has the value of the dot that is not selected.
Change the background property to the color you want.
.rslides_tabs a {
background-color:red;
border: 1px solid grey;
//here goes your style
}
.rslides_tabs .rslides_here a {
//here goes your style for the selected one
}