28220 sujets

CSS et mise en forme, CSS3

Bonjours a vous

J'ai suivi votre tuto pour créer un design etape par etape, mais j'ai un petit probleme pour le menu horizontal.

Il faudrai que je le remonte pour qu'il se positionne dans ma barre de menu.

Le probleme ici

voila mon code

<ul id="menu">
			<li><a href="etape1.html">Etape n°1</a></li>
			<li><a href="etape2.html">Etape n°2 </a></li>
			<li><a href="etape3.html">Etape n°3</a></li>
                        <li><a href="etape4.html">Etape n°4</a></li>
			<li><a href="etape5.html">Etape n°5</a></li>
		</ul>


et mon css

ul#menu
{
        margin: 0px ;
	height: 30px ;
	list-style-type: none ;
}

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

ul#menu li a
{
	width: 100px ;
	color: #000 ;
	display: block ;
	text-decoration: none ;
	border-right: 1px solid #0b3b63 ;
}

Modifié par RoMaiNuS (10 Nov 2005 - 18:54)
Salut,

Tu nous a donné la portion de code concrenant le menu. Mais il s'agit de modifier la position du menu par rapport aux autres éléments, donc est-ce que tu pourrais nous montrer le reste du code ?
oui voila le reste

body
{
    margin: 0px ;
	text-align: center ;
	background: url(fond.gif) ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	
}
	
	div#conteneur
{
	width: 699px ;
	margin: 0 auto ;
	text-align: left ;
	background: url(body1.gif)
}

     h1#header
{
	
	height: 267px ;
	background: url(header1.gif) no-repeat left top;
}

     div#contenu h2
{
	padding-left: 125px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #0b3b63 ;
	
}
	
	pre
{
	overflow: auto ;
}

     div#contenu p
{
	padding-left: 50px ;
	padding-right: 50px ;
}

p#footer
{
	padding-left: 10px ;
	line-height: 80px ;
	text-align: left ;
	background: url(footer.gif) ;
	margin-bottom: 0px ;
}

ul#menu
{
    margin: 0px ;
	padding:  ;
	height: 30px ;
	list-style-type: none ;
}

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

ul#menu li a
{
	width: 100px ;
	color: #000 ;
	display: block ;
	text-decoration: none ;
	border-right: 1px solid #0b3b63 ;
}

h1#header a span
{
	display: none ;
}


	
	<body>
	<div id="conteneur">		
		<h1 id="header"><a href="etape1.html" title="RoMaiNuS"><span>Colored Design</span></a></h1>

		<ul id="menu">
			<li><a href="etape1.html">Etape n°1</a></li>
			<li><a href="etape2.html">Etape n°2 </a></li>
			<li><a href="etape3.html">Etape n°3</a></li>

			<li><a href="etape4.html">Etape n°4</a></li>
			<li><a href="etape5.html">Etape n°5</a></li>
		</ul>
		
		<div id="contenu">
			<h2>Titre de page, d'article...</h2>
			<p>bla bla</p>
			<p>-----------------</p>

			
			<h2>Titre de page, d'article...</h2>
			<p>bla bla</p>
		</div>
		
		<p id="footer"> </p>
	</div>
	</body>
</html>
je pense que tu devrais faire une div pour regrouper ton titre et ton menu du style:


<div id="header">
<h1>Le titre</h1>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>


après tu peux par exemple definir le #header en position:relative et ton titre (h1) et menu (ul) en position:absolute et les positionner comme tu veux
Euh, il y une chose que je ne comprends pas : étant donnée que tu veux mettre ton menu sur ta barre de menu, pourquoi places-tu to menu dans un div différend ? Car forcément il se mettra en dessous du précédent.

La solution ne serait pas soit :
- de séparer ton image d'une part et ta barre de menu d'autre part. Comme cela tu la met en arrière-plan de ton menu qui viendra comme c'est le cas ici se placer en-dessous de ton image.

- de mettre ton menu dans le même div que ton header et de jouer sur le padding-top pour le positionner au bon endroit dans ta barre de menu.

Voilà, je ne sais pas si c'est la bonne solution, mais c'est à essayer
Merci pour vos réponses Smiley cligne

J'essaye et je vous dit plus tard.

Edit: J'ai séparé le menu du header, mais il y a un ecart entre les 2 Smiley biggol .
Il y a aussi un probleme, j'ai mi une marge haute de 0 pixel qui fonctionne sous IE mais pas sours Firefox.


La page

Merci pour votre aide !


Mon code:

<body>
	<div id="conteneur">		
		<h1 id="header"><a href="etape1.html" title="RoMaiNuS"><span>.RoMaiNuS</span></a></h1>

		<ul id="menu">
			<li><a href="etape1.html">Etape n°1</a></li>
			<li><a href="etape2.html">Etape n°2</a></li>
			<li><a href="etape3.html">Etape n°3</a></li>
			<li><a href="etape4.html">Etape n°4</a></li>
			<li><a href="etape5.html">Etape n°5</a></li>
		</ul>
		
		<div id="contenu">
			<h2>Titre de page, d'article...</h2>
			<p>bla bla</p>
			<p>---------------------</p>
			
			<h2>Titre de page, d'article...</h2>
			<p>bla bla</p>
		</div>
		
		<p id="footer"> </p>
	</div>
	</body>


Mon css:

		body
{
    margin: 0px ;
	text-align: center ;
	background: url(fond.gif) ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	
}
	
	div#conteneur
{
	width: 700px ;
	margin: 0 auto ;
	text-align: left ;
	background: url(body.gif)
}

     h1#header
{
	
	height: 230px ;
	background: url(header.gif) no-repeat left top;
}

     h1#header a span
{
	display: none ;
}

     div#contenu h2
{
	padding-left: 125px ;
	line-height: 25px ;
	font-size: 1.4em ;
	color: #0b3b63 ;
	
}
	
	pre
{
	overflow: auto ;
}

     div#contenu p
{
	padding-left: 50px ;
	padding-right: 50px ;
}

     p#footer
{
	padding-left: 10px ;
	line-height: 80px ;
	text-align: left ;
	background: url(footer.gif) ;
	margin-bottom: 0px ;
}

     ul#menu
{
    
	background: url(menu1.gif) ;  
	height: 32px ;
	list-style-type: none ;
	margin: 0 ;
	
}

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

     ul#menu li a
{
	
	width: 80px ;
	font-weight: bold ;
	color: #000000 ;
	display: block ;
	text-decoration: none ;
}

Modifié par RoMaiNuS (10 Nov 2005 - 21:27)