pb de mise en page

[noiseo76]

Bonjour à tous
j'avance petit à petit sur la restructuration de notre site et j'ai un problème de mise en page
voilà ce que j'aimerais obtenir sur ma page d'accueil constitué de juste un article:

TITRE (centré)


module1 de slide photos(à gauche de la page) / Logo cliquable(centré) / module 2 de slide photos (à droite de la page)

puis du texte textetexte textetexte textetexte texte......
une image pour etre plus clair:

en fait le problème réside dans l'alignement de ces 3 éléments
sur le fontend j'obtiens:

module1
logo
module2

en image:

je travaille sous j2.5

sous word la solution serait d'appliquer un "habillage rapproché" au logo et le placer entre les modules mais sous joomla je câle

si quelqu'un a une solution je prends volontiers
merci

[toffffe]

Re : pb de mise en page

Salut
Pas facile de répondre sans avoir accès au site
mais je pense que tes div doivent avoir une largeur défini et il faut leur mettre des

float:left;

dans le css c'est la manière la plus propre de mettre des div block l'un a côté de l'autre

[lomart]

Re : pb de mise en page

la plus grosse difficulté va être le centrage vertical.
un moyen rapide d'y arriver est de faire un tableau

<table style="border: medium none ; width: 100%;">
  <tbody>
    <tr>
      <td style="vertical-align: middle; width: 45%; text-align: center;">
module1 de slide photos(à gauche de la page)
      </td>
      <td style="vertical-align: middle; width: 10%; text-align: center;">
Logo cliquable(centré)
      </td>
      <td style="vertical-align: middle; width: 45%; text-align: center;">
module 2 de slide photos (à droite de la page)
      </td>
    </tr>
  </tbody>
</table>

Si le centrage vertical ne pose pas de problème, il faut mieux opter pour des blocs div

[noiseo76]

Re : pb de mise en page

Merci à vous deux de vos réponses mais j'avoue être très limité en language codé
j'ai effectivement pensé au tableau que je viens d'essayer (mais avec l'aide des icones fournies pour nous simplifier la vie sans avoir à passer par l'écriture pure )
il me reste à charger quelques photos pour voir le résultat final

[toffffe]

Re : pb de mise en page

la plus grosse difficulté va être le centrage vertical.
un moyen rapide d'y arriver est de faire un tableau

Un autre moyen beaucoup plus simple mais plus propre que les tableaux c'est le display: table et display:table-cell
Mais j'avoue faut le prendre en main celui là

[lomart]

Re : pb de mise en page

Un autre moyen beaucoup plus simple mais plus propre que les tableaux c'est le display: table et display:table-cell

Je pensais que tu allais donner un exemple

Comme c'est pas le cas, je vais indiquer la méthode que j'utilise

    <style type="text/css">
    div.vh-center {
        width:100%;
        height:100%;
        display:table;
        text-align: center;
    }
    div.vh-center div {
        display:table-cell;
        vertical-align:middle;
        border:red solid 1px;
    }
    </style>
    <div class="vh-center">
        <div>module1 de slide photos(à gauche de la page)</div>
        <div>LOGO</div>
        <div>module2 de slide photos(à droite de la page)</div>
    </div>

[toffffe]

Re : pb de mise en page

héhé,
En fait c'est vrai que là je me disais que les tutos là dessus sont déjà tellement nombreux, mais en plus ton exemple est meilleur Lomart

[lomart]

Re : pb de mise en page

Je met systématiquement cette classe dans mes css (sans le border). Je la trouve assez pratique !

Je n'en avais pas parlé de prime abord pour ne pas compliquer. Ce que cette phrase me confirme :

mais avec l'aide des icones fournies pour nous simplifier la vie sans avoir à passer par l'écriture pure )

@noiseo76
il suffit de coller mon code (en mode code) dans l'article et de remplacer le texte par le contenu réel.
Puis de supprimer le "border:red solid 1px;" une fois l'article calé

[noiseo76]

Re : pb de mise en page

@noiseo76
il suffit de coller mon code (en mode code) dans l'article et de remplacer le texte par le contenu réel.
Puis de supprimer le "border:red solid 1px;" une fois l'article calé

Lomart j'ai collé ton code et remplacé le texte par mon contenu mais les 3 éléments s'affichent toujours superposés

[noiseo76]

Re : pb de mise en page

je m'aperçois en fait qu'après enregistrement des modifs il ne reste que ceci :

<p style="text-align: left;" align="center">  </p>
<div class="vh-center">
<div>{loadposition slideplongee}</div>
<div><img src="images/DOSSIER_CSG/images/logos/csg_logo.jpg" border="0" alt="" /></div>
<div>{loadposition slidepiscine}</div>
</div>

Est-ce normal ( tu l'as bien compris je n'y connais rien )

[lomart]

Re : pb de mise en page

Si tu retournes dans l'article, le code est-il toujours là ?
Si non, il faut le mettre avec un éditeur qui ne nettoie pas le code

[lomart]

Re : pb de mise en page

Tu peux aussi copier la partie css de mon code dans le fichier xxx.css de ton template

[noiseo76]

Re : pb de mise en page

Si tu retournes dans l'article, le code est-il toujours là ?

comme précisé plus tôt voilà ce qu'il me reste après avoir enregistré les modifs:

<p style="text-align: left;" align="center">  </p>
<div class="vh-center">
<div>{loadposition slideplongee}</div>
<div><img src="images/DOSSIER_CSG/images/logos/csg_logo.jpg" border="0" alt="" /></div>
<div>{loadposition slidepiscine}</div>
</div>

Est-ce normal ( tu l'as bien compris je n'y connais rien )

[lomart]

Re : pb de mise en page

Est-ce normal ( tu l'as bien compris je n'y connais rien )

Non et je donne 2 solutions dans mes derniers posts :
- editeur mode code seul (none) ou configurer JCE pour qu'il accepte les styles
- mettre le css dans le fichier css

[noiseo76]

Re : pb de mise en page

- mettre le css dans le fichier css

j'ai testé mais sans résultat

- editeur mode code seul (none) ou configurer JCE pour qu'il accepte les styles

là je décroche

d'autant que si je ne me trompe pas dans la liste de mes plugins je n'ai pas JCE
mais Non WYSIWYG -TinyMCE-CodeMirror