Bonjour, comme le titre le dit je voudrais mettre un menu fix a gauche, mais quand je fait ca mon contenue par en bas et ne ce positionne pas a côté.. Comment faire svp.

Voici un screen du blem : http://prntscr.com/5dvvjg

Voici un bout du code du menu :


<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.php"><?php echo $Title ;?></a>
    </div>
    <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
       <li class="active"><a class="mdi-action-receipt" href="index.php?pages=News"> News</a></li>
        <li class="active"><a class="mdi-navigation-refresh" href="index.php?pages=Update"> Update's</a></li>
       <li class="active"><a class="mdi-image-photo" href="index.php?pages=Gallery"> Gallery</a></li>
      <li class="active "><a class="mdi-content-mail" href="index.php?pages=Contact"> Contact us</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
<?php
if(isset($_SESSION['id']) && $_SESSION['id'] != '')
{?>
 <li class="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle mdi-action-account-circle" data-toggle="dropdown"><b> Welcome <?php echo $_SESSION['UserNm'] ;?> <?php echo $_SESSION['UserPrNm'] ;?></b></a>
        <ul class="dropdown-menu">
          <li class="dropdown-header mdi-action-account-circle"> Welcome  <?php echo $_SESSION['UserNm'] ;?> <?php echo $_SESSION['UserPrNm'] ;?> :</li>
           <li class="divider"></li>
          <li><a class="mdi-action-account-circle" href="index.php?pages=Account"> My account</a></li>
          <li><a class="mdi-communication-chat" href="index.php?pages=Messages"> Messages <span class="badge">42</span></a></li>
          <li><a class="mdi-social-notifications"href="index.php?pages=Notification"> Notifications <span class="badge">42</span></a></li>
          <li><a class="mdi-action-book" href="index.php?pages=Projects"> My Projects <span class="badge">42</span></a></li>
          <li class="divider"></li>
          <li class="dropdown-header mdi-action-settings-applications"> Settings :</li>
          <li><a class="mdi-action-settings" href="index.php?pages=Settings"> Account Settings</a></li>
          <li class="divider"></li>
          <li class="dropdown-header mdi-action-stars"> Extra :</li>
          <li><a class="mdi-content-clear" href="index.php?pages=Logout"> Logout</a></li>
        </ul>
      </li>
<?php } else { ?>
  <li class="active"><a class="mdi-communication-vpn-key" href="index.php?pages=Register"> Register</a></li>
  <li class="active"><a class="mdi-communication-vpn-key" href="index.php?pages=Login"> Login</a></li>
<?php } ?>
    </ul>
  </div>
</div>
<div class="btn-group-vertical topmenu">
    <a href="javascript:void(0)" class="btn btn-default">Button</a>
    <a href="javascript:void(0)" class="btn btn-default">Button</a>
    <a href="javascript:void(0)" class="btn btn-default">Button</a>
    <a href="javascript:void(0)" class="btn btn-default">Button</a>
</div>

Merci pour répondre.

8 réponses


Bonjour,

Dans l'image que tu as envoyé, ton cadre au centre ne peux pas être à la même hauteur que ta sidebar car il est trop grand. Soit tu en fais passer un au dessus de l'autre, soit tu dois racourcir la largeur de ton cadre central.

Salut si tu ne met pas ton css je ne pourrais pas t'aider, par conséquement tu peux utilisé float:left; ou float:right; recherche sur internet pour comprendre..
A SAVOIR : Tu peux modifier la police avec font-family:'Arial','Helvetica,'Calibri','sans-serif'; avec tout pleins de polices comme celles en gras.
Bonne soirée!

Bonsoir.
C'est bien joli d'utiliser le bootstrap de Twitter, mais ne crois pas que tu pourras modifier un layout du framework, juste en placant des composants en dehors de leurs contexte original, il te faut ajouter du code css personnel en supplément par exemple, afin d'en modifier l'affichage.
Car ce que tu utilises pour faire ton menu supplémentaire, c'est un composant du framework.
Par contre, si tu as ajouté du code css, montre nous le, car nous ne pourront pas t'aider sans un minimum de code concernant ton css personnalisé.

Lartak11, ce n'est pas le bootstrap de Twitter.. C'est Bootstrap Material =>> Android Lolipop =>> http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

Je vais tenter de mettre le contenue plus petite du cadre centrale

Ca n'as pas marcher :/

Bonsoir,

Franchement, c'est du bootstrap :

Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.

Donc si tu veux modifier, il faut suivre les recommandations de Lartak11

Cordialement

"Material Design for Bootstrap" reste Bootstrap, donc le Grid Layout est LA solution.
Ou tu modifies la largeur de ton cadre géant, n'hésite pas à utiliser la propriété CSS "box-sizing: border-box;".

Merci de vos réponse, j'ai décider de integrer les menu dans la bar de navigation pour profiter du grand cadre et de mieux afficher le contenue :)