Déplacer un bloc sur mobile

Schwarzer Stern · 17 Mars 2015

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 !

p0k3 · 19 Mars 2015

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 !

Schwarzer Stern · 19 Mars 2015

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.

p0k3 · 19 Mars 2015

Pas d'autres solutions je pense...

Schwarzer Stern · 19 Mars 2015

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…

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 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