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

Emm' · le 20 avril 2007

C'est presque résolu !

En fait c'est bon pour Firefox, opéra, Konqueror, Epiphanie... mais pas IE6 (pour Safari, j'attenderais la mise en ligne)

IE laisse un espace entre le titre (<h3>) et la suite. Exactement sous le menu flottant à droite qu'il doit concidérer comme obstacle.

J'ai essayé à tout hasard d'englober toute la partie de la page que je venais de créer dans <p> </p>, me disans que s'il gardait h3, il ne repousserait pas p, et ça ne change rien. Sur d'autres page, j'ai des tableaux (tarifs) avec <table> et ça fait le même espace.

Je suis assez clair ? (je n'ai pas trouvé comment faire des saisies d'écran sur win xp )

Bon week-end & bon soleil !

A +

Dylav · le 20 avril 2007

Pour ton problème d'interstice inopiné sous IE6, si tu ne peux pas nous mettre en ligne ta page WEB en cours de test, fais-nous effectivement une capture écran, et/ou poste ton source (HTML & CSS) dans une [codebox], balise BBCode similaire à [code], mais qui présente une boîte de hauteur limitée agrémentée d'un ascenseur.

Pour les captures écran sous Windows,

basique de chez basique, la touche "IMP ECR" du clavier, qui place dans le bloc-notes une image de ton écran, que tu peux ensuite copier dans Paint, par exemple : rustique mais efficace !
beaucoup plus pratiques, des petits softs free comme "Capture Studio", que tu trouveras facilement en téléchargement : il y a quelques plus, comme la possibilité de capturer une fenêtre rectangulaire ciblée, ce qui allège les manipulations.

Emm' · le 20 avril 2007

La page html, avec feuille de style interne :

<!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%; clear:both; padding-top: 10px}
.ligne2 {width:100%; text-align: center; padding-top: 10px}
.ligne3 {width:100%; text-align: justify; padding-top: 10px}
.gauche {float:left; margin-right:10px; margin-left:20%;}
.droite {float: right; margin-left:10px; margin-right:30%;}
.gauche2 {float:left; margin-right:10px;  text-align: justify}
.droite2 {float: right; margin-left:10px; }
</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="yoga.html" title="Yoga"><span>Le Yoga</span></a></li>
	<li><a href="energetique.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="emmanuel.html" title="Emmanuel Bernard"><span>Emmanuel Bernard</span></a></li>
	<li><a href="livre_or.html" title="Témoignages"><span>Témoignages</span></a></li>
	<li><a href="contact.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="yoga.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>
<p><div class="ligne2">
<span class="gauche"><h5>Hatha Yoga</h5><p>Yoga indien</p></span>  <!-- optionnel -->
	<span class="droite2"><img src="images/img9.jpg"  height="150" alt="posture de yoga 1" /></span>  <!-- optionnel -->
<h5>Yoga Egyptien</h5>
</div>
<br /><br /><br /><br />

<div class="ligne3">
<span class="droite2"><img src="images/img3.1.jpeg"  height="200" alt="posture de yoga 2" /></span>  <!-- optionnel -->	
       <h5>Une pratique qui libère, pour lâcher-prise</h5><p>Une rencontre avec soi-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 pouvoir lâcher ce qui nous entrave.</p>
</div>
<br />

<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>
<br />

<div class="ligne1">
<span class="droite2"><img src="images/img2.jpg"  height="150" alt="posture de yoga 5" /></span>  <!-- optionnel -->
<h5>Verticalité,Enracinement</h5><p>Comme les arbres, nous sommes verticaux. 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>
<br />

<div class="ligne2">
<span class="gauche2"><img src="images/img6.jpg"  height="150" alt="posture de yoga 6" /></span>  <!-- optionnel -->
	<span class="droite2"><img src="images/img14.jpg" height="150" alt="posture de yoga 7" /></span>  <!-- optionnel -->
<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>
<br />
</p>
<h5>Un chant de la Vie</h5>
<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>

<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="yoga.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>

La feuille de style externe :

/* Css originally by mejobloggs  Design by Aran @ stuio7designs.com  Please email me if you use this, as I would love to see how it is being used, also you can join my linkshare to help you with your google ranking. Modification : Arjavan */

body {
font-family: trebuchet ms, verdana, tahoma, arial, sans-serif;
font-size: 90%;
color: #333333;
background-color: white;
line-height: 180%;
margin: 0;
padding: 0;
min-width: 940px;}
/* Set the page width */

#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {
width: 85%;
min-width: 940px;
margin: 0 auto;}

#wrapper-menu-top {
background: #ffffcc url('images/bg02-white-left.png') no-repeat left top;
color: #333333;
min-width: 75px;}

#menu-top {
background: transparent url('images/bg02-white-right.png') no-repeat right top;
overflow: hidden; /* no idea why this works, but it fixes a FF problem */
min-width: 75px;}

#menu-top ul {
margin: 0 20px;
padding: 1em 0 0 0;
list-style: none;
float: left;}

#menu-top li {
display: inline;
float: left;
font-size: 110%;}

#menu-top a {
float: left;
background:url(images/menuleft.png) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
line-height: 1.5em;}

#menu-top a span {
background: #fefee0 url(images/menuright.png) no-repeat right top;
padding:5px 15px 4px 6px;
color: #5b8fbe;
font-weight: ;
display: block;
float: left;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */}

#menu-top a:hover { background-position:0% -42px; }
#menu-top a:hover span {	background-position:100% -42px; }

#wrapper-header {background: transparent url('images/bg.png') top center repeat-x;}

#header {
background: #eee url('images/banner_mountains.jpg') no-repeat center top;
color: #333333;
min-width: 75px;}
#logo {
float: left;
height: 110%;
margin-top: 2.5em;
margin-left: 2em;
width:90px;
height:85px;}

#title {
float: right;
height: 5em;
margin-top: 2.5em;
margin-right: 2em;}

#wrapper-header2 {background: transparent url('images/bg02-blue-left.png') top left no-repeat;}

#wrapper-header3 {background: transparent url('images/bg02-blue-right.png') top right no-repeat;}

#header h1 {
margin: 0 20px;
padding: 0;
height: 192px;
line-height: 3em;
color: #c72d96;
font-size: 260%;
text-align: right;}

#wrapper-content {
background: #ffffcc url('images/barre13left.png') no-repeat left top;
min-width: 75px;}

* html #wrapper-content { height: 1%; }

#content {
background: transparent url('images/barre14right.png') no-repeat right top;
padding: 5px 245px 5px 40px;}

#wrapper-menu-page {
float: right;
width:180px;
margin: 20px 30px 3em 2em;
background: transparent url('images/menu_web.png') no-repeat;
text-align: center;
line-height: 140%;
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}

* html #wrapper-menu-page { margin-right: 15px; }

#menu-page { padding-top: 5px;}

#menu-page ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;
font-weight: bold;
font-style: italic;}
#menu-page h3 {
font-size: 75%;
text-transform: uppercase;
margin: 1em 0 0.3em 0;
color: #11a54f;
font-weight: normal;
letter-spacing: 0.15em;}

#menu-page a:link, #menu-page a:visited { color: #c72d96; }
#menu-page a:hover { color: #57db7a; }
#piedpage {
font-size: 85%;
text-align: center;
text-decoration: underline;
color: #5b8fbe;}
#wrapper-footer {
margin-top: 1em;
text-align: center;}

#footer {
margin: 0 20px;
background-color: #e5f0fc;
border: 1px solid #ccc;
border-bottom: 0;
clear: both;}

h2 { 
font-size: 140%;
color: #c72d96;
background-color: transparent;	}

h3 { font-size: 110%;
color: #11a54f;
padding-left: 20px;
background-color: transparent;	}

h4 { 
font-size: 110%;
color: #000000;
text-align: left;
background-color: transparent;	}
h5 {
font-size: 110%;
color: #5b8fbe;
background-color: transparent;}

.sensimag {border:0;}

a:link, a:visited { color: #5b8fbe; text-decoration: none; }

a:hover{ color: #993399; text-decoration: none; }

Les captures d'écran sous windows, je m'y mettrais, ça va venir !

Dylav · le 20 avril 2007

Je crois qu'on va avoir besoin d'une capture écran ou, mieux, de deux (IE et FF). Parce que tes sources, même associés aux images récupérées sur le site publié, n'affichent pas quelque chose de démonstratif : tu as dû remplacer plusieurs images (ou modifier leurs noms) ?

Emm' · le 22 avril 2007

Oui, elle est remodelée sur plusieur point, cette nouvelle page.

Ca y est je suis au point pour les captures d'écran sous winxp :

1. IE :

2. Firefox :

Ne fais pas attention aux bande grises de chaque côté de la photo, c'est facile à résoudre (taille de l'image).

(Super les codebox !)

Dylav · le 22 avril 2007

Salut Emm'

OK, vu. Sous IE, ta première <div class="ligne2"> refuse de s'afficher à la même hauteur que le menu de droite. Figure-toi que c'est la même chose pour le bloc de saisie d'un post sur Zébulon, par rapport aux deux pavés de droite (smileys et accès rapides) pour une largeur de fenêtre inférieure à 1024... mais la raison n'est peut-être pas la même !

Pour tes classes "ligne", essaie d'ajouter l'attribut margin:0;

Ça rejoint d'ailleurs exactement ce que je te disais ici à propos de la différence d'interprétation de l'attribut margin entre IE et FF. En effet, l'attribut margin n'est pas à zéro par défaut sous IE, et les marges sont comptées en plus de la taille de la boîte. Ainsi, une boîte qui occupe 100% de l'espace disponible sans les marges ne peut pas tenir à côté du menu, et passe en-dessous. Remarque, on a beau le savoir, on oublie à chaque fois... Pour FF, je ne connais pas la valeur de margin par défaut, mais comme la marge est comptée dans les 100%, ça marche quand même !

Emm' · le 23 avril 2007

J'ai rajouté "margin:0;" sur le css pour chaque "ligne" : ça ne change rien :P

Je remarque juste que ça fait la même chose sur d'autres pages qui ont des tableaux <table>. Je me demande s'il y a un point commun ?

Ex :

css interne (en plus de la feuille de style déja donnée + haut):
       #header {background: #eee url('images/img39.jpg') no-repeat center top;}
body {}
p {padding-left: 40px;
font-size: 100%;}
h3 {font-size: 120%;
text-decoration: underline;}
page html (partielle):
<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="yoga.html" title=""><span>Le Yoga</span></a></li>

	<li><a href="energetique.html" title=""><span>Soins énergétiques</span></a></li>

	<li><a href="emmanuel.html" title=""><span>Emmanuel Bernard</span></a></li>

	<li><a href="livre_or.html" title=""><span>Témoignages</span></a></li>

	<li><a href="contact.html" title=""><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">

<h1></h1>

</div>

</div>

</div>

</div>



<div id="wrapper-content">

<div id="wrapper-menu-page">

<div id="menu-page">

<h3>Yoga</h3>
<ul>
	<li><a href="yoga.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>
<br />
<p style="text-align: center"><img src="images/logo3.4.gif" width="88" height="85" alt="logo de l'association" /></p>


</div><!--menu-page-->

</div>

<div id="content">


<h3>Adhésion à  l'association</h3>
<table style="width: 100%">
<tr>
<td>de septembre 2006 à  aout 2007</td>
<td style="text-align: right">11 euros</td>
</tr>
</table>
<p style="text-align: center"><img src="images/logo3.4.gif" height="40"alt="logo" /></p>
<h3>Cours d'1h30</h3>
<table style="width: 100%">
<tr>
	<td>La séance</td>
	<td style="text-align: right">12 euros</td>
</tr>
<tr>
	<td>Le trimestre</td>
	<td style="text-align: right">120 euros</td>
</tr>
<tr>
	<td colspan="2">Forfait de 13 cours à  utiliser durant le trimestre (un cours par semaine en moyenne, quelque soit le lieu ou l'horaire).</td>
</tr>
<tr>
	<td>L'année</td>
	<td style="text-align: right">320 euros</td>
</tr>
<tr>
	<td>Forfait de 37 cours à  utiliser durant la saison 2006-2007</td>
</tr>
</table>

Dans l'espoir que ça te donnes une idée !

A + !

Dylav · le 23 avril 2007

Bonsoir Emm'

Là, c'est rageant... je trouvais l'explication si rationnelle ! Peut-être pourrais-tu tenter un width:90%; sur la classe "ligne2", juste le temps de vérifier que ça provient de là. Si la démonstration est probante, tu pourras remonter le % jusqu'à rupture... mais je resterai déçu par cette anomalie !

Emm' · le 24 avril 2007

Peut-être pourrais-tu tenter un width:90%; sur la classe "ligne2"

Ca vient bien de là ! Bingo !

Ca marche aussi sur l'autre page en donnant le même attibu à la balise <table>.

Si j'ai tout compris IE, rajoute une marge autour, ou concidère qu'il en faut une et pour compenser on diminue la largeur de la page.

J'ai pas encore finiolé. Je suis resté à 90%. Ca me plait.

Je verrais si je cherche le 94,5687% plus tard

Mon dernier test sera en ligne avec Safari !

Un super grand merci à toi Dylav !

A +

Dylav · le 24 avril 2007

Merci, Emm'. Heureux que tu aies ta solution !

Mais j'ai quand même une dent contre Internet Explorer, qui nous cause tant de soucis...

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