1448 sujets

Web Mobile et responsive web design

Bonjour tout le monde,

J'ai une petite question. Sur mon site j'ai une première colonne à gauche de contenu et à droite j'ai une deuxième colonne avec des blocs de ré-assurance. Sur certaines page mon contenu est beaucoup plus long que ma colonne de droite, donc j'ai mis le reste de contenu sur tout la largeur en dessous des précédentes div pour question d'esthétique et gain de place aussi (page moins longue).
Hors sur mobile, cette logique veut que l'on voit dans l'ordre Contenu -> Blocs de réassurance -> suite du contenu
ce qui n'est pas du tout pratique...
Auriez-vous une solution à ça ?
upload/63492-contenu.jpg
float ?
Avec bootstrap j'ai fait :

<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>

<div class="row">
<div class="col-md-12"></div>
</div>
Donne nous le code source parce-que j'ai pas trop compris Smiley ohwell
EDIT : En privé si tu préfère.
Modifié par WaPlug (15 Dec 2016 - 14:52)
Idéalement, il ne faudrait pas de coupure entre contenu et suite du contenu...

Mais il est vrai que je ne m'y connais pas en Bootstrap...

Néanmoins cette mise en page est assez simple et peut-être l'utilisation de ce Bootstrap n'est pas obligatoire...

Smiley smile
Merci Zelena mais ce n'est qu'un aperçu dégrossi, le site est finalisé à 90% avec bootstrap.
> WaPlug connait-tu toi bootsrap ?
tatoune a écrit :
> WaPlug connait-tu toi bootsrap ?

Oui j'ai pas mal d’expérience.

Zelena a écrit :
Néanmoins cette mise en page est assez simple et peut-être l'utilisation de ce Bootstrap n'est pas obligatoire...

Exact et c'est pas parce-que tu utilise Bootstrap que t'est obliger d'utiliser seulement les class prédéfini.

EDIT : Quelle ordre tu préférerais ?
Modifié par WaPlug (15 Dec 2016 - 15:09)
Merci waplug.

En fait visuellement sur desktop je souhaite faire comme ma maquette (ce que j'ai actuellement d'ailleurs) mais sur mobile je souhaiterais avoir le contenu, sa suite, et après les blocs de réassurance, ce qui est plus logique. Mais là ma manière de faire, c'est à dire 2 row n'est sans doute pas la bonne... et je ne vois comment faire Smiley decu
Je vais faire une page de mon coté en faisant comme sur ta maquette et de sorte qui'il soit comme tu le souhaite sur mobile.
Voila j'ai fait une petite page a l'arrache juste pour que tu comprenne.
<!DOCTYPE html>
<html lang="en">
<head>
  <title>POUR TATOUNE [smile]</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  
<div class="container">
  <div class="col-sm-12" style="background-color:Grey;">
      <h1>Blabla</h1>
  </div>
    <div class="col-sm-8" style="background-color:Silver;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada pellentesque eros, ac fermentum metus cursus at. Cras quis leo ante. In a sapien tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris scelerisque ullamcorper risus, in molestie leo vulputate non. Proin suscipit bibendum convallis. Cras eu dolor a mi tristique aliquam id id sem. Sed libero metus, viverra vitae egestas eget, convallis et est. Sed tempor lectus purus, a interdum justo auctor sed. Etiam finibus rhoncus nulla, a imperdiet ante luctus sollicitudin. Sed condimentum consequat risus, sed blandit justo hendrerit at. Vivamus tempus, libero in dignissim vestibulum, est nulla gravida massa, sit amet varius massa orci in mauris. Nunc bibendum, dui in rutrum pretium, mauris augue volutpat quam, vitae vulputate arcu nisi at nibh. Mauris risus lorem, convallis ut feugiat eu, facilisis sit amet orci.

Etiam ut erat malesuada, imperdiet mauris ac, tempus ante. Nulla nec molestie ipsum, at auctor tellus. In ut malesuada odio. Duis tempor, massa vel tempor sagittis, ante urna mollis nisl, id laoreet nibh justo ac tellus. Donec purus nulla, malesuada rhoncus molestie sit amet, egestas sed sapien. Integer et blandit nulla, in bibendum metus. Pellentesque vitae mattis mauris. Sed laoreet, diam in molestie condimentum, quam nisi accumsan elit, eu scelerisque magna metus non metus. Fusce dapibus eu sem a placerat.

Duis id commodo ante. Nam eu imperdiet neque. Etiam orci erat, fringilla ut felis at, vestibulum placerat justo. Vestibulum volutpat ornare arcu, eget faucibus ligula ullamcorper eu. Vivamus ut aliquet tortor. Vestibulum semper tristique tristique. Aliquam in leo condimentum, dapibus quam egestas, malesuada ipsum. Nunc gravida fermentum lectus accumsan iaculis. Etiam interdum lorem et mi bibendum porttitor.

Quisque at aliquet mi, ac rutrum diam. Praesent finibus vehicula varius. Quisque laoreet ornare sapien id sollicitudin. Aenean elit odio, rhoncus sed erat sit amet, luctus cursus nulla. Integer fermentum rhoncus augue nec ultricies. Cras convallis nisi nec gravida ultricies. Cras nulla quam, tristique laoreet finibus vitae, iaculis eget sapien. Nunc aliquam orci tortor, a lobortis diam rhoncus nec. Donec rutrum elit sit amet elit rhoncus porta. In commodo, nulla a hendrerit posuere, purus nunc pharetra lectus, vel suscipit neque nunc non urna. Aenean mollis gravida quam, vitae dignissim libero mattis at. Quisque porttitor velit vitae placerat euismod. Morbi auctor enim eu magna vehicula ultricies. Morbi feugiat nec nisi nec dapibus. Maecenas facilisis elementum nisi at luctus. Etiam aliquam scelerisque ligula eget mattis.

Curabitur aliquet suscipit tempor. Integer tincidunt mauris vel nunc ornare euismod. Pellentesque suscipit, eros ac elementum mollis, velit leo fringilla metus, nec placerat metus augue ac augue. Nullam sed ex leo. Vestibulum sed dolor eu metus hendrerit sagittis. Cras lobortis ac mi quis imperdiet. Duis iaculis facilisis ipsum in fermentum. Nulla faucibus velit et nisl lobortis, quis rhoncus leo aliquam. Etiam rutrum tempus felis at luctus. Duis mattis nunc ut ligula egestas ornare. Fusce lorem quam, tempus a leo in, volutpat bibendum risus.</p></div>
    <div class="col-sm-4 hidden-xs" style="background-color:Silver;"><h1>Bloc #1</h1></div>
    <div class="col-sm-4 hidden-xs" style="background-color:Grey;"><h1>Bloc #2</h1></div>
    <div class="col-sm-4 hidden-xs" style="background-color:Silver;"><h1>Bloc #3</h1></div>
<div class="col-sm-12" style="background-color:Grey;">
	<h1>Blabla Suite</h1>
</div>
    <div class="col-sm-4 visible-xs" style="background-color:Silver;"><h1>Bloc #1</h1></div>
    <div class="col-sm-4 visible-xs" style="background-color:Grey;"><h1>Bloc #2</h1></div>
    <div class="col-sm-4 visible-xs" style="background-color:Silver;"><h1>Bloc #3</h1></div>
</div>
</body>
</html>


Il faut utiliser les classes "visible-xs" et "hidden-xs".
hidden = cacher, hidden-xs = cacher quand c'est un petit ecran
visible = visible, visible-xs = visible quand c'est un petit ecran

à toi de l'adapter a ta page. Smiley lol
Modifié par WaPlug (15 Dec 2016 - 15:47)
oh yes tout simplement, j'osais pas trop mettre 2 fois le même contenu par rapport à Google et au référencement...
Merci en tout cas !
Administrateur
Bonjour,

il manque les .row dans ce dernier exemple Smiley cligne

Tatoune >
* Histoire d'être certain de quoi on parle : tu utilises bien Bootstrap 3 ? Et pas BS4 pour lequel il y a 2 grilles de dispo dont 1 à base de Flexbox.
* si le contenu principal doit revenir sous les blocs de réassurance, pourquoi ne pas faire flotter ces derniers, tout simplement ? Avec, si nécessaire, une grosse marge dessous pour éloigner le contenu.
Pour ce qui est de faire passer ces blocs sous le bloc principal en mobile, il y a une manière propre avec Flexbox et la propriété order (il faut un élément parent qui sera en display: flex sous mobile et rien sous desktop) et une manière un peu crade avec display: table-footer-group; pour qu'un bloc se retrouve sous tous ses frères (et display: caption; pour le faire passer avant tous les autres)
Modérateur
tatoune a écrit :
oh yes tout simplement, j'osais pas trop mettre 2 fois le même contenu par rapport à Google et au référencement...
Merci en tout cas !

C'est effectivement pas terrible, pour le référencement et/ou la maintenance.
Les propositions de Felipe semblent être la manière propre de le gérer (flexbox ou flottant)