le clear both d'un div rend inaccessible un champ input

**Zen_Fou** · 30/08/2010, 11h39

Bonjour,

Je suis chargé de faire l'intégration d'un site pour une association mais je vous avoue que c'est la 1ere fois que je le fais.
Là ou j'ai un soucis, c'est que mon formulaire de connexion s'affiche bien mais n'est pas utilisable, comme si mes champs étaient en 'read only'.

Si je déplace mon formulaire ca passe et bizarrement, lorsque j'enlève le clear both de mon id footer (y a un lien mais je sais pas lequel)

mon 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
 
<body>
  <div id="page-background">
      <div id="main">
        <div id="left">
            .....
        </div>
        <div id="right">
            .....
        </div>
        <div id="footer">
            .....
        </div>
     </div>
</div>
</body>

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
40
41
42
43
44
45
46
 
body{	
	margin:0;
	color: #4c4c4c;
	font:11px Arial, Helvetica, sans-serif;
	min-width:980px;
	height:100%;
}
 
#page-background {
  background:url("./images/background-border.gif") repeat-y scroll center top transparent;
	height:100%;
}
 
#main {
	margin:0 auto;
	padding: 0 0 0 0;
	position:relative;
	width:980px;	
	height:100%;
	/*border-right: 1px solid #DBDBCE;*/
}
 
#left{
  height: 100%; 
	width: 79%;
	float:left;	
}
 
#right{
	width: 21%;
	height: 100%; 
	float:right;
	margin-right:-1px;
	border-left: 1px solid #DBDBCE;
}
 
#footer{
	background-color:#DBDBCE;
	padding: 20px 0 20px 0;
	text-align:center;
	color:#4D4D4D;	
	padding-top:1em;
	margin-right:-1px;
	clear: both;
}

Pour ce faire, j'ai récupéré le code d'un projet sur lequel je suis censé me basé pour le graphisme et meme si j'ai épuré un peu le code, je ne maitrise pas tout.

Vous pouvez voir le rendu exacte sur http://zen.fou.free.fr

Le formulaire que je souhaite faire fonctionner est en haut à droite

Merci pour votre aide

**ornitho13** · 30/08/2010, 12h35

Salut,

le probleme vient #header qui passe par dessus ton #right, voici ce que tu dois changer:

Code :

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

1
2
3
4
5
6
7
8
9
 
#header{
    height: 20%;
    /*left:0px*/
    position: absolute;
    right: 21%;
    top: 0px;
    /*width:100% => à retirer*/
}

Autre remarque, un div est par défaut à "display:block" donc tu n'as pas besoin de mettre "width:100%".

**Zen_Fou** · 30/08/2010, 14h06

Merci ornitho13

Ca marche

le clear both d'un div rend inaccessible un champ input

CSS

Discussions similaires

Partager

Partager