Fixer la largeur d'une div

**laurentSc** · 27/10/2015, 23h06

Bonsoir,

je veux mettre l'arrière-plan d'une zone d'une certaine couleur. La-dite zone contient l'affichage d'une chaîne de caractères. La div prend donc par défaut la dimension de la chaîne de caractères. J'ai plusieurs chaînes qui se suivent et je souhaiterais que chaque zone (ou div) fasse la même largeur pour que la même largeur d'arrière-plan soit colorée. J'ai donc tenté d'utiliser une classe CSS avec la propriété width, mais la coloration ne tient toujours compte que de la largeur de la chaîne ; comment ça se fait ?

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
	<ul class="colorbackground">
 
	<li class="colorbackground"><a href="---" title="---"><table class="colorbackground"><tr><td>
	<img src="---" style="width:48px;height:48px" alt="---"/></td><td><div class="width1-5">---</div></td></tr></table></a>
 
	</li >
	<li class="colorbackground"><a href="---" title="---"><table class="colorbackground"><tr><td>
	<img src="---" style="width:48px;height:48px" alt="---"/></td><td><div class="width1-5">---</div></td></tr></table>
	</a></li>
 
	<li class="colorbackground"><a href="---" title="---"><table class="colorbackground"><tr><td>
	<img src="---" style="width:48px;height:48px" alt="---"/></td><td><div class="width1-5">---</div></td></tr></table>
	</a></li>
...
</ul>

Code css :

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

1
2
3
4
5
6
7
 
.colorbackground {
	background-color:#e1e4f2;
}
.width1-5 {
width:20%;
}

**Jacques Beauregard** · 28/10/2015, 09h40

Bonjour Laurent,

Pas trop compris ce que tu souhaites réaliser... un background-color que sur les div?
De plus pourquoi des <table> ? une structure en <div> est appréciée ici.
Cordialement.

Invité · 28/10/2015, 09h47

Bonjour,

1/ des <table> et des <div> dans des <li>.....

Tu fais vraiment n'importe quoi.

2/

Code :

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

<img src="---" style="width:48px;height:48px" alt="---"/>

A mon avis, ce sont des icônes...
Ce n'est pas comme ça qu'on s'y prend.

(bis repetita) N'importe quoi.

**laurentSc** · 28/10/2015, 15h21

Envoyé par jreaux62

Ce n'est pas comme ça qu'on s'y prend.

Tu pourrais pas préciser (un lien), pour faire une mise en page correcte ?

Invité · 28/10/2015, 16h11

Explique au moins CLAIREMENT ce que tu cherches à faire.

Et avec un VRAI code.
Pas n'importe quoi.

**laurentSc** · 28/10/2015, 19h34

J'essaye mais ça va être difficile, vu que mon code actuel, c'est n'importe quoi...

En fait, il s'agit d'un menu, dont voici le code :

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
<div class="page">
<ul class="menu">
<li class="colorbackground"><a href="#"><?php echo $str[320];?></a>
...
	<li class="colorbackground"><a href="---">
	<img src="icone1.jpg" style="width:48px;height:48px" alt="---"/></div><div class="">texte1<br/> </div></a>
 
	</li >
	<li class="colorbackground"><a href="---" ><table class="colorbackground"><tr><td>
	<img src="icone2.jpg" style="width:48px;height:48px" alt="---"/></td><td><div class="width1-5">texte2</div></td></tr></table>
	</a></li>
 
	<li class="colorbackground"><a href="---">
	<table class="colorbackground"><tr><td><img src="icone3.jpg" style="width:48px;height:48px" alt="texte2"/></td><td><div class="width1-5">texte3</div></td></tr></table>
	</a>
	</li>		...
 
	</ul>
</li>

Code css :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
.page{
  font: normal 2em Arial, Helvetica, sans-serif;
  font-size : 1.2em;
  margin: 0 auto;
  width:60em;
}
 
.page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
.page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
.colorbackground {
	background-color:#e1e4f2;
}	
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#EEE;
  background:#e1e4f2;
  border: 1px solid #48B;
  /*line-height:2em;*/
  height:7em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.1em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  /*top:3.0em; /* hauteur du bandeau principal = hauteur + padding */*/
  line-height:1.5em;
}
.menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:center;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
  background:#4D90FE;
 
  color:#FFF;
}
.menu li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF;
  border:solid 1px #48B;
}
/* position et dimension des sous menus */
.menu ul li {
  margin:0;
  width:10em;
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */

Est-ce bien utile de préciser que ce code n'est pas de moi ? En voulant te donner mon code, j'ai vu un bug et le corriger a résolu mon problème, et je vais t'épater : je pense avoir amélioré mon code :

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
<div class="page">
<ul class="menu">
<li class="colorbackground"><a href="#"><?php echo $str[320];?></a></li>
...
	<li class="colorbackground"><a href="---"><div>
	<img src="icone1.jpg" style="width:48px;height:48px" alt="---"/></div><div class="width1-5">texte1</div>
</a></li >
	<li class="colorbackground"><a href="---" ><div>
	<img src="icone2.jpg" style="width:48px;height:48px" alt="---"/></div><div class="width1-5">texte2</div>
</a></li>
	<li class="colorbackground"><a href="---"><div>
        <img src="icone3.jpg" style="width:48px;height:48px" alt="---"/></div><div class="width1-5">texte3</div>
</a>	</li>		...
 
	</ul>
</li>

avec le CSS (où j'ai mis en gras la partie que j'ai rajoutée) :

Code css :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
.page{
  font: normal 2em Arial, Helvetica, sans-serif;
  font-size : 1.2em;
  margin: 0 auto;
  width:60em;
}

.page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
.page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
.colorbackground {
	background-color:#e1e4f2;
}	
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#EEE;
  background:#e1e4f2;
  border: 1px solid #48B;
  /*line-height:2em;*/
  height:7em;
  font-size:0.8em;
  text-align:center;
  z-index : 9999;
  position : relative;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.1em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
}
.menu  ul{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  /*top:3.0em; /* hauteur du bandeau principal = hauteur + padding */*/
  line-height:1.5em;
}
.menu li {
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:center;
}
/* code trouvé tout seul */
.menu li div {
float : left;
color:black;
padding:5px;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
  background:#4D90FE;
 
  color:#FFF;
}
.menu li:hover > ul{
  display: block;/**/
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF;
  border:solid 1px #48B;
}
/* position et dimension des sous menus */
.menu ul li {
  margin:0;
  width:10em;
}
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */

y a-t-il quelque chose à améliorer ?

Fixer la largeur d'une div

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager