IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Espacement entre des <div> générés en PHP


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mars 2007
    Messages
    24
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2007
    Messages : 24
    Par défaut Espacement entre des <div> générés en PHP
    Bonjours,
    Je suis actuellement en train de réaliser un site en PHP, xhtml et CSS.
    J'ai plutôt bien avancé mais je bloque encore sur certains points de CSS notamment le suivant :

    Arriver à mettre un espace entre deux <div> consécutifs sans passer par les <br /> .

    En fait avec un code PHP je génère un certain nombre de <div> se mettant les un après les autres.


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    while ($donnees = mysql_fetch_array($reponse))
    {
    if($donnees['valid']==1)
    {
        echo '<div class="cont">  [..affichage des informations contenus dans $donnees..] </div>' ;
    }
    }
    Je souhaiterai donc que le premier <div class="cont"> soit espacé de l'élément précédent (un <div> ) d'une hauteur variable. Puis que chacun des <div class="cont"> ainsi générés soient aussi espacés de cette hauteur entre eux.

    J'ai essayé de voir si cela est possible en utilisant un margin-top et en essayant de faire partir son calcul de l'élément précèdent mais mes tests n'ont pas étés très concluant.

    Merci de votre aide

  2. #2
    Nouveau membre du Club
    Inscrit en
    Novembre 2005
    Messages
    10
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 10
    Par défaut
    Bonjour,

    je n'ai pas très bien compris en quoi tu voudrais que le premier espacement soit "variable" ? Peux-tu préciser un peu plus ?

  3. #3
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mars 2007
    Messages
    24
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2007
    Messages : 24
    Par défaut
    En fait par "variable" j'entends qu'il soit réglable en modifiant une valeur dans le fichier CSS (par exemple si la solution utilise des margin-top que la variation de cette valeur fasse varier l'espace). C'est surtout que je ne veux pas d'une solution à base de <br />.

    J'espère que c'est plus clair.

  4. #4
    Nouveau membre du Club
    Inscrit en
    Novembre 2005
    Messages
    10
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 10
    Par défaut
    Ok Mais alors je comprends pas en quoi un "margin-top:20px" par exemple ne marche pas ? Si tu fais ce margin sur tes div de classe "cont", tu auras le même espace en haut de toutes tes div... qu'est ce qui ne fonctionne pas ? ^^ Désolé de pas tout comprendre vite ! :p

  5. #5
    Membre averti
    Profil pro
    Étudiant
    Inscrit en
    Mars 2007
    Messages
    24
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mars 2007
    Messages : 24
    Par défaut
    merci d'essayer de m'aider

    D'après ce que j'en sais,le CSS, par défauts, se sert de la boite "contenante" comme de repère pour les marges. Dans mon cas cette boite contenante est un <div> qui contient toutes la page mais il y a des éléments dont la hauteur et largement supérieur à 20px entre ce <div> et ce que je génère en PHP.
    je pense que c'est là le coeur du problème, et qu'il faut utiliser comme repère l'élément précèdent.
    Sinon je peux essayer de mettre ces <div> dans un autre <div> sans bordure et de jouer avec les padding. Mais je préférai une solution moins complexe et plus propre.

  6. #6
    Nouveau membre du Club
    Inscrit en
    Novembre 2005
    Messages
    10
    Détails du profil
    Informations forums :
    Inscription : Novembre 2005
    Messages : 10
    Par défaut
    Lol, bah j'ai du mal à voir ce qui ne vas pas Il n'y a pas de questions de boite contenante ou quoique ce soit (je crois), si tu précises un margin de 20px sur un div, il se mettra a 20px de tout, c'est tout...

    Si tu mets deux div a la suite (l'un en dessous de l'autre puisque ce sont des divs (s'ils ne sont pas en float^^) ) et que tu leurs donnes un margin de 10 par exemple, tu auras 20px d'espace entre tes deux div.

    Donc je vois pas pourquoi en faisant un code comme le suivant ça ne fonctionne pas :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
     
    .cont {
         margin-top:20xp;
    }
    Tu as quoi comme code CSS pour tes classes "cont" ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 3
    Dernier message: 19/07/2010, 14h18
  2. Comment ajouter un espace entre des AccordionHeader?
    Par 123quatre dans le forum Flex
    Réponses: 1
    Dernier message: 22/04/2010, 23h01
  3. problème espace entre TD et DIV ?
    Par alamidev dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 10/06/2009, 12h12
  4. Suppression d'espaces entre des chiffres
    Par rambc dans le forum Général Python
    Réponses: 7
    Dernier message: 20/11/2008, 22h37
  5. Espace entre Img et Div sous firefox
    Par LoTiS dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 26/07/2007, 17h43

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo