[Résolu] Problème background par LeZellus - page 1

Pour le HTML :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>CV Mathéo Zeller</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->
        <!--build:css css/styles.min.css-->
        <link href="./css/bootstrap.min.css" rel="stylesheet" >
        <link rel="stylesheet" href="./css/styles.css">
        <!--endbuild-->
        </head>
    <body>
        <header class="container-fluid">
            <div class="row justify-content-between header">
                <div class="col-md-4 col-sm-6">
                    <h1>Mathéo Zeller</h1>
                    <p>Etudiant Web développeur</p>                   
                </div>
                <div class="col-md-4 col-sm-6 portfolio">
                    Portfolio
                </div>
            </div>
            <div class="headerEnd">
                
            </div>
            <div class="test2">
                petit test
            </div>
        </header>
        
        <!-- <section>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </section> -->
        <!--build:js js/main.min.js -->
        <script src="./js/lib/jquery.min.js"></script>
        <script src="./js/lib/bootstrap.min.js"></script>
        <script src="./js/lib/bootstrap.bundle.min.js"></script>
        <script src="./js/main.js"></script>
        <!-- endbuild -->
    </body>
</html>

Pour le CSS :

body{
	font-size: 18px;
	margin: auto;
	background-color: grey;
}
.portfolio{
	text-align: right;
}
header{
	background-color: green;
}
.header{
	width: 70%;
	align-items: center;
	padding-top: 3em;
	margin: auto;
	padding-bottom: 20%;
}
.headerEnd{
	height: 4em;
}
.test2{
	position: absolute;
	width: 200px;
	height: 200px;
	border: 1px solid black;
/*	z-index: 1;*/
}

Voilà j'espère que j'ai fais ce qu'il faut

LeZellus

17 janvier 2018 à 16:19:59

Bonjour , je souhaite obtenir l'effet suivant : https://cms-assets.tutsplus.com/uploads/users/1223/posts/28115/image/Tile.png

Je m'explique , au niveau du bloc qui "survole" le background vert ET blanc , et je souhaiterais faire la même chose , j'ai donc mis mon bloc en position absolute , mais impossible de le faire passer par dessus les 2 backgrounds pour le caler au milieu , même en trafiquant avec le z-index

NB: dans mon code le BG vert est celui du header , et le gris celui du body

Merci de votre réponse !

Mathéo

Mewen_bzh

17 janvier 2018 à 16:21:39

Bonjour,

Impossible de te répondre sans voir ton code. Nous ne sommes malheureusement pas devins.

Je ne réponds pas aux messages privés.

17 janvier 2018 à 16:35:38

Flosteo

17 janvier 2018 à 18:11:58

Hello !

Ça ?

Regarde le cours sur Flexbox : ici.

Ainsi que ce tutoriel sur le positionnement css (notamment onglet 4 que j'ai utilisé dans le code).

-
Edité par Flosteo 17 janvier 2018 à 18:23:38

www.florentretif-osteopathe.fr

18 janvier 2018 à 9:44:03

Flosteo a écrit:

Hello !

Ça ?

Regarde le cours sur Flexbox : ici.

Ainsi que ce tutoriel sur le positionnement css (notamment onglet 4 que j'ai utilisé dans le code).

-
Edité par Flosteo il y a environ 15 heures

Super merci ! C'est ce qu'il me fallait (le cours sur flexbox est déjà lu plusieurs fois depuis longtemps mais merci pour le tips)

Problème background

Problème background

Supprimer

Modérer

Signaler le message aux modérateurs