Tableau avec un fond de deux couleurs

Version imprimable

13/01/2007, 09h56
sourivore

Tableau avec un fond de deux couleurs

Bonjour à tous,

J'aurais voulu savoir si l'un de vous à la solution au problème suivant:
J'aimerais faire une cellule d'un tableau qui a un fond composé de deux couleurs.
C'est à dire la moitié est disons Noire et l'autre rouge.

Quelqu'un saurait-il comment effectuer celà?

PS : Le contenu de la cellule doit être à moitié sur le rouge et à moitié sur le noir donc la solution ne consiste pas à faire un tableau de deux cases dans la cellule.

Le rendu que je voudrais avoir serait donc le suivant :
http://img461.imageshack.us/img461/7...leurda8.th.jpg
13/01/2007, 10h06
Bisûnûrs

Impossible sans passer par une image.
13/01/2007, 17h40
sourivore

Tu ne sais pas comment faire alors? :calim2:

Je suis parti sur une idée mais je bloque sur un truc:
J'aimerais faire un tableau qui prenne toute la page.
Or quand je met le tableau à 100% il me prend que la taille de la fenêtre même si la page en elle-même est plus grande (il y a donc des ascenceurs)

Y a t il un moyen de vraiment prendre 100% de la page et non 100% de la fenêtre?

Merci.

Je vous ferai part de ma solution si celle-ci fonctionne ^^
13/01/2007, 18h49
sourivore

Et pourtant j'ai mis mon table ainsi que body et html avec height=100% :

Pour aider voici le lien:
[EDIT]

En déroulant les liens des News (flèches) ou en rapetissant la fenêtre on voit directement le bug (barre blanche en bas)

Pour aider j'ajoute ce morceau de code simplifié où on constate le même problème :

Code:

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
<html height="100%">
	<head>
		<style>
.tableauGeneral {
  position: absolute;
  top: 0px;
}
                </style>
	</head>
	<body height="100%">
		<table width="100%" height="100%">
			<tr height="100%">
				<td width="10%" height="100%" bgcolor="red">
				</td>
				<td width="90%" height="100%" bgcolor="green">
				</td>
			</tr>
		</table>
		<table class="tableauGeneral">
			<tr>
				<td>
					a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
				</td>
			</tr>
		</table>
	</body>
</html>

Si vous arrivez à trouver la réponse je vous en serai très reconnaissant car là je me retrouve assez coincé

14/01/2007, 12h05
fallais

Et en utilisant 2 div et le CSS ?
14/01/2007, 13h11
sourivore

En CSS ou en attribut le résultat est le même

Peut-être quelque chose du genre en jouant avec le relatif ?

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
html,body {height:100%;}
body {background-color:#6DA4E3;}
#main  {min-height:100%; background-color:#4C94A0; position:relative;left:-90%;}
* html #main {height:100%;} /* hack ie 6- */
 
#contenu {position:relative; left:90%;}
 
-->
</style>
</head>
 
<body>
<div id="main">
	<div id="contenu">contenu du site</div>
</div>
</body>
</html>

14/01/2007, 20h36
sourivore

Et bien oui impeccable ça marche ^^.
J'ai pas vraiment compris la totalité du code donc je vais me pencher un peu dessus mais en tout cas ça marche.

Merci beaucoup!

PS : Tu vois Bisûnûrs il ne faut jamais dire jamais.
14/01/2007, 23h54
zyongh

bravo Candygirl

Malheureusement il n'y a pas beaucoup de femmes dans l'informatique.

J'ai au moins le plaisir de voir qu'il y en a au moins de qualité..

Bravo pour ta solution, j'ai testé et ça fonctionne super même si je n'en n'ai aucune utilité.