Bonjour à tous,
Tout d'abord je tiens à vous dire combien je suis content de trouver une telle communauté, et j'espère que vous arriverez à m'aider sans que cela soit trop pénible.
Si je fais une erreur dans le protocole d'inscription ou de description de mon problème dites le moi je rectifierai avec plaisir.
J'ai commencé un petit site web avec un cms "Indexhibit". Très simple et pratique, j'ai personnalisé mon fichier CSS, et pour mettre en page j'utilise le HTML dans ma partie admin/traitement de texte.
Voilà mon problème, je souhaite créer deux colonnes de texte pour chaque catégorie (titre en rouge) suivi de leurs images respectives.
COMME CECI
Pour cela, je crée deux div, la première pour la colonne de gauche :Et lorsque je veux créer ma colonne de droite je ferme cette div et en ouvre une autre avec ce code:Code:<div style="width:400px; float:left; text-align:justify; padding:10px;">
Je fais varier la hauteur de la div de droite pour éviter que la div du dessous ne remonte dans celle du dessus. Au début tout fonctionnait correctement, mais j'ai eu ensuite des problèmes avec les images, et le texte, le texte bouge mais les images ne suivent pas donc ce chevauchent...Code:<div style="width:400px;height:650px; float:left; text-align:justify; padding:10px;">
J'ai essayé de les insérées dans des div mais ça n'a rien changé.
Les images sont dotées de balise de lien hypertexte car j'utilise Lytebox.
Pour mieux vous rendre compte voici l'URL de la page
Je vous met à la suite mon fichier css
Et le code de ma page index.php :Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80/** * CSS * * @version 1.0 * @author Vaska * @author Gregory Cadar */ * { margin: 0; padding: 0; } body { font-size: 18px; font-family: Helvetica, Verdana, Arial, sans-serif; text-decoration:none; color: #a1a1a1; background-image:url(http://www.steiner-lebeausoleil.org/FR/d.jpg); background-repeat: no-repeat; background-position: bottom right; background-color: #FFF; } body.section-1 { } body.section-2 { } body.section-3 { } a:link { text-decoration: none; color:#a1a1a1; } a:active { text-decoration: none; color: #e67c1d; } a:visited { text-decoration: none; color:#a1a1a1; } a:hover { text-decoration: none; color: #e67c1d; } a img { border: none; } #menu { width: 300px; overflow: auto; top: 0; bottom: 0; left: 0; position: fixed; height: 100%; } #menu ul { list-style: none; margin: 30px 0 70px 50px; text-decoration: none; color: #e67c1d; font-size: 20px; } #menu ul li.section-title { } #content { height: 100%; margin: 50px 0 0 400px; /** marge gauche*/ top: 0; } .container { padding: 5px 5px 25px 5px; } #content p { width: 100%; margin-bottom: 9px; } p { margin: 0 0 9px 0; } h1 { font-size: 32px; } h2 { font-size: 24px; } h3 { font-size: 16px; } h4 { font-size: 12px; } h5 { color:#F00; font-size:18px;} #img-container { margin: 0; padding: 0; } #img-container p { width: 400px; margin: 0; padding: 0 0 12px 0; } #once { clear: left; }
J'ai tenté de séparer les images du texte par une balise P ou BR mais rien ne se passe, auriez-vous une idée, ou du code plus propre?Code:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
Je suis désolé je suis débutant et avance à tâtons, la solution doit être très simple, mais le problème est trop particulier, je n'ai pas réussi a trouver une solution dans l'aide ou dans des messages déjà existant, si vous en trouvez un, donnez moi le lien, je le lirai de suite je ne suis pas faignant =)
Merci à vous!
