Discussion :

[syl2095]

Bonjour,

je cherche à placer correctement des divs pour des chevauchages de couleur :

Voici un exemple concret :



et le code qui fonctionne bien sur IE :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr>
	<td style="border-top:2px solid #000; height:30px; background-color:<?=$col2?>" align="center">
	<div id="div_1" style="position: absolute; background-color:#FFFFFF; height:34px; width:15px; left:214px; z-index:3;vertical-align:middle;
	line-height: 34px;">
	<?=$j?>
	</div>
	<div id="dcell" style="position:relative; width:100%; height:50%; background-color:<?=$col1?>; z-index:1"> </div>
	</td>
	<td style="border-top:2px solid #000; height:30px; background-color:<?=$col1?>" width="50%" align="center">&nbsp;
	<div id="dcell" style="position:relative; width:100%; height:50%; background-color:<?=$col2?>; "> </div></td>
	<td style="border-top:2px solid #000; height:30px; background-color:<?=$col2?>" align="center">
	<div id="div_2" style="position: absolute; background-color:#FFFFFF; height:34px; width:15px; left:324px; z-index:3;vertical-align:middle;
	line-height: 34px;"><?=$j?></div>
	<div id="dcell" style="position:relative; width:100%; height:50%; background-color:<?=$col1?>; "> </div></td>
</tr>

Comment dois je faire pour que le code soit bien interprété par FF et IE ?

Merci par avance !

[desert]

Bonjour,
Quelques règles de bonne pratique :
- séparer le code CSS du (X)HTML. Cela te permettra de mieux t'y retrouver.
- éviter un maximum les positions absolues quand c'est possible parce que c'est vilain !
A ta place, ce que j'aurais fait :

Code xhtml :

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

1
2
3
4
<div class="row">
    <p class="left">4</p>
    <p class="right">4</p>
</div>

- en mettant un background-image qui se répète horizontalement au div.row afin de créer ce fond bleu et rouge,
- en faisant flotter p.left à gauche et p.right à droite,
- en rajoutant overflow:hidden au div.row afin de créer un contexte de formatage.

[syl2095]

Merci pour ta réponse. Le souci que je rencontre aussi c'est que la couleur de fond n'est pas une image mais des couleurs dynamiques venant d'une bdd.

Et puis comment faire pour qu'il y ait un td ou div avec deux couleurs differentes verticalement...

Je vais faire des tests et je reviens.

Merci