Suite du fil http://forum.alsacreations.com/topic-1-73922-1-Jarrive-pas-a-centrer-mon-menu-et-autre-.html
Désolé, je ne parlais pas centrer verticalement mais horizontalement.
Ne parvenant pas à mettre sur ce forum une image lisible (elle est trop petite pour qu'on voie les détails) je joins un code simple:
Pour des raisons que je comprends très bien, la div "menu" est bien centrée dans la page, et les "menuitem" sont à gauche de cette div.
Ce que je voudrais faire: la même chose que (code simplifié)
De plus, si la largeur de l'écran est trop petite pour contenir les 6 entrées (écran de smart phone par exemple) je voudrais que les entrées se répartissent sur 2 lignes, chacune étant centrée.
Actuellement, pour réaliser cette présentation, je fais un programme javascript qui:
1) calcule la largeur en px de chaque entrée
2) en déduit combien d'entrées sont à mettre en ligne 1 et combien en ligne 2 si nécessaire
3) génère une ou deux tables centrées similaires à celle décrite ci-dessus.
voir http://www.bonieux.com faire varier la largeur de la fenêtre et rafraichir pour voir le résultat.
Je ne l'ai pas asservi à un "on resize", l'idée étant surtout de s'adapter à des largeurs d'écran différentes, plutôt que s'adapter à des.changements dynamiques de largeur de fenêtre du navigateur
Ça marche très bien, mais si ça pouvait se faire en CSS, ça m'éviterait le javascript, surtout que j'ai pas mal d'autres cas où j'utilise une technique similaire faute d'avoir trouvé mieux.
audrasjb a écrit :
Il est vrai que ma solution rapide à la question soulevée par GaranceT ne répond pas parfaitement à la question : en effet, ça ne marche plus parfaitement si le texte du lien passe sur deux lignes. Mais les solutions élégantes (plus qu'un traitement JS en tout cas) existent, et ne sont pas très compliquées à mettre en place
Désolé, je ne parlais pas centrer verticalement mais horizontalement.
Ne parvenant pas à mettre sur ce forum une image lisible (elle est trop petite pour qu'on voie les détails) je joins un code simple:
<div class="menu">
<div class="menuitem">Galeries</div>
<div class="menuitem">Paravents</div>
<div class="menuitem">L'Artiste</div>
<div class="menuitem">Actualités</div>
<div class="menuitem">Revue de presse</div>
<div class="menuitem">Contact</div>
</div>
.menu {
width:80%;
display: table-cell;
vertical-align: middle;
text-align:center;
margin: auto;
border:1px solid red;
height:100px;
}
.menuitem {
float:left;
white-space: nowrap;
padding: 0 5px;
text-align:center;
border:1px solid blue;
}
Pour des raisons que je comprends très bien, la div "menu" est bien centrée dans la page, et les "menuitem" sont à gauche de cette div.
Ce que je voudrais faire: la même chose que (code simplifié)
<div id="main_menu">
<table align="center">
<tr class="menu-row">
<td id="galleries" class="menu">Galeries</td>
<td id="screens" class="menu" >Paravents</td>
<td id="artist" class="menu">L'Artiste</td>
<td id="news" class="menu">Actualités</td>
<td id="pressbook" class="menu" >Revue·de·presse</td>
<td id="contact" class="menu">Contact</td>
</tr>
</table>
</div>
De plus, si la largeur de l'écran est trop petite pour contenir les 6 entrées (écran de smart phone par exemple) je voudrais que les entrées se répartissent sur 2 lignes, chacune étant centrée.
Actuellement, pour réaliser cette présentation, je fais un programme javascript qui:
1) calcule la largeur en px de chaque entrée
2) en déduit combien d'entrées sont à mettre en ligne 1 et combien en ligne 2 si nécessaire
3) génère une ou deux tables centrées similaires à celle décrite ci-dessus.
voir http://www.bonieux.com faire varier la largeur de la fenêtre et rafraichir pour voir le résultat.
Je ne l'ai pas asservi à un "on resize", l'idée étant surtout de s'adapter à des largeurs d'écran différentes, plutôt que s'adapter à des.changements dynamiques de largeur de fenêtre du navigateur
Ça marche très bien, mais si ça pouvait se faire en CSS, ça m'éviterait le javascript, surtout que j'ai pas mal d'autres cas où j'utilise une technique similaire faute d'avoir trouvé mieux.
