Une div qui refuse de s'aligner à gauche

madina · 23/08/2011, 13h02

Bonjour,

J'ai un formulaire dans une div centré.
tout juste aprés le formlulaire, j'ai placé une autre div que j'essaie d'aligner à gauche mais ça refuse.

Voici le code html

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
 <div id="formulaire">
 <form name="chercher_previsions" action =""  method="post" >
 <fieldset><legend><b>Code CR</b></legend>
</form>
</div>
 <div  id="a_aligner_gauche"></div>
</body>

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
body
{
width: 100%;
background-color: #F8D095;
}
 
#formulaire
{
width:50%;
margin:auto;
margin-top: 8%;
 margin-bottom: 2%; 
}
 
#a_aligner_gauche
{
width: 50%;
 
}

pourquoi le <div> après celle du formulaire ne s'aligne pas tout à fait à gauche aulieu de celle du formulaire ?

Merci de vos solutions.

Cordialement.

MonsieurSmith · 23/08/2011, 13h06

Code :

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

<div align="right"...

Confusion droite-gauche ?

madina · 23/08/2011, 13h25

Bonjour

ça fait pas partie dedans, je l'avais mis bien avant.

mais j'ai seulement

Code :

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

<div id="a_aligner_gauche"></div>

et je contrôle son alignement au niveau de la feuille de style.

mais ça refuse ?

MonsieurSmith · 23/08/2011, 13h34

Ce changement de style ferait-il l'affaire ?

Code :

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

1
2
3
4
#a_aligner_gauche {
    width:50%;
    margin:auto;
}

madina · 23/08/2011, 14h42

Bonjour,

Non pas du tout ça change rien.

Cordialement

Bovino · 23/08/2011, 14h50

Citation:

Envoyé par MonsieurSmith

Code :

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

<div align="right"...

Confusion droite-gauche ?

Citation:

Envoyé par madina

ça fait pas partie dedans, je l'avais mis bien avant.

Kamoulox ?

Tout d'abord, l'attribut align, c'est

La propriété CSS text-align, tu n'aimes pas ?

Kaamo · 23/08/2011, 14h52

et en passant la balise <fieldset> n'est pas fermée

madina · 23/08/2011, 15h31

Bonjour,

même en faisant

Code :

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

1
2
3
4
#a_aligner_gauche {
{
text-align:left;
}

j'ai toujours une marge qui reste inoccupée à gauche.
Comme "#a_aligner_gauche" contient un tableau, mon tableau laisse une marge sur mon écran.

J'ai l'impression que ça s'aligne à gauche mais pas par rapport à mon <body>

le problème reste entier ?

Kaamo · 23/08/2011, 16h17

Si c'est la marge gauche qui pose problème, peut être ajouter une marge à gauche dans les propriétés CSS de body{}

Code :

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

margin-left: 0px;

ou alors jouer alors les cellpadding/cellspacing au niveau du tableau qui est dans le div ?

Code :

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

1
2
3
4
5
<div id="a_aligner_gauche">
<table cellpadding='0' cellspacing='0'>
...
</table>
</div>

madina · 23/08/2011, 17h37

Bonjour,

ça change rien.
En fait le div en question qui doit se remplit par un innerHTML.

Mais quand je clique sur le bouton qui doit l'afficher , en premier temps il s'aligne bien à gauche sans laisser de marge et puis enfin il se positionne en laissant une marge importante de l’écran à gauche(c'est comme un flash).

c'est comme il reconnait l'extrémité gauche comme étant là où commence le formulaire( qui est centré par auto). Du coup la marge laissée est importante.

Voilà le soucis.

jreaux62 · 23/08/2011, 17h49

Bonjour Madina,
on peut voir les "vrais" bouts de code ?
-> au moins les parties qui sont concernées
-> depuis <!DOCTYPE ... jusqu'à ... </html>

+ une copie d'écran du résultat actuel
+ une image du résultat que tu veux obtenir

Merci

madina · 23/08/2011, 18h35

Bonjour jreaux62,

voilà le fichier 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
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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 <head>
 <title>Modification Previsions</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.numeric.js"></script
<script src="jquery.maskedinput-1.1.4.js" type="text/javascript"></script>
 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="tester_operation_css.css" />
 <script type="text/javascript">
 function affiche_previsions()
{
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
reponse_texte = xhr.responseText;
// On se sert de innerHTML pour replir le contenu de notre div.
document.getElementById('ligne_modifier_prev').innerHTML = reponse_texte;
}
}
xhr.open("POST","affiche_liste_prev_modif.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
codecr_prev=document.getElementById('code_cr_prev').value;
xhr.send("Codecr="+codecr_prev);
}			
</script>	
  </head>
 <body>
<div id="formulaire">
 <form name="chercher_previsions" action =""  method="post" onsubmit="affiche_previsions();"  >
 <fieldset><legend><b>Code CR</b></legend>
</br>
<table align="center">
<tr align="center">
<td style="text-align:left">
<label style="margin-left:14%" ><b>Code CR</b>
<select   style="margin-left:10%" name="code_cr_prev" id="code_cr_prev" onchange="go_cr()"; >
<option value="-1">Aucun</option>
<?php
include('fonctions.php');
 connect();
 $sql_cr='SELECT code_cr FROM CR';
$res_cr = mysql_query($sql_cr) or die ('Erreur SQL !'.$sql_cr.'<br />'.mysql_error());;
while($row_cr = mysql_fetch_array($res_cr ))
{
echo '<option value="'.$row_cr['code_cr'].'">'.$row_cr['code_cr'].'</option>';
}
?>
</select></td>
</tr>
<table>
<center><input type="submit" name="echo_previsions" value="Rechercher Previsions" onclick="affiche_previsions(); return false;" /></center>
</fieldset>
</form>
</div>
 <div id="ligne_modifier_prev">
 </div>
<div align="center">
<span class="mad1"><a href="index_budget.html">Menu Principal</a></span>
<span class="mad2"><a href="menu_liste_modif_tables.html">Modifications</a></span>
 <span class="mad4"> <a href="javascript:self.close();" >Quitter</a></span>
<div>
<div id="pied_de_page_pa_pret">
  </div>
 </body>
<html>

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
body
{
width:100%;
margin:auto;
margin-left: 0px;
background-color: #F8D095;
}
 
#formulaire
{
width:50%;
margin:auto;
margin-top: 8%;
 margin-bottom: 2%; 
 }
.mad1
{
margin-left:0px;
}
.mad2
{
margin-left:10px;
}
.mad3
{
margin-left:10px;
}
.mad4
{
margin-left:10px;
}
 
.mad5
{
margin-left:10px;
}
 
#ligne_modifier_prev
{
 
text-align:left;
 
}
table
 {
 border-collapse: collapse;
 margin-bottom: 20px; 
}
td, th /* Mettre une bordure sur les td ET les th */
{
border: 1px solid black;
width:275px;
}

Donc c'est la div dont l'id est "ligne_modifier_prev" que je veux aligner à gauche tout juste après l'id du "formulaire".

Je vous attaché le fichier des resultats que j'obtiens et celui que je veux avoir.

voilà, .

jreaux62 · 23/08/2011, 19h07

Mea culpa. J'aurais dû préciser "code source généré". (-> "afficher la source")

Bovino · 23/08/2011, 19h36

Citation:

Envoyé par jreaux62

Mea culpa. J'aurais dû préciser "code source généré". (-> "afficher la source")

Non non, tu n'as pas à faire de mea culpa, c'est clairement indiqué dans Important : Les règles incontournables d'utilisation de ce forum...

jreaux62 · 23/08/2011, 19h42

Citation:

Envoyé par Bovino

Non non, tu n'as pas à faire de mea culpa, ...

Je peux arrêter de me flageller, alors ?

parce que là ... ca commence à piquer ! ...

Kaamo · 24/08/2011, 12h06

Il faut être vigilant aux balises et ranger son code de façon à avoir un aperçu visuel direct de l'ensemble des balises (où elles s'ouvrent et se ferment).
Quelques petites corrections du code postés ci-dessus :

Ligne 5 : Il manque le chevron fermant à la fin de :

Code :

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

<script type="text/javascript" src="jquery.numeric.js"></script>

Ligne 34 :
Utiliser <br/> à la place de </br>

Ligne 51 :
il manque </label>
Utiliser </select></label></td> à la place de </select></td>

Ligne 53 :
Utiliser </table> à la place de <table>

jreaux62 · 24/08/2011, 12h50

Donc, il nous faudrait :
-> le code html généré (-> "afficher la source")
~~-> le code css (tester_operation_css.css)~~ ca, c'est bon
-> le code html généré par "affiche_liste_prev_modif.php" (appelé via ajax)

Et comme dit Kaamo :
-> commence par CORRIGER ton code,
-> ajoute de l'INDENTATION (-> des tabulations, pour rendre le code plus facile à lire)
Ce n'est pourtant pas sorcier !

QUESTION :
-> où est donc ce div dans ton code ?????

Code :

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

<div id="a_aligner_gauche"></div>

Ce ne serait pas plutôt (?)

Code :

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

<div id="ligne_modifier_prev"></div>

23/08/2011, 13h06	#2
MonsieurSmith Membre actif Développeur informatique Inscription : août 2008 Messages : 69 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur informatique Informations forums : Inscription : août 2008 Messages : 69 Points : 150 Points : 150	Code : Sélectionner tout - Visualiser dans une fenêtre à part <div align="right"... Confusion droite-gauche ?
	00

23/08/2011, 13h25	#3
madina Débutant Inscription : avril 2005 Messages : 464 Détails du profil Informations forums : Inscription : avril 2005 Messages : 464 Points : 69 Points : 69	Bonjour ça fait pas partie dedans, je l'avais mis bien avant. mais j'ai seulement Code : Sélectionner tout - Visualiser dans une fenêtre à part <div id="a_aligner_gauche"></div> et je contrôle son alignement au niveau de la feuille de style. mais ça refuse ?
	00

23/08/2011, 17h49	#11
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Bonjour Madina, on peut voir les "vrais" bouts de code ? -> au moins les parties qui sont concernées -> depuis <!DOCTYPE ... jusqu'à ... </html> + une copie d'écran du résultat actuel + une image du résultat que tu veux obtenir Merci __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

23/08/2011, 19h07	#13
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Mea culpa. J'aurais dû préciser "code source généré". (-> "afficher la source") __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

24/08/2011, 12h06	#16
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	Il faut être vigilant aux balises et ranger son code de façon à avoir un aperçu visuel direct de l'ensemble des balises (où elles s'ouvrent et se ferment). Quelques petites corrections du code postés ci-dessus : Ligne 5 : Il manque le chevron fermant à la fin de : Code : Sélectionner tout - Visualiser dans une fenêtre à part <script type="text/javascript" src="jquery.numeric.js"></script> Ligne 34 : Utiliser <br/> à la place de </br> Ligne 51 : il manque </label> Utiliser </select></label></td> à la place de </select></td> Ligne 53 : Utiliser </table> à la place de <table>
	10

23/08/2011, 14h42	#5
madina Débutant Inscription : avril 2005 Messages : 464 Détails du profil Informations forums : Inscription : avril 2005 Messages : 464 Points : 69 Points : 69	Bonjour, Non pas du tout ça change rien. Cordialement
	00

23/08/2011, 14h52	#7
Kaamo Membre éclairé Cyril Ingénieur développement logiciels Inscription : avril 2007 Messages : 205 Détails du profil Informations personnelles : Nom : Cyril Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Ingénieur développement logiciels Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : avril 2007 Messages : 205 Points : 367 Points : 367	et en passant la balise <fieldset> n'est pas fermée
	20

23/08/2011, 17h37	#10
madina Débutant Inscription : avril 2005 Messages : 464 Détails du profil Informations forums : Inscription : avril 2005 Messages : 464 Points : 69 Points : 69	Bonjour, ça change rien. En fait le div en question qui doit se remplit par un innerHTML. Mais quand je clique sur le bouton qui doit l'afficher , en premier temps il s'aligne bien à gauche sans laisser de marge et puis enfin il se positionne en laissant une marge importante de l’écran à gauche(c'est comme un flash). c'est comme il reconnait l'extrémité gauche comme étant là où commence le formulaire( qui est centré par auto). Du coup la marge laissée est importante. Voilà le soucis.
	00

24/08/2011, 12h50	#17
jreaux62 Rédacteur Jérôme Réaux Webdesigner Inscription : août 2008 Messages : 2 993 Détails du profil Informations personnelles : Nom : Jérôme Réaux Âge : 45 Localisation : France, Pas de Calais (Nord Pas de Calais) Informations professionnelles : Activité : Webdesigner Secteur : Arts - Culture Informations forums : Inscription : août 2008 Messages : 2 993 Points : 5 786 Points : 5 786	Donc, il nous faudrait : -> le code html généré (-> "afficher la source") ~~-> le code css (tester_operation_css.css)~~ ca, c'est bon -> le code html généré par "affiche_liste_prev_modif.php" (appelé via ajax) Et comme dit Kaamo : -> commence par CORRIGER ton code, -> ajoute de l'INDENTATION (-> des tabulations, pour rendre le code plus facile à lire) Ce n'est pourtant pas sorcier ! QUESTION : -> où est donc ce div dans ton code ????? Code : Sélectionner tout - Visualiser dans une fenêtre à part <div id="a_aligner_gauche"></div> Ce ne serait pas plutôt (?) Code : Sélectionner tout - Visualiser dans une fenêtre à part <div id="ligne_modifier_prev"></div> __________________ "Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément." Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique. Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email