Modification navbar

Image Toutes les demandes de support touchant au style de votre forum.
Règles du forum
[Nom exact du style] Description de votre problème
Verrouillé
     
Avatar du membre

Auteur du sujet
Pro_info
Messages : 357
Enregistré le : avril 2011

Modification navbar

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 ><)
Image

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
Image

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
Haut
Avatar du membre

Auteur du sujet
Pro_info
Messages : 357
Enregistré le : avril 2011

Re: Modification navbar

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

personne n'a de solution en stock ?
Haut
Avatar du membre

zach
Support phpBB Assistance
Support phpBB Assistance
Messages : 1313
Enregistré le : décembre 2010

Re: Modification navbar

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)
Haut
Avatar du membre

Steph
Administrateur phpBB Assistance
Administrateur phpBB Assistance
Messages : 11200
Enregistré le : avril 2010
Hébergeur(s) : monarobase
Localisation : Alsace (67)
Contact :
Contacter Steph

Re: Modification navbar

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 %
Haut
Avatar du membre

Auteur du sujet
Pro_info
Messages : 357
Enregistré le : avril 2011

Re: Modification navbar

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
Haut
Avatar du membre

Auteur du sujet
Pro_info
Messages : 357
Enregistré le : avril 2011

Re: Modification navbar

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
Haut
Avatar du membre

Sille
Membre Tranquility
Membre Tranquility
Messages : 4320
Enregistré le : mai 2011
Hébergeur(s) : mon@robase.net c'est clair et net !
Localisation : Au dessus de la Seine et de la Marne.
Contact :
Contacter Sille

Re: Modification navbar

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 ... :kikoo:
>> Solutions et Services PhpBB
>> Communauté Graphique

Soutenir >> Image

[6 ans de Pack] Image ici

Déjà 5 ans chez mon@robase.net Image Image
Haut
Avatar du membre

Auteur du sujet
Pro_info
Messages : 357
Enregistré le : avril 2011

Re: Modification navbar

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 :swom:
Haut
Avatar du membre

Sille
Membre Tranquility
Membre Tranquility
Messages : 4320
Enregistré le : mai 2011
Hébergeur(s) : mon@robase.net c'est clair et net !
Localisation : Au dessus de la Seine et de la Marne.
Contact :
Contacter Sille

Re: Modification navbar

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 :clin:
>> Solutions et Services PhpBB
>> Communauté Graphique

Soutenir >> Image

[6 ans de Pack] Image ici

Déjà 5 ans chez mon@robase.net Image Image
Haut
Avatar du membre

Auteur du sujet
Pro_info
Messages : 357
Enregistré le : avril 2011

Re: Modification navbar

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

m'ouai pourquoi pas hmmmm
Haut
Verrouillé

Retourner vers « Support Styles phpBB3 »