Déplacer un bloc sur mobile

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par Schwarzer Stern, 17 Mars 2015.

  1. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    640
    J'aime reçus:
    2
    Bonjour,
    un petit problème en CSS/html avec un design responsive. En version "bureau", j'ai deux colonnes, l'une contenant du texte, l'autre une image illustrant le texte ci-contre, et plusieurs lignes répétant ce schéma sous la forme :
    Code:
    <table>
<tr><td>TEXTE TEXTE TEXTE</td><td><img src="etc1.jpg"></td></tr>
<tr><td><img src="etc2.jpg"></td><td>TEXTE TEXTE TEXTE</td></tr>
<tr><td>TEXTE TEXTE TEXTE</td><td><img src="etc3.jpg"></td></tr>
</table>
    En version de bureau donc, les images apparaissent alternativement à droite et à gauche.

    En version mobile, en revanche, il n'y a plus qu'une colonne (géré en CSS), et les images "etc1" et "etc2" apparaissent logiquement immédiatement l'une sous l'autre, ce qui n'est pas du meilleur effet.

    Quelqu'un aurait-il une solution CSS pour que etc2 soit décalé sous le texte qu'elle illustre ? Sinon je pense pouvoir créer un JS pour ça, mais tant qu'à faire…
    (un exemple si je n'étais pas clair : http://www.parisdigest.com/monument/chateaudeversailles.htm)

    Merci !
     
    #1 Schwarzer Stern, 17 Mars 2015
  2. p0k3
    p0k3 WRInaute occasionnel
    Inscrit:
    2 Juin 2010
    Messages:
    314
    J'aime reçus:
    0
    Je réponds tardivement:
    Pourquoi utiliser des tableaux, quand des div font l'affaire :

    Code:
    <div class="row">
  <div class="img left">
    <img src="img1.jpg">
  </div>
  <div class="text">
    lorem ipsum dolor sit amet...
  </div>
</div>
<div class="row">
  <div class="img right">
    <img src="img1.jpg">
  </div>
  <div class="text">
    lorem ipsum dolor sit amet...
  </div>
</div>
<div class="row">
  <div class="img left">
    <img src="img1.jpg">
  </div>
  <div class="text">
    lorem ipsum dolor sit amet...
  </div>
</div>
    et en CSS :

    Code:
    .row{
  display: block;
  overflow:hidden;
}
.img.left{
  float:left;
  display:inline-block;
}
.img.right{
  float:right;
  display:inline-block;
}
    et la version mobile :

    Code:
    .img{
  display:block;
  float:none;
}
    ça marcherai très bien aussi !
     
    #2 p0k3, 19 Mars 2015
  3. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    640
    J'aime reçus:
    2
    Merci pour ta réponse !
    Effectivement, ça serait la meilleure solution, je ne suis pas fan des tableaux…mais le site en question n'est pas de moi et est composé de 100aines de pages statiques basées sur ce modèle, et en attendant de pouvoir tout refaire (peut-être en codant un petit php pour modifier tout ça) je dois conserver les tableaux… :\
    C'est peut-être le signe que je dois me bouger pour trouver la solution pour passer tout ça en div, en espérant que ce soit aussi stable que ces vieux tableaux ^^
    S'il n'y a pas d'autre solution, je vais m'y atteler.
     
    #3 Schwarzer Stern, 19 Mars 2015
  4. p0k3
    p0k3 WRInaute occasionnel
    Inscrit:
    2 Juin 2010
    Messages:
    314
    J'aime reçus:
    0
    Pas d'autres solutions je pense...
     
    #4 p0k3, 19 Mars 2015
  5. Schwarzer Stern
    Schwarzer Stern WRInaute impliqué
    Inscrit:
    16 Mai 2010
    Messages:
    640
    J'aime reçus:
    2
    J'ai surtout peur de ne pas pouvoir centrer verticalement l'image avec un float…pour l'instant mes essais sont infructueux, mais je continue…
     
    #5 Schwarzer Stern, 19 Mars 2015
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - Déplacer bloc mobile Forum Date
Déplacer un bloc adsense d'un endroit à un autre quand on passe du PC au Mobile AdSense 4 Avril 2020
Déplacer une requête cible vers une nouvelle page Débuter en référencement Dimanche à 08:59
Déplacer le contenu d'une page puis la supprimer Problèmes de référencement spécifiques à vos sites 24 Avril 2020
Deplacer une valeur d'un champs a un autre Développement d'un site Web ou d'une appli mobile 8 Octobre 2018
Déplacer les RewriteRule du .htaccess vers le vhost URL Rewriting et .htaccess 16 Janvier 2018
Déplacer du contenu d'un site + suppression page d'origine Référencement Google 28 Octobre 2016
Déplacer blog en sous-domaine vers dossier Débuter en référencement 23 Octobre 2016
Déplacer une partie d'un site pour créer un second site Développement d'un site Web ou d'une appli mobile 4 Octobre 2016
WP déplacer vers un sous domaine Problème de redirection URL Rewriting et .htaccess 1 Mai 2016
déplacer l'ascenceur d'un layer sur un scroll Développement d'un site Web ou d'une appli mobile 2 Avril 2015
Avoir un compte bancaire en France sans s'y déplacer Le café de WebRankInfo 9 Mars 2015
Déplacer son blog (associé à son ecommerce) vers une autre IP différente ? Débuter en référencement 4 Mai 2013
Déplacer sous-dossier CMS vers la racine du site Administration d'un site Web 3 Avril 2013
Déplacer des pages, dans différentes catégories, est-ce risqué ? Débuter en référencement 2 Décembre 2012
Déplacer un texte d'une page à une autre : duplicate ? Rédaction web et référencement 17 Octobre 2012
Déplacer le nom d'un sous-dossier (Identifiant) URL Rewriting et .htaccess 3 Mars 2012
Déplacer un contenu texte dans un autre cadre Développement d'un site Web ou d'une appli mobile 3 Décembre 2011
Déplacer des pages d'un site sans 301 Référencement Google 12 Novembre 2011
Déplacer un dossier ou un fichier d'un serveur FTP a un autre serveur FTP en php ? Développement d'un site Web ou d'une appli mobile 26 Mars 2010
Déplacer les liens de ma page d'accueil dans une nouvelle page ? Problèmes de référencement spécifiques à vos sites 25 Septembre 2009