Probleme d'affichage de blocs

**Freygolow** · 13/10/2008, 22h53

Bonjour,
Pour essayer de vous expliquer mon problème facilement, je vais vous montrer le résultat que j'obtiens.

J'aimerai que lorsque l'on écrit dans le cadre marron, celui ci s'agrandit s'il n'y a plus de place. Ici ça marche mais le problème est qu'il chevauche le cadre bleu.
De meme pour le cadre rouge, si le cadre rouge s'agrandit, je ne voudrais pas qu'il chevauche le cadre bleu.

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
31
32
33
<html>
<head>
<link rel="stylesheet" type="text/css" href="design.css">
</head>
<title>
</title>
<body>
<div class="conteneur">
 
<div id="ban"></div>
 
<div id="menuH"></div>
 
<div id="corps">
sqdsqdqsdqds<br />sqdsqdqsdqds<br />sqdsqdqsdqds<br />
sqdsqdqsdqds<br />sqdsqdqsdqds<br />sqdsqdqsdqds<br />
sqdsqdqsdqds<br />sqdsqdqsdqds<br />sqdsqdqsdqds<br />
sqdsqdqsdqds<br />sqdsqdqsdqds<br />sqdsqdqsdqds<br />
sqdsqdqsdqds<br />sqdsqdqsdqds<br />sqdsqdqsdqds<br />
sqdsqdqsdqds<br />sqdsqdqsdqds<br />sqdsqdqsdqds<br />
 
</div>
 
<div id="menuD"></div>
 
<div id="pied"></div>
 
 
 
</div>
 
</body>
</html>

Voici le code 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
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
@charset "utf-8";
/* CSS Document */
 
body
{
background-color:#CC99FF;
}
 
.conteneur
{
 
background-color:#000000;
	margin-left:auto;
	margin-right:auto;
	width:1024px;
	height:auto;
	z-index:1;
	border-top-style: groove;
	border-right-style: groove;
	border-bottom-style: groove;
	border-left-style: groove;   
}
 
 
#menuH
{
background-color:#FF00FF;
margin-top:10px;
height: 30px;
width: 1024px;
}
 
 
#corps
{
float: left;
background-color:#660000;
	margin-top:20px;
	margin-left:10px;
	width:770px;
    height:auto;
}
 
 
 
#menuD
{
background-color:#FF0000;
	margin-left:800px;
	margin-top:20px;
	width:210px;
	height:300px;
 
}
 
#ban
{
    background-color:#33CC33;
	width:1024px;
	height:200px;
 
}
 
#pied
{
background-color: #232343;
width: 1024px;
height: 90px;
margin-top: 10px;
}

Si vous pouviez résoudre mon problème, ce serait très gentil de votre part

Merci

**Erwan31** · 14/10/2008, 14h50

Bonjour,
tu dois ajouter un position:relative à ton footer, mais pourquoi ne mets tu pas un clear:left?

Code :

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

1
2
3
4
#pied {
	clear:both;
	...
}

Attention il te manque un DOCTYPE (voir la FAQ pour les différents DTD) donc les navigateurs récents basculent en mode Quirks (non standard > déconseillé...) et d'autre part ton title est en dehors du head.
Je te conseil te te lancer dés à présent dans la syntaxe XML et de commencer par du XHTML (transitionnal ou strict selon les contraintes):
Voici le strict minimum (pour un document en français):

Code :

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

1
2
3
4
5
6
<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>

**Freygolow** · 14/10/2008, 15h12

D'accord, je te remercie de tes conseils

Je ne connaissais pas clear :/
Ce que tu m'a dit marche parfaitement.

Merci

Probleme d'affichage de blocs

CSS

Vue hybride

Discussions similaires

Partager

Partager