The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

slider breaks toolbar

View previous topic View next topic Go down

Solved slider breaks toolbar

Post by Judeau on October 22nd 2016, 2:05 am

Recently I added a slider to my forum, and all would be great if not that, that it's css code breaks the notifications in toolbar

Here's how it looks like:


Here's forums link:
http://testoweshuza.forumpl.net/

and here's sliders css code:
Code:
div.container6 {
 height: 10em;
 display: flex;
 align-items: center;
 justify-content: center }
div.container6 p {
 margin: 0 }


/* Reset */
body{
 min-width:900px;

}
/* Slider */
#slider{
 width:100%;
 height:400px;
 position:relative;
 overflow:hidden;
}
@keyframes load{
 from{left:-100%;}
 to{left:0;}
}
.slides{
 width:400%;
 height:100%;
 position:relative;
 -webkit-animation:slide 30s infinite;
 -moz-animation:slide 30s infinite;
 animation:slide 30s infinite;
}
.slider{
 width:25%;
 height:100%;
 float:left;
 position:relative;
 z-index:1;
 overflow:hidden;
}
.slide img{
 width:100%;
 height:100%;
}
.slide img{
 width:100%;
 height:100%;
}
.image{
 width:100%;
 height:100%;
}
.image img{
 width:100%;
 height:100%;
}


/* Switch */
.switch{
 width:120px;
 height:10px;
 position:absolute;
 bottom:50px;
 z-index:99;
 left:30px;
}
.switch > ul{
 list-style:none;
}
.switch > ul > li{
 width:10px;
 height:10px;
 border-radius:50%;
 background:#333;
 float:left;
 margin-right:5px;
 cursor:pointer;
}
.switch ul{
 overflow:hidden;
}
.on{
 width:100%;
 height:100%;
 border-radius:50%;
 background:#f39c12;
 position:relative;
 -webkit-animation:on 30s infinite;
 -moz-animation:on 30s infinite;
 animation:on 30s infinite;
}

/* Legend */
.legend{
 border:400px solid transparent;
 border-left:800px solid rgba(52, 73, 94, .7);
 border-bottom:0;
 position:absolute;
 bottom:0;
}
/* Contents */
.content{
 width:100%;
 height:100%;
  position:absolute;
 overflow:hidden;
}
.content-txt{
 width:400px;
 height:150px;
 float:left;
 position:relative;
 top:200px;
 -webkit-animation:content-s 7.5s infinite;
 -moz-animation:content-s 7.5s infinite;
 animation:content-s 7.5s infinite;
}
.content-txt h1{
 font-family:Arial;
 text-transform:uppercase;
 font-size:24px;
 color:#fff;
 text-align:left;
 margin-left:30px;
 padding-bottom:10px;
}
.content-txt h2{
 font-family:arial;
 font-weight:normal;
 font-size:14px;
 font-style:italic;
 color:#fff;
 text-align:left;
 margin-left:30px;
}

/* Animation */
@-webkit-keyframes slide{
 0%,100%{
  margin-left:0%;
 }
 21%{
  margin-left:0%;
 }
 25%{
  margin-left:-100%;
 }
 46%{
  margin-left:-100%;
 }
 50%{
  margin-left:-200%;
 }
 71%{
  margin-left:-200%;
 }
 75%{
  margin-left:-300%;
 }
 96%{
  margin-left:-300%;
 }
}
@-moz-keyframes slide{
 0%,100%{
  margin-left:0%;
 }
 21%{
  margin-left:0%;
 }
 25%{
  margin-left:-100%;
 }
 46%{
  margin-left:-100%;
 }
 50%{
  margin-left:-200%;
 }
 71%{
  margin-left:-200%;
 }
 75%{
  margin-left:-300%;
 }
 96%{
  margin-left:-300%;
 }
}
@keyframes slide{
 0%,100%{
  margin-left:0%;
 }
 21%{
  margin-left:0%;
 }
 25%{
  margin-left:-100%;
 }
 46%{
  margin-left:-100%;
 }
 50%{
  margin-left:-200%;
 }
 71%{
  margin-left:-200%;
 }
 75%{
  margin-left:-300%;
 }
 96%{
  margin-left:-300%;
 }
}

@-webkit-keyframes content-s{
 0%{left:-420px;}
 10%{left:0px;}
 30%{left:0px;}
 40%{left:0px;}
 50%{left:0px;}
 60%{left:0px;}
 70%{left:0;}
 80%{left:-420px;}
 90%{left:-420px;}
 100%{left:-420px;}
}
@-moz-keyframes content-s{
 0%{left:-420px;}
 10%{left:0px;}
 30%{left:0px;}
 40%{left:0px;}
 50%{left:0px;}
 60%{left:0px;}
 70%{left:0;}
 80%{left:-420px;}
 90%{left:-420px;}
 100%{left:-420px;}
}
@keyframes content-s{
 0%{left:-420px;}
 10%{left:20px;}
 15%{left:0px;}
 30%{left:0px;}
 40%{left:0px;}
 50%{left:0px;}
 60%{left:0px;}
 70%{left:0;}
 80%{left:-420px;}
 90%{left:-420px;}
 100%{left:-420px;}
}

@-webkit-keyframes on{
 0%,100%{
  margin-left:0%;
 }
 21%{
  margin-left:0%;
 }
 25%{
  margin-left:15px;
 }
 46%{
  margin-left:15px;
 }
 50%{
  margin-left:30px;
 }
 71%{
  margin-left:30px;
 }
 75%{
  margin-left:45px;
 }
 96%{
  margin-left:45px;
 }
}

@-moz-keyframes on{
 0%,100%{
  margin-left:0%;
 }
 21%{
  margin-left:0%;
 }
 25%{
  margin-left:15px;
 }
 46%{
  margin-left:15px;
 }
 50%{
  margin-left:30px;
 }
 71%{
  margin-left:30px;
 }
 75%{
  margin-left:45px;
 }
 96%{
  margin-left:45px;
 }
}

@keyframes on{
 0%,100%{
  margin-left:0%;
 }
 21%{
  margin-left:0%;
 }
 25%{
  margin-left:15px;
 }
 46%{
  margin-left:15px;
 }
 50%{
  margin-left:30px;
 }
 71%{
  margin-left:30px;
 }
 75%{
  margin-left:45px;
 }
 96%{
  margin-left:45px;
 }
}


/* main */
/* Reset */

I have already noticed that it's 'position:absolute;' in Contests part that collides with toolbar. Deleting it or changing destroys showing pics in slider. Is it possible to fix it somehow, so sliders code wouldn't affect toolbar?


Last edited by Judeau on October 23rd 2016, 5:16 pm; edited 1 time in total
avatar
Judeau
New Member

Male Posts : 15
Reputation : 1
Language : Polish

http://kitsunemoon.forumpolish.com/

Back to top Go down

Solved Re: slider breaks toolbar

Post by vietkanpy on October 22nd 2016, 3:27 am

Code:
div.container6 {
  height: 10em;
  display: flex;
  align-items: center;
  justify-content: center }
div.container6 p {
  margin: 0 }
 
 
/* Reset */
body{
  min-width:900px;
 
}
/* Slider */
#slider{
  width:100%;
  height:400px;
  position:relative;
  overflow:hidden;
}
@keyframes load{
  from{left:-100%;}
  to{left:0;}
}
.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}
.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.slide img{
  width:100%;
  height:100%;
}
.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:100%;
}
 
 
/* Switch */
.switch{
  width:120px;
  height:10px;
  position:absolute;
  bottom:50px;
  z-index:99;
  left:30px;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#333;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
.switch ul{
  overflow:hidden;
}
.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f39c12;
  position:relative;
  -webkit-animation:on 30s infinite;
  -moz-animation:on 30s infinite;
  animation:on 30s infinite;
}
 
/* Legend */
.legend{
  border:400px solid transparent;
  border-left:800px solid rgba(52, 73, 94, .7);
  border-bottom:0;
  position:absolute;
  bottom:0;
}
/* Contents */
.content{
  width:100%;
  height:100%;
  overflow:hidden;
}
.content-txt{
  width:400px;
  height:150px;
  float:left;
  position:relative;
  top:200px;
  -webkit-animation:content-s 7.5s infinite;
  -moz-animation:content-s 7.5s infinite;
  animation:content-s 7.5s infinite;
}
.content-txt h1{
  font-family:Arial;
  text-transform:uppercase;
  font-size:24px;
  color:#fff;
  text-align:left;
  margin-left:30px;
  padding-bottom:10px;
}
.content-txt h2{
  font-family:arial;
  font-weight:normal;
  font-size:14px;
  font-style:italic;
  color:#fff;
  text-align:left;
  margin-left:30px;
}
 
/* Animation */
@-webkit-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@-moz-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
 
@-webkit-keyframes content-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@-moz-keyframes content-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@keyframes content-s{
  0%{left:-420px;}
  10%{left:20px;}
  15%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
 
@-webkit-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}
 
@-moz-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}
 
@keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}
 
 
/* main */
/* Reset */
avatar
vietkanpy
Forumember

Male Posts : 56
Reputation : 24
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: slider breaks toolbar

Post by Judeau on October 22nd 2016, 2:05 pm

Nope, as I said - removing the 'position:absolute;' also breaks the images display in slider, so it fixes the toolbar but keeps slider broken.
avatar
Judeau
New Member

Male Posts : 15
Reputation : 1
Language : Polish

http://kitsunemoon.forumpolish.com/

Back to top Go down

Solved Re: slider breaks toolbar

Post by Judeau on October 23rd 2016, 4:19 pm

Bump
avatar
Judeau
New Member

Male Posts : 15
Reputation : 1
Language : Polish

http://kitsunemoon.forumpolish.com/

Back to top Go down

Solved Re: slider breaks toolbar

Post by vietkanpy on October 23rd 2016, 4:56 pm


Code:
#fa_toolbar #fa_right #notif_list li .content {
    position: initial !important;
}
avatar
vietkanpy
Forumember

Male Posts : 56
Reputation : 24
Language : vietnam

http://www.hotrofm.net/

Back to top Go down

Solved Re: slider breaks toolbar

Post by Judeau on October 23rd 2016, 5:16 pm

Works! Thank you!
avatar
Judeau
New Member

Male Posts : 15
Reputation : 1
Language : Polish

http://kitsunemoon.forumpolish.com/

Back to top Go down

Solved Re: slider breaks toolbar

Post by SLGray on October 23rd 2016, 9:32 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 39690
Reputation : 2678
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum