Positionnement css

**theo17** · 20/04/2013, 11h40

Bonjour,

Je m'essaie au positionnement en css et je rencontre un problème sur mon dernier bouton ('Retour Menu') que je n'arrive pas à positionner.

Ci après les bouts de code correspondants à cet essai (qui me permettra de faire une mise en page d'une grille de saisie dès que j'aurais tout compris)

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
16
17
18
19
20
21
22
23
function Affiche_titre($titre)
{
   print("<div class='cadre_titre'>");
   print("<span id='texte_titre'>$titre</span>");
   print("</div>");
}
 
function Affiche_cadre1()  // Cadre 1 ligne
{
   print("<form action=\"".$_SERVER['PHP_SELF']."\" method=\"post\">"); 
   print("<div class='div_fond'>");
   Affiche_titre("Cadre une ligne");
 
   print("<div class='cadre_une_ligne'>");
   print("<span id='libelle1'>toto</span>");
   print("<input id='input1' type='text' size=12>");
   print("<input id='sumbit1' type='submit' value='Validation' name='ok'>"); 
   print("<input id='retour1' type='button' value='Retour Menu'>"); 
   print("</div>");         // fin class='cadre_une_ligne'
 
   print("</div>");         // fin class='div_fond'
   print('</form>');  
}

et voilà le 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
body { background-color:#ecf7f9}
 
.div_fond {
   position: relative;	
   top: 100px;
   left: 30px;
   width: 900px;
   height: 650px;
   border: 1px solid #333333;
   background-color: #ecf7f9;
}
 
.cadre_titre {
   position: absolute;
   top: 10px;
   left: 120px;
   width: 500px;
   height: 50px;
   padding-top: 20px;
   border: 1px solid #333333;
   background-color: #ecf7f9;
}
 
#texte_titre {
   font-family: "Verdana", "Arial",  "Trebuchet MS", "Helvetica", "sans-serif";
   font-weight: bold;
   color: #000;
}
 
.cadre_une_ligne {
   position: absolute;
   top: 120px;
   left: 120px;
   width: 350px;
   height: 75px;
   border: 1px solid #333333;
   background-color: #dee5f4;
}
 
#libelle1 {
   position: absolute;
   top: 25px;
   left: 20px;
}
 
#input1 {
   position: absolute;
   top: 25px;
   left: 180px;
}
 
#sumbit1 {
   position: absolute;
   top: 145px;
   left: 70px;
}
 
#retour1 {
/*   position: absolute;*/
   position: relative;
   top: 175px;
   left: 200px;
}

J'ai pourtant positionné avec son absolute (même essai en relative), top (différentes valeurs), left (différentes valeurs) et il s'affiche toujours au même endroit, dans la partie haute de ma class='cadre_une_ligne', pourquoi ? alors que l'autre bouton 'Validation' s'affiche au bon endroit.

J'ai pourtant opéré de la même manière l'autre bouton avec absolute, top et left.

[IMG]C:\Program Files (x86)\EasyPHP-5.3.3.1\www\Appli_Web_PL\Ecran_test_css.jpg[/IMG]

Alors que se passe t il ? qu'est ce que j'ai raté ?
Merci de vos lumières.

**rodolphebrd** · 20/04/2013, 12h36

Bonjour,

peut-voir le code html lié au sujet?

**theo17** · 20/04/2013, 12h53

Voilà en faisant voir le code source :

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
20
<!DOCTYPE html> 
<html lang="fr">
<head>
  <title>Titre accueil du site</title>
  <meta charset="iso-8859-15" />       <!-- ou charset="utf-8" -->
  <link rel="stylesheet" href="Comptes_bq.css" />
  <!-- <link rel="stylesheet" href="JsQuery/jquery_dev/css/jquery-ui.css" /> -->      
 
</head>
 
<body>
<form action="/Appli_compte/Test_affichage_css.php" method="post">
<div class='div_fond'>
<div class='cadre_titre'><span id='texte_titre'>Cadre une ligne</span></div>
<div class='cadre_une_ligne'><span id='libelle1'>toto</span>
<input id='input1' type='text' size=12><input id='sumbit1' type='submit' value='Validation' name='ok'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type='button' value='Retour Menu'></div></div></form>	
 
</body></html>

Merci

**theo17** · 20/04/2013, 13h04

C'est en voyant la séquence :        
dans ce code source que je viens de voir que l'écran s'affichait avec de précédents essais.
J'ai vidé le cache de Firefox, relancé le programme et tout est bien positionné !!!
Donc tout n'était pas pris en compte à chaque modif de mes sources, pourtant sauvegardés chaque fois.
Merci et bonne journée

Positionnement css

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager