Partage

Problème superposition de deux éléments

10 janvier 2018 à 11:53:33

Bonjour,

Voila mon soucis, je n'arrives pas a superposer mes deux div.

Une contient la barre de menu et la deuxieme um carrousel. Selon la position que je te donne les elements sont superposes mais decales et pas aligne en haut de la page (voir capture ecran)

J'aimerais qu'en version mobile l'ordre de ces éléments soit respecte: 1 Barre menu 2 Carrousel (ou bien que celui-ci disparaisse)

Voici mon code html

<body id="pageBody">
<div id="slider">
  <figure>
    <img src="images/photo-accueil1.jpg" alt>
    <img src="images/accueil2.jpg" alt>
    <img src="images/photo accueil2 test.jpg" alt>
    <img src="images/photo-accueil1.jpg" alt>
  </figure>
</div>



<div id="decorative2">

            <div class="container">

        <div class="divPanel topArea notop nobottom">
            <div class="row-fluid">
                <div class="span12">

                    <div id="divLogo" class="pull-left"><img src="images/logo.png" alt=""/>

                  </div>

                    <div id="divMenuRight" class="pull-right customnavbar">
                    <div class="navbar">
                        <button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
                            <img src="images/symbole-.png" alt=""/> <span class="icon-chevron-down icon-white"></span>
                        </button>
                        <div class="nav-collapse collapse">
                            <ul class="nav nav-pills ddmenu">
                                <li class="dropdown active"><a href="">...</a></li>
							  <li class="dropdown active"><a href="">...</a></li>
                              <li class="dropdown active"><a href="">...</a></li>
                                <li class="dropdown active"><a href="">...</a></li>
                                <li class="dropdown active"><a href="">...</a></li>
</li>
                            </ul>
                        </div>
                    </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

CSS Slider

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

#slider figure 
{
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}

#slider 
{ 
	width: 100%;
	max-width: 1000px; 
	overflow: hidden; 
	position: relative;	
	
}

#slider figure {
   
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}

#slider figure img 
{
	width: 20%;
	height: auto; 
	float: left; 
	position: relative;
}

CSS zone menu

#decorative2{height: 165px; background-color:#000000; opacity: 0.6;}

CSS zone menu 2

#decorative2 {position:fixed;top:0;left:0;right:0;z-index:1032}

J'ai essaye avec différentes propriétés de positionnement sans succès> Cela me semble pourtant bête

Je vous remercie par avance,

-
Edité par XOne 10 janvier 2018 à 15:27:01

Gh0stFive

11 janvier 2018 à 10:19:27

Salut

Il faut que tu enfermes tes 2 div dans une div parent, que tu lui mettes une position relative

ensuite à ta deuxième div (carousel) tu mets une position:absolute;top:0;left:0;width:100%;

et ta première div (menu) tu mets une position relative avec un z-index > 1

XOne

13 janvier 2018 à 10:15:26

@Gh0stFive,

Merci pour ton retour, quand tu parles des deux div tu parles de la div "decorative2" et "container" ?

Je te remercie,

Gh0stFive

15 janvier 2018 à 12:43:17

<html>
<head>
<style>
body {
	margin:0 auto;
	padding:0;
	max-width:1200px;
	font-family:'Arial';
}

.container > .carousel {
	position:absolute;
	width:100%;
	height:500px;
	top:0;
	left:0;
	border:1px solid red;
}

.container > .carousel > img {
	width:100%;
	height:100%;
}

.container > .menu {
	background:rgba(0,0,0,0.5);
	position:relative;
	z-index:2;
	border:1px solid blue;
}

.container > .menu > div {
	display:inline-block;
	margin: 0 15px;
	color:white;
	font-size:13pt;
}

.container {
	position:relative;
}
</style>
</head>
<body>
<div class="container">
	<div class="menu">
		<div>Test1</div>
		<div>Test2</div>
		<div>Test3</div>
		<div>Test4</div>
	</div>
	<div class="carousel">
		<img src="https://i.ytimg.com/vi/_dqPv5KJIW0/maxresdefault.jpg"/>
	</div>
</div>
</body>
</html>

Désolé j'avais pas vu ton dernier message, je t'ai fait un exemple, si c'est pas ca, tu pourrais mieux réexpliquer ton problème ?

XOne

15 janvier 2018 à 14:47:12

L'exemple que tu as fais c'est exactement ce que je veux (je veux que lors du scroll de la page la barre de menu reste fixe et que tout le reste de la page défile dessous)

En mettant les propriétés que tu me donnes cela ne fonctionne pas.

J'ai créé une div "parent"

<body id="pageBody">
<div class="mycontainer">
<div id="decorative2">
            <div class="container">

        <div class="divPanel topArea notop nobottom">
            <div class="row-fluid">
                <div class="span12">

                    <div id="divLogo" class="pull-left"><img src="images/logo-blanc.png" alt=""/>

                  </div>

                    <div id="divMenuRight" class="pull-right customnavbar">
                    <div class="navbar">
                        <button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
                            <img src="images/symbole-barbacane.png" alt=""/> <span class="icon-chevron-down icon-white"></span>
                        </button>
                        <div class="nav-collapse collapse">
                            <ul class="nav nav-pills ddmenu">
                                <li class="dropdown active"><a href="index.html">Accueil</a></li>
							  <li class="dropdown active"><a href="index.html">...</a></li>
                              <li class="dropdown active"><a href="index.html">...</a></li>
                                <li class="dropdown active"><a href="index.html">...</a></li>
                                <li class="dropdown active"><a href="index.html">...</a></li>
</li>
                            </ul>
                        </div>
                    </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<div id="slider">
  <figure>
    <img src="images/photo-accueil1.jpg" alt="">
    <img src="images/photo-accueil1.jpg" alt="" >
    <img src="images/photo accueil2 test.jpg" alt="" >
    <img src="images/photo-accueil1.jpg" alt="" >
  </figure>
</div>

                  </div>

Au carrousel position absolute

#slider 
{ 
	width: 100%;
	max-width: 1000px; 
	overflow: hidden; 
	position: absolute;	
	
}

Et mon menu

#decorative2{height: 165px; background-color:#000000; opacity: 0.6;position:relative;
    z-index:2;}

#decorative2 {z-index:100 !important}

#decorative2 {position:fixed;top:0;left:0;right:0;z-index:1032}

Enfaisant cela le contenu qui se trouve plus bas par rapport au carrousel se retrouve sous le carrosel et les changement ne se font pas.

De plus les images du carrousel ne font pas la largeur de la page Etrange

Merci pour ton aide ;)

Gh0stFive

15 janvier 2018 à 15:00:20

ah, j'avais pas bien compris ton problème

<html>
<head>
<style>
body {
    margin:0 auto;
    padding:0;
    font-family:'Arial';
}
 
.container > .carousel {
    width:100%;
    height:500px;
}
 
.container > .carousel > img {
    width:100%;
    height:100%;
}
 
.container > .menu {
    background:rgba(0,0,0,0.5);
    position:fixed;
	width:100%;
	top:0;
	left:0;
    z-index:2;
}
 
.container > .menu > div {
    display:inline-block;
    margin: 0 15px;
    color:white;
    font-size:13pt;
}
</style>
</head>
<body>
<div class="container">
    <div class="menu">
        <div>Test1</div>
        <div>Test2</div>
        <div>Test3</div>
        <div>Test4</div>
    </div>
    <div class="carousel">
        <img src="https://i.ytimg.com/vi/_dqPv5KJIW0/maxresdefault.jpg"/>
    </div>
	<div style="height:4000px"></div>
</div>
</body>
</html>

XOne

15 janvier 2018 à 15:26:24

Dans ton deuxieme exemple sauf erreur de ma part, le menu ne semble pas etre par dessus le carrousel et lors du scroll le menu n'a pas l'air "fixe" et le carrousel ne se "glisse" pas dessous non ?

Gh0stFive

15 janvier 2018 à 15:32:02

si tu veux que le menu suive la scroll, tu mets absolute au lieu de fixed mais on revient sur le première exemple, c'est une autre manière de l'écrire (la deuxième étant plus optimisé)

XOne

15 janvier 2018 à 15:50:16

Dans l'exemple de code que je t'ai envoye il y a pour la div "decorative2", deux fois z-index

z-index:100 !important

z-index:1032

Je dois les enlever ?

-
Edité par XOne 15 janvier 2018 à 15:50:48

Gh0stFive

15 janvier 2018 à 16:01:43

du moment ou le z-index de ton menu est > à celui du slider c'est bon

/!\ attention a pas recopier bêtement mon code, toi ta classe c'est mycontainer et non container qui est dans mon exemple (et ce que j'ai écrit n'est pas la solution mais une solution)

-
Edité par Gh0stFive 15 janvier 2018 à 16:03:45

XOne

15 janvier 2018 à 22:28:26

Merci pour ton aide cependant impossible en essayant de plusieurs manière mon image ne se "colle" pas sous le menu...

J'ai tout essaye

Lord Morpheus

15 janvier 2018 à 22:32:54

Bonsoir,

Peux tu poster ton HTML et CSS mis à jour d'après l'aide de Gh0stFive ?

Cela nous permettrai de faire le point pour ceux qui arriverai et de corriger les éventuels problèmes.

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

XOne

16 janvier 2018 à 9:37:50

@LordMorpheus

Merci pour ton message.

Voici les modifs a l'aide du 1er exemple de Gh0stFive,

<body id="pageBody">
<div class="mycontainer">
<div id="decorative2">
            <div class="container">

        <div class="divPanel topArea notop nobottom">
            <div class="row-fluid">
                <div class="span12">

                    <div id="divLogo" class="pull-left"><img src="images/logo-.png" alt=""/>

                  </div>

                    <div id="divMenuRight" class="pull-right customnavbar">
                    <div class="navbar">
                        <button type="button" class="btn btn-navbar-highlight btn-large btn-primary" data-toggle="collapse" data-target=".nav-collapse">
                            <img src="images/symbole-.png" alt=""/> <span class="icon-chevron-down icon-white"></span>
                        </button>
                        <div class="nav-collapse collapse">
                            <ul class="nav nav-pills ddmenu">
                                <li class="dropdown active"><a href="index.html">Accueil</a></li>
							  <li class="dropdown active"><a href="index.html">...</a></li>
                              <li class="dropdown active"><a href="index.html">...</a></li>
                                <li class="dropdown active"><a href="index.html">...</a></li>
                                <li class="dropdown active"><a href="index.html">Contact</a></li>
</li>
                            </ul>
                        </div>
                    </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>
<div id="slider">
  <figure>
    <img src="images/photo-accueil1.jpg" alt="">
    <img src="images/photo-accueil1.jpg" alt="" >
    <img src="images/photo accueil2 test.jpg" alt="" >
    <img src="images/photo-accueil1.jpg" alt="" >
  </figure>
</div>

                  </div>

Slider

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}

#slider figure 
{
  position: relative;
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  left: 0;
  text-align: left;
  animation: 30s slidy infinite;
}

#slider 
{ 
	width: 100%;
	max-width: 1000px; 
	overflow: hidden; 
	position: relative;	
	
}

#slider figure {
   
  width: 500%;
  margin: 0;
  padding: 0;
  font-size: 0;
  text-align: left;
}

#slider figure img 
{
	width: 20%;
	height: auto; 
	float: left; 
	position: relative;
}

Container

.mycontainer > .slider
{
	position:absolute;
    width:100%;
    height:500px;
    top:0;
    left:0;
}

.mycontainer > .decorative2
{
	 position:relative;
    z-index:2;
}

.mycontainer
{
	position: relative;
}

Barre du menu

#decorative2{height: 165px; background-color:#000000; opacity: 0.6;}

#decorative2 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1032
}

#decorative2 {z-index:100 !important}

#decorative2 {position:static;  height:auto;}

   #decorative2 {position:static}

Je te remercie, :)

XOne

17 janvier 2018 à 10:50:48

Bonjour, Bonjour,

Est-il possible que cela ne fonctionne pas a cause du fait que j'ai plusieurs zindex dans ma div "decorative2" ?

Cela peut-il créer un bug ?