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

Emm' · le 15 avril 2007

Merci !

J'ai commencé à mettre en pratique.

Et ce n'est pas si évident, même en restant avec des blocs qui ont des proportions.

1. Si le texte est beaucoup plus fin que l'image, j'ai du ajouter des <br /> sinon le bloc du dessous n'allait pas à la ligne mais se callait sur la limite gauche du bloc du dessus, même s'il est au milieu de la page. Peut-être ça me fera avoir d'autres ajustements pour des résolutions plus petites.

2. Je ne comprends pas, à ma 6ème balise de ligne, qui devrait être ligne N°6, le texte apparait en ligne 1 à droite. Sur tout navigateur que j'ai à porté de main (firefoxe, opéra, Konquéror). Sur les photos, yoga egyptien est bien à sa place, mais "un chant de la Vie" & "pratiquer à 2" devrait être loin en dessous (ligne N°6) avec le texte (2ème photo) "développer une écoute de l'autre..." qui lui prend un position bizarre.

Tu as idée ?

3. J'en reviens à ce que je demandais plus haut, si je veux qu'un bloc ai une dimension fixe (ex : width: 200px), comment indiquer dans les caractéristiques du bloc correspondant ( la feuille de style) qu'il doit prendre au maximum la place qui reste ? (voir en affinant avec une petite marge

Et là où j'en suis en en 2024x768 ça donne ça :

Ma page html (css inclus, feuille de style interne pour cette mise en page) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Le Yoga</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="description" content="Presentation de l'activité yoga de l'association Arjavan : axe de la pratique, sources, type d'enseignement" />
<meta name="keywords" content="yoga, hatha, egyptien, lacher prise" />
<meta name="author" content="Emmanuel Bernard" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
<style title="essai" media="screen" type="text/css">
#header {background: #eee url('images/img_bre5.jpg') no-repeat center top;}
body {}
p {padding-left: 0px;font-size: 100%;}
h3 {font-size: 120%;}
.ligne1 {width:100%;}
.bloc1 {width: 33%; float: left; text-align: center;}
.bloc2 {width: 200px; float: left; text-align: center;}
.bloc3 {width: 66%; float: left; text-align: center;}
.bloc4 {float: center}
</style>
</head>

<body>
<div id="wrapper-menu-top">
<div id="menu-top">
<ul>
	<li><a href="index.html" title="Accueil"><span>Accueil</span></a></li>
	<li><a href="yoga4.html" title="Yoga"><span>Le Yoga</span></a></li>
	<li><a href="energetique3.html" title="soins énergétiques"><span>Soins énergétiques</span></a></li>
	<li><a href="reiki.html" title="le Reïki"><span>Reïki</span></a></li>
	<li><a href="emmanuel3.html" title="Emmanuel Bernard"><span>Emmanuel Bernard</span></a></li>
	<li><a href="livre_or3.html" title="Témoignages"><span>Témoignages</span></a></li>
	<li><a href="contact3.html" title="Nous contacter"><span>Nous contacter</span></a></li>
</ul>
</div><!--menu-top-->
</div><!--wrapper-menu-top-->

<div id="wrapper-header">
<div id="header">
<img id="logo" src="images/logo3.4.gif" alt="logo" title="logo Arjavan" />
<img id="title" src="images/arjavan1.gif" alt="graph ARJAVAN" title="Arjavan" />
<div id="wrapper-header2">
<div id="wrapper-header3">
</div>
</div>
</div>
</div>



<div id="wrapper-content">
<div id="wrapper-menu-page">
<div id="menu-page">
<h3>Yoga</h3>
<ul>
	<li><a href="yoga4.html">Le Yoga</a></li>
	<li><a href="horaires_lieux.html">Horaires et lieux</a></li>
	<li><a href="stages.html">Les stages</a></li>
	<li><a href="tarifs_yoga.html">Tarifs</a></li>
	<li><a href="livre_or.html">Témoignages</a></li>
</ul>
<h3>Vie du site</h3>
<ul>
	<li><a href="sites.html">Sites qui nous ont référencé</a></li>
	<li><a href="adherents.html">Talents des adhérents</a></li>
	<li><a href="lectures.html">Le coin lecture</a></li>

</ul>
<p style="text-align: center"><img src="images/logo3.4.gif" width="88" height="85" alt="logo de l'association" /></p>
<p><br /><br /><br /></p>
</div><!--menu-page-->
</div>

<div id="content">
<h3>Le Yoga :</h3>
<div class="ligne1">	
<div class="bloc1"><h5>Hatha Yoga</h5><p>Yoga indien</p></div>
<div class="bloc1"><img src="images/img9.jpg"  height="150" alt="posture de yoga 1" /></div>
<div class="bloc1"><h5>Yoga Egyptien</h5></div>
</div>
<div class="ligne1">		
<div class="bloc3"><h5>Une pratique qui libère, pour lâcher-prise</h5><p>Une rencontre avec sois-même; avec nos 	forces, nos vides, nos tensions et difficultés, nos beautés. Nous apprenons à nous accepter, à explorer notre être, physiquement, 		émotionnellement et énergétiquement. Afin de pour pouvoir lâcher ce qui nous entrave.</p></div>
<div class="bloc1"><img src="images/img3.jpg"  height="200" alt="posture de yoga 2" /><img src="images/img4.jpg"  height="200" alt="posture de yoga 3" /></div>
</div>
<div class="ligne1">
<div class="bloc1"><img src="images/img8.jpg"  height="150" alt="posture de yoga 4" /></div>
<div class="bloc3"><h5>Vivre et libérer notre souffle</h5><p>Pour que la vie circule pleinement en nous et libérer notre 	potentiel !</p><br /><br /><br /></div>
</div>
<div class="ligne1">
<div class="bloc3"><h5>Verticalité,Enracinement</h5><p>Comme les arbres, nous sommes verticaut. Pour pouvoir grandir et nous épanouir, nous avons besoin de nos racines, mais 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></div>
<div class="bloc1"><img src="images/img2.jpg"  height="150" alt="posture de yoga 5" /><br /><br /></div>
</div>
<div class="ligne1">
<div class="bloc1"><img src="images/img6.jpg"  height="150" alt="posture de yoga 6" /></div>
<div class="bloc1"><h5>Une pratique qui tonifie et assouplit</h5><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></div>
<div class="bloc1"><img src="images/img14.jpg" height="150" alt="posture de yoga 7" /></div>
</div>
<div class="ligne1">
<div class="bloc4"><h5>Un chant de la Vie</h5></div>
</div>
<div class="ligne1">
<div class="bloc4"><h5>Pratiquer à deux</h5>
<p>Developper une écoute de l'autre, comprendre comment fonctionne l'être humain à travers la pratique, aider, accompagner 		quelqu'un d'autre physiquement ou avec des mots. Recevoir, être accopagné, soutenu pour se découvrir, aller plus loin.</p></div>
</div>

<h5>Une énergie particulière</h5>
<p>Une ambiance protégée et propice. Un soutien par une énergie de groupe. Un espace pour que se révellent nos possibilités et potentialités.</p>
<h5>Comment ça se passe ?</h5>
<p>Un cours d'essai pour découvrir, ressentir, se renconter.</p>
<p>Les cours sont ouverts à tous : débutants et plus expérimentés , jeunes (adolescents minimum) et plus
âgés. Les uns apportent leur expérience, les autres leur fraîcheur et rappellent aux "anciens"
que quelque soit leur experience, ils ont toujours à découvrir.</p>
<p>Des groupes à  taille humaine : le plus souvent 6, 8; jusqu'à  15 (limite que je ne souhaite pas dépasser).</p>
<p>Chacun vient quand il le souhaite parmi les cours proposés; par exemple, une semaine le lundi, une autre le mardi, une fois à 19h00, une autre à 20h30, à Paris, Vincennes, ou Fontenay , c'est libre.</p>
	<p style="text-align: center"><img src="images/img1.jpg" height="150" alt="posture de yoga 8" /></p>
<p>Nous pratiquons le Hatha Yoga (Yoga indien) et le Yoga égyptien. Notre pratique s'adapte par de nombreuses variantes à chacun, chacune. Elle est une recherche, non pas de performance, mais de simplicité. Les cours se font en fonction des personnes présentes.</p>
<p>Une pratique nourrie de plusieurs courants : Babakar Kane, Nil Haoutoff, BKS Iyengar; et influences : R. Lebon, M-M. Planquette, M.
Signorini, C. Truchot.<br /></p>
	<p style="text-align: center"><img src="images/img5.jpg" height="120" alt="posture de yoga 9" /><img src="images/img11.jpg" height="120" alt="posture de yoga 10" /><img src="images/img7.jpg" height="120" alt="posture de yoga 11" /></p>
<p><br /></p>
</div>

<div id="piedpage">
<a href="yoga4.html">haut de page</a>
</div>
</div>

<div id="wrapper-footer">
<div id="footer">Design by <a href="http://www.studio7designs.com">studio7designs</a> & <a href="mailto:yoga.arjavan@gmail.com">Arjavan</a> | photos : bandeau : Doris Defer, postures : Virginie Bois & Emmanuel Bernard | logo : Emmanuelle Manche | copyright 2006 <a href="mailto:yoga.arjavan@gmail.com">Arjavan</a> | photos et logo : tous droits réservés</div>
</div>
</body>
</html>

Modifié le 20 avril 2007 par Emm'

Dylav · le 15 avril 2007

Pour ton problème de mélange de "lignes", il faudrait que tu ajoutes l'attribut clear:both; pour forcer un retour à la "ligne" après chaque bloc ligne,

- soit dans la classe "ligne" (excuse-moi de revenir à mes étiquettes perso),

- soit (à tester si les résultats ne sont pas concluants), au titre du dernier bloc de chaque ligne.

Cela devrait résoudre tes points 1 et 2.

Pour le point 3, je ne comprends pas : la taille maximale du bloc conteneur ne peut pas être dépassée par la somme des éléments contenus. A moins que tu ne parles de la "ligne" n°2, que tu voudrais en deux blocs, le premier pour du texte, et le second pour un ensemble de deux photos. A mon avis, la seconde photo passe sous la première, dans ce second bloc, parce que la somme des largeurs des 2 photos fait plus de 33% de celle du conteneur (en résolution 1024x768, donc a fortiori pour les résolutions inférieures). La meilleure solution serait de solidariser les deux photos, c'est-à-dire de les réunir en une seule (par exemple avec PhotoFiltre : focus sur celle de droite, copier, focus sur celle de gauche, édition - collage spécial - assembler le collage - droite).

Emm' · le 16 avril 2007

Merci Dylav ,

"clear:both;" c'est super.

Juste un inconvenient que tu sauras peut-être contourner. Cette fonction concidère mon menu à droite à contourner, ce qui veut dire que si je l'utilse pour les 1eres lignes, elle met à la ligne après le menu. Ca fait un grand espace vide !

Sinon j'essairai avec mes dimensions de bloc que ça fonctionne.

Pour le 3. de + haut :

Mon souhait au sein d'une ligne, avoir des blocs de dimension fixe (photo) et des textes qui s'ajustent dans l'espace libre au milieu.

peut-être est-ce avec min-width & max-width que je peux le règler. Mais sou IE ça va pas être terrible...

Suis-je plus clair ?

Dylav · le 16 avril 2007

Si tes "lignes" sont systématiquement composées d'un texte "central" s'ajustant à une éventuelle image à droite et une éventuelle image à gauche, [image] - texte - [image], je te propose une structure plus simple qui t'évitera des calculs compliqués. Et ceci avec le bloc inline <span>

<div class="ligne">
 <span class="gauche"><img src="ImageDeGauche.jpg"></span>  <!-- optionnel -->
 <span class="droite"><img src="ImageDeDroite.jpg"></span>  <!-- optionnel -->
texte central
</div>

Tu mets l'une ou l'autre ou les deux images, et le texte (par exemple centré) occupera tout l'espace restant. A tel point que tu auras intérêt à prévoir une marge droite pour l'image de gauche, et une marge gauche pour l'image de droite.

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

Et... double bénéfice, tu n'auras plus besoin de forcer le saut à la ligne : enlève le clear:both; qui n'interférera plus avec ton menu de droite...

Malheureusement, ta première "ligne" déroge à la présentation [image] - texte - [image]. La forme float:center; n'existe hélas pas... Alors, je crois qu'il faut que tu fasses passer les deux "textes" d'un seul côté de l'image ?

Nota : pour la carence d'IE sur min-width et max-width, regarde les liens que je t'avais indiqués ci-dessus. Au moins l'un d'eux fournit un contournement ciblé (en JavaScript directement dans la feuille de style !).

Emm' · le 17 avril 2007

Avant de mettre en pratique, quelques petites questions & remarques !

1.  : ça signifie quoi ? je l'ai déja vu sans comprendre son action

2.

Nota : pour la carence d'IE sur min-width et max-width, regarde les liens que je t'avais indiqués ci-dessus. Au moins l'un d'eux fournit un contournement ciblé (en JavaScript directement dans la feuille de style !).

Oui, j'ai vu, je pense juste que ça va être compliqué si j'utilise souvent min-width / max-width, de rajouter à chaque fois le script (je comprends pas tout en html, alors en javascript ! ).

3. ok pour float center.

Merci a + !

Emm'

Dylav · le 17 avril 2007

<!-- optionnel -->

Excuse-moi, Emm', mais j'ai remarqué que tu embarquais dans ton code HTML des commentaires, c'est donc tout simplement ce que j'ai fait :  fin de commentaire. Quant à "optionnel", ça signifie "facultatif", mais ça tu le savais.

Je voulais donc montrer par là que tu peux avoir 2, 1 ou 0 image(s) sur ta "ligne", grâce à ces deux <span> optionnels (c'est toi qui définis, par leur présence/absence, la présentation de ta "ligne"), c'est-à-dire,

[image] - texte - [image]

- texte - [image]

[image] - texte -

- texte -

Voili voilou

Nota : tu peux d'ailleurs dans le <span> mettre autre chose qu'une image. A tel point qu'il est probable que tu puisses gérer ta première "ligne" en inversant les choses, c'est-à-dire en mettant les textes dans les <span>, et l'image en position centrale, à la place du "- texte -". A tester (ce serait une formidable souplesse)...

Emm' · le 18 avril 2007

Merci, quand j'aurais le temps, je mettrais en pratique .

Mon apprentissage des langages html et css est vraiment sur le tas. A partir de pages open source qui me plaisaient dans le concept, mais que je modifie au fur et à mesure de mes besoins perso... Du coup, à chaque fois, j'apprends un peu plus ! Merci de tes réponses, elles me permettent d'apprendre de façon plus sympa qu'avec un cours et des exercices ! A +

Dylav · le 18 avril 2007

A chaque fois, j'apprends un peu plus ! Merci de tes réponses, elles me permettent d'apprendre de façon plus sympa qu'avec un cours et des exercices !

C'est gentil de le dire... mais, à mon avis, l'un n'empêche pas l'autre. En effet, à chaque fois que le dialogue t'amène un élément de solution, c'est forcément très partiel, et je te conseille d'approfondir en consultant le chapitre de référence correspondant

Emm' · le 19 avril 2007

Salut Dylav,

Ta 2ème méthode me va beaucoup mieux, car quand les largeurs d'écran change, le texte s'adapte aux image.

<div class="ligne">
<span class="gauche"><img src="ImageDeGauche.jpg"></span> 

<span class="droite"><img src="ImageDeDroite.jpg"></span> 

texte central

</div>

css :

.ligne {width:100%; min-width:800px; max-width:2000px; text-align:center;}

.gauche {float:left; margin-right:20px;}

.droite {float: right; margin-left:20px;}

Dans la 1ère, avec les blocs, quand l'écran se rétrécie, le tetxe et les images se chevauchent. C'est surement très bien pour dans d'autres contextes, mais dans celui-ci je trouve cela moins beau.

J'ai mis des spans avec attribus aux images, et le texte prend sa place tout seul :

<div class="ligne3">
<span class="gauche2"><img src="images/img8.jpg"  height="150" alt="posture de yoga 4" /></span>  <!-- optionnel -->
<h5>Vivre et libérer notre souffle</h5><p>Pour que la vie circule pleinement en nous et libérer notre 	potentiel !</p>
</div>

.ligne3 {width:100%; text-align: justify; padding-top: 10px}
.gauche2 {float:left; margin-right:10px;  text-align: justify}
.droite2 {float: right; margin-left:10px; }

J'ai plu qu'à affiner mes textes ! Et je peux le mettre en ligne !

Super.

Je ferai un effort, je prendrai le temps de consulter les chapitres pour comprendre d'une façon plus globale.

Petite parenthèse, peux-tu m'expiquer la différence de contexte d'utilisation de margin & padding ? Je ne saisi pas quand l'unou l'autre s'applique.

Merci & à +

Dylav · le 19 avril 2007

En théorie, margin définit une marge extérieure à ton élément, donc au-delà de ses dimensions. Alors que padding définit une marge intérieure à l'élément, c'est-à-dire que son contenu sera un peu plus à l'étroit ! Pour plus de précisions, consulte le chapitre Le modèle des boîtes, dans la traduction officielle des recommandations CSS du W3C par yoyodesign : il y a un schéma très explicite

Je dis bien en théorie. Parce qu'il me semble avoir constaté une différence flagrante entre FF et IE, dans l'interprétation de l'attribut margin : pour une fois, c'est IE qui semble respecter la recommandation, tandis que FF inclut margin dans les dimensions de la boîte. Sous réserve de vérification...

Connexion

Pas encore inscrit ?

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

Messages recommandés

Emm'

Dylav

Emm'

Dylav

Emm'

Dylav

Emm'

Dylav

Emm'

Dylav

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer