28172 sujets

CSS et mise en forme, CSS3

Position des élément de menu

Bonjour,
J'aimerais que les éléments de mon menu sous wordpress se positionnent (ou se répartissent) de manière proportionnelle par rapport à la longueur fixée de ce menu et la longueur des mots de chaque bouton...

Par exemple, sur 7 boutons, le 1er est calé sur la gauche et le dernier se colle tout à droite, les boutons intermédiaire se partagent donc la longueur restante disponible...

Ceci afin que lorsque le nom d'un ou plusieurs boutons sont changés, cela soit géré automatiquement par le css..

Est-ce bien clair ?

Voici les éléments de css de mon menu et sous-menu :


#access {
	/*position:absolute;
	display: block;
	float: left;
	margin-top: 0;
	margin-left: auto; 
  	margin-right: auto; */
	width: 1124px;
	margin:0 0 0 20px;
}
#access .menu-header,
div.menu {
	font-size: 1.1em;
	font-weight:lighter;
	width: 100%;
	margin:0;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin:0 0 0 0;

}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
	margin:0 62px 0 0;
	padding:0;
}
#access a {

	color: #978566;
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
}
#access ul ul {
	/*box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);*/
	display: none;
	position: absolute;
	bottom:38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 160px;

	
}
#access ul ul ul {
	left: 100%;
	bottom: 0;
}
#access ul ul a {

	background: #978566;
	line-height: 1em;
	margin:0 0 0 0;
	padding: 10px;
	width: auto;
	height: auto;
	color: #000;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #978566;
	color: #63523a;
}
#access ul li:hover > ul {
	display: block;
	
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #63523a;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}



Le souci c'est que là, dès que je je change un bouton avec un mot plus long, le dernier bouton passe sur une 2e ligne...
Peut-importe si il y a un risque que les boutons se chevauchent, j'ai largement de place sur 990px de longueur pour cela ne soit pas le cas..

Merci d'avance pour l'aide !

foeb
Administrateur
foeb a écrit :

Par exemple, sur 7 boutons, le 1er est calé sur la gauche et le dernier se colle tout à droite, les boutons intermédiaire se partagent donc la longueur restante disponible...


Bonjour,

A ma connaissance, le moyen le plus simple, le plus adapté et le plus pertinent pour ce type d'affichage très particulier est : le tableau de mise en page en HTML (ou mieux en CSS avec display: table-cell).
En effet, c'est le comportement normal des cellules de tableau de se répartir automatiquement dans l'espace de leur parent.
dew a écrit :
upload/2-uuu.png
(mais ça n'apporte rien au sujet)

Exact ! mais ça ne m'aide en rien à la résolution de mon pb ;D

Merci, Raphael, je vais fouiller sur la piste css et table-cell. Smiley smile -
Salut,

foeb a écrit :
?? C'est à dire ??
Ç'est le genre de réponse qui n'apporte pas grand chose...

Sa réponse n'apporte effectivement rien présentement, mais ton sujet initial n'apporte pas grand chose en terme d'informations pour répondre à ton problème.

Donc si tu commence par fournir le code html correspondant au CSS, il sera possible pour Mabelle (et d'autres) de t'apporter des réponses qui t'apportent plus. Smiley cligne

La résolution d'un sujet posté est souvent liée à la quantité ET à la qualité des informations données pour présenter le problème.
Euh...ouais d'accord, merci de faire mon procès...;/
Moi je veux bien donner plus d'infos, il me semblait déjà en donner par mal en citant wordpress et le css de mon menu : donc gestion dynamique des css..Balancer que du html serait plus simple, je me doute mais bon, voilà, je tourne sur du cms, et j'ai pas vraiment le choix, ça donne une impression genre : tiens je veux bien t'aider, mais en même temps démerde toi....bref, je vais pas épiloguer, c'est sans intérêt.

Ce que je peux donner d'autre, c'est quoi ? ça ? :

<div id="access" role="navigation">
 <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
<div class="skip-link screen-reader-text">
<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentyten' ); ?>">
<?php _e( 'Skip to content', 'twentyten' ); ?></a></div>
<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'fr-menu' ) ); ?>
</div><!-- #access -->


C'est le menu de base du thème 20 10 wordpress pour ceux qui connaissent, que je veux adapter à mon besoin, et qui correspond à la css de mon premier post. Je peux fournir une url en privé sur demande, je n'aime pas trop balancer des urls de projet en cours en public, désolé. N'hésitez pas à me demander en MP !! Sinon je donne une illustration de ce que j'aimerais faire en image jointe :

upload/808-Menulongueur.jpg

J'ai bien tenter une solution display:table-cell, mais sans succès...

Merci tout de même à ceux (ou celles) qui prendront tout de même la peine de m'aider !!!
Administrateur
foeb a écrit :
Balancer que du html serait plus simple, je me doute mais bon, voilà, je tourne sur du cms

Hello,

En fait, tout CMS que ce soit génère du HTML au final. Il suffirait donc, pour être sûr qu'on puisse t'aider :
1- Donner l'URL de ta page en ligne
2- Donner le code source HTML généré par le CMS.
Raphael a écrit :

Hello,

En fait, tout CMS que ce soit génère du HTML au final. Il suffirait donc, pour être sûr qu'on puisse t'aider :
1- Donner l'URL de ta page en ligne
2- Donner le code source HTML généré par le CMS.


Salut,

Voici donc les infos que j'ai pu récupérer :

1- Un site de test mais le menu est le même que celui de mon site en développement :
http://www.cinq-sens.com/wp/

2- Et le code source html généré via Web Developeur :
http://www.cinq-sens.com/wp/code_html_plugin_tests.txt
Sujet clos
Aller à