I am trying to make the text in the slideshow stop closer to the left margin, always on the middle of the grey area both horizontally and vertically . Also as you may see when the texts goes away the x scrollbar grows and black space shows to ur right. Would anybody know whats the problem I can t seem to figure it out and I ll appreciate very much your help.
Also in the responsive mode a black area shows up to your right and I m not sure if it is related to the slideshow or to another mistake?
thanks and looking forward to your answer
here is the web online http://vtwg.eu/ZMT/untitled3.html and u can find the code below victoria
#gifphrases1 {
font-family: arial;
background: grey;
overflow: hidden;
height: 180px;
background-image: url("back.png");
text-align: center;
line-height: 30px;
margin-left: 0px;
}
.item-1,
.item-2,
.item-3 {
padding: 20px;
position: absolute;
display: block;
width: 90%;
font-size: 1.6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
text-align: center;
}
.item-1{
animation-name: anim-1;
}
.item-2{
animation-name: anim-2;
}
.item-3{
animation-name: anim-3;
}
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 25%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 25%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 25%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}<center>
<div id="gifphrases1">
<p class="item-1">If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge. <br> <b>Marc Hogan - Pitchfork</b> </p>
<p class="item-2">With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back. <br><b>Aerosyn-Lex Mestrovic - Visual Artist</b> </p>
</p>
<p class="item-3">From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!<br> <b>Jeffrey Paradise - Poolside</b> </p>
</div>
</center>I think you could just update your @keyframes. Define the "left" values as "-100%", "0%" and "100%" for each your @keyframes.
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 0%; opacity: 1; }
33.33%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 0%; opacity: 1; }
66.66%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 0%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}
Edit #1:
margin-top: 0; could be added to each ".item-#" to empty the space above each of them.
Edit #2:
I've found that adding position: relative to "#gifphrases1" fixed the overflow: hidden rule from malfunctioning.
However, you have to watch out for the height of your #gifphrases1 element. I set it to 400px using the height: 400px in my example below (see the code snippet).
Edit #3:
Now that I think about it, adding position: relative to "#gifphrases1" allows you to make the vertical centering you wanted!
Add the top: 50% rule to the items – that will place them below the middle of the parent element.
Now, adding transform: translate(0, -50%) will change that, and place the middle of each item on the middle of the parent element. Perfectly centered! ← that what matters
#gifphrases1 {
font-family: arial;
background: grey;
position: relative;
overflow: hidden;
height: 400px;
background-image: url("back.png");
text-align: center;
line-height: 30px;
margin-left: 0px;
}
.item-1,
.item-2,
.item-3 {
margin-top: 0;
padding: 20px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
display: block;
width: 90%;
font-size: 1.6em;
animation-duration: 20s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
text-align: center;
}
.item-1 {
animation-name: anim-1;
}
.item-2 {
animation-name: anim-2;
}
.item-3 {
animation-name: anim-3;
}
@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 0%; opacity: 1; }
33.33%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 0%; opacity: 1; }
66.66%, 100% { left: 100%; opacity: 0; }
}
@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 0%; opacity: 1; }
100% { left: 100%; opacity: 0; }
}<center>
<div id="gifphrases1">
<p class="item-1">If you're ever in Buenos Aires, ZZK Music Tours are an expert on the local music scene and generous with their knowledge. <br> <b>Marc Hogan - Pitchfork</b> </p>
<p class="item-2">With deep and real relationships with local artists and venues, ZZK was able to show me a time that would otherwise be impossible when first coming to the city. If you’re a lover of music, culture, nightlife and want to be immediately connected when coming into a new city, ZZK has your back. <br><b>Aerosyn-Lex Mestrovic - Visual Artist</b> </p>
<p class="item-3">From sweaty late night tango dancing at underground milongas, to religious theme parks complete with volcanic eruptions, to some of the best grilled steaks I've ever eaten I have ZZK to thank!<br> <b>Jeffrey Paradise - Poolside</b> </p>
</div>
</center>