Après 15 ans, j'ai décidé de me remettre a niveau en html et css en me réalisant un site perso / portfolio en tant que chercheur en biologie.
Je souhaite intégrer a mon site web un slider horizontal afin de présenter mes différentes compétences.
J'ai trouve mon bonheur avec ce code et je souhaite l’intégrer a mon site mais je n'y parviens pas. Le positionnement absolute/relative n'a jamais été mon fort et essaye de le pratiquer par des petits exercices.
Je souhaite l’intégrer a mon site entre deux div (construit en utilisant le grid système).
Voici un exemple simplifie de mon code actuel pour l'integration sur mon site. Désolé pour les couleur criardes, c'est ma façon de mieux visualiser les choses.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
*height: 100vh;
text-align: center;
overflow-x: hidden; /* was initially overflow: hidden */
background-color: darkgoldenrod;
}
main {
}
.Myskills {
*display: grid;
position: relative;
}
input {
position: absolute; /* was initially absolute */
opacity: 0;
cursor: pointer;
}
/* Design of the radio buttons */
label {
display: inline-block;
width: 35px;
height: 35px;
border: 2px solid blue; /* Color of the radio button border */
border-radius: 999px;
background-color: transparent;
margin: 75vh 20px 0 20px ; /* To adapt later */
*z-index: 2; /* Initial working setting: z-index: 2 */
cursor: pointer;
transition-duration: .4s;
}
.SlideSkill {
position: absolute;
*background-position: center;
*background-size: cover;
width: 100%;
height: 65vh; /* Was initially 102vh */
top: 0;
left: 0;
z-index: -1; /* Initial working setting: z-index: -1 */
transform: translateX(-100%);
transition-duration: .4s;
*opacity: 1;
background-color: gray;
}
/* Color inside the selected radio button */
input:checked+label {
background-color: transparent;
}
/* Design of the small radio button when selected */
input:focus+label {
box-shadow: 0 0 0 2px teal, 0 0 18px white;
}
input:checked~.SlideSkill {
transform: translateX(100%);
}
input:checked+label+.SlideSkill {
transform: translateX(0);
opacity: 1;
}
.Skill {
display: grid;
grid-template-columns: repeat(2, 50%);
background-color: gray;
}
.SkillPic {
border: 1px solid yellow;
padding: 50px;
}
.SkillText {
border: 1px solid red;
background-color: white;
}
.SkillText h1 {
font-size: 40px;
}
.NavBar {
background-color: palevioletred;
font-size: 25px;
text-align: left;
height: 80px;
}
.AboutMe {
display: grid;
background-color: blueviolet;
height: 130px;
}
.ContactMe {
display: grid;
background-color: darkcyan;
height: 50vh;
padding: 50px;
}
.Footer {
background-color: coral;
height: 80px;
}
Merci d'avance pour votre aide.
Aide pour positionnement d'un slider CSS
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.