Discussion :

[Tchupa]

Bonjour, je rencontre actuellement un gros problème de conteneur, ils se chevauchent

Voici un petit screen du problème en question.


Voici le code HTML

Code :

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
 
<div id="conteneur">
<div id="conteneur-gauche">
<div class="head_block1">Rayons</div> <!-- tête du bloc rayon -->
<div class="body_block">
 
</div> <!-- corp du bloc rayson -->
 
<div class="head_block1">Nos Marques</div> <!-- tête du bloc marques -->
<div class="body_block">
 
</div> <!-- corp du bloc marques -->
</div>
 
<div id="milieu">
 
</div>
 
<div id="conteneur-droit">
<div class="head_block1">Login</div> <!-- tête du bloc login -->
<div class="body_block2">
 
</div>
 
<div class="head_block1">Newsletter</div> <!-- tête du bloc login -->
<div class="body_block2">												
 
</div>
</div>
</div>

Mon css:

Code :

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
 
#conteneur
{
	background-color:#FFFFFF;
	width:980px;
	height:1708px;
 
 
	border-style:solid;
	border-color:green;
	border-width:2px;
}
 
#conteneur-gauche
{
	float:left;
	width:180px;
	padding-top:10px;
 
}
 
#conteneur-droit
{
	float:right;
	width:200px;
	padding-top:10px;
	padding-right:0px;
}
 
#milieu
{
	width:568px;
	background-color:#FFFFFF;
	margin: 0 0 0 181px;
	padding: 10px;
	border-style:solid;
	border-color:red;
	border-width:1px;
}

Je ne comprends pas pourquoi ça se déforme comme ça.

[desert]

Bonjour,
C'est un comportement normal. Étant donné que le texte à l'intérieur ne possède pas d'espace, il devient impossible pour le navigateur de séparer une partie du contenu pour le mettre à la ligne.
Dans le cas où le texte ne contiendrait aucun espace, il faudrait soit passer par Javascript ou un langage orienté client-serveur (php, asp, etc...), soit appliquer la propriété overflow:auto couplée avec une largeur fixe qui affichera un scrollbar si jamais le contenu se mettait à dépasser du conteneur.
Il y a peut-être d'autres solutions mais ce ne sont pour l'instant que les seules qui sortent de ma petite tête cabossée.

[Tchupa]

Bonjour,
C'est un comportement normal. Étant donné que le texte à l'intérieur ne possède pas d'espace, il devient impossible pour le navigateur de séparer une partie du contenu pour le mettre à la ligne.
Dans le cas où le texte ne contiendrait aucun espace, il faudrait soit passer par Javascript ou un langage orienté client-serveur (php, asp, etc...), soit appliquer la propriété overflow:auto couplée avec une largeur fixe qui affichera un scrollbar si jamais le contenu se mettait à dépasser du conteneur.
Il y a peut-être d'autres solutions mais ce ne sont pour l'instant que les seules qui sortent de ma petite tête cabossée.

Il suffit de mettre un espace dans mon text? de l'id milieu ?
Ou j'ai pas tout saisie?

[Macmillenium]

Bonjour,

Il faut flotter la div #milieu, le margin-left:181px; est inutile dans ton cas étant donné que #milieu a une largeur fixe :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#milieu
{
	width:568px;
	background-color:#FFFFFF;
	/* margin: 0 0 0 181px; */
	float:left;
	padding: 10px;
	border-style:solid;
	border-color:red;
	border-width:1px;
}

Dans ton exemple, et comme le dit desert, l'alignement du texte est forcé, essayes quelque chose de naturel comme :

Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat.

Dans le cas où le texte ne contiendrait aucun espace, il faudrait soit passer par Javascript ou un langage orienté client-serveur (php, asp, etc...), soit appliquer la propriété overflow:auto couplée avec une largeur fixe qui affichera un scrollbar si jamais le contenu se mettait à dépasser du conteneur.
Il y a peut-être d'autres solutions mais ce ne sont pour l'instant que les seules qui sortent de ma petite tête cabossée.

Heureusement qu'il n'existe pas de texte sans espace

[Tchupa]

Bonjour,

Il faut flotter la div #milieu, le margin-left:181px; est inutile dans ton cas étant donné que #milieu a une largeur fixe :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
#milieu
{
	width:568px;
	background-color:#FFFFFF;
	/* margin: 0 0 0 181px; */
	float:left;
	padding: 10px;
	border-style:solid;
	border-color:red;
	border-width:1px;
}

Dans ton exemple, et comme le dit desert, l'alignement du texte est forcé, essayes quelque chose de naturel comme :





Heureusement qu'il n'existe pas de texte sans espace

Merci pour votre aide.