18041 sujets

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

Problème positionnement du menu

salut à tous,

voila en tant que débutant-professionel, je sèche depuis la fin de l'aprèm sur le positionnement de mon menu, j'explique :


Code HTML

<body id="home-page">
<div id="global">
		<div id="header">
				<h1 id="logo"><a href="/">CEDRIIK</a></h1>
				<ul id="menu">
						<li><a href="/" title="home">home</a></li>
						<li><a href="/portfolio/" title="portfolio">portfolio</a></li>
						<li><a href="/contact/" title="contact">contact</a></li>
				</ul>
		
		</div><!-- fin header -->
		<div id="content">


CODE CSS

/* Header */

div#header {
		margin-top: 50px;
}

ul#menu {
		float: right;
		list-style-type: none;
}

ul#menu li {
		text-align: center;
}

ul#menu li a {
		display: block;

}


Concernant les css, je n'ai aucunes idées si je suis dans la bonne direction ou non.

Et voici le résultat attendu :

upload/10108-screenpb.jpg

Le menu doit être à droite du logo...

D'avance merci Smiley smile
1. Mettre un position: relative à div#header.
2. Positionner le h1 (de préférence le logo sera une image avec texte alternatif, plutôt qu'un texte caché et remplacé par une image de fond...) en absolu. Comme le bloc parent est lui-même positionné, le positionnement du h1 se fera par rapport aux limites de div#header et pas par rapport aux limites de body.
3. Pour le menu, positionner le ul soit en absolu, soit tout simplement avec des marges à gauche et à droite. Les li seront en display: inline.
4. Si besoin, il faudra peut-être placer les li en float: left plutôt qu'en affichage de type en-ligne. Ça dépend de ce que tu veux faire avec cette petite flèche en dessous d'un des éléments de ton menu (sur l'image).
Merci j'ai réussi en suivant vos insctructions et en bidouillant également, par exemple avec le display: inline; mon menu était positionné ou je le voulais mais je ne pouvais pas cliquer dessus... Smiley biggol Il a fallut que je rajoute un position: relative; à mon ul...

Sur ce j'vais relire l'article sur les positionnement Smiley cligne
Sujet clos
Aller à