Mettre un menu fix a gauche et prend compte du contenue au centre

Par raphael sente, il y a 11 ans

Les bases HTML/CSS

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

jo-jo-123, il y a 11 ans

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.

JeremDevWeb, il y a 11 ans

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!

Lartak, il y a 11 ans

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é.

raphael sente, il y a 11 ans

Ca n'as pas marcher :/

Bahamut45, il y a 11 ans

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

Alexandre Lorret, il y a 11 ans

"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;".

raphael sente, il y a 11 ans

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