I'm building a website where there is a slider on top, I wanted to use the unslider because it seems very easy.
According to the site you should just use the function- dots: true
I have that, but my slider doesn't have any slides.
The site where I'm trying to set things up.
(its a school project)
Try adding some CSS.
.dots {
position: absolute;
left: 0;
right: 0;
bottom: 20px;
text-align: center;
}
.dots li {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.dots li.active {
background: #fff;
opacity: 1;
}
Just go to unslider.css file and add:
.unslider {
overflow: auto;
margin: 0;
padding: 0;
/*Added*/
position: relative;
}
And in unslider-dots.css add:
/*added*/
.unslider-nav{
position: absolute;
width: 100%;
bottom: 2%;
}
You just gotta say on your script nav:true and dots:true.
Hope it works for you too.
Related
I am just a learner in html and i am working on a template, now i need to reduce the size of the navbar a bit, i have succeeded in increasing size by just incresing the margin at the bolded words here down but i cant reduce size, Pls help. here is the code and attachaed the picture with the navybar bar or just click https://giramisi.host/ to see the real site live
css navbar code
.main-nav__main-navigation .main-nav__navigation-box,
.main-nav__main-navigation .main-nav__navigation-box ul {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav__main-navigation .main-nav__navigation-box>li+li {
margin-left: 59px;
}
.main-nav__main-navigation .main-nav__navigation-box>li {
position: relative;
padding: 33px 0px 33px;
}
.main-nav__main-navigation .main-nav__navigation-box>li>a {
position: relative;
display: inline-block;
color: var(--thm-gray);
font-size: 16px;
line-height: 28px;
text-transform: capitalize;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
z-index: 1;
}
.main-nav__main-navigation .main-nav__navigation-box>li>a:before {
position: absolute;
left: 0;
bottom: -10px;
right: 0;
height: 0px;
background: var(--thm-primary);
content: "";
transform: scaleX(0.5);
opacity: 0;
transition: all 500ms ease;
z-index: -1;
}
}
Trying adding the below code:
.main-nav__header-two__content-box {
height:90px;
}
I am encountering a problem with a radio button in IE 11.
I have a simple radio button that makes my content scroll down once checked.
Without any styles applied, there is no problem. But with, the problem is back.
Does it have something to do with the IE render engine?
.switch {
position: relative;
display: block;
width: 34px;
height: 18px;
border-radius: 8px;
cursor: pointer;
outline: 0;
height: 18px;
top: 5px;
background-color: $grey-light;
box-shadow: $switch-shadow;
&::before {
content: " ";
position: absolute;
left: 2px;
top: 2px;
border-radius: 50%;
margin: 0;
outline: none;
height: 14px;
width: 14px;
background: white;
transition: background-color .08s ease-in;
}
&.active::before {
background-color: $green-dark;
left: 18px;
transition: background-color .08s ease-in, left .08s ease-in;
}
&.inactive::before {
background-color: $grey-dark;
left: 2px;
transition: background-color .08s ease-in, left .08s ease-in;
}
input[type=checkbox] {
// display: none;
visibility: hidden;
position: absolute;
z-index: -1;
}
}
Thanks for your help!
EDIT.
I forgot to precise that the scrolling box (flex: 1) has a parent which has display: flex.
I've a form in which I've a file upload filed I did customized it to fit the color theme which the PHP form is using it works but it's just static. I wanted to add a small transition to the button which I archived following the W3Schools tutorial.
But after that I'm facing a problem which I really don't have an idea how to solve. I did a search on this matter but most answers suggest to use bootstrap which I also tried and it messed up my current projects CSS.
Can some one show me what I'm doing wrong with the animation part.
.fileUpload {
float: left;
position: relative;
overflow: hidden;
background-color: #4068E0;
color: white;
height: 30px;
width: 120px;
text-align: center;
border: 2px solid #4068E0;
border-radius: 20px;
box-shadow: 2px 2px 1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition: prop 0.4s;
-moz-transition: prop 0.4s;
-ms-transition: prop 0.4s;
-o-transition: prop 0.4s;
transition: prop 0.4s;
}
.fileUpload:after {
content: "";
background: #85b7e8;
display: block;
position: absolute;
opacity: 0;
transition: all 0.8s;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
font-size: 20px;
cursor: pointer;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.fileUpload:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
height: 100%;
text-align: center;
}
.fileName {
margin: 2px 0 0 130px;
width: auto;
}
.updLabel {
line-height: 30px;
font-weight: bold;
}
#uploadFile {
border: none;
width: 150px;
height: 30px;
}
<div class="usrCreate-form-right">
<div class="fileUpload">
<span class="updLabel">Add Image</span>
<input type="file" id="uploadFile" class="upload">
</div>
<div class="fileName">
<input id="uploadFile" placeholder="0 files selected" disabled>
</div>
</div>
As you can see in the above snippet the animation does happens but it doesn't pop the file selection window. If I disable the animation part it does pop up I tried few other things which also didn't work that's why I decided to ask here.
I've got success with your code when I add a z-index on the input. I tried with z-index: 1 and it worked. the visuals on the button won't change.
.fileUpload > input {
z-index: 1;
}
I want this effect for my image.
I implemented it but I have anchor at the place of figure and when I hover on image I should able to click on it and it should redirect. Will we achieve it?
I use the following code for the hover effect:
.tint {
position: relative;
float: left;
margin-right: 20px;
margin-bottom: 20px;
cursor: pointer;
box-shadow: rgba(0,0,0,.2) 3px 5px 5px;
}
.tint:before {
content: "";
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: none;
transition: all .3s linear;
}
.tint:hover:before { background: rgba(0,0,255, 0.5); }
If I remove position:absolute, the link starts working but then the hover effect is gone.
Please help me with this if anybody has any solution for this.
Thanks in advance.
you can try something by the meanings of this code:
<div>
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4">
<div class="mask">
</div>
</div>
<style>
.mask { position: absolute;
height: 100%;
width: 100%;
transition: all 0.6s ease;
left: 0;
top: 0;
background-color: #0af;
opacity: 0;
}
.mask:hover {
background-color: #0af;
opacity: 0.3;
}
</style>
I have a problem like this (jsfiddle). Why does the hover of the absolute position is not only the bullet area? It cause I can't click the button, because of it covered by that absolute position. I want that tooltip shows only just when mouse over on the top of the bullet area not outside. Please help me, tq.
css:
.badgeP {
list-style: none;
padding:0;
padding-bottom: -10px;
margin-left: 25px;
display: inline-block;
position: relative;
}
.badgeP > li{
display: inline-block;
}
li.badgeP1:before{
content: "\25cf\00a0";
font-family: arial;
font-size: 100%;
position: relative;
left: 6px;
margin-left: -4px;
}
li.badgeP1:before {
color: orange;
}
.badgeP1:hover .ttbadgeP1{
opacity:1;
}
.badgeP1{
position: relative;
}
.ttbadgeP1{
background-color: black;
font-size: 90%;
padding-left: 3px;
padding-right: 7px;
padding-top: 0px;
padding-bottom: 2px;
margin: auto;
width: 40px;
height: auto;
position: absolute;
border-radius: 3px;
left: -18px;
top: 17px;
color: white;
box-shadow: 2px 2px 2px #888888;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.ttbadgeP1-text:before{
content: '';
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 4px;
border-color: transparent transparent black transparent;
left: 17px;
top: -8px;
}
.ttbadgeP1-text{
position: relative;
float: left;
width: auto;
text-align: center;
}
html:
<ul class='badgeP'>
<li class='badgeP1'>
<span class='ttbadgeP1'><span class='ttbadgeP1-text'>reputasi klik</span></span> 556
</li>
</ul>
<br>
. <input type='button' value='muke'></input>
you need to get that badge (.ttbadgeP1) out ouf your way first, using visibility:
.ttbadgeP1{visibility:hidden;}
then show it only on hover:
.badgeP1:hover .ttbadgeP1{visibility:visible;}
updated fiddle: http://jsfiddle.net/k2uepv26/3/
note that you can't just use the display property instead of visibility, see this question for details
Please change the width of .ttbadgeP1
.ttbadgeP1 {
width: 72px;
}