28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je développe un site dans lequel j'ai une menu très simple sur la gauche.

c'est une liste :


<ul id="menu">	
<li id="active01"><a href="rub01.asp" title="News" accesskey="1" tabindex="1"><span>News</span></a></li>

	<li id="rub02"><a href="rub02.asp" title="Programme" accesskey="2" tabindex="2"><span>Programme</span></a></li>
	<li id="rub03"><a href="rub03.asp" title="Réservation" accesskey="3" tabindex="3"><span>Réservation</span></a></li>
	<li id="rub04"><a href="rub04.asp" title="Fan Club Officiel" accesskey="4" tabindex="4"><span>Fan Club Officiel</span></a></li>
	<li id="rub05"><a href="rub05.asp" title="Produits exclusifs" accesskey="5" tabindex="5"><span>Produits exclusifs</span></a></li>
	<li id="rub06"><a href="rub06.asp" title="Concours de costumes" accesskey="6" tabindex="6"><span>Concours de costumes</span></a></li>
	<li id="rub07"><a href="rub07.asp" title="Festival du film de fans" accesskey="7" tabindex="7"><span>Festival du film de fans</span></a></li>

	<li id="rub08"><a href="rub08.asp" title="Espace partenaires" accesskey="8" tabindex="8"><span>Espace partenaires</span></a></li>
	<li id="rub09"><a href="rub09.asp" title="Espace presse" accesskey="9" tabindex="9"><span>Espace presse</span></a></li>
	<li id="rub10"><a href="rub10.asp" title="Contacts" accesskey="10" tabindex="10"><span>Contacts</span></a></li>

	<img src="images/flags.jpg" title="Changement de langue" alt="Changement de langue" usemap="#flags">
	<map name="flags" id="flags">
		<area shape="rect" alt="Español" title="Español" coords="97,0,121,27" href="/rub01.asp?lan=sp" />
		<area shape="rect" alt="English" title="English" coords="59,0,83,27" href="/rub01.asp?lan=uk" />

		<area shape="rect" alt="Français" title="Français" coords="21,0,44,27" href="/rub01.asp?lan=fr" />
	</map>	
</ul>	


J'utilise ensuite la technique de porte coulissantes pour l'habiller (enfin je crois)


/* MENU */
#menu span {display:none;}
#menu {
	background-image: url("images/menu_fr.jpg");
	background-repeat:no-repeat;
	height:240px;
	width:140px;
	margin:0;
	padding:0;
	position:absolute;
	z-index:20;
	top:341px;
	list-style:none;
	left:0;
}
#menu li {
	height:24px;
	text-align:right;
}
#menu a {
	height:24px;
	width:140px;
	display:block;
}
#rub01 {margin:0; padding:0; top:0; height:24px;}
#rub02 {margin:0; padding:0; top:24px; height:24px;}
#rub03 {margin:0; padding:0; top:48px; height:24px;}
#rub04 {margin:0; padding:0; top:72px; height:24px;}
#rub05 {margin:0; padding:0; top:96px; height:24px;}
#rub06 {margin:0; padding:0; top:120px; height:24px;}
#rub07 {margin:0; padding:0; top:144px; height:24px;}
#rub08 {margin:0; padding:0; top:168px; height:24px;}
#rub09 {margin:0; padding:0; top:192px; height:24px;}
#rub10 {margin:0; padding:0; top:216px; height:24px;}

#rub01 a:hover {background: transparent url("images/menu_fr.jpg") -140px 0  no-repeat;}
#rub02 a:hover {background: transparent url("images/menu_fr.jpg") -140px -24px  no-repeat;}
#rub03 a:hover {background: transparent url("images/menu_fr.jpg") -140px -48px  no-repeat;}
#rub04 a:hover {background: transparent url("images/menu_fr.jpg") -140px -72px  no-repeat;}
#rub05 a:hover {background: transparent url("images/menu_fr.jpg") -140px -96px  no-repeat;}
#rub06 a:hover {background: transparent url("images/menu_fr.jpg") -140px -120px  no-repeat;}
#rub07 a:hover {background: transparent url("images/menu_fr.jpg") -140px -144px  no-repeat;}
#rub08 a:hover {background: transparent url("images/menu_fr.jpg") -140px -168px  no-repeat;}
#rub09 a:hover {background: transparent url("images/menu_fr.jpg") -140px -192px  no-repeat;}
#rub10 a:hover {background: transparent url("images/menu_fr.jpg") -140px -216px  no-repeat;}

#active01 a {background: transparent url("images/menu_fr.jpg") -280px 0  no-repeat;}
#active02 a {background: transparent url("images/menu_fr.jpg") -280px -24px  no-repeat;}
#active03 a {background: transparent url("images/menu_fr.jpg") -280px -48px  no-repeat;}
#active04 a {background: transparent url("images/menu_fr.jpg") -280px -72px  no-repeat;}
#active05 a {background: transparent url("images/menu_fr.jpg") -280px -96px  no-repeat;}
#active06 a {background: transparent url("images/menu_fr.jpg") -280px -120px  no-repeat;}
#active07 a {background: transparent url("images/menu_fr.jpg") -280px -144px  no-repeat;}
#active08 a {background: transparent url("images/menu_fr.jpg") -280px -168px  no-repeat;}
#active09 a {background: transparent url("images/menu_fr.jpg") -280px -192px  no-repeat;}
#active10 a {background: transparent url("images/menu_fr.jpg") -280px -216px  no-repeat;}


Sous Firefox, Safari c'est nickel, mais sous IE6 PC, y'a un truc de fou.

Les "boutons" se décalent tous vers le bas et l'écrat est de plus en plus important à mesure que je décend dans le menu.

Je ne peux mettre d'exemple en ligne, c'est un site évenementiel pour l'instant confidentiel.

AU SECOURS !!!

merci à toutes vos âmes de bon samaritain.
Modifié par ernstein (11 Mar 2005 - 17:19)
Je me souviens avoir déjà eu ce problème, mais sans au minimum ton menu en ligne, on pourra difficilement t'aider.
On n'a pas les images derrière tout ça...

Puis éventuellement un lien vers la technique utilisée, parce qu'il y a quelques variantes...
Alors pour la technique c'est celle de pompage.

http://www.pompage.net/pompe/sprites/

Pour l'image du menu, elle est ici

Mais je ne peux vraiment pas mettre en ligne sous peine de me faire étrangler dans la seconde.

En tout cas merci de prendre du temps pour moi. upload/319-menufr.jpg
Modifié par ernstein (02 Mar 2005 - 15:33)
Arfff... les sprites avec trois états. Smiley biggol

Si j'ai le temps, j'essaierai de débugger sur windoze, mais ça ne garanti pas que ça va passer sous IE/Mac.
Je bookmark. Smiley cligne
IE Mac n'est pas trop trop grave.

Sinon question con, c'est une grosse bétise des sprites avec 3 états ?

Y'a mieux ? Car si je fais fausse route, je suis prêt à reprendre la chose autrement.

Merci.
ernstein a écrit :

Sinon question con, c'est une grosse bétise des sprites avec 3 états ?

Non ce n'est pas une bétise, c'est juste que l'état « page courante » ne fonctionnera peut-être pas dans certaines configuration. J'ai autrefois perdu beaucoup (trop?) de temps à essayer de le faire fonctionner. Mais c'était dans un contexte particulier... bon je jette un oeil Smiley cligne

<edit />

Tu utilises quel DOCTYPE ? Parce que ça peut avoir son importance ici...
Modifié par Stephan (02 Mar 2005 - 20:41)
Arfff... Un <ul> ne peut contenir que des <li>.

Il faut sortir <img... /> et <map... /> de ton <ul>

Je ne suis pas allé plus loin...

Tu dis ce que ça donne Smiley lol
Modifié par Stephan (02 Mar 2005 - 20:55)
oki je regarde.

Pour l'état active, c'est une variable ASP qui me le donne , donc çà dois trourner n'importe ou.
Donc pour l'image qui se promenais dans le ul, çà ne change rien. Smiley langue

je vais par contre corriger cette vialaine chose.
Stephan a écrit :


<edit />

Tu utilises quel DOCTYPE ? Parce que ça peut avoir son importance ici...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Je viens d'y passer un bon moment et je ne vois vraiment pas ce qui cloche Smiley confus

Tu pourrais essayer de faire coulisser verticalement au lieu d'horizontalement (c'est la méthode que j'utilise).
Désolé, je n'ai pas plus de temps à y consacrer pour le moment...
Alors..

Je viens de reprendre le dev de ce site.

Donc pour matérialiser les boutons j'ai mis un border dotted de 1 px sur les <li> du menu et je m'aperçois que IE dispose des marges quoi qu'il arrive

cf l'image de gauche c'est IE à droite Firefox.

upload/319-ffie.jpg

une idée ?

voici le CSS en cours :

l'image de menu est maintenant verticale.
mais je penses que peut importe.


#menu span {display:none;}
#menu {
	background-image: url("images/menu_<%=Session("expolangue")%>.jpg");
	background-repeat:no-repeat;
	height:253px;
	width:140px;
	margin:0;
	padding:0;
	position:absolute;
	z-index:20;
	top:341px;
	list-style:none;
	left:0;
}
#menu li {
	height:23px;
	text-align:right;
	border:1px dotted red;
	margin:0;
	padding:0;
}
#menu a {
	height:23px;
	width:140px;
	display:block;
	padding:0;
	margin:0;
}
#rub01 {margin:0; padding:0; top:0; height:23px;}
#rub02 {margin:0; padding:0; top:23px; height:23px;}
#rub03 {margin:0; padding:0; top:46px; height:23px;}
#rub04 {margin:0; padding:0; top:69px; height:23px;}
#rub05 {margin:0; padding:0; top:92px; height:23px;}
#rub06 {margin:0; padding:0; top:115px; height:23px;}
#rub07 {margin:0; padding:0; top:138px; height:23px;}
#rub08 {margin:0; padding:0; top:161px; height:23px;}
#rub09 {margin:0; padding:0; top:184px; height:23px;}
#rub10 {margin:0; padding:0; top:207px; height:23px;}
#rub11 {margin:0; padding:0; top:230px; height:23px;}

#rub01 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px 0  no-repeat; margin:0; padding:0;}
#rub02 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -23px  no-repeat; margin:0; padding:0;}
#rub03 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -46px  no-repeat; margin:0; padding:0;}
#rub04 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -69px  no-repeat; margin:0; padding:0;}
#rub05 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -92px  no-repeat; margin:0; padding:0;}
#rub06 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -115px  no-repeat; margin:0; padding:0;}
#rub07 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -138px  no-repeat; margin:0; padding:0;}
#rub08 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -161px  no-repeat; margin:0; padding:0;}
#rub09 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -184px  no-repeat; margin:0; padding:0;}
#rub10 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -207px  no-repeat; margin:0; padding:0;}
#rub11 a:hover {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -140px -230px  no-repeat; margin:0; padding:0;}

#active01 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px 0  no-repeat; margin:0; padding:0;}
#active02 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -23px  no-repeat; margin:0; padding:0;}
#active03 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -46px  no-repeat; margin:0; padding:0;}
#active04 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -69px  no-repeat; margin:0; padding:0;}
#active05 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -92px  no-repeat; margin:0; padding:0;}
#active06 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -115px  no-repeat; margin:0; padding:0;}
#active07 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -138px  no-repeat; margin:0; padding:0;}
#active08 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -161px  no-repeat; margin:0; padding:0;}
#active09 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -184px  no-repeat; margin:0; padding:0;}
#active10 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -207px  no-repeat; margin:0; padding:0;}
#active11 a {background: transparent url("images/menu_<%=Session("expolangue")%>.jpg") -280px -230px  no-repeat; margin:0; padding:0;}