Colonnes + apparence de la page
Posté : 15 nov. 2011, 18:22
Bonjour,
C'est encore moi.
Je pensais mon problème réglé (voir Dimensionnement de colonnes html-html5-xhtml-css/dimensionnement-co ... 61176.html) mais en fait, non !
Pour plusieurs raisons :
1 - en suivant à la lettre vos conseils et notamment celui de Aureusms (merci infiniment) :
j'avais réussi à faire, sur Dream, ce que je voulais, sauf la taille des colonnes (celle de gauche - ici contenu 1 - doit fair à peine la moitié de celle de droite - contenu2). Après quelques essais sur ma page sur le Net (avec mon client ftp), il me semblait que ça irait. Malheureusement, je n'avais pas mis la totalité du code de mon ami.
En fait, j'ai une seule colonne, dont la couleur change, comme le montre cette image :
http://imageshack.us/photo/my-images/6/13917310.jpg/
Explication : le haut de l'image est le bas de la colonne qui, théoriquement, doit se trouver à gauche ; l'image est le haut de la colonne de droite.
2 - Voici le code du bas de la colonne de gauche et du haut de celle de droite (l'image) :
Pour le bas de la colonne de gauche, j'ai copié-collé le code de mon ami. J'i été un peu affolé par le nombre de div et je me suis dit que le problème provenait probablement de ça.
J'ai ôté systématiquement les </div> qui me paraissaient en surplus, voire une ligne de code complète, comme celle-ci :
ou celle-ci :
mais à la limite ces lignes ne me gênent pas, puisqu'elles sont, en quelque sorte « fermées » avec un div au début et un /div à la fin.
Je me suis alors attaqué aux div en faisant une recherche dans Dream.
Il y a 6 <div (en fait 4 si j'ôte les 2 des lignes de code ci-dessus) et 8 </div (en fait 6 si je fais la même chose), c'est donc bien de là que provient le problème.
Je viens de faire un essai en ôtant tout ça :
Génial parce que tout est compris dans mon conteneur et en fait je retrouve le cadre de mes pages habituelles.
En agissant ainsi, je n'ai plus que 4 <div et 4 </div, donc je devrais être content, mais malheureusement je n'ai qu'une seule colonne
Ma question est la suivante : mes compétences étant ce qu'elles sont, c'est-à-dire limitées, que dois-je faire pour :
- avoir deux colonnes,
- avoir une colonne de gauche de 228 px, par exemple et une de droite de 500 px (mon container mesure 728 px en largeur) ?
Merci à qui pourra me l'expliquer.
PS : je rouvre mon post pour vous montrer ce que j'ai sur la page de Dream, ici :
https://dl-web.dropbox.com/get/Photos/01.jpg?w=f567d09c
et sr ma page sur le Net :
https://dl-web.dropbox.com/get/Photos/02.jpg?w=07738a0a
C'est encore moi.
Je pensais mon problème réglé (voir Dimensionnement de colonnes html-html5-xhtml-css/dimensionnement-co ... 61176.html) mais en fait, non !
Pour plusieurs raisons :
1 - en suivant à la lettre vos conseils et notamment celui de Aureusms (merci infiniment) :
Code : Tout sélectionner
<div id="main">
<div class="contenu">
Contenu1
....
</div>
<div class="contenu">
Contenu2
...
</div>
</div>
En fait, j'ai une seule colonne, dont la couleur change, comme le montre cette image :
http://imageshack.us/photo/my-images/6/13917310.jpg/
Explication : le haut de l'image est le bas de la colonne qui, théoriquement, doit se trouver à gauche ; l'image est le haut de la colonne de droite.
2 - Voici le code du bas de la colonne de gauche et du haut de celle de droite (l'image) :
Code : Tout sélectionner
</table>
<div style="text-align: center;"></div>
</div>
<div style="text-align: center; margin-left: 40px;"><span style="font-family: Georgia,Times New Roman,Times,serif;"></span></div>
</td>
</div>
</div>
<div class="contenu">
<p class="center"><img style="width: 341px; height: 226px;" alt="cours espagnol" src="im-esp/cours_espagnol.jpg" /></p>
J'ai ôté systématiquement les </div> qui me paraissaient en surplus, voire une ligne de code complète, comme celle-ci :
Code : Tout sélectionner
<div style="text-align: center;"></div>Code : Tout sélectionner
<div style="text-align: center; margin-left: 40px;"><span style="font-family: Georgia,Times New Roman,Times,serif;"></span></div>Je me suis alors attaqué aux div en faisant une recherche dans Dream.
Il y a 6 <div (en fait 4 si j'ôte les 2 des lignes de code ci-dessus) et 8 </div (en fait 6 si je fais la même chose), c'est donc bien de là que provient le problème.
Je viens de faire un essai en ôtant tout ça :
Code : Tout sélectionner
<div style="text-align: center;"></div>
</div>
<div style="text-align: center; margin-left: 40px;"><span style="font-family: Georgia,Times New Roman,Times,serif;"></span></div>
</td>
</div>
En agissant ainsi, je n'ai plus que 4 <div et 4 </div, donc je devrais être content, mais malheureusement je n'ai qu'une seule colonne
Ma question est la suivante : mes compétences étant ce qu'elles sont, c'est-à-dire limitées, que dois-je faire pour :
- avoir deux colonnes,
- avoir une colonne de gauche de 228 px, par exemple et une de droite de 500 px (mon container mesure 728 px en largeur) ?
Merci à qui pourra me l'expliquer.
PS : je rouvre mon post pour vous montrer ce que j'ai sur la page de Dream, ici :
https://dl-web.dropbox.com/get/Photos/01.jpg?w=f567d09c
et sr ma page sur le Net :
https://dl-web.dropbox.com/get/Photos/02.jpg?w=07738a0a
