Discussion :

[yonialhadeff]

Bonjour,

j'essaie de faire un bloc qui ressemble à ceci: http://www.aladyo.com/sample.jpg

Ce n'est pas évident, mais j'y suis presque arrivé, j'ai utilisé le FLOAT:LEFT

J'ai cependant un soucis avec IE7 pour faire en sorte que le texte soit indenté vers la droite

commce ci(FF): http://www.aladyo.com/ff.png
mais sous ie cela donne ceci: http://www.aladyo.com/IE7.png

voici le code html

Code html :

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
<table border="0" width="100%" cellpadding="0" cellspacing="3" style=" padding:0;margin:0">
<tr><td width="100%" style="height:auto;background-color:#E5E5E5; padding:0;margin:0;">
<img src="/uploads/thumb/yis004_0.jpg" class="picture_agenda" border="0" vspace="0" hspace="0" style=""  />
 
<div class="titre_event" style="height:25px; ">
 
<strong><img src="/images/puces.gif"   style="margin-left:-10px;;padding-right:5px;"   />Cours de gemara</strong>
 
</div>
<div class="td_event_content pIE">
    <b><img src="/images/puces.gif" class="puces" />
<div style='padding-left:5px;display:inline'></div>
<b>Beth Hilell  - 2008-04-08 00:00:00</b></br>
<img src="/images/puces.gif" class="puces" /><div style='margin-left:5px;display:inline'></div>
<b >A voir jusqu'au 15 mai au Centre de la Culture judéo-marocaine (CCJM), Place Vander Elst 19, 1180 Bruxelles   </b>        </b>
</div>      
</div>
</td></tr></table>

voici le code CSS pour firefox

Code css :

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

1
2
3
.picture_agenda{
float:left;  border-right-color:#FFFFFF; border-right-width:4; border-bottom-color:#FFFFFF; border-bottom-width:4;margin-right:15px;
}

et le code pour IE:

Code css :

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

1
2
3
.picture_agenda{
margin-right:0px;
}

si je laisse le margin-right sous IE, tout le bloc bleu est décallé vers la droite, et il y a donc un espace gris entre la photo et le bloc bleu, chose que je ne désire pas réelleemnt. Je voudrais que seul le contenu du text bleu soit indenté.

J'ai pensé à utiliser une image en arrière plan pour le fond bleu, mais le problème revient lorsque le titre passe en deux ligne(long titre+ petit écran)

Que je puis-je faire pour résoudre ce problème?

Merci d'avance pour votre aide

Yoni Alhadeff

[Rhad@]

hello,

Code :

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

1
2
3
4
 
.picture_agenda{
text-indent:0.3cm;
}

++

[Halleck]

hello,

Code :

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

1
2
3
4
 
.picture_agenda{
text-indent:0.3cm;
}

++

text-indent ne va concerner que la première ligne (la photo), ici c'est tout le texte qui est décalé.

A mon avis le problème vient des marges par défaut qui sont différentes entre IE et FF.
Dans le style, essaye de définir:

Code :

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

body {margin:0; padding:0; }

Tu n'auras normalement plus besoin de mettre un margin différent pour IE et pour Firefox.suite, défini une marge pour ta photo :

Code :

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

margin-left:10px;

En

Sinon, pour ton problème d'encodage (accents qui ne passent pas comme on voir sur ta capture), déclare ta page en UTF-8, et enregistre la dans cet encodage (ouvrir avec un bloc-note comme notepad++, notepad2...), choisir de convertir en UTF-8 et d'encoder en UTF-8...

[yonialhadeff]

Hello,

Merci pour vos réponses effectivement le text-indent ne joue que sur la première ligne!!

le padding-left ne fonctionne pas, comme si le float:left empêchait de faire un padding
j'ai donc mis padding-right sur la photo et alors ce la fonctionne sous IE et FF


Merci pour vos réponses

Yoni Alhadeff