Bonjour et Bienvenue sur les forums de services et support de Phpbb-Assistance.com .

M’enregistrer Connexion




Modification navbar

Modification navbar Toutes les demandes de support touchant au style de votre forum.
  • Publicité

Avatar de l’utilisateur
Statut: Hors ligne
Messages: 255
Inscription: Mar 26 Avr 2011 15:58
MessageMessage posté: Mer 30 Nov 2011 15:22
Bonjour à tous je dispose d'une navbar que j'ai créé (plus ou moins bien ><)
Modification navbar

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
Modification navbar

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
Avatar de l’utilisateur
Statut: Hors ligne
Messages: 255
Inscription: Mar 26 Avr 2011 15:58
MessageMessage posté: Jeu 1 Déc 2011 20:54
personne n'a de solution en stock ?
Avatar de l’utilisateur

Support Phpbb Assistance
Statut: Hors ligne
Messages: 1078
Inscription: Lun 27 Déc 2010 03:52
MessageMessage posté: Jeu 1 Déc 2011 21: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)
Avatar de l’utilisateur

Administrateur Phpbb Assistance
Statut: Hors ligne
Messages: 4992
Age: 34 ans
Inscription: Lun 19 Avr 2010 19:25
Localisation: Alsace (67)
Hébergeur(s):
1and1
MessageMessage posté: Jeu 1 Déc 2011 21: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 %
Avatar de l’utilisateur
Statut: Hors ligne
Messages: 255
Inscription: Mar 26 Avr 2011 15:58
MessageMessage posté: Sam 3 Déc 2011 11: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
Avatar de l’utilisateur
Statut: Hors ligne
Messages: 255
Inscription: Mar 26 Avr 2011 15:58
MessageMessage posté: Sam 14 Jan 2012 22: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
Avatar de l’utilisateur

Membre Tranquility
Statut: Hors ligne
Messages: 2233
Age: 46 ans
Inscription: Ven 6 Mai 2011 15:26
Localisation: Au dessus de la Seine et de la Marne.
Hébergeur(s):
OVH - KIMSUFI
MessageMessage posté: Sam 14 Jan 2012 23: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:
Avatar de l’utilisateur
Statut: Hors ligne
Messages: 255
Inscription: Mar 26 Avr 2011 15:58
MessageMessage posté: Sam 14 Jan 2012 23: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:
Avatar de l’utilisateur

Membre Tranquility
Statut: Hors ligne
Messages: 2233
Age: 46 ans
Inscription: Ven 6 Mai 2011 15:26
Localisation: Au dessus de la Seine et de la Marne.
Hébergeur(s):
OVH - KIMSUFI
MessageMessage posté: Sam 14 Jan 2012 23: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:
Avatar de l’utilisateur
Statut: Hors ligne
Messages: 255
Inscription: Mar 26 Avr 2011 15:58
MessageMessage posté: Dim 15 Jan 2012 10:58
m'ouai pourquoi pas hmmmm
Suivante

Retourner vers Support Styles phpbb3

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

cron