Sujet Précédent Sujet Suivant

Resize 2 div sans modifications

Résolu/Fermé
Utilisateur anonyme - Modifié le 4 mai 2019 à 11:30
 Utilisateur anonyme - 4 mai 2019 à 15:19
bonjour,

je suis bloqué sur un soucis assez particulier.
pouvez-vous m'expliquer comment faire en sorte de découper ma fenêtre en 2 parties qui grâce a leurs bordures commune peuvent être non pas redimensionné mais plus ou moins visible.

j'ai actuellement divisé horizontalement ma fenêtre en 2 div.
je désire que la bar mobile entre les 2 div me permette de définir qu'elle Div sera au dessus de l'autre selon comment l'utilisateur la déplace.

dans mon code fournie plus bas je vous montre cela grâce a des background différents sur chaque div .
si vous parvenez a bouger la bar centrale sans modifier la taille des backgrounds c'est tout bon, malheureusement ce n'est pas le cas actuellement. Et si par miracle vous pouvez également en profiter pour me montrer comment faire cela non plus avec des backgrounds mais avec du contenue dans la div c'est encore mieux.

PS1: je cherche également un moyen de pouvoir attraper ma barre centrale pour la bouger, actuellement seul le coin en bas a droite de la div de gauche permet de la rendre mobile.

PS2: Si quelqu'un sait comment afficher une page web dans une div sans être confronter a un soucis de "X-Frame-option same origine" je suis preneur. (avec tout ça vous aurez probablement deviner ce que je cherche a dev ^^)


Voici mon code: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/master.css">

  <title>mon site beaucoup trop bien</title>
</head>

<body>
  <div class="param">

  </div>

  <div class="Left-Side">
    <div class="Left-Window">

    </div>
  </div>
  <div class="Right-Side">
    <div class="Right-Window">
      
    </div>
  </div>

</body>
</html>


et le css qui va avec : 

html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
}

.param {
  background-color: black;
  position: fixed;
  transition: 1.5s;
  opacity: 0;
  width: 100%;
  height: 5%;
  top: 0;
}
.param:hover {
  opacity: 1;
}

.Left-Side {
  background-image: url("https://elobservadorenlinea.com/wp-content/uploads/2018/08/woman-1807533_960_720.jpg");
  border-right: dashed;
  resize: horizontal;
}
.Right-Side {
  order: 1;
  border-left: dashed;
  background-image: url("https://images.pexels.com/photos/1386602/pexels-photo-1386602.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
}
.Left-Side, .Right-Side {
  width: 50%;
  height: 100%;
  overflow: auto;
  border-color: red;
  background-size: cover;
}

.Left-Window {

}
.Right-Window {

}

.Left-Window, .Right-Window {

}

.pic {
  height: 550px;
}


j’espère beaucoup votre aide car ce projet me tiens a cœur .
merci les gens !!
A voir également:

3 réponses

Réponse 1 / 3
Utilisateur anonyme
4 mai 2019 à 11:37
petit UP du weekend.

j’espère pouvoir avancer convenablement sur ce projet perso durant ce weekend pluvieux ....

merci a vous d'avance.
0
Réponse 2 / 3
Utilisateur anonyme
4 mai 2019 à 12:07


voici un aperçu de ce que j'ai actuellement.
ici on voie bien que j'ai 2 website différents.

a la limite le faite que les page web s'adapte a a taille des mes 2 div c'est pas bien grave mais ce qui me dérange c'est cette barre centrale qui refuse a présent de bouger ....
0
Réponse 3 / 3
Utilisateur anonyme
4 mai 2019 à 15:19
j'ai fini par trouver ce qu'il me faut.
si cela peut aider certain, moi je me suis inspiré de ca : http://jsfiddle.net/T4St6/82/
0

Discussions similaires

Great Teacher Onizuka SAISON 2
remi1912 -
Firaz -

34 réponses
Brancher 2 tv sur Freebox révolution
cecilya -
Consommateur -

28 réponses
programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
Windows defender: avertissement de sécurité
surfinia -
Tchoumi -

20 réponses
A3 paysage en deux A4...est-ce possible?
nikoss -
Lilo -

10 réponses