28172 sujets

CSS et mise en forme, CSS3

[Résolu] Display:inline-block et positon:relative

Salut,

Dans l'exemple ci-dessous la combinaison display:inline-block et positon:relative sur .super-wrapper-menu empêche le paragraphe de pousser le contenu, c'est l'item 2 de la liste qui le pousse.
En enlevant une des 2 propriétés, c'est bien le paragraphe qui pousse le contenu

Je ne comprends pas ce comportement, si quelqu'un peut m'expliquer, je suis preneur Smiley cligne

Voici le code et le lien jsfiddle pour le tester :
Merci


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <style>
        .super-wrapper-menu{
            display: inline-block;
            position: relative;
            min-width: 160px;
            background: #eee;
        }
        .wrapper-menu{
            position: absolute;
            top:0;
            left: 0;
            background: lightblue;
        }
    </style>
</head>
<body>
<div class="super-wrapper-menu" >
    <div class="wrapper-menu">
        <p class="menu-title">texte tres looooooooonnn nnnnnnnnng</p>
        <ul class="menu">
            <li>item 1</li>
            <li>item 222222222222222</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </div>
</div>
</body>
</html>
C'est le mot le plus long qui pousse l'élément car il n'est pas coupé.
Dans ton exemple "item 222222222222222" vient percuter le bloc div en premier donc il le pousse alors que "texte tres looooooooonnn nnnnnnnnng" ne le percute pas car il est composer de plusieurs mots donc il fait un retour à la ligne (il n'a pas besoin d'élargir le div car les mots peuvent tenir dans les 160px de ton min-width: 160px;)
Si par contre tu fais "texte tres looooooooooooooooooooooooooooooooooooonnn nnnnnnnnng" là c'est lui qui va percuter le div en premier et le pousser.

J'espère que ça répond à ta question.
Modifié par semantic (20 Sep 2013 - 15:52)
Ok, merci.
Mais je ne comprends toujours pas le confilt display:inline-block et positon:relative sur la largeur du paragraphe enfant.

Du coup j'ai forcé un white-space : nowrap sur le paragraphe et ca fonctionne
seufer a écrit :
Ok, merci.
Mais je ne comprends toujours pas le confilt display: inline-block et positon: relative sur la largeur du paragraphe enfant.

Du coup j'ai forcé un white-space: nowrap sur le paragraphe et ca fonctionne
Wow, Seufer : "Hey ho let's go", je craque pour ce clin d'oeil, qui me rappelle un concert desdits frangins à Toulouse en 1995 je crois.

Sinon, histoire de me faire pardonner ce quasi-spam, voici un lien sur Alsacreations qui traite de ta question.
Sujet clos
Aller à