1. #1
    Membre du Club Avatar de Casio
    Homme Profil pro
    Historien numérique
    Inscrit en
    novembre 2005
    Messages
    177
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Historien numérique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : novembre 2005
    Messages : 177
    Points : 50
    Points
    50

    Par défaut Déplacer des DIV en responsive

    Salutations,

    J'ai un cartouche comprenant 3 blocs (TD) dans une table.
    Je suis en train de passer cela en DIV pour être plus propre, et tant qu'a faire le rendre responsive.

    J'ai donc 3 blocs "A" / "B" / "C" en une seule ligne en mode navigateur ordinateur.
    L'idée serait de passer les blocs "A" et "C" au dessus, et "B" en dessous des deux, en mode responsive.

    Voila mon avancement actuel :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <div class="contain_locaux">
    	<div class="photo_locaux">
    		Photo du local
    	</div>
    	<div class="cartouche_locaux">
    		Adresse postale du local
    	</div>
    	<div class="map_locaux">
    		Carte du local
    	</div>
    </div>
    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
     
    /* Encarts locaux */
    div.contain_locaux {
    	width: 90%;
    	display: inline-block;
    	height: auto;
    	position: relative;
    }
    div.photo_locaux {
    	width: 160px;
    	height: 160px;
    	float: left;
    }
    div.map.locaux {
    	width: 200px;
    	height: 200px;
    	float: left;
    }
    div.cartouche_locaux {
    	width: auto;
    	height: auto;
    	float: left;
    }
     
    /* ------------------------------- */
    /* Responsive : (fenetres de moins de xxxx px)*/
    @media screen and (max-width: 1015px) {
     
    	/* Encarts locaux */
    	div.contain_locaux {
    		height: 400px;
    	}
    	div.photo_locaux {
    		float: none;
    		display: block;
    		position: absolute;
    		top: 0px;
    		left: 0px;
    	}
    	div.map_locaux {
    		float: none;
    		position: absolute;
    		top: 0px;
    		right: 0px;
    	}
    	div.cartouche_locaux {
    		float: none;
    		position: absolute;
    		top: 200px;
    		left: 200px;
    	}
    }
    C'est immonde, et je ne sais pas pourquoi le bloc "A" passe en dessous du bloc "C" en responsive.

    Aucun moyen de faire en sorte de centrer cela ? Ne pas utiliser les "top"/"left"/ ... ?

    Merci de votre aide...
    Digital self-made Man - OnLine since 1993.
    http://wda-fr.org - http://mathieu.charreyre.net

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 12 005
    Points : 32 158
    Points
    32 158

    Par défaut

    Bonjour,
    c'est typiquement le service que peut te rendre l'utilisation des « Flex-Box ».

    L'idée étant d'avoir au départ une structure HTML du style de
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="flex-row">
      <div>Contenu A</div>
      <div>Contenu B</div>
      <div>Contenu C</div>
    </div>
    avec le CSS par défaut suivant
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .flex-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .flex-row > div {
      width: 33.3333%;
    }
    puis en utilisant les MediaQueries il suffit de modifier la largeur des éléments et l'ordre d'affichage du 2éme élément, par exemple
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    @media(max-width:640px) {
      .flex-row > div {
        width: 50%;
      }
      .flex-row :nth-child(2) {
        order: 3;
      }
    }
    que du bonheur !

Discussions similaires

  1. Déplacer des div via js
    Par HoliCApplet dans le forum JavaScript
    Réponses: 1
    Dernier message: 02/02/2016, 14h40
  2. Placement des div responsive
    Par JuliaIta dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 23/05/2014, 06h59
  3. Réponses: 2
    Dernier message: 12/10/2011, 10h39
  4. Script pour déplacer des div
    Par lenoil dans le forum JavaScript
    Réponses: 1
    Dernier message: 13/10/2006, 14h48
  5. inserer des " dans un response.write
    Par jefferson dans le forum ASP
    Réponses: 4
    Dernier message: 30/12/2004, 12h05

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