28112 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de couleur de fond

Bonjour à tous,

J'ai un petit problème de couleur de fond... J'explique mon problème :
J'ai fait un "tableau" avec des div, en placant le tout en position relative et float.
Cela me donne le code suivant :

<div class="test-line">
              <div class="test-field">Propriété4
              </div>
              <div class="test-value">
                <div class="test-value-wording">Placez ici le contenu de  class "test-value-wording"</div>
                <div class="test-value-note">
                  <div class="test-value-plus">Les +</div>
                  <div class="test-value-minus">Les -</div>
                </div>
              </div>
            </div>


Mon Css lui ressemble à cela
.test-line {
	position: relative;
	display: inline-block;
	border: 1px solid #000000;
	width: 700px;
	
}

.test-field {
	position: relative;
	float: left;
	width: 200px;
	padding-left: 8px;
	color: #FFFFFF;
	background-color: #000000;
}

.test-value {
	position: relative;
	float: left;
	border-left: 1px solid #000000;
	width: 491px;
	
}

.test-value-wording {
	border-bottom: 1px solid #000000;
	padding-left: 8px;
	
}

.test-value-note {
	position: relative;
	
}

.test-value-plus {
	float: left;
	position: relative;
	width: 245px;
	border-right: 1px solid #000000;
	padding-left: 8px;
	
}

.test-value-minus {
	position: relative;
	float: left;
	padding-left: 8px;
	
}


Mon problème est que la couleur de fond que je mets sur la div test-field ne va que sur la première ligne (et donc ne "remplit" pas toute la case)...

En gros ma div ne remplit pas toute la case (et donc toute la hauteur de la test-line.

Est-ce que quelqu'un aurait une idée pour me dépanner ? Je nage dedans depuis ce matin, et je ne retrouve pas la surface !

Merci beaucoup, vous êtes toujours de très bons conseils ici pour les noobs comme moi Smiley smile

Stéphane
Merci pour la réponse : le problème c'est que si je le mets dans test-line, toute la ligne passe avec la couleur de fond, alors que je ne voudrais "que" la première case. Mais quand je le mets dans la première case (test-field), le problème vient alors du fait que cette div ne prend qu'une partie de la "case" et ne va pas jusqu'en bas...
ah ok j'avais mal compris !!!
et je n'ai toujours pas vraiment compris ce que tu veux Smiley decu

Voila ce que donne ton codage ici
Modifié par Chriss2014 (27 Aug 2014 - 23:16)
Oui mais comment faire... Là, ce que j'essaye de faire, c'est 2 colonnes.
Dans la première on a juste test-field
Dans la seconde, on a test-value-wording en haut et juste en dessous test-value-plus et test-value-minus (englobé dans une div test-value-note).

En gros, les 3 div de droite feront une hauteur variable suivante le texte, mais quoiqu'il se passe la colonne de gauche (test-field) aura beaucoup moins de texte et donc toujours plus courte. Alors comment faire pour que ma background color "s'aligne" avec les div d'à côté...

C'est un bête problème d'alignement vertical, mais je n'arrive pas à trouver par quel bout le prendre...
C'est plus clair, Smiley cligne tu veux donc que la colonne de gauche soit noire? je me trompe?

et si tu mettais une hauteur à cette"div" ?
Modifié par Chriss2014 (27 Aug 2014 - 23:30)
En fait en cherchant, je pense avoir trouvé le bon bout, en passant tout en display table / table-cell...

Je cherche encore un peu et si je trouve ma réponse je posterai dès fois que cela soit utile à quelqu'un !
Modérateur
a écrit :
Je cherche encore un peu et si je trouve ma réponse je posterai dès fois que cela soit utile à quelqu'un !



Bon esprit, j'adore !!!
Modifié par Greg_Lumiere (29 Aug 2014 - 07:31)
Bon, je m'y suis remis ce soir, et voila la CSS avec des table / table-cell. C'est finalement très simple à mettre en oeuvre :

.test-content {
	width: 100%;
	
}

.test-line {
	display: table;
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
}

.test-field {
	min-width: 200px;
	padding-left: 8px;
	color: #FFFFFF;
	background-color: #000000;
	display: table-cell;
}

.test-value {
	border-left: 1px solid #000000;
	width: 100%;
	display: table-cell;
}

.test-value-wording {
	border-bottom: 1px solid #000000;
	padding-left: 8px;	
}

.test-value-note {
	display: table;
}

.test-value-plus {
	border-right: 1px solid #000000;
	padding-left: 8px;
	display: table-cell;
}

.test-value-minus {
	padding-left: 8px;
	display: table-cell;
}


là, le bg s'applique bien sur toute la hauteur de la div ! Bon, il y a encore quelques léger problème à gérer la largeur des colonnes, mais rien de bien complexe !

En tout cas merci pour l'écoute et l'aide !
Sujet clos
Aller à