18010 sujets

Questions générales et questions de débutants

[Résolu]Intégrer le logo dans le menu

Bonjour à tous
J'essaye de mettre le logo au milieu du menu (voir image jointe).
Comment puis je séparer mon menu en deux parties.
Malgrès de nombreuses recherches, je n'ai pas trouvé !
En espérant que vous allez pouvoir m'aider
Merci beaucoup.
Wesheida


Voici le code :
Html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<meta charset="UTF-8">
<title>@</title>
</head>

<body>
	<! Debut du conteneur-->
	
	<div id="conteneur">
	
<! Debut du Header-->
	<header>
	<! Debut du Logo-->
	<div id="logo">
	<img src="img/Logo.png">
	</div>
	<! Fin du Logo-->
	
<! Debut du menu-->
	<nav>
	<ul>
		<li><a href="Home">Home</a></li>
		<li><a href="Produits">Produits</a></li>
		<li><a href="Support">Support</a></li>
		<li><a href="Contact">Contact</a></li>
		
	</ul>
	</nav>
	
	<! Fin du menu-->

	</header>
	<! Fin du Header-->


CSS




body			{margin:O;  background: url(img/bg.jpg) no-repeat ; background-color: black;background-position: center top;}
#conteneur		{margin: auto; width:960px; position: relative;}

header			{width:100%; height:500px; b }

#logo			{text-align: center; padding-top: 30px;}

nav				{ float: right; left: -50%; position: relative; font-family: bebas neue;}
/*Menu*/
ul				{list-style-type: none; padding: 0px; margin: 0px;left: 50%;position: relative;}
li				{display: block;float: left;padding: 0px 10px;margin: 0px;}
nav a			{color: #5e5d5d; text-decoration:none; }
nav a:hover		{color:#951314;}


upload/55942-Menu.png
Modifié par Wesheida (08 Sep 2014 - 09:59)
Je serais toi j'aurais essayer en séparant ton ul en deux de maniere a faire un premier ul avant tu integre ton image tu fais un deuxieme ul ou alors a moins que tu veux l'intégrer derriere ta liste ? non ?
Bonjour Zelalsan
Je viens d'essayer avec ceci, mais le logo ne remonte pas au centre
Merci

		<nav>
	<ul>
		<li><a href="Home">Home</a></li>
		<li><a href="Produits">Produits</a></li>
		<li><a href="Support">Support</a></li>
		<li><a href="Contact">Contact</a></li>
		
		</ul>
		<a href=""><img src="images/Logo.png"></a>
         </nav>
Bonjour,
Maintenant le logo est bien centré par rapport au menu, mais impossible de le faire remonter.
Le logo est scindé au menu, comment le séparer de celui-ci?
Merci de votre aide !
Wesheida

upload/55942-Capt1.jpg 


<! Debut du menu-->
	<nav>
	<ul>
		<li><a href="Home">Home</a></li>
		<li><a href="Produits">Produits</a></li>
		<li><a href="Support">Support</a></li>
		<li><a href="Contact">Contact</a></li>
		
		</ul>
		<a href="#" id="logo"><img src="img/Logo.png" alt="retour à l'accueil" title="bpc" /></a>
   
	</nav>


@charset "UTF-8";
/* CSS Document */


#conteneur		{margin: auto; width:1160px; position: relative;}

body			{margin:O; padding: 0;background: url(img/bg.jpg) no-repeat ;background-color:#fff;background-position: center top;}

header			{width:100%; height:500px;}



nav {margin: auto; padding: 0; position: relative; text-align: center; display: table;margin-top: 60px; font-family: bebas neue;}
ul {margin: 0;padding: 0;}
li {display: inline-block;}
li+li {margin-left: 50px;}
li:first-child+li {margin-right: 300px;}


nav a			{color: #5e5d5d; text-decoration:none; }
nav a:hover		{color:#951314;}
Merci à tous je viens de réussir, il suffisait de rajouter une id logo pour le séparer du menu !

J'espère que ca aidera d'autres personnes comme moi qui débute.

Wesheida

Voici le code :

<! Debut du Header-->
	<header>
	
	
	<! Debut du Logo-->
	 <div id="logo">
           	<img src="img/Logo.png">
           </div>

	<! Fin du Logo-->
	

<! Debut du menu-->
	<nav>
	<ul>
		<li><a class="active" href="Home">Home</a></li>
		<li><a href="Produits">Produits</a></li>
		<li><a href="Support">Support</a></li>
		<li><a href="Contact">Contact</a></li>
		
		</ul>
		   
	</nav>
	<! Fin du menu-->



@charset "UTF-8";
/* CSS Document */


#conteneur		{margin: auto; width:1160px; position: relative;}

body			{margin:O; padding: 0;background: url(img/bg.jpg) no-repeat ;background-color:#fff;background-position: center top;}

header			{width:100%; height:500px;}

#logo{ text-align: center;display:block;margin:0 ;position:relative;top:0px; padding-right:28px;}


nav {margin: auto; padding: 0; position: relative; text-align: center; display: table;margin-top: -180px; font-family: bebas neue; font-size: 22px;}
ul {margin: 0;padding: 0;}
li {display: inline-block;}
li+li {margin-left: 30px;}
li:first-child+li {margin-right: 300px;}
li a.active {color:#951314;}


nav a			{color: #5e5d5d; text-decoration:none; }
nav a:hover		{color:#951314;}
Sujet clos
Aller à