Besoin de conseil pour éléments particuliers

Salut à tous,

J'aurais besoin de vos lumières pour le codage de deux éléments. Un menu et une "barre titre".

Pour le menu :


Le problème se pose au niveau du rollover. En effet j'arrive bien à faire un rollover classique mais comment faire cet effet arrondi sachant que je veux absolument rester dans un menu "texte" , donc pas d'image avec le nom du lien.

Pour la barre titre :


J'ai fait un premier essai avec un H1 , ce qui me semble le plus correct. Pour le dégradé pas de soucis je fait quelque chose comme ceci :

.maclasse h1
		{
			background:url(struct/h1_titre.gif) repeat-x;
			width:100%;
			height:21px;
			color:#FFFFFF;
			font-weight:bold;
			font-size:12px;

		}

Cependant avec cette solution je n'ai que le dégradé et pas le petit logo "H" sur la gauche. y'a t'il une solution autre que deux div ou une seule grosse image comprenant logo + degradé ?

Merci
Modifié par GrUnK (15 Aug 2007 - 20:25)

Bonjour,

a écrit :
un rollover classique mais comment faire cet effet arrondi sachant que je veux absolument rester dans un menu "texte"

Avec une image en fond des <a> dans des <li>, tu peux garder cet effet de rollover et le texte par dessus.

a écrit :
une solution autre que deux div

Pourquoi ? C'est gênant ?
C'est pourtant une solution assez simple.
 
Modifié par Gihef (15 Aug 2007 - 20:56)

a écrit :
Pourquoi ? C'est gênant ?

Non pas spécialement , c'était plus pour savoir si il existait une solution plus "propre" que je ne connaitrait pas
Modifié par GrUnK (15 Aug 2007 - 22:19)

Ça n'est pas sale.
C'est un moyen de gérer des images plus légères.
Tu pourrais avoir une, une seule, image (H + dégradé) en fond de la totalité d'un seul bloc (dont les dimensions devront être connues).

Ou alors, 2 images.
Une (H) en fond d'un 1er bloc.
La 2e en fond (le dégradé en repeat-x) d'un 2e bloc (dont les dimensions peuvent varier).

Vu la taille du bloc, la 1re solution ne semble pas beaucoup plus lourde.
 
Modifié par Gihef (15 Aug 2007 - 22:01)

C'est vrai que la solution une seule image peut être envisageable également. Je n'est que deux taille de bloc , ca simplifierai peut être une peut la chose.

Sinon pourrais tu être plus précis au niveau du menu ?
Pour le moment j'ai celà :

				<ul id="menu">
					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>

					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>
					<li><a href="#">liens</a></li>
				</ul>

ul#menu {
			list-style-type: none;
			width: 100%; /* précision pour Opera */
		}
		ul#menu li {
			float: left;
			background:url(struct/bg_menu_sep.jpg) no-repeat right top;
		}
		ul#menu a {
			float: left;
			margin: 0 2px;
			padding: 0px 8px;
			text-align: center;
			text-decoration: none;
			color: #ffffff;
			font-weight: bold; 
			font-family: arial; 
			font-size: 8.5pt;
		}
		ul#menu a:hover {
			color: #000000;
			background:right url(struct/bg_menu.jpg) repeat-x;
		}

Qui me permet un rollover classique. Mais pour les arrondis je n'est pas bien compris. Mettre une image en fond des <a> d'accord , mais les <a> n'ont jamais la même taille.

merci

a écrit :
Mettre une image en fond des <a> d'accord , mais les <a> n'ont jamais la même taille

2 choix :
• Ils auront la même taille. Seul le texte au-dessus changera (centré ?)
Dans ce cas, tu auras des

ul#menu a {
  background: url(struct/fond_lien_menu.jpg) 0 0 no-repeat;
  …}

C'est plus facile à gérer.


• Ils auront des tailles différentes. Alors, ils recevront chacun une image différente (adaptée) en fond.
Dans ce cas, tu auras des

ul#menu a#entree1 {
  background: url(struct/fond_lien_menu#1.jpg) 0 0 no-repeat;
  …}
ul#menu a#entree2 {
  background: url(struct/fond_lien_menu#2.jpg) 0 0 no-repeat;
  …}

Idem pour les “:hover”.
 
Modifié par Gihef (15 Aug 2007 - 22:48)

ok merci , je vais essayer comme celà.
Si d'autre on également des idées n'hésitez pas