Discussion :

[pandu]

Bonjour,

J'ai une liste de lignes de la forme :

Texte1 Texte2 Images



Le texte1 doit être aligné à gauche, les images à droite et le texte2 est soit centré soit dans une position précise sur l'écran.
De plus les textes doivent être centré verticalement sur les images.

Comment écrire ça ? désolé si c évident mais je ne sais pas faire.

Merci

[Atomya Rise]

As-tu déjà essayé quelque chose ?

Si oui, ce serait bien que tu nous donne ton code afin que l'on puisse t'aider à te diriger.

Au pire des cas, un petit tutoriel qui t'aideras pour les débuts : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

[pandu]

As-tu déjà essayé quelque chose ?

Si oui, ce serait bien que tu nous donne ton code afin que l'on puisse t'aider à te diriger.

Au pire des cas, un petit tutoriel qui t'aideras pour les débuts : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

En fait j'ai déjà essayé avec <div align left pour texte1, div center pour texte2, div right pour images. Ca marche bien sauf que le div fait un saut de ligne
Ce qui donne :
Texte1
___________________________Texte2
_________________________________________________________Images
Je voudrais que tout soit sur la meme ligne donc faire des align sans etre dans un div.

[Atomya Rise]

Met nous ton code s'il te plaît

[pandu]

Met nous ton code s'il te plaît

Bon ça fait environ 500 lignes de prog donc je ne mets pas tout, de toute façons le code n'apportera rien de plus je pense :

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
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
#encours
{
width: 966px;
height: 200px;
  overflow: auto; 
  font-size: 8;
font-weight: lighter;
}
           <div id="encours">
              <?php 
             //AFFICHAGE DES LIGNES
              function ecartemps($n1,$n2){
               settype($n1, "integer");
               settype($n2, "integer"); 
               $tzert=array(0,0); 
               if($n1 > $n2)$tzert[0]=-1;
              else {
              $fgmhkjt= ($n2-$n1)/3600 ; 
              $h= intval(floor($fgmhkjt)); //heures entieres
              //var_dump($n1); var_dump($n2); var_dump($h);
              $tzert[0]= intval($h/24); // jours
              $tzert[1]= $h%24;
                    }
              return $tzert ;
              }
              $t1=time();
 
// BOUCLE SUR LES LIGNES 
              while($resultat=mysql_fetch_array($result1,MYSQL_ASSOC)){
 
 
               $t2 =  $resultat['heure_lim'] ; 
               $tyui = ecartemps($t1,$t2);         
                  $sql = "SELECT * FROM matieres WHERE Code_mat ='$codemat'" ; 
                  $res0 = mysql_query($sql)or die('Erreur SQL!'.$sql.''.mysql_error());
                   $dat0 = mysql_fetch_assoc($res0);
                  $lib=htmlentities($dat0['Libelle_matiere']);
 
                      $classe=htmlentities($dat0['classe_eleve']);
 
            //   A aligner A gauche :
                   echo   '<font  size="5" >'; 
                   echo $tyui[0],'j',$tyui[1],'h' ;    
 
                         echo   '</font>';
                 echo   '<font color="#0000FF" size="5" >'; 
 
 
 
              //  A ALIGNER AU CENTRE; 
               switch ($etat) {
    case 0:
        echo "Patienter";
        break;
    case 1:
        echo "Accepté ";
        break;
    case 2:
        echo "Refusé";
                break;
 
}    echo   '</font>'; 
              echo '<div align="RIGHT">';
      //ACTIONS A ALIGNER A DROITE
                switch ($etat) {
    case 0:
             echo"<a href=\"voir.php?id=$numdevoir\"><img src=\"voir.jpg\"></a>";
             echo"<a href=\"terminer.php?id=$numdevoir\"><img src=\"terminer.jpg\"></a>";
          if(empty($idprof)){
                            }
      else{    
        if($directeur!=0) 
         {   echo"<a href=\"accepter.php?id=$numdevoir\"><img src=\"accepter.jpg\"></a>";
             echo"<a href=\"refuser.php?id=$numdevoir\"><img src=\"refuser.jpg\"></a>";
             echo"<a href=\"devoir.php?id=$numdevoir\"><img src=\"travailler.jpg\"></a>";
                           }
 
         }
        break;
    case 1:
        //   echo"<a href=\"voir.php?id=$numdevoir\"><img src=\"voir.jpg\"></a>";
 
       echo"<a href=\"voir.php?id=$numdevoir\"><img src=\"voir.jpg\"></a>";
 
 
         }
 
        break;
    case 2:
            echo"<a href=\"voir.php?id=$numdevoir\"><img src=\"voir.jpg\"></a>";
             echo"<a href=\"terminer.php?id=$numdevoir\"><img src=\"terminer.jpg\"></a>";
                break;
 
}  
 
    // Fin de boucle de ligne
            echo ' </div> ';
               }
               ?> 
 
               </div>

Voilà

[laurentSc]

En lisant le problème, j'ai justement pensé aux div et au CSS !
Je serais toi, j'essaierais de mettre au point la solution avec un fichier de test simplifié, où les 3 parties seraient du style :

Code :

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

1
2
3
<p>texte1</p>
<p>texte2</p>
<img src="image.jpg"/>

(ce qui permettrait de publier tes essais sans avoir 500 lignes à montrer !)

[pandu]

Ca ça peut pas marcher car :
Cette balise sert à définir un paragraphe. Un saut de ligne est effectué avant la première ligne du paragraphe.

Donc tu auras :

texte1
___________________texte2_______________________image


alors que tout doit être sur la même ligne.

[laurentSc]

Oui, exact, donc vire les paragraphes :

Code :

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

1
2
3
texte1
texte2
<img src="image.jpg"/>

ou pour faire plus propre, du PHP :

Code :

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

1
2
3
<?php echo "texte1"; ?>
<?php echo "texte2"; ?>
<img src="image.jpg"/>

ou, pour ne pas avoir à changer l'extension, du js :

Code :

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

1
2
<script type="text/javascript">  document.write("texte1");  document.write("texte2"); </script>
<img src="image.jpg"/>

[Atomya Rise]

As-tu lu le tutoriel donné plus haut ? Je ne pense pas, car dans le code que tu présente, tout ce que l'on voit, c'est une div qui englobe une div !

Utilise les float avec l'aide du tutoriel et tu verras que ce n'est pas sorcier.

Et pour info, ce que laurentSc essaye de t'expliquer, c'est qu'au lieu de coller tes 500 lignes de codes, tu fais juste une structure simple en html et css...

un exemple pour que ce soit plus clair :

Code html :

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

1
2
3
4
5
<div id="contenu">
<div id="gauche">Texte 1</div>
<div id="droite">Image</div>
<div id="milieu">Texte 2</div>
</div>

Code css :

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

1
2
3
4
#contenu { padding: 0 0 0 0; width: 98%; margin: 0 auto; }
#gauche { float: left; width: 200px; background: blue; }
#droit { float: right; width: 200px; background: blue; }
#milieu { margin-right: 214px; margin-left: 214px; background: yellow; }