Créer des carrés de couleur

**popogendarme** · 21/03/2007, 14h33

Bonjour à tous,

Je me prend la tête sur un truc là, je suis pas un pro du html.
alors voilà j'aimerais mettre un petit carré de couleur, à coter d'un champs pour dire dans quelle couleur le texte va s'afficher.

Et j'arrive pas à créer ce carré de couleur, j'ai pris un solution avec du <div> et <a> mais le problème est qu'il faut obligatoirement que je tape du texte pour afficher mon carré...

Y a t'il une solution?

Merci à ceux qui me repondront et me liront

Code :

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

1
2
3
4
5
6
	  		<div>
		  		<div id="color" class="carre"><a class="carre"> r</a></div>
		  		<div id="color" class="carre"><a class="carre"> r</a></div>
		  		<div id="color" class="carre"><a class="carre"> r</a></div>
		  		</div>
	  		</div>

et la css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
a.carre{
width:110px; 
height:20px;  
text-decoration:none; 
color:white;
text-align:center; 
font-weight:bold; 
background-color:#000080;
padding:5px}
 
.carre{
padding:5px;}

**blueice** · 21/03/2007, 14h44

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
div.float {
 float: left;
 padding:10px;
 }
.carre { width:110px; height:20px; }
/* ]]> */
</style>
</head>
<body>
<div class="float">
<div class="carre" style="background-color:red;"></div>
</div>
<div class="float">
<div class="carre" style="background-color:green;"></div>
</div>
<div class="float">
<div class="carre" style="background-color:yellow;"></div>
</div>
<div class="float">
<div class="carre" style="background-color:blue;"></div>
</div>
<div class="float">
<div class="carre" style="background-color:red;"></div>
</div>
<div class="float">
<div class="carre" style="background-color:navy;"></div>
</div>
</body>
</html>

**MasterOfChakhaL** · 21/03/2007, 14h45

salut tu as toujours la possibilité de mettre un espace insécable pour que le navigateur considère qu'il y est du contenu (espace insécable:   )
si ton élément est affiché en tant que bloc, je crois qu'il n'est pas nécessaire d'insérer un contenu

Essaye cela pour faire au plus simple:

Code html :

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

1
2
 
<span class="color-sample"></span>

Code css :

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

1
2
3
4
5
6
7
8
 
.color-sample {
  display: block;
  width: 15px;
  height: 15px;
  cursor: pointer;
  background-color: #900;
}

**popogendarme** · 21/03/2007, 14h48

ok merci à vous deux, je vais tester vos soluces

**popogendarme** · 21/03/2007, 15h12

Ok j'ai paris la solution de BlueIce, ça marche nickel.

En fait suffisait juste de definir une taille pour la <div>?

ou y a aussi le text-decoration:none;

?

Merci en tout cas

**blueice** · 21/03/2007, 15h20

ou y a aussi le text-decoration:none;

Pourquoi tu veux en faire des liens ?
Je t'ai juste donné des carrés de couleurs, qui se placent les uns à côté des autres...

Si tu expliquais exactement ce que tu voulais, se serait plus simple

**popogendarme** · 21/03/2007, 16h02

ok non c'est ta solution marche, je l'ai un peu modifié pour mon site c'est tout.
je m'interrogeais jsute sur la difference entre ton code et mon code c'est tout.
Mais ça marche nickel

Créer des carrés de couleur

CSS

Discussions similaires

Partager

Partager