28172 sujets

CSS et mise en forme, CSS3

Menu repeat-x fonctionne pas

Salut,

Je viens à vous car j'ai un petit soucis, je suis en train de faire un site et j'aimerai que mon menu se répéter horizontalement...

Mais biensur ça ne fonctionne pas.

Un petit exemple vous voir ce que j'aimerai avoir ==> http://fr.vente-privee.com/vp4/Login/Portal.ashx (le menu en rose seulement la barre)

Mon code HTML : 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="content-language" content="fr" />
		<link href="style.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
	</head>
<body>





	
	<div id="contenu">
	<div id="header">	
		<center><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="100%" height="150" id="anim-traverse" align="middle">
			<param name="wmode" value="transparent">
			<param name="allowScriptAccess" value="sameDomain" />
			<param name="allowFullScreen" value="false" />
		</center><param name="movie" value="anim-traverse.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" />	<embed src="anim-traverse.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="100%" height="150" name="anim-traverse" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_fr" />
		</object>
	<div id="social">
			<a href="#"><img src="images/logo_facebook.png" BORDER="0"  alt=""/></a>
			<a href="#"><img src="images/logo_twitter.png" BORDER="0"  alt=""/></a>
	</div>
	</div>
		<div id="f_menu">
			<ul id="menu">
				<li class="titre"><a href="index.php">Accueil</a>
					<ul>
						  
					</ul>
				</li>				  
				<li class="titre"><a href="infos.php">Infos</a>
					<ul>
						<li class="lien"><a href="#">Infos DUT</a></li>
						<li class="lien"><a href="#">Infos portes ouvertes</a></li>
						 <li class="lien"><a href="#">Infos salons</a></li>
					</ul>
				</li>
				<li class="titre"><a href="photos.php">Galerie Photos</a>
					<ul>
						<li class="lien"><a href="#">Photos PO 1</a></li>
						<li class="lien"><a href="#">Photos PO 2</a></li>
						<li class="lien"><a href="#">Photos S 1</a></li>
						<li class="lien"><a href="#">Photos S 2</a></li>
					</ul>
				</li>				  
				<li class="titre"><a href="videos.php">Galerie Vidéos</a>
					<ul>
					</ul>
				</li>				  
				<li class="titre"><a href="contact.php">Contact</a>
					<ul>

					</ul>
				</li>
			</ul>
		</div>
	
	
	<div id="news">
		<ul id="groupe_news">
			<li>
			<a href="news1.html"><img src="images/news1.png" BORDER="0"/><br/><p>Voir l'article...</p></a>
			</li>
			<li>
			<a href="news2.html"><img src="images/news2.png" BORDER="0"/><br/><p>Voir l'article...</p></a>
			</li>
			<li>
			<a href="news3.html"><img src="images/news3.png" BORDER="0"/><br/><p>Voir l'article...</p></a>
			</li>
		</ul>
	</div>
	<div id="news2">
		<p>Test TEST Test TEST Test TEST Test TEST Test TEST </p>
	</div>
	</div>
</body>
</html>








body       {
		background: #6b2879 url(images/fond.png) no-repeat top center;
		width:90%;
		margin:auto;
		min-width:200px;
		max-width:1305px;
		
		font-family:Century Gothic, sans-serif;
}
															/* EN - TÊTE */											
#header	{
		
		background:  url(images/) repeat center;

		height: 150px;

		
}
															/* EN - TÊTE  TERMINE*/														
															/* SOCIAL */														
#social	{
		float: right;
		width:110px;
		height: 50px;
		margin: 45px 0 0 50px;
		padding: 0 0 0 0 ;
		border: none;
}															
															/* SOCIAL TERMINE */													
															/* MENU */														
															
#f_menu {
		float: center;
		height:45px;
		background:url(images/f_menu.png) repeat-x;
		margin: 0px 0 0 150px;
		padding: 0 0 0 0 ;
}

#menu, #menu ul        {
		float: right;
		padding : 0;
		margin : 5px 60px 0 0;
		list-style : none;
		line-height : 21px;
		text-align : center;
}

#menu                  {
		
		font-weight :bold;
		font-size:13px;
}

#menu a                {
		display : block;
		height:40px;
		color: black;
		text-decoration : none;
		line-height:40px;
		width: 150px;
		font-weight: bold;
		background: url(images/menu.png);
		outline:none
}
#menu li               {
		float : left;
}

#menu li ul            {position: absolute;
		width: 150px;
		left: -999em;
		text-align:left;
}
#menu li ul li         {
		text-align:left;
}
#menu li ul li a       {
		text-align:center;
		outline:none;
		font-weight:normal;
		background-color:#2f2f2f;
}

#menu li ul li a:hover {
		background-color:#757575;
		outline:none
}
html>body #menu li ul li {}
#menu li ul ul           {
		margin : -22px 0 0 111px;
		border-left : 1px solid #fff; 
}
html>body #menu li ul ul {
		border-left : 1px solid transparent;
}
#menu a:hover            {
		background: url(images/menu_hover.png)
}
#menu li:hover ul ul, #menu li.sfhover ul ul  {
		left: -999em;
		text-align:left;
		padding:1px 2px;
		font-weight:normal;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul{
		left: auto;
		min-height: 0;
}
#menu li.lien a             {
		display : block;
		height:30px;
		color: black;
		text-decoration : none;
		line-height:30px;
		width: 150px;
		font-weight: bold;
		background: url(images/menu.png);
		outline:none
}

#menu li.lien a:hover       {
		background: url(images/menu_hover.png)
}
#menu li ul li.lien         {
		text-align:center;margin:0 0 0 0;padding:0
}
															/* MENU TERMINE*/
															/* NEWS*/
#news	{
		float: right;
		background: url(images/infos_news.png) no-repeat;
		width: 1020px;
		height:250px;
		margin: 20px 110px 0 0 ;

}
#news  p       {
		float: right;
		color: black;
		text-decoration: none;
		outline:none;
		font-weight:normal;
		margin: 0 45px 0 0 ;
		padding: 0 0 0 0;
} 

#groupe_news li 	{
				float : left;
				list-style : none;
				margin: 0px  0 0 85px ;
				padding: 0 0 0 0;

}

#groupe_news li ul            {
		position: absolute;
		width: 150px;
		left: -999em;
		text-align:left;

}
#groupe_news li ul li         {
		text-align:left;
}
#news2	{
		float: right;
		background: url(images/infos_news2.png) no-repeat;
		width: 1020px;
		height:250px;
		margin: 2px 110px 0 0 ;

}

#news2	{
		float: right;
		width: 1020px;
		height:1000px;
		margin: 2px 110px 0 0 ;

}



Je ne vois pas tout du ou est mon problème :s
Bonjour,

Il aurait été plus simple de ne donner que le code pertinent...

Si tu ne donne pas de largeur à ta barre de menu (100%), il ne prendra que la largeur dont il a besoin.
Ah ok désolé

Parcontre lhistoire des 100 % ça ne fonctionne pas

ça ne me modifie rien du tout :s

EDIT:

En si mais le bout de code ici en faite me fait planter mon css :s



body       {
		background: #6b2879 url(images/fond.png) no-repeat top center;
		width:90%;
		margin:auto;
		min-width:200px;
		max-width:1305px;
		
		font-family:Century Gothic, sans-serif;
}

Modifié par mazneoo (18 Nov 2010 - 20:03)
Pas bien compris le souci. L'image de fond de #f_menu ne se répète pas en largeur malgré le repeat-x? Et donc c'est pour ça que tu nous donne le code CSS qui s'applique à l'élément BODY? Smiley biggol

Questions:
1. Est-ce que tu as validé ton code HTML et ton code CSS? Si non, qu'attends-tu pour le faire? Smiley cligne
2. Est-ce que tu as utilisé des outils tels que Firebug ou Web Inspector pour vérifier les styles CSS qui s'appliquent à tes éléments, les dimensions et la positionnement exact de tes éléments, et rechercher ce qui coince?
3. Est-ce qu'on peut voir la page en ligne et avoir une description plus précise du problème?
Salut,

Donc nan j'ai juste donné tous mon code css si vous trouviez des erreurs :s

Sinon oui j'ai validé mon code HTML et CSS, là il n'y a pas de problème pour ça.

Oui j'ai utilisé Firebug pour mes styles css

Voici la page en question.

http://open-ways.fr/index1.php

Alors là si tu regardes bien ma page tu as le header donc pour ça pas de soucis avec une animation flash par dessus en transparent.

Ensuite tu as la div social là pareil je ne lai pas encore placé mais pas de soucis

En revanche quand tu regardes ma div f_menu là ça coince j'ai importé un fichier de ceci, et déjà tu vois que mon repeat ne fonctionne pas j'ai trouvé la solution en faite pour ça, tout simplement quand je met dans mon body


		width:90%;
		margin:auto;
		min-width:200px;
		max-width:1305px;


c'est logique que ça ne fonctionne pas puisque si je dezoome ma page de navigateur au maximum ça ne prendre en compte que seulement 1305px au maximum.

Et si je dezoome entierement ma page ça fait environ 4430 px donc je suis loin du compte.

Et biensur j'ai essayé de mettre au max-width 4430 px mais biensur tous mes éléments de page partent en "couille" et ça fou le "bordel" dans ma page.

Déjà là si tu dezoom étant donné que mon body fait 1305px de largeur et que mes éléments font maximum 1020px de large ça bouge déjà tous mes éléments.

Donc ma question est: Est-ce que ma barre f_menu peut être à la fois répéter en x et que mon site ne soit pas complétement déboussolé quand je dezoom?

Si oui comment puis-je faire?

Merci
mazneoo a écrit :
Sinon oui j'ai validé mon code HTML et CSS, là il n'y a pas de problème pour ça.

Ah bon? Je lis ça dans ton code:
#f_menu { 
        float: center;
}

C'est très clairement une erreur CSS. Smiley cligne

Sinon j'ai regardé la page et l'élément #f_menu n'avait aucun style CSS car les styles CSS définis pour cet élément étaient commentés. De plus le dépassement des flottants n'est pas géré, et du coup cet élément se retrouve avec une hauteur de zéro pixels au lieu de s'adapter à la hauteur de son contenu.

Je vois pas mal de bidouille dans ce code, notamment:
- des techniques de positionnement faites à l'arrache, à coup de margin-top négatif par exemple sur les éléments du menu (même style appliqué à l'élément UL du menu, histoire de tout confondre et de ne pas maitriser ce qu'on fait...);
- un élément CENTER dans le code HTML (no comment);
- des attributs BORDER="0" dans le code HTML (tu es sûr que tu as validé ton code HTML en XHTML 1.0 Strict? tu pipauterais pas un peu toi?).

Pour le reste de la question: en fait ton problème n'est pas de répéter une image de fond sur la largeur. Ça, à priori ça marche (pas sur ta page car le code CSS est commenté, ne contient pas de référence à l'image, etc.).
Le problème c'est que tu as un conteneur global (en l'occurrence l'élément BODY mais ça pourrait être un DIV enfant de BODY), ce conteneur global a une largeur précise (déterminée par un width + un max-width), et tu voudrais qu'un élément à l'intérieur de ce dernier prenne toute la largeur de la fenêtre et donc ignore totalement la largeur de son parent. À priori ce n'est pas possible avec cette structure.

Donc la solution est de ne pas limiter la largeur de l'élément BODY, mais d'utiliser d'autres éléments (plusieurs dans la page) pour limiter la largeur des contenus et centrer ces derniers.
Sujet clos
Aller à