Index du forum Index du forum » Communauté » Aide en informatique » Redimensionnement automatique d'un menu horizontal
Nouveau sujet Répondre Imprimer Syndication RSS 2.0

Redimensionnement automatique d'un menu horizontal

Hors ligne Deathy Masculin
Brasier
Avatar de Deathy
  • Age : 21 ans
  • Messages : 782
  • Inscrit : 18 Septembre 2006
  Lien vers ce message 28 Aout 2010, 19:58
Voila mon problème, je vous explique, je vais faire un menu horizontal avec une image de fond pour mon forum, le menu de FSB2 est la suivant:
« Site - Wiki - Aide - Rechercher - Membres - Calendrier »
Et mon design est le suivant:
http://img831.imageshack.us/img831/7889/explication.png

Alors voila, comment faire pour que la barre du dessus (celle qui contiendra donc ces entrées) s'adapte correctement par rapport aux nombres d'entrées dans le menu?

http://www.cyberlife.be/ressources/newsignature.png
 
Hors ligne Spark Masculin
Etoile
Avatar de Spark
  • Messages : 2697
  • Inscrit : 24 Juin 2006
Message édité 1 fois, dernière édition par Spark, 01 Septembre 2010, 1:04     Lien vers ce message 01 Septembre 2010, 1:02
Salut,

De la même façon que le header et la barre de navigation du thème actuel ?

Left 4 Dead 2 2.0.8.7 réseau Hamachi
Liste de réseau Hamachi pour le jeu en réseau via Internet
 
Hors ligne Deathy Masculin
Brasier
Avatar de Deathy
  • Age : 21 ans
  • Messages : 782
  • Inscrit : 18 Septembre 2006
  Lien vers ce message 01 Septembre 2010, 8:40
Le problème est que mon "surmenu" ne doit pas prendre toute la largeur de la page, ce que fait le header et la barre navigation du thème de base.

http://www.cyberlife.be/ressources/newsignature.png
 
Hors ligne Spark Masculin
Etoile
Avatar de Spark
  • Messages : 2697
  • Inscrit : 24 Juin 2006
  Lien vers ce message 01 Septembre 2010, 12:29
Un truc comme ca devrai être passe partout. Sachant que la largeur des span sera variable d'un navigateur à l'autre, donc il faudra prendre de la marge en plus de l'image

HTML (Sélectionner le code)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
	<title>Fire Soft Board</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">
		#menu
		{
			text-align: center; /*On centre le menu*/
		}
		#menu span
		{
			white-space: pre; /*On prend en compte tous les espaces*/
			padding: 5px 0; /*5px détermine la hauteur du menu*/
			cursor: default; 
		}

		/*Image à gauche dans le span*/
		#menu #gauche
		{
			background: url(http://img255.imageshack.us/img255/5/gauchex.png)no-repeat right;
		}

		/*Image à droitedans le span*/
		#menu #droite
		{
			background: url(http://img37.imageshack.us/img37/6669/droiteh.png)no-repeat left;
		}

		/*Menu horizonatalié :p */
		#menu ul, #menu li
		{
			display: inline;
			padding: 5px 0; /*5px détermine la hauteur du menu*/
		}
		/*Image de fond du menu*/
		#menu ul
		{
			background: url(http://img844.imageshack.us/img844/3980/milieu.png) repeat-x center;
		}

	</style>

</head>

<body>

<div id="menu">
	<span id="gauche">              </span><ul>
		<li>Menu 1</li>
		<li>Menu 2</li>
		<li>Menu 3</li>
		<li>Menu 4</li>
	</ul><span id="droite">              </span><!-- On met plus d'espaces que nécessaire pour ne voir avoir l'image coupé quand la police est petite -->
</div>

</body>
</html>



Après je viens de le faire, dans le contexte ca sera peut chaud à utiliser.

Left 4 Dead 2 2.0.8.7 réseau Hamachi
Liste de réseau Hamachi pour le jeu en réseau via Internet
 
Répondre


Index du forum Index du forum » Communauté » Aide en informatique » Redimensionnement automatique d'un menu horizontal
.