Margin-left qui s'ajuste au contenu

Bonjour,

Il s'agit d'une question sur un site qui peut être consulté en étant connecté ou non. Lorsque qu'un utilisateur se connecte, il y a des <li> qui s'ajoutent <li> existants par défaut au menu <ul>.
Dans mon header d'un site, j'ai donc le menu, le titre de mon site et la signature.

/* menu */
ul#menu {padding:2%; width:96%; height: 2.28em; margin: 0 auto;}
/* title of platform in the menu */
.titleHyp {left: 49.5%; margin: 0 auto; clear: both; position: absolute;}
.textHyp {clear: both; position: absolute; margin-top: -2%;}

Mon problème est le suivant : comment faire pour que les classes .titleHyp et .textHyp se déplacent sur la droite lorsque j'ai des <li> supplémentaires une fois connectée ? Actuellement, ces classes se superposent au menu.

D'avance, je vous remercie de vos réponses.

McCallum

Hello!

Le problème c'est que tu positionne de manière absolue tes éléments. Et en général c'est pas une bonne pratique. Si tu ne les sors pas du flux, tes éléments se déplaceront tout seuls.

Ta description laisse croire que tu souhaites positionner ton menu en ligne. De cette manière tu obtiendra ce résultat :

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
}

En espérant t'avoir aidé, good luck!

Bonjour,

Merci Anymah de ta réponse.

Pourquoi position:absolute est déconseillé ?

En fait, j'ai déjà ce que tu proposes. Il est vrai que j'aurai dû plus détaillé :

ul#menu > li
display:inline-block

.
Même si je mets à 0 le margin du menu, cela ne change rien.

J'ai essayé autre chose, mais ça ne fonctionne toujours pas :

#Hyp {
    position: absolute;
    float: left;
    margin-left: 60%;
    padding-left: 3%;
    width: 100%;
    top: -1%;
  }

/* titre de la plateforme */
h1#titleHyp {
    margin: 0 auto;
}

/* texte de la signature */
#textHyp { 
    margin-top: -.5%;
    margin-left: 2.5%;
}

<nav id="navigation"> <!-- dans lequel est <ul> et #Hyp -->
  <ul>
     <li>ici mon menu</li>
  </ul>
  <div id="Hyp">
	   <h1 id="titleHyp"> Hypatie </h1> <p id="textHyp">for studying relationships between entities and for showing their agencies</p>
   </div>
</nav>

Voir impression écran en mode connecté avec ajout du menu « Super admin » :
En mode déconnecté, je n'ai plus « Super admin » : mon titre et signature restent malheureusement à la même place
D'avance, merci de vos suggestions.

McCallum

Hello!

McCallum a écrit :
Pourquoi position:absolute est déconseillé ?

D'une manière général faudrait éviter de sortir les éléments du flux. Quand on positionne de manière absolue c'est ce qui se passe. Potentiellement, deux éléments peuvent donc se superposer (ton cas) ou déborder sur un autre contenu. Je t'invite à lire l'article écrit par Rapheal sur le positionnement en CSS. La solution à ton problème s'y trouve.

Have fun!

Bonjour,

Merci pour le lien Anymah !

Je n'ai pas encore réussi à résoudre mon problème de header. Je pense qu'il faudrait que je revois toute la structure de la page.
En revanche, j'ai modifié plusieurs pages de formulaires et l'effet est effectivement très appréciable.
Une nouvelle fois merci pour m'avoir alerté sur la position:absolute !

Une question en relation avec le problème de position : est-ce que le px/em en position absolute change d'un navigateur/système d'exploitation à l'autre (Windows/Mac) ? Parce que j'avais noté quelques différences qui peuvent modifier complètement la structure d'un formulaire/page.
Je ne parle pas ici de media queries.

D'avance, merci.

McCallum