Comment créer une cellule de table avec un fond en deux couleurs?
-
20-09-2019 - |
Question
Je suis en train de créer une cellule de tableau HTML avec un arrière-plan à deux tons; donc j'ai du texte normal sur un fond qui est jaune à gauche, et vert à droite.
Le plus proche que j'ai jusqu'à présent est la suivante. Le fond est correctement moitié-moitié, mais le texte de contenu est déplacé en dessous.
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:relative;
width: 50%;
height: 100%;
background-color:yellow
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="yellow"></div>
<div class="content">Hello</div>
</td>
</tr>
</table>
</body>
</html>
Comment puis-je corriger cela?
La solution
visuellement chaque couleur apparaît donc comme des égaux, idéalement, vous souhaitez conserver les éléments qui définissent les couleurs d'arrière-plan au même niveau dans le code au lieu de les nicher. S'appuyant sur la réponse d'Aaron:
<html>
<head>
<style type='text/css'>
td {
padding: 0;
margin: 0;
text-align: center;
}
.container {
position: relative;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.content {
position: relative;
z-index: 1;
}
.yellow {
left: 0;
background-color: yellow;
}
.green {
right: 0;
background-color: green;
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0; margin: 0">
<td>
<div class="container">
<div class="content">Hello</div>
<div class="bg yellow"></div>
<div class="bg green"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Autres conseils
Vous devez imbriquer le DIV
de contenu dans le jaune DIV
:
<div class="yellow"><div class="content">Hello</div></div>
[EDIT] Cela a un défaut:. La DIV intérieure sera limitée à la DIV
jaune (à savoir, il utilisera uniquement 50% de la largeur de la page)
Nous avons donc besoin d'un autre div
, le positionnement absolu et un z-index:
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:absolute; left:0px; top:0px;
width: 50%;
height: 100%;
background-color:yellow
}
div.container { position:relative; height: 100%; }
div.content { position:relative; z-index:1; }
</style>
</head>
<body style="width: 100%">
<table style="width: 25%; height: 150px;">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="container">
<div class="content">Hello</div>
<div class="yellow"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
Fonctionne avec FF 3.6.
Il est peut-être plus facile d'utiliser une image d'arrière-plan? Vous pouvez ensuite appliquer tout cela à la cellule.
Essayez ceci:
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:1em;
text-align:center
}
div.yellow
{
width: 50%;
height: 1em;
background-color:yellow
}
.content {
margin-top: -1em;
}
Il suffit de créer une longue image fine avec une couleur sur la gauche et une autre à droite. Puis lui donner un style comme suit:
background: url(image) center center repeat-y;
(non testé, mais devrait être quelque chose dans ce sens: p
Si la td est de largeur fixe, alors vous pouvez faire une image de dimension égale à fixedWidth_in_px * 1px
cette image et mettre en arrière-plan et mettre background-repeat-y répéter, afin qu'il remplisse toute la hauteur de la td. Quelque chose comme
td.bg
{
width: 100px;
height: 100%;
background: #fff url(imagepath) repeat-y;
}
Pour ma solution, je n'avais pas d'autres éléments ou du texte à l'intérieur de la cellule pourrait alors utiliser la frontière de la cellule pour le faire apparaître comme s'il y a 2 couleurs de fond. Ainsi, l'application de ces deux styles td mis à 50px apparaît avec deux pseudo-couleurs de fond.
.halfleft_casual {
border-right:25px solid blue;
}
.halfleft_member {
border-right:25px solid green;
}