Probleme div H2

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par dayassine, 31 Août 2007.

  1. dayassine
    dayassine WRInaute impliqué
    Inscrit:
    3 Juin 2007
    Messages:
    532
    J'aime reçus:
    0
    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
     
  2. Koxin-L
    Koxin-L WRInaute passionné
    Inscrit:
    29 Mars 2007
    Messages:
    1 540
    J'aime reçus:
    1
    Une div pour le h2 et une autre pour la phrase qui suit, déjà, ça m'a l'air un poil superflu...
    Code:
    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 ?
     
  3. dayassine
    dayassine WRInaute impliqué
    Inscrit:
    3 Juin 2007
    Messages:
    532
    J'aime reçus:
    0
    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.
     
  4. fildis
    fildis Nouveau WRInaute
    Inscrit:
    25 Janvier 2007
    Messages:
    1
    J'aime reçus:
    0
    Tu dois ajouter 'display:inline;' dans le style du balise H2
     
  5. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 368
    J'aime reçus:
    2
    ????

    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
     
  6. Florent V.
    Florent V. WRInaute discret
    Inscrit:
    16 Mai 2007
    Messages:
    157
    J'aime reçus:
    0
    N'importe quoi... :roll:

    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:
    <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:
    <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:
    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:
    div {padding: 1px 0;}
    h2 {margin: 1em 0;} /* Il s'agit grosso-modo des marges par défaut */
    Et voilà. :)
     
  7. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 705
    J'aime reçus:
    0
    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:
    margin:0;
    padding:0;
    EDIT: grillé par flo, mais il est plus pedagogue donc c'est meiux :D
     
  8. dayassine
    dayassine WRInaute impliqué
    Inscrit:
    3 Juin 2007
    Messages:
    532
    J'aime reçus:
    0
    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 :roll: :lol:
     
  9. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 705
    J'aime reçus:
    0
    Faux, test tu verra
    EDIT (sur le h2 pas sur les div)
     
  10. dayassine
    dayassine WRInaute impliqué
    Inscrit:
    3 Juin 2007
    Messages:
    532
    J'aime reçus:
    0
    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
     
Chargement...
Similar Threads - Probleme div Forum Date
Problème de div et de css Développement d'un site Web ou d'une appli mobile 8 Juin 2017
problème de boucle et de redirection de diverses anciennes pages URL Rewriting et .htaccess 4 Juin 2014
Problème de positionnement d'une div Développement d'un site Web ou d'une appli mobile 15 Décembre 2012
besoin d'aide sur probleme de div déployables ... Développement d'un site Web ou d'une appli mobile 9 Septembre 2012
[HTML/CSS] Problème DIV Développement d'un site Web ou d'une appli mobile 21 Juillet 2011
Problème d'insertion d'une balise DIV Développement d'un site Web ou d'une appli mobile 8 Juin 2011
Problème CSS à résoudre, superposition div/table Développement d'un site Web ou d'une appli mobile 4 Mars 2011
Probléme chevauchement texte et div en css Développement d'un site Web ou d'une appli mobile 1 Juin 2010
probleme de div avec google chrome Développement d'un site Web ou d'une appli mobile 14 Novembre 2009
Divers problèmes affichage sous IE Développement d'un site Web ou d'une appli mobile 16 Octobre 2009
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice