Dimensionnement de colonnes

11 nov. 2011, 23:28

Rien à voir avec la chanson de Johnny Halliday et de son ex-femme !

Le voici : je travaille avec un ami et, pour un certain nombre de ses produits, je suis son affilié.

Notre principe est simple : je fais une page (en fait plusieurs avec les pages de commande)
à partir de celle qu'il a créée pour son produit, je la transfère en php (il n'utilise que le html
et j'ignore totalement avec quel logiciel il fait ça, mais son code est incroyable ! Perso, je travaille
avec Dreamweaver CS3 pour Mac).

La question est simple : il a créé une page qui est en deux colonnes, celle de gauche mesurant pratiquement
la moitié de la taille de celle de droite.

Voici une vue du haut de sa page :
http://imageshack.us/photo/my-images/405/41245407.jpg/
et une de celle du début de son code :
http://imageshack.us/photo/my-images/221/24155960.jpg/

Je pratique couramment cette transformation, mais cette fois, j'ignore pourquoi,
impossible !

Voici à quoi ressemble la structure de ma page :
http://imageshack.us/photo/my-images/716/74827311.jpg/
et cele de mon code :
http://imageshack.us/photo/my-images/522/62891213.jpg/

Si j'essaie de faire du copier-coller comme d'habitude, après moultes modifications
et simplifications de son code html, je n'arrive à rien ou alors à une seule
colonne.

Quelqu'un pourrait-il m'expliquer pourquoi ?

Ca m'arrangerait beaucoup.

Merci d'avance, de la part de

Guy

12 nov. 2011, 13:58

Il utilise la propriété float:left; (ou float:right;) dans le code CSS
Ce code CSS peut être :
1.dans dans le code source indiqué par style=""
2. entre la balise <head> </head>
3. dans un fichier joint indique par <link> qui est lui même entre <head> et </head>

Sinon désolé je n'arrive pas à lire le code source fournit.

12 nov. 2011, 16:59

1) Une langue ne prend pas de majuscule en français, pour mieux les distinguer des ethnonymes.

2) Vu le code, m'étonnerais pas que ton compagnon utilise FrontPage.

3) C'est quoi ça ? => <td width="XXX" class="240 px">

4) Utiliser du CSS simplifie la vie. Se défaire de DW aussi.

12 nov. 2011, 17:26

Une langue ne prend pas de majuscule en français, pour mieux les distinguer des ethnonymes.

Merci, je suis au courant, je rédige mon 210e bouquin !
ans le cas présent, il est traditionnel d'écrire toutes les premières lettres d'une accroche en majuscules,
il paraît que cela fait mieux vendre, c'est tout du moins ce qu'on m'a dit.

Vu le code, m'étonnerais pas que ton compagnon utilise FrontPage.

C'est très possible, mais je ne connais pas les logiciels de MSFT.

C'est quoi ça ? => <td width="XXX" class="240 px">

Ca s'est fait tout seul lorsque j'ai modifié les dimensions des colonnes à la souris

Utiliser du CSS simplifie la vie. Se défaire de DW aussi.

Pour le cas entièrement d'accord, j'en joute d'ailleurs parfois dans styles.css.
Quant à DW, il y a trop longgemps que je travaille avec ; les habitudes ont la dent dure.

Quoi qu'il en soit, je n'ai toujours pas trouvé la solution de ma question.

Guy

13 nov. 2011, 11:56

Bonjour,

J'ai tenté de résoudre le problème sans faire de tableaux.

Voici mon code :

Code : Tout sélectionner

<div id="main">
 <div id="contenu">
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
</div>
<div id="contenu">
Contenu2
Contenu2
Contenu2
Contenu2
Contenu2
Contenu2              
Contenu2
Contenu2
Contenu2
Contenu2
</div>
</div>

et voici ce que ça me donne comme résultat :
http://imageshack.us/photo/my-images/82 ... pture.jpg/

D'après tout ce que j'ai lu, ça devrait me faire deux colonnes l'une à côté de l'autre.

Qu'ai-je raté ?

Merci à qui me le dira.

13 nov. 2011, 21:44

salut, tu n'a pas créer 2 colones mais 3 blocs et comme tu n'a pas donner de propriété css , nous ne voyons pas mais le 1er bloc contient les 2 autre: un des 2 autres contient "Contenu1" et l'autre en dessous contient "Contenu2"

13 nov. 2011, 21:48

pour y voir mieux, change la ligne <div id="contenu"> par <div id="contenu" style="background:red;"> et tu veras la forme de ton bloc "contenu1"
c'est le css qui te donneras les formes, je te conseil un fichier css a part et non ma façon de te montrer...

13 nov. 2011, 22:11

pour les css => http://www.alasacreations.com

14 nov. 2011, 00:12

Bonjour,

UN seul "id" est autorisé même si ils seront quand même interprétés en CSS. Si tu veux utiliser une seule classe CSS sur plusieurs objet utilise class="".
Si tu veux créer un tableau simple :

<div id="main">
<div class="contenu">
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
Contenu1
</div>
<div class="contenu">
Contenu2
Contenu2
Contenu2
Contenu2
Contenu2
Contenu2             
Contenu2
Contenu2
Contenu2
Contenu2
</div>
</div>

et le CSS (en méthode link entre <head> et </head>)

Code : Tout sélectionner

.main {
width : 80%;
margin: 0 auto;
}
.contenu {
width: 49%;
float: left;
overflow: hidden;
}

Ca devrait créer deux colonnes

14 nov. 2011, 12:39

Modération :
Sur PHPFrance, il est de bon ton de prendre le temps de lire les intitulés des forums avant de poster. Ainsi, le message aurait été posté dans "HTML, CSS" plutôt que dans "PHP".

De plus, les titres de type "Help", "SOS" ne sont d'aucune utilité, nous savons par ta présence même que tu as besoin d'aide. Au contraire, cela réduit la visibilité de ton sujet.

14 nov. 2011, 17:04

Bonjour,

Merci pour tous vos conseils qui me sont fort utiles

Je vous souhaite une bonne fin de journée.

Dimensionnement de colonnes

Qui est en ligne