Aligner correctement en colonne différents symboles [Résolu]

clairetj · 21/05/2011, 21h27

Bonjour à toutes et à tous, j'ai un petit problème.

Vous trouverez ci joint une capture d'écran du site internet que je suis en train de développer. Mon souhait et de vouloir aligner correctement en colonne les différents symboles quelque soit la longueur des résultats de la recherche pour l'instant j'utilise ceci:

En PHP:

Code :

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

<span class="marge">

couplé avec du CSS

Code :

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

1
2
3
4
5
6
 
.marge
	{
		margin-left: 50px;
		color: black;
	}

Si vous avez un moyen de résoudre mon problème, merci de m'aider
Cordialement,
Clairetj

Michel Rotta · 22/05/2011, 12h22

Si tu regardes avec un outil d'exploration du DOM (dans le style de firebug sous FF, mais tous les explorateurs en ont un) tu verras que ta marge part de la fin de l'élément précédant.

Le plus simple, si tu en as la possibilité, serait de modifier ton html et de passer sur un tableau.

Si non, essayes de fixer la largeur de l'élément précédant par un width:

clairetj · 22/05/2011, 12h27

Oki merci a toi et je vais essayer

clairetj · 23/05/2011, 14h35

Citation:

Le plus simple, si tu en as la possibilité, serait de modifier ton html et de passer sur un tableau.

Je voulais savoir vu que je programme ma page avec du PHP comment je pourrait réalisé ce genre de tableau, je peux déjà précisé qu'il n'y aura que 3 colonnes dans le tableau donc si tu peux m'aidé Michel Rotta ce serait fort aimable de ta part
Cordialement,
Clairetj

Nheo_ · 23/05/2011, 14h52

Citation:

Envoyé par clairetj

Je voulais savoir vu que je programme ma page avec du PHP comment je pourrait réalisé ce genre de tableau, je peux déjà précisé qu'il n'y aura que 3 colonnes dans le tableau donc si tu peux m'aidé Michel Rotta ce serait fort aimable de ta part
Cordialement,
Clairetj

Bonjour,

Que tu fasses ta page en PHP n’empêche pas d'intégrer du code HTML.
Pour les tableaux, je te conseil de lire ceci pour commencer : Cours sur les tableaux.

Michel Rotta · 23/05/2011, 16h09

Si le tableau reste une bonne solution, il présente l’inconvénient d'être structurel et de ne pas permettre d'avoir une mise en page différente...

Tu peux le faire en pure (ou presque) css. Un exemple ici en HTML5 (facilement adaptable) et CSS.

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>essai tableau sans tableau</title>
    <style>
      h1 {
        font-size: 3em;
      }
      ul {
        list-style: none;
      }
      li span.col1 {
        width: 20em;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Liste en deux colonnes</h1>
    </header>
    <article>
      <ul>
        <li>
          <span class="col1">Texte A</span>
          <span class="col2">Img</span>
        </li>
        <li>
          <span class="col1">Texte B</span>
          <span class="col2">Img img img</span>
        </li>
        <li>
          <span class="col1">Texte C</span>
        </li>
        <li>
          <span class="col1">Texte D</span>
          <span class="col2">Img</span>
        </li>
      </ul>
    </article>
  </body>
</html>

L'effet devrait être proche de celui que tu recherches.

Seul inconvénient, le inline-block ne fonctionne que sur les navigateurs récents.

Bisûnûrs · 23/05/2011, 16h20

Citation:

Envoyé par Michel Rotta

Seul inconvénient, le inline-block ne fonctionne que sur les navigateurs récents.

IE6 et IE7 le gèrent partiellement. Que sur les éléments "inline", ce qui est le cas dans ton exemple, donc ça fonctionnera.

clairetj · 23/05/2011, 20h56

Peut etre que cela pourra aider dans la discussion, voici le code que j'utilise pour faire ma recherche dans mon site que vous trouverez en pièce jointe.

Donc si je comprend bien ton idée Michel Rotta, je devrai mettre le code que tu m'as fourni à la place de

Code :

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

1
2
3
4
5
<?php echo '<a href="SiteRecherche.php?page=SiteCarte&id='.$donnees['id'].'"> '.$donnees['nom'].''; ?> 
<span class="marge"><span class="marge">	<img src="../image_mana/<?php echo $donnees['mana']; ?>.png" />
<span class="marge"><span class="marge">	<img src="../image_edition/<?php echo $donnees['edition']; ?>.gif" /></br>
</p>			
<?php

qui se trouve en bas de la page de code en modifiant quelques paramètres du tableau

Michel Rotta · 24/05/2011, 01h05

J'ai bien essayé de lire ton code php, mais il me donne mal à la tête. Cela doit bien faire 10 ans que je n'ai vu ou écris de code architecturé de cette manière

Mon code est un exemple de ce qui peut être géré en html et css et qui réponde à ta question. Après, il faut l'adapter à ton cas et voir si cette solution est meilleure, ou pas, par rapport au tableau. C'est plus une réflexion et démonstration de faisabilité qu'un code immédiatement portable.

Essaye le, regarde comment cela tourne, pèse le pour et le contre par rapport au tableau, puis, prend ta décision.

A priori, je serais parti sur la solution d'un tableau. A la réflexion, la solution d'une liste et de css est séduisante et plus simple sémantiquement.

Quant à la génération dans ton php, il faudra probablement modifier ta boucle. Même si je ne comprend pas vraiment l'intérêt de tous les spam imbriqués généré.

22/05/2011, 12h22	#2
Michel Rotta Modérateur Michel Rotta Responsable d'exploitation informatique Inscription : septembre 2005 Messages : 4 913 Détails du profil Informations personnelles : Nom : Michel Rotta Âge : 49 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Responsable d'exploitation informatique Secteur : Distribution Informations forums : Inscription : septembre 2005 Messages : 4 913 Points : 7 505 Points : 7 505	Si tu regardes avec un outil d'exploration du DOM (dans le style de firebug sous FF, mais tous les explorateurs en ont un) tu verras que ta marge part de la fin de l'élément précédant. Le plus simple, si tu en as la possibilité, serait de modifier ton html et de passer sur un tableau. Si non, essayes de fixer la largeur de l'élément précédant par un width: __________________ Si tu donnes un poisson à un homme, il mangera un jour. Si tu lui apprends à pêcher, il mangera toujours (Lao Tseu). Pensez à valoriser les réponses pertinantes, cliquez sur le bouton vert +1 pour indiquer votre accord avec la solution proposée. Pensez à utiliser la balise [code] pour afficher du code, elle est cachée sous le bouton [#] dans l'éditeur. Une discussion est terminée ? Alors le bouton est votre ami !
	00

22/05/2011, 12h27	#3
clairetj Candidat au titre de Membre du Club Étudiant Inscription : avril 2011 Messages : 46 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Étudiant Secteur : Enseignement Informations forums : Inscription : avril 2011 Messages : 46 Points : 13 Points : 13	Oki merci a toi et je vais essayer
	00

24/05/2011, 01h05	#9
Michel Rotta Modérateur Michel Rotta Responsable d'exploitation informatique Inscription : septembre 2005 Messages : 4 913 Détails du profil Informations personnelles : Nom : Michel Rotta Âge : 49 Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur) Informations professionnelles : Activité : Responsable d'exploitation informatique Secteur : Distribution Informations forums : Inscription : septembre 2005 Messages : 4 913 Points : 7 505 Points : 7 505	J'ai bien essayé de lire ton code php, mais il me donne mal à la tête. Cela doit bien faire 10 ans que je n'ai vu ou écris de code architecturé de cette manière Mon code est un exemple de ce qui peut être géré en html et css et qui réponde à ta question. Après, il faut l'adapter à ton cas et voir si cette solution est meilleure, ou pas, par rapport au tableau. C'est plus une réflexion et démonstration de faisabilité qu'un code immédiatement portable. Essaye le, regarde comment cela tourne, pèse le pour et le contre par rapport au tableau, puis, prend ta décision. A priori, je serais parti sur la solution d'un tableau. A la réflexion, la solution d'une liste et de css est séduisante et plus simple sémantiquement. Quant à la génération dans ton php, il faudra probablement modifier ta boucle. Même si je ne comprend pas vraiment l'intérêt de tous les spam imbriqués généré. __________________ Si tu donnes un poisson à un homme, il mangera un jour. Si tu lui apprends à pêcher, il mangera toujours (Lao Tseu). Pensez à valoriser les réponses pertinantes, cliquez sur le bouton vert +1 pour indiquer votre accord avec la solution proposée. Pensez à utiliser la balise [code] pour afficher du code, elle est cachée sous le bouton [#] dans l'éditeur. Une discussion est terminée ? Alors le bouton est votre ami !
	00

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