Hello, i got a problem with my Jquery script.
i can’t keep my text slideshow in one single position as you can see on the website: (www.wilsonveragallardo.nl)
i tried to put that text div in: position: absolute. it works then, but then all my logo and logo of instagram facebook etc, goes all mixed up…
i can’t figure out how i can fix this…
this is my html code of the black beam:
<!--BALK-->
<div id="Balk">
<div class="Logo"></div>
<div class="Name">Juul Hazenberg</div>
<div class="Education">
<div><p>Multimediadesigner</p></div>
<div><p>Fotografie</p></div>
<div><p>Ruimtelijke</p></div>
</div>
<div class="Telefoon">06-41300920</div>
<div class="Mail">[email protected]</div>
<a href="https://www.facebook.com/juul.hazenberg"><div class="Facebook"></div></a>
<a href="https://www.instagram.com/juuulh/"><div class="Instagram"></div></a>
<a href="https://nl.linkedin.com/in/juul-hazenberg-86552580"><div class="Link"></div></a>
</div>
This is my CSS code of the black beam:
#Balk{
height: 100%;
width: 290px;
background-color: black;
position: fixed;
margin-left: 210px;
#balk,div,p {
font-family: PT Sans Narrow;
}
div.Logo {
content:url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/logo_zpsy0gncdqo.png");
width: 200px;
height: 200px;
margin-left: 45px;
margin-top: 40px;
}
.Name {
Color: white;
font-size: 50px;
text-align: center;
}
.Education,div,p{
Color: white;
font-size: 27px;
text-align: center;
}
.Telefoon {
Color: white;
font-size: 20px;
margin-top: 25px;
text-align: center;
background-image: url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/phone-icon-hi_zpsc9dgdfsu.png");
background-size: 30px;
background-repeat: no-repeat;
background-position: 25%;
}
.Mail {
Color: white;
font-size: 20px;
margin-top: 10px;
text-align: right;
margin-right: 23px;
background-image: url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/mail-icon-white-on-clear-hi_zpssylyhzs0.png");
background-size: 30px;
background-repeat: no-repeat;
margin-left: 20px;
background-position: left;
}
.Facebook{
content: url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/facebooksite_zps5h1chst4.png");
height: 50px;
width: 50px;
display:inline;
margin-left: 40px;
}
.Instagram{
content:url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/instagramsite_zpshz0ckgvs.png");
height: 50px;
width: 50px;
display:inline;
padding-left: 20px;
padding-top: 30px;
}
.Link{
content:url("http://i650.photobucket.com/albums/uu221/Wilson_Vera_Gallardo/Juul%20website/linkedinsite_zpsea0pks3w.png");
height: 50px;
width: 50px;;
padding-left: 30px;
display:inline;
text-decoration: none;
}
And this is my Jquery code:
$(".Education div:gt(0)").hide();
setInterval(function() {
$('.Education div:first')
.fadeOut(1000).next().fadeIn(2000).end().appendTo('.Education');
}, 2000);