18041 sujets

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

[Résolu] Centrer menu et logo l'un au dessus de l'autre

Bonjour,

Je suis nouvelle en html et css et j'ai quelques soucis à faire le hearder de ma page internet.
Je m'explique:

J'ai réussi à centrer mon logo tout en haut de la page sans soucis mais par contre je n'arrive pas à centrer mon menu qui se trouve juste en dessous.
En fait j'aimerai que le centre de mon menu soit centré avec le centre de mon logo, est ce que cela est possible ?

Je vous met mon html et css pour que se soit plus clair, de même si vous voyez de grosses erreurs, n'hésitez pas à me le signaler, je suis la pour apprendre !

Merci beaucoup en tout cas !! 


<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>L'Aparté ? Créations d'intérieur</title>
    </head>

   <body>
		<header>
	    	<div id="bloc_page">
	    		
	    			<div id="titre_principal">
	    			 </div>
	    			
	    			<div id="logo">
	    				<img src="Logo_L_APARTE-PARIS-Cartes-test.png" width="120" height="120" alt="Logo L'Aparté"/>
	    			</div>
	    			<div class="barre_recherche_">
	    				<form role="search" method="get" id="Recherche" action="">
	    					<input type="text" onfocus="this.value" name="SearchText" class="searchtext" value="Rechercher..." size="18"/>
	    					<input type="submit" id="bouton" value="OK" name="bouton">
	    	
	    				</form>
	    			</div>

	  				<div class="panier">
	  					<a href="BShoppingCart.asp?PBMInit=1">Votre panier:</a>
	  					<div class="CartPrice">
	  						<strong> 0,00 €</strong>
	  					</div>
	  				</div>
			</div>
			<div>
				<nav class="menu"> 
					<ul>

						<li><a href="#">Accueil</a></li>
						<li><a href="#">Produits</a></li>
						<li><a href="#">Galerie</a></li>
						<li><a href="#">A propos</a></li>
						<li><a href="#">Contact</a></li>
						<li><a href="#">FR</a></li>
						<li><a href="#">EN</a></li>	
					</ul>
				</nav>
			</div>	
	</header>





#logo
{
	text-align: center;
}





.barre_recherche_
{
	position: absolute;
	right: 170px;
	top: 8px;
	

}


.panier

{ 
	position: absolute;
	right: 5px;
	top:8px;
	display:flex;
	text-decoration: none;
	color: #696969;

}


	/* Menu navigation */

#menu 

nav.menu 

{text-align: center;

}

nav.menu ul
{		
	list-style-type: none;
	padding: 0px;
	padding-top: 40px;
	margin:0px;
	left: 15%;
	position: relative;
	text-transform: uppercase;
	font-size: 0.8em;	
	
}


nav.menu ul li
{
		display: block;
		float: left;
		padding: 0px 10px;
		margin: 0px; 

		
		

	
}


nav.menu a 
{
	display: inline-block;
	font-size: 1.2em;
	color: #696969;
	margin: 0 20px;
	text-decoration: none;
	
	

}

nav.menu a:hover 
{
	background-color: ;
	color: black;

Modifié par Chacoulisse (03 Nov 2016 - 10:21)
Alors mon logo s'est recentré mais par contre le menu est sur la droite maintenant et je ne comprend pas pourquoi...



#logo
{
	width: 100px;
	margin: auto;
	text-align: center;
}



#menu 


nav.menu ul
{		
	width: 300px;
	padding: 10px;
	margin:auto;
}


nav.menu ul li
{
		display: inline;
		margin: 0 10px; 
}


nav.menu a 
{
	display: inline-block;
	font-size: 1em;
	color: #696969;
	margin: 0 20px;
	text-decoration: none;
	text-transform: uppercase;

}

nav.menu a:hover 
{
	background-color: ;
	color: black;
}
Bonjour.

Vous avez remis tout le CSS ?

J'ai repris votre code et je n'ai pas de menu sur la droite chez moi...

Au fait, il faut simplement toucher au CSS du menu, le logo est déjà centré sur la page... (et il n'a pas besoin de dimensions précises, une image a déjà des dimensions)

Smiley smile
Bon maintenant mon menu est aligné en colonne sur la droite avec les puces.
J'ai essayé de mettre list-type:none dans mon ul mais cela ne marche pas...


#menu 



nav.menu ul
{		
	width: 300px;
	padding: 10px;
	margin:auto;	
	list-style: none;
	
}


nav.menu ul li
{
		display: inline;
		margin: 0 10px; 

	
}


nav.menu a 
{
	display: inline-block;
	font-size: 1em;
	color: #696969;
	margin: 0 20px;
	text-decoration: none;
	text-transform: uppercase;
	

}

nav.menu a:hover 
{
	background-color: ;
	color: black;
}
Tu n'as pas utilisé le bon code pour ton sélecteur

remplace nav.menu par nav#menu ça fonctionnera mieux déjà Smiley lol

ensuite tu adaptes avec la taille
oui c'est pas faux, ça marche beaucoup mieux Smiley confused Smiley ohwell

comment ça avec la taille ?
tu veut dire la largeur du menu ?
et il n'y a pas une possibilité d'aligner directement le menu avec le centre du logo pour que cela s'adapte à chaque résolution d'écran automatiquement ?
Bjour,

C'est marrant, ça me rappelle mes 1ers site webs au bahut sur pspad.. ^^
Après, c'est pas mon métier, mais je suis curieuse, y a pas des utilitaires style Dreamweaver qui permettent de faire ça plus simplement ? Smiley rolleyes
Sujet clos
Aller à