3 colonnes en float, colonnes décalées verticalement

[Fantazie]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous,

j'ai voulu passer par des div et non un tableau pour faire des colonnes mais j'ai un léger souci qui me turlupine. Je sais que le float a ses aléas mais je ne vois pas comment y remédier. CF le screen.

Les codes:

Code:

<div id="modeleparzadie">
<div id="modele1">
<div id="affiche">
<img src="https://zupimages.net/up/18/27/vala.jpg" />
</div>

<div id="infofilms">
<span class="titremodele"> Informations</span>
<div id="textinfofilms">
[b]Titre Original[/b] : Kemonomichi
[b]Pays :[/b] Japon
[b]Date de sortie :[/b] 28 juillet 2017
[b]Réalisateur :[/b] Eiji Uchida
[b]Acteurs :[/b] Sairi Itô, Kenta Suga, Kaito Yoshimura
[b]Genres :[/b] Drame, Comédie
[b]Durée :[/b] 95 minutes</div></div> </div>
<div id="modele2">
<div id="badesfilms">
<iframe width="200" height="160" src="https://www.youtube.com/embed/hqU83l2-XdE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="detailsfilms">
<span class="titremodele"> Détails</span>
<div class="textdetails">
[color=#062A00][size=15][b]Langue [/b]: Japonais, Anglais
[b]Sous-titres[/b] : Français
[b]Format[/b] : MKV
[b]Taille[/b] : HD 2300 Mo[/size][/color]
<center>[url=http://www.imdb.com/title/tt5645536/][img]https://zupimages.net/up/18/29/ng7j.jpg[/img][/url]</center>
</div></div></div>
<div id="modele3">
<div id="synopsisfilm">
<span class="titremodele"> Synopsis</span>
<div id="textsynopsis">
La mère d'Ai est une adepte des religions et place sa fille dans une secte. Ai y restera Sept ans, jusqu'à la fermeture de cette secte par la Police. Ai retrouve un nouveau foyer et fréquente l'école, pour la première fois. Malheureusement, elle est rejetée par ce foyer et doit retrouver un autre endroit pour se reconstruire La seule personne qui la comprend est son ami, Ryota, un garçon instable, qui cherche toujours à la protéger....
<br />
Ce film se base sur une histoire vraie.
</div>
</div>

<div id="lienscaches">
<span class="titremodele"> Liens</span>
<div class="avertoliens"> Laissez un petit "Merci", pour avoir accès aux liens.
(vous pourrez éditer vos messages par la suite, pour y déposer vos remarques sur le film)
[hide] Version HD

https://uptobox.com/87zav4pvjc6n

https://1fichier.com/?mu0jksp5ku7wpdxpsm75


[/hide]
</div>
</div>
<div class="clear"></div>
</div>

Code:

/* place les blocs internes */
    #modele1 {
    float: left;
    width: 20%;
    background: lightblue;
    }
 #modele2 {
 float: right;
 width: 30%;
 background: burlywood;
    
 }
 
 #modele3 {
 overflow: hidden;
 background: khaki;
        margin-left: 21%;
       margin-right: 31%
    font-size: 50%;
    }

#badesfilms {
  
  text-align: center;
}

#modeleparzadie {
  
  height: auto;
}

#modeleparzadie > .clear {
  clear: both;
  height: 0; overflow: hidden;
}

.titremodele {
  font-family: 'Kaushan Script', cursive;
}

Les dimensions sont en % car le forum est en % et non en px. Et je souhaiterais ne pas passer par les media quieres. Sinon j'ai vu un tuto sur des sortes de webkit flex ou quelque chose approchant, afin de faire des blocs et colonnes responsives. Mais je ne sais pas si c'est compatible pour tous par contre.

Enfin, vous me direz si c'est rien à modifier, si je me suis plantée ou si je dois passer par autre chose que des div et float.

Merci d'avance pour le coup de pouce et à plus tard !=)

[reshiram44]

je ne vois pas le screen

[Fantazie]

J'ai tenté de rééditer mais a priori c'est bien sous le spoiler, je le mets en lien direct dans mon commentaire

https://imgur.com/iQqalxU

[Le Grand Duc]

Quand les DIVs ont été introduites dans le HTML, un certain nombre de puristes plus blancs que blanc prétendent que c'est un grave pécher que d'utiliser des tableaux pour du texte autre que des données numériques. Moi je veux bien, sauf que les DIVs sont beaucoup plus difficiles à placer et en général à gérer que les tableaux. Je les évite le plus possible.
Quand j'ai à afficher quoi que ce soit en tableau, que ce soit des données, du texte ou des images, j'utilise un tableau.

[Invité]

Hello Fantazie,

je confirme les dires de "Le Grand Duc" , il vaut mieux passer par une table :

Code:


<table width="100%">
<tr>
<td width="33%">1</td>
<td width="33%">2</td>
<td width="33%">3</td>
</tr>
</table>



Le Grand Duc,
on disait aussi: trop de div tue les divs et pourtant .

C'est basique mais le résultat est là.

a++

[Fantazie]

Coucou Le Grand Duc et Milouze14

Je vous remercie pour vos conseils, je transformerai donc tout en tableau. Effectivement, je ne vous cache pas que j'avais un peu entendu ce refrain "si on peut se passer des tableaux...". D'ailleurs les nouveaux templates de modernbb et sûrement de la awesomebb (je suis degoutée, j'ai déjà tout codé pour le modernbb mais qui sait dans un an, quand les bugs de la dernière version seront corrigés, j'y passerai *_* ) ne sont plus avec des tableaux j'ai remarqué.

Comme je vois que vous êtes connaisseurs et je le sais car y'a environ 2-3ans j'avais appris les bases de forumactif et avais suivi un tuto de Milouze pour la fusion de la toolbar (crédits dans un topic de notre forum d'ailleurs) ^-^, je voudrais vous demander une petite info liée à tout ce que j'ai pu lire sur les colonnes quand j'ai cherché quelle erreur j'avais pu commettre.

J'ai lu ce tuto, et je me demandais si dans la théorie, ce système pouvait aboutir à la même chose que le tableau ? Dans l'immédiat, je garderai aussi la version tableau si la réponse est oui car je ne connais pas encore assez ce flexbox mais je pourrai m'y essayer plus tard. Qu'en pensez-vous ? C'est uniquement pour du texte, à limiter à certains usages ou ce serait faisable pour ce que j'ai mis avec mon screen svp?

[Invité]

Re,
hum,cette compilation de divs est placée dans quel template stp ?
La version ModernBB est à mon avis, la plus médiocre à l'heure actuelle.

La version "Awesomebb" se base sur cette dernière mais bien plus propre dans le codage et l'aspect.
Ce n'est que mon avis.


a++

[Fantazie]

Cela ne se place dans aucun template en fait C'est juste a priori pour créer des effets de colonnes .

Han tu m'as déprimé pour la version modernbb T_T merci pour ton avis tout de même, j'attendrai de voir dans quelques mois pour un changement, là je n'aurais pas l'énergie pour x)

[Le Grand Duc]

Disons EN GROS qu'on peut faire beaucoup plus de choses avec les DIVs, Y COMPRIS simuler des tableaux, mais si ce dont on a besoin c'est un simple tableau, un bête tableau fait l'affaire.
Mais il y a toujours des nerds qui aiment la gymnastique intellectuelle L'ennui c'est quand ils érigent leur prouesses académiques en règle absolue, là ils deviennent fatigants.
Ça doit être les mêmes qui ne jurent que par les bases de données 110% relationnelles

[Fantazie]

Ahah merci Le Grand Duc!

Je mets le sujet en résolu du coup!

Bonne nuit à vous deux.