Navbar + logo

27 mars 2020 à 14:56:15

Bonsoir a tous!! j'aimerais obtenir une barre de navigation centrée autour de mon logo comme vous pouvez le voir sur la deuxième capture. le problème qui se pose est que ma barre de navigation est un peu plus en haut, et aussi il y'a ce carré autour de mon logo qui ne m'inspire pas du tout. merci d'avance pour votre aide.

<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/stylep.css">
		<script src="jquery-3.4.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar">
	 	<div class="container">
			
					  <nav class="navbar navbar-default">
							<div class="container-fluid">
								<div class="navbar-header">
									<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
									<button>
										<a href="#" class="logo"><img src="images/logo.jpg" class="img img-responsive img-circle " style="width:80px; height:80px;"/></a>
						 			
								</div>
								<div class="collapse navbar-collapse"> 
									<ul class="nav navbar-nav">
										<li class="active"> <a href="#"><span class="glyphicon glyphicon-home"></span>  ACCEUIL</a> </li>
										<li> <a href="#"><span class="glyphicon glyphicon-comment"></span>  NOS SERVICES</a> </li>
										<li> <a href="#"><span class="glyphicon glyphicon-book"></span>  BLOC</a> </li>
										<li> <a href="#"><span class="glyphicon glyphicon-calendar"></span>  ACTU/INNOVATIONS</a> </li>
										<li> <a href="#"><span class="glyphicon glyphicon-shopping-cart"></span>  REALISATION</a> </li>
									</ul>
								</div>
							</div>
			
	</div>

		

</body>
</html>

<!--  je ne veux pas encore gérer les couleurs juste le positionnement pour les couleurs je verrais cela après   -->

résultat obtenu:

résultat attendu:

-
Edité par FlingDjibril 27 mars 2020 à 21:30:02

Lamecarlate

27 mars 2020 à 21:02:31 - Message modéré pour le motif suivant : La demande de l'équipe de modération a été honorée

Pas d'aide concernant le code par MP, le forum est là pour ça :)

FlingDjibril

27 mars 2020 à 21:19:32

Je m'excuse vraiment pour mon impolitesse!!

bonsoir j’espère que vous allez bien...

Lartak

28 mars 2020 à 13:13:16

Bonjour.

Et donc, qu'attends-tu de nous ?

Tu utilises vraisemblablement Bootstrap, tu ne nous montres aucun CSS personnel, tu es bien conscient que nous n'allons pas te donner du code tout prêt.

Donc montres nous le code CSS que tu as tenté de faire.

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

FlingDjibril

29 mars 2020 à 17:47:33

body { 
    background-color:blue;
	font-size:12px;
	line-height:16px;
    padding-top: 15px;
}
a{
	color:#028;
}

.container{
	padding-top:15px;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
   border:1px solid #ccc;
  }

a:active, a:focus {
	outline:none; 
}

.pull-left{
	float:left;
	position:absolute;
	top:15px;
	margin-left:15px;
}
.navbar{
	height:100px;
	background:#050579;
}
.navbar-default, .navbar-nav{
	color:green;
}
 .navbar-nav{
	margin:auto;
	float:left;
}
img{
	width:80px;
	height:80px;
	padding-top:15px;
}

voici mon code css

Navbar + logo

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Navbar + logo

Navbar + logo

Supprimer

Modérer

Signaler le message aux modérateurs