Probleme div H2
10 messages • Page 1 sur 1
Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics
Probleme div H2
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
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
Une div pour le h2 et une autre pour la phrase qui suit, déjà, ça m'a l'air un poil superflu...
Ce n'est pas plus simple ?
Si non, t'as la page à montrer ?
- 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 ?
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.
si j'enleve le H2 les 2 div se recollent
merci d'avoir pris le temps pour me répondre.
-

Marie-Aude - WRInaute accro

- Messages: 4946
- Inscription: Lun Juin 05, 2006 14:15
fildis a écrit: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.
- WRInaute occasionnel

- Messages: 183
- Inscription: Mer Mai 16, 2007 13:17
fildis a écrit: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 - WRInaute accro

- Messages: 2843
- Inscription: Lun Déc 27, 2004 16:29
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
EDIT: grillé par flo, mais il est plus pedagogue donc c'est meiux
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
Dernière édition par bproductiv le Ven Aoû 31, 2007 10:47, édité 1 fois.
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

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 - WRInaute accro

- Messages: 2843
- Inscription: Lun Déc 27, 2004 16:29
dayassine a écrit: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)
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
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
10 messages • Page 1 sur 1
Formation recommandée sur ce thème :
Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.
Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.
Lectures recommandées sur ce thème :
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités



le forum