IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Différents plans de div


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2013
    Messages
    165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2013
    Messages : 165
    Par défaut Différents plans de div
    Bonjour à tous !

    Voici mon souci, et mon code

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    .rectangle_titre
    {
    border: 10px solid black; border-radius: 33px;
    text-align: center;
    line-height: 118px;
    font-family: Arial;
    font-size: 30px;
    height: 118px;
    width: 900px;
    color: black;
    background-color: #00d059;
    }
     
    .encadrement_rectangle_2video
    {height: 300px;width: 940px;
    }
    .rectangle_video_haut_gauche,
    .rectangle_video_haut_droite,
    .rectangle_video_bas_gauche,
    .rectangle_video_bas_droite
    {
    transition: width 1s, height 1s;
    -moz-transition: width 1s, height 1s;
    -webkit-transition: width 1s, height 1s;
    -o-transition: width 1s, height 1s;
    border: 10px solid black; border-radius: 33px; margin: 15px; margin-left:0px;
    height: 250px;
    width: 425px;
    text-align: left;
    background-color: #0090FF;
    }
    .rectangle_video_haut_gauche,.rectangle_video_bas_gauche{float: left;}
    .rectangle_video_haut_droite,.rectangle_video_bas_droite{float: right;}
     
    .rectangle_video_haut_gauche img,
    .rectangle_video_haut_droite img,
    .rectangle_video_bas_gauche img,
    .rectangle_video_bas_droite img
    {
    width:425px; height:250px; border-radius:23px;
    filter: hue-rotate(0deg);
    -webkit-filter: hue-rotate(0deg);
    -moz-filter: hue-rotate(0deg);
    -o-filter: hue-rotate(0deg);
    transition: all 1s;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    }
    .rectangle_video_haut_gauche:hover,
    .rectangle_video_haut_droite:hover,
    .rectangle_video_bas_gauche:hover,
    .rectangle_video_bas_droite:hover
    {height: 524px; width: 900px;}
     
    .rectangle_video_haut_gauche:hover img,
    .rectangle_video_haut_droite:hover img,
    .rectangle_video_bas_gauche:hover img,
    .rectangle_video_bas_droite:hover img
    {height: 100px; width: 170px; border-radius:24px
    filter: hue-rotate(50deg);
    -webkit-filter: hue-rotate(50deg);
    -moz-filter: hue-rotate(50deg);
    -o-filter: hue-rotate(50deg);
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="rectangle_titre">PROGRAMMES DE LOGOS DE FOOT POUR Ti 82 Stats.fr</div>
     
    <div class="encadrement_rectangle_2video">
    <div class="rectangle_video_haut_gauche"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/OL.gif"></div>
    <div class="rectangle_video_haut_droite"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/OM.gif"></div>
    </div>
     
    <div class="encadrement_rectangle_2video">
    <div class="rectangle_video_bas_gauche"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/PSG.gif"></div>
    <div class="rectangle_video_bas_droite"><img src="https://12a14af8-a-62cb3a1a-s-sites.googlegroups.com/site/resolutionrubikscube3x3x3/Saint%20%C3%A9tienne.gif"></div>
    </div>

    J'aimerai que lorsque je survole un élément, celui-ci se met au premier plan par rapport aux autres, il paraît que ça se résout avec le z-index mais je ne sais pas comment l'appliquer sur mon code. Merci d'avance.

  2. #2
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Bonjour,

    avec un positionnement en absolute (parent en relative) vous obtenez cela :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    .encadrement_rectangle_2video {
    	position: relative;
    	height: 300px;
    	width: 940px;
    }
    .rectangle_video_haut_gauche, .rectangle_video_haut_droite, .rectangle_video_bas_gauche, .rectangle_video_bas_droite {
    	transition: width 1s, height 1s;
    	-moz-transition: width 1s, height 1s;
    	-webkit-transition: width 1s, height 1s;
    	-o-transition: width 1s, height 1s;
    	border: 10px solid black;
    	border-radius: 33px;
    	margin: 15px;
    	margin-left: 0px;
    	height: 250px;
    	width: 425px;
    	text-align: left;
    	background-color: #0090FF;
    }
    .rectangle_video_haut_gauche img, .rectangle_video_haut_droite img, .rectangle_video_bas_gauche img, .rectangle_video_bas_droite img {
    	width: 425px;
    	height: 250px;
    	border-radius: 23px;
    	filter: hue-rotate(0deg);
    	-webkit-filter: hue-rotate(0deg);
    	-moz-filter: hue-rotate(0deg);
    	-o-filter: hue-rotate(0deg);
    	transition: all 1s;
    	-moz-transition: all 1s;
    	-webkit-transition: all 1s;
    	-o-transition: all 1s;
    }
    .rectangle_video_haut_gauche:hover, .rectangle_video_haut_droite:hover, .rectangle_video_bas_gauche:hover, .rectangle_video_bas_droite:hover {
     	height: 524px;
    	width: 900px;
    	z-index:2;
    }
    .rectangle_video_haut_gauche{
    	position:absolute;
    	top:0;
    }
    .rectangle_video_haut_droite{
    	position:absolute;
    	top:0;
    	right:0;
    }
    .rectangle_video_bas_gauche{
    	position:absolute;
    	bottom:0;
    	left:0;
    }
    .rectangle_video_bas_droite{
    	position:absolute;
    	bottom:0;
    	right:0;
    }
    .rectangle_video_haut_gauche:hover img, .rectangle_video_haut_droite:hover img, .rectangle_video_bas_gauche:hover img, .rectangle_video_bas_droite:hover img {
    	height: 100px;
    	width: 170px;
    	border-radius: 24px;
    	filter: hue-rotate(50deg);
    	-webkit-filter: hue-rotate(50deg);
    	-moz-filter: hue-rotate(50deg);
    	-o-filter: hue-rotate(50deg);
    }
    http://codepen.io/anon/pen/bCqIF

  3. #3
    Membre très actif
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2013
    Messages
    165
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 28
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Juillet 2013
    Messages : 165
    Par défaut
    Merci super ! Mais y'a t-il moyen que lorsque qu'on ne survole plus le block haut gauche, il reste au premier plan, càd devant les 3 autre blocks.
    Pour le haut droite, qu'il reste devant sur les 2 du bas et enfin le block bas gauche reste au dessus du bas droite. Je dis bien lorsque le hover se désactive.
    est-ce possible ?

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    Mais y'a t-il moyen que lorsque qu'on ne survole plus le block haut gauche
    aucune chance avec une simple directive :hover en CSS.

    D'un autre coté comment comptes tu accéder aux éléments qui seront de ce fait masqués par celui au premier plan ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Site avec différents plans
    Par concevoir dans le forum ASP.NET
    Réponses: 3
    Dernier message: 25/11/2009, 16h01
  2. largeur différente d'un div sous ie et firefox!
    Par bylka dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 06/04/2009, 17h51
  3. SQL 2005 - Même requête - différent plan d'exécution
    Par Philippe Robert dans le forum MS SQL Server
    Réponses: 3
    Dernier message: 20/06/2008, 14h50
  4. différents plans sous ASP
    Par gillot dans le forum ASP
    Réponses: 2
    Dernier message: 20/11/2007, 21h09
  5. [CSS] - notion placer en arrière-plan une div?
    Par 10-nice dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 30/08/2005, 15h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo