Modification navbar

Pro_info · Message par **Pro_info** » mer. 30 nov. 2011 14:22

Bonjour à tous je dispose d'une navbar que j'ai créé (plus ou moins bien ><)

je voudrais donc savoir comment l'à centrer à partir des css et comment la rendre resizable automatiquement de sorte que lorsqu'un utilisateur se connectent ou non la largeur de la barre s'adapte à son contenus.

petit montage pour mieux expliquer se que j'aimerai faire

je donne le code de la barre

overall_header

Code : Tout sélectionner

		 <div id="menu">
<a title="Forums par Pro_info" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout"><span class="ui-icon ui-icon-triangle-1-s"></span>Forums</a>
<a title="Aide et recherche" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout2"><span class="ui-icon ui-icon-triangle-1-s"></span>Aide</a>
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><a title="Les membres de la Team" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout3"><span class="ui-icon ui-icon-triangle-1-s"></span>Membres</a><!-- ENDIF -->
<a title="Serveurs THP Trackmania" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout4"><span class="ui-icon ui-icon-triangle-1-s"></span>Serveurs</a>
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN --><a title="Gérez votre compte" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout5"><span class="ui-icon ui-icon-triangle-1-s"></span>Mon compte</a><!-- ENDIF -->
<!-- IF S_USER_UNREAD_PRIVMSG --><a title="Vous avez un/des message(s) non lu" href="{U_PRIVATEMSGS}" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" >{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF -->
<a title="Liens annexes" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" id="flyout6"><span class="ui-icon ui-icon-triangle-1-s"></span>Liens utiles</a>
<!-- IF not S_USER_LOGGED_IN --><a title="{L_REGISTER}" href="{U_REGISTER}" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" >{L_REGISTER}</a><!-- ENDIF -->
<a title="{L_LOGIN_LOGOUT}" href="{U_LOGIN_LOGOUT}" class="fg-button fg-button-icon-right ui-widget ui-state-default ui-corner-all" >{L_LOGIN_LOGOUT}</a>
</div>

j'ai mis l'essentiel je crois

common.css

Code : Tout sélectionner

    /*Navigation
    --------------------- */
/* menu::base */

div#menu {
    height:31px;
	width:auto;
    background:url("{T_THEME_PATH}/navigation/main-bg.png") repeat-x;
}

div#menu a {

    z-index: 1000;
    height: 29px;
    float: left;
    left: 70px;
	top: 1px;
    font: normal 13px Trebuchet MS;
}

/* menu::level1 */
div#menu a {
    padding: 0 10px 0 10px;
    line-height: 29px;
    color: #e5e5e5;
}

    /*fin navigation
    --------------------- */

voilà merci à vous

Pro_info · Message par **Pro_info** » jeu. 1 déc. 2011 19:54

personne n'a de solution en stock ?

Message par **zach** » jeu. 1 déc. 2011 20:34

salut

comme d'hab bourré de javascript aussi ... tu a deja essayé de désactiver javascript pour voir ce que ca donne au niveau de tes liens ?

je vois pas l’intérêt visuel, sinon, pour moi ça serait pire (avis qui n'engage que moi)

Message par **Steph** » jeu. 1 déc. 2011 20:41

Salut,

Avec un width:auto; tu ne pourra pas le faire simplement car pour centrer il faut au moins donner une valeur en pixel ou en %

Pro_info · Message par **Pro_info** » sam. 3 déc. 2011 10:35

je suis d'accord avec toi zach c pour sa que j'avais déjà dans l'idée de la faire en css

Pro_info · Message par **Pro_info** » sam. 14 janv. 2012 21:28

Bonsoir à tous ;)
Je relance le sujet car j'ai enfin une barre de navigation potable à mon goût sans superflu et surtout sans javascript (:enfin-il-à-laisser-tombé:)
donc me revoilà l'apparence est la même que pour la première navbar j'aimerais donc savoir comment la centré merci.

common.css

Code : Tout sélectionner

div#menu {
    height:29.1px;
	width:auto;
    background:url("{T_THEME_PATH}/menu/main-bg.png") repeat-x;
}

overall_header.html

Code : Tout sélectionner

<body>
<div class="forabg">
			<div class="top">
            <div class="tl">&nbsp;</div>
            <div class="tr">&nbsp;</div>
            <div class="tm">&nbsp;</div>
         </div>
         <div class="ml">
         <div class="mr">
         <div class="mm">
<div id="menu">
<ul class="dropdown dropdown-horizontal">
	<li><a title="Accueil THP" href="./accueil.php">Accueil</a></li>
	<li><a title="Forum THP" href="./forum.php">Forum</a></li>
	<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
	<li><a title="Accès rapide" style="cursor:pointer;" class="dir">Accès rapide</a>
		<ul>
			<li><a title="Postulations" href="./viewforum.php?f=3">Recrutements</a></li>
			<li><a title="Sections" href="./viewforum.php?f=33">Sections</a></li>
			<li><a title="Compètes" href="./viewforum.php?f=27">Compètes</a></li>
		</ul>
	</li>
	<!-- ENDIF -->
	...
	...
	...
</div>
</div>
		</div>
		</div>
		<div class="bottom">
            <div class="bl">&nbsp;</div>
            <div class="br">&nbsp;</div>
            <div class="bm">&nbsp;</div>
         </div>
</div>
</body>

si vous avez besoin des 3 autres fichiers css qui servent au fonctionnement de la barre faite le moi savoir (je ne sais pas si juste le code de la div 'menu' vous suffit pour centré le tout et avoir une largeur variable.

Merci à vous

Sille · Message par **Sille** » sam. 14 janv. 2012 22:13

Bonsoir,

perso tous les liens à gauche je trouve cela très bien. En général le regard sur un écran démarre dans cette zone ...

Pro_info · Message par **Pro_info** » sam. 14 janv. 2012 22:21

oui peut être mais j'ai la barre sur toute la largeur de la page or j'aimerais la redimentionner en fonction du nombres de boutons. et par la même occasion la centrer (pour tester au dépard et si des membres ne trouve pas cela très pratique je la remettrais à gauche

Sille · Message par **Sille** » sam. 14 janv. 2012 22:32

Le fait quelle soit justement sur toute la largeur ne me gène pas. Elle souligne et crée une limite horizontale justement. Un effet de style pour moi

Pro_info · Message par **Pro_info** » dim. 15 janv. 2012 09:58

m'ouai pourquoi pas

Forum PhpBB-Assistance

Modification navbar

Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Re: Modification navbar

Connexion • S’enregistrer