Probleme div H2

[dayassine]

Bonjour

Ca fait plusieurs fois que je tombe sur le meme probleme et je voudrais bien savoir s'il y a moyen a contourner cela.

j'ai 2 div normal ou j'ecris un titre en H2 sur le 1er et une phrase sur le 2eme div. (le size en css du H2 et le texte est en taille normale)

le probleme c'est qu'il me dacalle les 2 div alors qu'avant le h2 ils sont collés

Quelqu'un pourrait me dire comment pouvoir mettre un H2 sans que les 2 div se separent entre eux?!

Merci

[Koxin-L]

Une div pour le h2 et une autre pour la phrase qui suit, déjà, ça m'a l'air un poil superflu...

Code: Tout sélectionner

h2
{
font-weight: normal;
font-size: xxxem;
margin: ?px ?px ?px ?px;
padding: ?px ?px ?px ?px;
}

p
{
font-weight: normal;
font-size: xxxem;
margin: ?px ?px ?px ?px;
padding: ?px ?px ?px ?px
}

Ce n'est pas plus simple ?

Si non, t'as la page à montrer ?

[dayassine]

Voila j'ai fait un petit test et je l'ai mis en ligne pour voir sur http://daoudi.fr/forum/tester.php

si j'enleve le H2 les 2 div se recollent

merci d'avoir pris le temps pour me répondre.

[fildis]

Tu dois ajouter 'display:inline;' dans le style du balise H2

[Marie-Aude]

Tu dois ajouter 'display:inline;' dans le style du balise H2

????

le H2 est un bloc. Il y a des marges par défaut dans les différents navigateurs.
Le css de daoudi ne prends absoument pas en compte les marges, donc effectivement il tripatouille avec des divs, mais il ferait mieux de mettre en place la solution de la koxin-L

[Florent V.]

Tu dois ajouter 'display:inline;' dans le style du balise H2

N'importe quoi...

Non, sérieusement, c'est une solution qui marchera techniquement avec son code, mais niveau pédagogie c'est la cata.

dayassine, tu es débutant en CSS? Si tu comptes te former à ce langage, je te conseille chaudement Alsacréations, ses ressources (tutoriels) et son forum.

Pour en revenir au problème:

1. Pour commencer, il y a un problème de structure HTML. Les deux div sont superflues. Il serait plus logique d'avoir le code HTML suivant:

Code: Tout sélectionner

<h2>Mon titre</h2>
<p>Mon texte.</p>

Ensuite, si on veut placer plusieurs paragraphes dans un bloc ayant un même style (couleur de fond, par exemple), on peut enrichir un peu la structure à des fins de présentation:

Code: Tout sélectionner

<h2>Mon titre</h2>
<div class="blabla">
    <p>Un premier paragraphe.</p>
    <p>Et un deuxième paragraphe.</p>
</div>

2. Mais repartons du code de départ: un h2 dans une div, et du texte brut dans une deuxième div. Ici, on a un comportement tout à fait normal, dû aux marges par défaut des titres (qui évitent que les titres et paragraphes soient complètement collés et illisibles par défaut...). Cela peut se corriger ainsi:

Code: Tout sélectionner

h2 {margin: 0;}

Mais, me direz-vous, pourquoi donc est-ce la div qui est décalée, et pas le titre à l'intérieur de la div? La réponse tient en trois mots: «fusion des marges» (en anglais: collapsing margins). Les marges du h2 se transmettent à son bloc parent (le div). Pour en savoir plus, petite recherche Google sur la fusion des marges.
Techniquement, on peut visualiser la différence entre la situation avec fusion et sans fusion de la manière suivante:

Code: Tout sélectionner

div {padding: 1px 0;}
h2 {margin: 1em 0;} /* Il s'agit grosso-modo des marges par défaut */

Et voilà.

[bproductiv]

T'as pas du trop chercher :
un h2 comme le dit marie aude a des marges et padding par defaut..suffit de le annuler comme ceci

Code: Tout sélectionner

margin:0;
padding:0;

EDIT: grillé par flo, mais il est plus pedagogue donc c'est meiux

[dayassine]

avec le margin et pading ca va tjs me laisser de l'espace entre les 2.

sauf si je met les div dans un grand espace limité en hauteur pour que le H2 entre en entier dedans
mais ca va faire trop moche et trop grand


ps: marie mnt on m'appelle avec mon nom de famille, il va etre bien réferencé la

[bproductiv]

avec le margin et pading ca va tjs me laisser de l'espace entre les 2.

Faux, test tu verra
EDIT (sur le h2 pas sur les div)

[dayassine]

Merci pour vos reponses

Florent V. non je suis pas nouveau mais jamais eu l'idée de faire pareil et tomber dans ce petit piege

j'ai opté pour le {margin: 0;} et ca marche

fallait y penser a mettre cela.

Merci pour votre aide

ps: bproductiv on s'etait mal compris, j'ai testé sur les div avant c'est pour ca merci