[Résolu] XHTML : ajustement des colonnes sur une page

[Emm']

Bonjour,

Aller ! Un petit coup de pouce ! Avant de les mettre en ligne je réécris certaines des pages de mon site pour les ameliorer et compléter des ébauches.

Ex de page (version actuellement en ligne) : http://www.arjavan.ovh.org/yoga.html

Il s'agit de la partie avec les photos et des qualificatifs en gros et bleu, codée en colonnes.

Si je veux ajouter du texte sous les qualificatifs (qui deviennent titres de rubriques) ça se corse et j'ai un peu de mal ! : le navigateur répartie la largeur des colonnes comme il lui chante, le positionnement du texte n'est pas térrible.

 

style="text-align: center" permet de centrer, quitte à la placer dans des balise <td>, si dans <tr> il n'en tient pas compte. Ca va.

 

Avec mes connaissances, la répartition des tailles des colonnes est un casse tête.

Le site a une largeur relative, ce sont les bandes de chaque côté qui sont fixes.

Dans mon tableau, j'ai des colonnes que je souhaite d'une largeur fixe (en px), qui contiennent une ou 2 photos de petites tailles. Je souhaites que le texte prennent toute la place à côté... quelque soit cette place , si c'est possible.

Quand je donne des valeur en pourcentage ou px à "width", la répartition fonctionne pour mon écran. Mais forcément pas pour d'autres. J'ai essayé d'utiliser: "min-width" en px, avec pour la colonne d'à côté un width qui prenne un max de place, et ça ne marche pas.

 

Voici le code du tableau de ma page modifié actuelle :

<h3>Le Yoga :</h3>

<table style="width: 100%;">
  <tr style="text-align: center">
   <td><h5>Hatha Yoga</h5><p style="text-align: center">Yoga indien</p></td>
   <td><img src="images/img9.jpg"  height="150" alt="posture de yoga 1" /></td>
   <td><h5>Yoga Egyptien</h5></td>
  </tr>
</table>
<br />
<table style="width: 100%">
  <tr>
   <td style="text-align: center; width: 65%;  vertical-align: middle"><h5>Une pratique qui libère, pour lâcher-prise</h5><p>Une rencontre avec sois-même; avec nos forces, nos faiblesses, nos tensions & difficultés, nos beautés. Apprendre à accepter, à explorer notre être, physiquement, émotionnellement et énergétiquement. Afin de pour pouvoir lâcher ce qui nous entrave.</p></td>
   <td style="text-align: right; min-width: 960px"><img src="images/img3.jpg"  height="200" alt="posture de yoga 2" /><img src="images/img4.jpg"  height="200" alt="posture de yoga 3" /></td>  
  </tr>
</table>
<br />
<table style="width: 100%">
<tr>
<td><img src="images/img8.jpg"  height="150" alt="posture de yoga 4" /></td>
<td><h5>Vivre notre souffle</h5><p>Pour que la vie circule pleinement en nous et libérer notre potentiel !</p></td>
</tr>
<br />
<br />
<tr>
<td style="text-align: center"><h5>Verticalité,Enracinement</h5><p>Comme les arbres, nous sommes verticaut. Pour pouvoir grandir et nous épanouir, nous avons besoin de nos racines, différement des arbres. Etre ancré, pour nous redresser, vivre avec nos jambes et plus facilement pouvoir lâcher les tensions des épaules ou de la tête</p></td>
<td style="text-align: right"><img src="images/img2.jpg"  height="150" alt="posture de yoga 5" /></td>
</table>
<table style="width: 100%">
<tr>
<td style="text-align: left"><img src="images/img6.jpg"  height="150" alt="posture de yoga 6" /></td>
<td style="text-align: center"><h5>Une pratique qui tonifie et assouplit</h5><br /><p>Dynamiser et relâcher. Force et tranquilité. Une recherche d'équilibre dans nos polarité yin et yang. Pour un accès plus simple à nos richesses et beautés.</p></td>
<td style="text-align: right"><img src="images/img14.jpg" height="150" alt="posture de yoga 7" /></td>
</tr>
</table>

 

Merci !

Modifié le 24 avril 2007 par Emm'

[Emm']

Suite de mes intérrogations ! :

En regardant d'autres sites en choisissant plusieurs résolutions d'écran sur mon pc, il me semble que certain dentre eux sont "élastiques" que jusqu'à un certain point. Je m' explique. Si l'écran est tout petit, le site n'est pas tassé avec des colonnes étroites, mais il y a une barre de défilement qui apparait sous le site (comme s'il avait une largeur fixe). Sil'écran est large ou très large, il prend la taille de l'écran.

Ca m'interresse & complète mon questionnement du premier message, en fait.

A +

[ideal]

bonjour

je travaille en 800/600 site fluide avec des div. les tableaux sont en pourcentage. Pas de barre horizontale avec les différentes résolutions.

[Emm']

Merci, tu peux me donner l'adresse de ton site ?

A +

[Dylav]

En matière de largeur minimale d'un élément à afficher dans ta fenêtre, regarde du côté de l'attribut min-width, qui semble être la réponse à la question. Néanmoins, ce n'est pas la panacée, d'abord parce qu'il n'est pas pris en compte par IE < IE7 (mais il existe une parade), et ensuite parce qu'il ne s'applique ni à un tableau, ni à un élément inline.

Quelques liens : media-box, zone-css, alsacreations, ludomatic, laltruiste

 

Mais pour ta question initiale, j'avoue ne pas comprendre exactement ton problème. Ce qui est certain, c'est que, pour faire de la mise en page, tu utilises à tort la balise <table>, théoriquement réservée aux énumérations tabulées (tableaux de chiffres). Tu pourrais t'en tirer avec des blocs <div> et/ou <span>. Mais je me répète, car je crois bien t'avoir déjà signalé ça par MP, voici quelque temps

[Emm']

Merci Dylav ! C'est vrai je n'ai pas trop prit le temps de regardé de ce côté là , mais m'y voilà !

Pour remplacer mes <table> par des <div>, je suis un peux embêté.

Avec <table> (code plus haut) ça fait ça :

Problème : avec un autre écran, vu la façon de déterminer les tailles des colonnes, c'est le bazard + c'est pas une écriture propre.

Mon premier essai avec des <div> fait ça :

Problème : les 3 blocs ne sont pas sur la même ligne.

css :

#text1 {text-align: left; float: left; width: }
#photo1 {text-align: center; float: center}
#text2 {float:right; text-align: left; }
#photo2 {text-align: right}
#photo3 {text-align: left}

page :

<h3>Le Yoga :</h3>
<div id="text1">
<h5>Hatha Yoga</h5><p>Yoga indien</p>
<div id="photo1">
<img src="images/img9.jpg"  height="150" alt="posture de yoga 1" />
<div id="text2">
<h5>Yoga Egyptien</h5>
</div>
</div>
</div>

 

En fait si je ne l'ai pas fait en <div>, c'est que j'ai à apprendre un peu mieux concrètement comment ça marche !

Pour min-width, je vais y regarder.

Merci !

[Emm']

Un petit up

[Dylav]

Je n'ai pas exactement saisi ce qui te gênait dans la présentation de ta colonne centrale. Si tu veux en tout cas employer des blocs au lieu de tables, tout part de cette construction :

 

 

Chaque « ligne » sera un bloc <div> conteneur auquel tu appliqueras tes contraintes de largeur globale, et dans lequel tu empileras des blocs <div> flottant à gauche, s'adossant les uns aux autres, et contenant texte ou image. Tu pourras compléter par des conditions spéciales pour chacun des trois (alignement du texte, par exemple). Ce qui donnera :

 

<div class="ligne">
 <div class="bloc33 gauche"> ... </div>
 <div class="bloc33 centre"> ... </div>
 <div class="bloc33 droite"> ... </div>
</div>

avec une feuille de style comme :

 

.ligne  {width:100%; min-width:800px; max-width:2000px;}
.bloc33 {float:left; width:33%;}
.gauche {text-align:left;}
.centre {text-align:center;}
.droite {text-align:right;}

Dans le schéma ci-dessus, la seconde « ligne » contiendrait deux blocs deux tiers / un tiers, ce qui t'amènerait à décrire une classe "bloc66". Etc...

 

Bien sûr, tout n'est pas encore réglé, mai le squelette est posé

[Emm']

Super merci Dylav !

 

1. Est-ce possible sur une ligne d'avoir 1 ou 2 blocs fixes et le/les autres qui s'ajustent ?

 

2. Sur ta feuille de style, tu signales chaque id de div par un point (.ligne, .bloc33...), je connaissais la même chose avec des "#" à la place des ".". C'est équivalent ou il y a une nuance ?

 

A +

[Dylav]

1. Bien sûr. Si tu précises des dimensions fixes pour certains blocs, le dernier s'ajustera pour compléter la largeur globale (sauf s'il n'a pas besoin de toute cette largeur, auquel cas il ne prendra que ce dont il aura besoin).

2. Il s'agit de classes (point), pas d'id (dièse). La différence entre "class" et "id", c'est qu'un "id" identifie un élément unique, alors qu'une "class" peut s'appliquer à un nombre indéterminé d'éléments.