Aide pour positionnement d'un slider CSS par fgaaschtt - page 1

Bonjour,

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.

Voici le code de base:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="MyGridSlider - SVG.css">
    <title>GridSlider</title>
</head>
<body>

    <input type="radio" id="trigger1" name="slider" checked autofocus>
    <label for="trigger1"></label>
    <div class="slide bg1"> Box 1</div>

    <input type="radio" id="trigger2" name="slider">
    <label for="trigger2"></label>
    <div class="slide bg2"> Box 2</div>

    <input type="radio" id="trigger3" name="slider">
    <label for="trigger3"></label>
    <div class="slide bg3"></div>

    <input type="radio" id="trigger4" name="slider">
    <label for="trigger4"></label>
    <div class="slide bg4"></div>

    <input type="radio" id="trigger5" name="slider">
    <label for="trigger5"></label>
    <div class="slide bg5">Box 5</div>
    
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}

input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

label {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid white;
    border-radius: 999px;
    background-color: transparent;
    margin: 95vh 6px 0 6px ;
    z-index: 2;
    cursor: pointer;
    transition-duration: .4s;
}

.slide {
    position: absolute;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 102vh;
    top: 0;
    left: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition-duration: .4s;
    opacity: 1;
    *filter: grayscale(); /* Need to deactivate to see background color */
}

.bg1 {
    background: limegreen;
}

.bg2 {
    background-color: mediumaquamarine;
}

.bg3 {
    background-color: magenta;
}

.bg4 {
    background-color: orange;
}

.bg5 {
    background-color: peru;
}

input:checked+label {
    background-color: white;
}

input:focus+label {
    box-shadow: 0 0 0 2px teal, 0 0 18px white;
}

input:checked~.slide {
    transform: translateX(100%);
}

 input:checked+label+.slide {
    transform: translateX(0);
    opacity: 1;
 }

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="MyGridSliderSandbox.css">
    <title>Building my slider</title>
</head>
<body>

    <header>
        <div class="NavBar">
            My beautiful nav-bar
        </div>
    </header>

    <main>

    <div class="AboutMe">
        About Me...
    </div>

    <div class="MySkills">

        <input type="radio" id="trigger1" name="slider" checked autofocus>
        <label for="trigger1"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    My Pic 1
                </div>

                <div class="SkillText">
                    <h1>Title Box 1</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger2" name="slider">
        <label for="trigger2"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 2
                </div>

                <div class="SkillText">
                    <h1>Title Box 2</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger3" name="slider">
        <label for="trigger3"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 3
                </div>

                <div class="SkillText">
                    <h1>Title Box 3</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger4" name="slider">
        <label for="trigger4"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 4
                </div>

                <div class="SkillText">
                    <h1>Title Box 4</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger5" name="slider">
        <label for="trigger5"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 5
                </div>

                <div class="SkillText">
                    <h1>Title Box 5</h1>
                </div>
            </div>

        </div>

        <input type="radio" id="trigger6" name="slider">
        <label for="trigger6"></label>
        <div class="SlideSkill">

            <div class="Skill">
                <div class="SkillPic">
                    Pic 6
                </div>

                <div class="SkillText">
                    <h1>Title Box 6</h1>
                </div>
            </div>

        </div>

    </div>

    <div class="ContactMe">
        Contact Me by email...
    </div>

    </main>

    <footer>
        <div class="Footer">
            My amazing footer
        </div>
    </footer>
    
</body>
</html>

* {
    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

Aide pour positionnement d'un slider CSS

Supprimer

Modérer

Signaler le message aux modérateurs