Discussion :

[VincentG]

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

[Alexounet]

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 ?

[VincentG]

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.

[Alexounet]

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

[VincentG]

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.

[Alexounet]

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" ?

[VincentG]

Effectivement j'ai testé sur une page de test et un margin-top permet de réaliser cela mais dans mon cas ca ne marche pas. Il faudra que je regarde le code de plus prés pour savoir d'où vient le problème. Quoi qu'il en soit en rajoutant un div comme évoqué précédemment j'arrive à créer un espace variable entre les blocs. Je considère donc ce problème comme résolu et je vais passé à la suite de mon code même si ça m'intrigue et que je ne manquerai pas d'y revenir.

Merci pour ton aide