Discussion :

[Sundark]

Premièrement, j'ai lu la FAQ, mais je voudrais écrire sur deux lignes. (au lieu d'une seul comme dans la faq et ce que j'ai pu trouvé sur le web)
Mon CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.fromnews{
	margin-left:20px;
	font-family:Verdana,arial,sans-serif; 
	text-align:left; 
	font-size:10px; 
	color:#666666;
}
 
.texnews{
	 vertical-align:top; 
	 text-align:justify; 
	 margin-left:20px; 
	 margin-right:20px; 
	 margin-top:6px; 
	 margin-bottom:3px; 
	 color:#BF9A61; 
}
 
.icone{
	margin-left:10px; 
	margin-bottom:10px;
	margin-top:10px;
	float : left;
}

Mon HTML:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
				<div id="contenue"> 
<div class="icone">
<img src="data/img/maintenance.png" alt="icone" align="absmiddle" border="0" />
Ma première ligne<br />
<span class="fromnews">Ecrit par: Sundark, le 15/05/2009</span>
</div>
<div class="texnews">
Bonjour, <br />blabla bla blablabla bla blabla bla blab bblalappe	blabla bla blablabla bla blabla bla blab bblalappel ....
</div>
				</div>

Résultat attendu: (en haut) <= Réaliser avec des tableaux; pas propre...
Résultat obtenu: (en bas) <= Le code donné si dessus.
Remarquez, le background est différent, et un texte "commentaire" est ajouté sur l'image du haut, ce n'est pas important, sauf peut-être pour le commentaire, vue qu'il devra être à droite de mon titre (align="right")



J'aimerais savoir si vous pouvez m'expliquer comment ecrire à droite d'une image (avec absmiddle ou simplement float) sans que 1:
Ca aligne pas ce qu eje veux (cf le texte d'en bas de mon div qui n'a rien a foutre la)
2: Ca me fait un retour paragraphe

[Macmillenium]

Bonjour,

Tu as deux solutions :
- Soit fixer la largeur de .texnews et le faire flotter (left ou right),
- Soit fixer la largeur de .fromnews et attribuer un margin-left = largeur .fromnews à .texnews

[Sundark]

Bonjour, merci de votre réponse

Je vais essayer la première solution.
(PS: Je n'ai pas bien compris la deuxième :s)

Je vous tiens au courant. (Cela signifie que je vire le float de l'image elle même ?)


Edit: Alors, en effectuant:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.fromnews{
	margin-left:20px;
	font-family:Verdana,arial,sans-serif; 
	text-align:left; 
	font-size:10px; 
	color:#666666;
}
 
.texnews{
	vertical-align:top; 
	text-align:justify; 
	margin-left:20px; 
	margin-right:20px; 
	margin-top:6px; 
	margin-bottom:3px; 
	color:#BF9A61;
	float : left;
}
 
.icone{
	margin-left:10px; 
	margin-bottom:10px;
	margin-top:10px;
	float : left;
}

Tout le texte après mon div texnews apparait tout en haut de la page et l'effet attendu n'est pas au rendez vous.

[Macmillenium]

Tout le texte après mon div texnews apparait tout en haut de la page et l'effet attendu n'est pas au rendez vous.

- Soit fixer la largeur de .texnews et le faire flotter (left ou right),

[Sundark]

Bonjour, j'ai reçu l'aide de le_chomeur sur le chat, un grand merci à lui (et à vous ), mon problème est résolu:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div class="content">
			<img src="data/img/maintenance.png" style="float:left;margin:15px;" />
			<div class="titleDate">
				<span class="title">voici le titre</span>
				<span class="date">date et autre</span>
			</div>
			<span class="nbCommentaires">Commentaires (200)</span>
			<p class="texte">
				bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br />
				bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
			</p>
		</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
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
.content{
				width: 763px;
				margin-bottom: 10px;
				margin-left:200px;
 
			}
			.titleDate{
				float:left;
				margin-top:20px;
				width:300px;
height:30px;
border:0px solid red;
 
			}
			.title{
				color:#cccccc;
				display:block;
				width:100%;
				clear:both;
			}
			.date{
				color:#666666;
			}
			.texte{
				color:#bf9a61;
float:left;
			}
			.nbCommentaires{
				color:#a9d7ef;
width:200px;
height:30px;
display:block;
float:left;
border:0px solid red;
margin-top:25px;
			}