Credits

Gaming images in backgrounds are trademarks of their respective holders.
Museo Sans font by Jos Buivenga (exljbris) : http://www.exljbris.nl

Forum PAO LaLogotheque.com: Centrer un menu horizontale - Forum PAO LaLogotheque.com

Aller au contenu

Hide message Show message

Bienvenue sur le Forum d'entraide à l'infographie de Lalogotheque.com !!!





Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

Centrer un menu horizontale J'ai tout essayer !

#1 L'utilisateur est hors-ligne   Trous-design 

  • Logoteur de Papier
  • Groupe : Newbies
  • Messages : 2
  • Inscrit(e) : 19-février 13

Posté 20 mars 2013 - 14:51

Bonjour à tous,

J'ai besoin de votre aide car sérieusement... je sèche !

Je suis en train d'apprendre petit à petit le positionnement CSS et je suis bloquer sur mon menu qui ne veux pas ce centré et qui reste collé à mon titre.
Mon menu ce retrouve dans le header mais je voudrais le centrer pour qu'il s'adapte automatiquement à la résolution d'écran de mes visiteurs.

Je vous lâche le code source, il est très basique et je pense qu'une personne un petit peux plus experimenté que moi y arriverai en 30 seconde. Je pense que mon souci viens du positionnement de bloc...


HTML
<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="centent-type">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>WEBSITE CREATION</title>
	<meta name="description" content="video, mur, facebook, youtube, ">
    <meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="main.css"/>
</head>
<body>
	<header>
	<nav>
	<a href="#">WebDesign</a>
	<ul> 
		<li><a href="#">Accueil</a></li>
		<li><a href="#">Créations</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	</header>
</body>
</html>


CSS
body{
margin:0;
padding:0;
font-family:calibri, verdana, "Open Sans";
font-size:14px;
line-height:20px;
color:rgb(255,255,255);
}

header{
display:block;
padding:10px 10px;
border-bottom:solid 2px #444429;
color:#fff;
background:-webkit-linear-gradient(top,#242424 0,#595857 100%);
}
header nav{
display:block; 
font-family:calibri, verdana, "Open Sans";
font-size:large;
font-weight:500;
line-height:20px;
color:#e1edfb;
text-shadow: 1px 1px 2px;
}
 
header a{
color:#fff;
text-decoration:none;
}

ul{
display:inline;
position:fixed;
margin:0;
padding:0;
list-style-type:none;
}

ul li {
margin-left:40px; /*espacement entre chaque lien*/
display:inline;
position:relative;
float:left;
width:auto;
}

ul li a{
margin-left:auto;
margin-right:auto;
display:relative;
width:100%;
color:white;
text-decoration:none;
padding:0px;
}


je vous remercie pour votre aide ! Je précise aussi que je me suis aider des tutoriel d'alsacréa et d'autre site traitant le sujet, sur la toile, mais aucun n'a résolu mon problème.
0

#2 L'utilisateur est hors-ligne   jarreweb 

  • "maudifié"
  • Voir la galerie
  • Groupe : Membre++
  • Messages : 1 179
  • Inscrit(e) : 10-juillet 04

Posté 20 mars 2013 - 19:01

dans le header nav{}
si tu ajoutes
text-align: center;

ça devrait le faire
0

#3 L'utilisateur est hors-ligne   Haldan 

  • Logoteur de Platine
  • Voir la galerie
  • Groupe : Membre
  • Messages : 1 247
  • Inscrit(e) : 11-mars 05

Posté 17 mai 2013 - 14:41

Bonjour
à tous
Salut jarreweb : :mojito:
Si cette personne est toujours par là, depuis le très lointain 20 mars 2013 (c'est bien de donner suite, mon ami...)
si j'ai bien compris:
Tu veux centrer ton menu dans le header... c'est ça?
Moi je centrerais d'abord le header dans le body avec un css : margin:auto;
puis je ferais la même chose pour le header_nav avec un width:100% pour qu'il occupe toute la largeur du header.

Soit
header { margin:auto; } + ton code css
header_nav { margin:auto; width: 100% } + ton code css

J'utiliserais plutôt le text-align: center pour centrer le texte dans le menu avec une classe.
Infographicus néanderthalis, massue connectée toujours à la main
Grapheo
0

Partager ce sujet :


Page 1 sur 1
  • Vous ne pouvez pas commencer un sujet
  • Vous ne pouvez pas répondre à ce sujet

1 utilisateur(s) en train de lire ce sujet
0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)



Enter your sign in name and password


Sign in options
  Or sign in with these services