Positionnement sur une ligne

Version imprimable

13/01/2012, 14h59
pandu

Positionnement sur une ligne

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
13/01/2012, 21h08
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/
13/01/2012, 21h26
pandu

Citation:

Envoyé par 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/

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.
13/01/2012, 21h26
Atomya Rise

Met nous ton code s'il te plaît :)

Citation:

Envoyé par Atomya Rise

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:

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à :D

14/01/2012, 18h08
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:

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 !)
15/01/2012, 08h58
pandu

Ca ça peut pas marcher 8-) 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.

Oui, exact, donc vire les paragraphes :
Code:

1 2 3 texte1 texte2 <img src="image.jpg"/>
ou pour faire plus propre, du PHP :
Code:

1 2 3 <?php echo "texte1"; ?> <?php echo "texte2"; ?> <img src="image.jpg"/>
ou, pour ne pas avoir à changer l'extension, du js :
Code:

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

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:

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:

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; }