Sujet Précédent Sujet Suivant

Pb compatibilité IE,Mozilla & agrandissement

Résolu/Fermé
duky - 16 mars 2010 à 16:50
 duky - 18 mars 2010 à 11:22
Bonjour,

Pour les habitués du CSS, je risque de poser une question relativement simple mais là, je sèche complètement.

Débutant la création d'un site pour une association, je me colle au langage CSS, XHTML... Mon soucis vient lors des changement de résolution et autre agrandissement possible. J'ai bien essayer de créer un site en utilisant que des unité relative ( % , em) mais malgré ça, impossible de faire quelque chose qui reste à peu près cohérent d'une résolution à l'autre...
Pire ! Mon header , mon pied de page et le corps reste relativement stable : centré et conservant des proportions raisonable.
Par contre pour ce qui est , d 'une part du menu, et de l'autre , des fieldset, pas moyens de faire un truc potable !

Bon maintenant : mon menu est horizontal avec des sousmenu déroulant :
code HTML : ( raccourci, en vrai il y à 5 menu)
<div id="menu">
<ul id="menuDeroulant">
<li><a href="accueil.php" class="bouton1">Presentations</a>
<ul class="sousMenu">
<li><a href="dfsdfsdfs.php">sdfsdfsdf</a> </li>
<li><a href="sdfsdf.php">sdfsdfsdf</a> </li>
<li><a href="sdfsdfsdf.php">sdfsdfsdfsdf</a> </li>
</ul>
</li>
<li><a href="accueil.php"class="bouton2">Nos Actions</a>
<ul class="sousMenu">
<li><a href="sdfsdf.php">Lsdfsdfsdf</a> </li>
<li><a href="sdfsdf.php">sdfsdfsdfsdf</a> </li>
<li><a href="sdfsdfsf.php">dlsugsdfljd</a> </li>
<li><a href="sdfsdfsdf.php">sdfsdfsf</a> </li>
<li><a href="sdfsdfdsf.php">sdfsdfsfd</a> </li>
</ul>
</li>
</ul>
</div>

et le code css :(inspiré d'un exemple trouver sur le net, modifier et adapté)

#menuDeroulant
{
list-style-type: none;
}
#menuDeroulant li:hover > .sousMenu
{
display: block;
}
#menuDeroulant .sousMenu
{
list-style-type: none;
}
#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
padding: 0em;
}
#menuDeroulant .sousMenu li
{
width:100%;
font-size:0.8em;
}
#menuDeroulant li
{
float: left;
width:20%;
font-size:100%;
text-align:center;
}
#menuDeroulant{
width:83%;
height:20%;
list-style-type: none;
padding: 0em;
position: absolute;
margin-top: -2em;
margin-bottom:2em;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
padding-bottom:0.15em;
padding-top: 0.15em;
border-right: 0.1em solid #FFFFFF;
font-weight:bold;
text-decoration: none;
}
#menuDeroulant li a:hover
{
background-color: #b8e6f8;
}
#menuDeroulant li a:active
{
background-color: #3cc3e8;
}
#menuDeroulant .sousMenu li a:link,#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #fa0c04;
border: 0.1em solid black ;
-moz-border-radius : 0.5em 0.5em ;
text-decoration: none;
background-color:#9af26c;
}
#menuDeroulant .sousMenu li a:hover{
background-color: #0795f7;
}


Bref, je sèche complètement, pas moyens que ces menus conservent un comportement adapté à leurs conditions de Div soumises ! Si une bonne âme désintéressée pouvait me donner quelques éléments de réponse, je lui en serait reconnaissant. Merci d 'avance !
ps: c 'est le menu le plus important, pour les fieldset, je pourrais m'arranger donc je n'en parle pas plus.
A voir également:

11 réponses

Réponse 1 / 11
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 74
16 mars 2010 à 16:54
Salut, je sais pas si ca fonctionne mais t as essayé de faire une div géante juste apres ton body, et tu met cette div en type block? 

<html>
<head></head>
<body>
<div style="display:block";>
TON SITE ENTIER
</div>
</body>
</html>
0
Réponse 2 / 11
duky
17 mars 2010 à 09:15
Merci pour l'idée, et nan je n 'avais pas essayé. C'est fait et hélas cela ne règle pas le problème... D'ailleurs je sais pas si j'ai été très clair. En fait si on change la résolution ( ou que l'on zoom a l'aide du navigateur) l 'ensemble du site reste centré et grossi ( ou rétréci selon le cas ) sauf le menu. Par exmple si je dezoome , au lieu de rester sagement entre mon Header et mon corp ( donc avec une largueur idententique), le menu gagne en largueur ( jusqu'a sortir de l'écran par la droite, pourquoi la droite ? je n 'en sait rien...). C'est à dire que les 5 boutons le composant s 'agrandissent, s'agrandissent et ca ne ressemble plus à rien !

Bref rien de mieux qu'une image pour illlustrer ce genre de problème donc voila :

https://imageshack.com/

Il y a le "bon" designe et celui qui pose probleme lors des changement de résolution...

Un bon point au premier qui trouvera la solution !
0
Réponse 3 / 11
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 74
17 mars 2010 à 11:39
oki bon on reste sur le même principe du div qui prend tout ton site, maintenant dans le css tu met ca : 
#conteneur {
position:absolute; 
	left: 50%;  
	width: 1250px; 
	margin-left: -625px; /* moitié de la largeur */ 
}
0
Réponse 4 / 11
duky
17 mars 2010 à 15:03
Super ! Merci beaucoup, ca à marché !
Juste une petite précision, la valeur de width à 1250px est elle une valeur "normalisé" ? Je veux dire, qui permettra au site d'avoir l'affichage optimum quelque soit la résolution et/ou navigateur des futurs visiteurs ?
OU c'etait juste pour l'exemple et c'est maintenant à moi de choisir la valeur qui me parait la plus propice ?( en adaptant le margin-left bien sur !)

Sinon, pour ma culture perso, pourquoi "left:50%" ?
je ne vois pas la raison, Tel que j'ai compris cette propriété , elle sert à dire "position par rapport à la gauche". Ok mais a quoi bon ? Vu que le width et le margin-left suffisent en eux-même ? nan ? je me trompe ?
En tout cas merci pour tes réponse , toi, personne au pseudo imprononçable ;-) !!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 74
17 mars 2010 à 15:09
Salut, alors le width, c 'est pas du tout normalisé, c est plutôt a toi de voir pour la taille de ton site.

Je vais commenter le code :

#conteneur {
position:absolute; ---> donc c'est pour que le site soit hors du flux, et donc tout reste fixe lorsque tu modifies la taille de la fenettre etc....

left: 50%; ---> donc la en fait, c est un peu un "combo" ^^. En fait tu vas décaler ta page de 50 % sur la droite (donc la moitié de ta page sera en dehors du navigateur).

width: 1250px; ----> la tu définis ca largeur (oui, il faut qu'il sache de combien la décaler ^^)

margin-left: -625px; /* moitié de la largeur */ --> la tu repousse de moitié le tout vers la gauche et c est la magie du centrage !!!
}
0
duky
17 mars 2010 à 15:23
Et bien, vu que tu répond vite et bien, encore une petite question : j'ai utilisé ces propriété pour éviter que les background de mes Div ne se repete. Au contraire , ils sont sensé s'étirer.

-webkit-background-size: 100% 100%; /*adaptation IE*/
-o-background-size: 100% 100%; /*adaptation opéra*/
-moz-background-size: 100% 100%; /*adaptation mozilla*/

J'ai envoyé mon site à un ami pour qu'il le test chez lui, et ces propriétés fonctionnent sans soucis, par contre sur mon poste, elles n'ont aucun effet ... une idée du pourquoi du comment ?

(pour info, windows familiale sp 3 , mozilla 3.5.8 et easyPHP pour le serveur virtuel )
0
Réponse 6 / 11
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 74
17 mars 2010 à 15:25
webkit c est chrome et non IE ^^.

Et pour firefox faut que tu le mettes à jour en 3.6 pour etre compatible css3

Pour IE pas de css3 possible actuellement
0
Réponse 7 / 11
duky
17 mars 2010 à 15:37
youhou ! je profite et abuse de tes conseils.
Bien noté toute les infos pour les background-size ( je m'était bêtement dit moz -mozillz , o - opéra et dc, le dernier devais bien être pour IE...et ba non).
Sinon, mon menu ( encore et toujours lui !!) me cause encore un petit soucis, j'ai beau lui dire d'occuper 100% de la largueur, et que chaque bouton ( 5 au totale) fasse 20 % ( 5*20 = 100 !! wahou, chu trop fort !), il refuse de prendre la totalité de la largueur... Grumph ! oserais-je dire ? J'ai testé de mettre 20.5% en esperant que ca comblerait les quelque pixel manquant... Bien sur, ca ne marche pas et me place le dernier bouton juste en dessous...
Dis moi si me répondre te lasse et je cesserais, mais tant que ca marche , j 'en profite !

ps : si bout de code ou autre besoin est, le dire pour l'avoir tu devra.
0
Réponse 8 / 11
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 74
17 mars 2010 à 15:43
Sans le code c est difficile quand même.

Après avoir bien réfléchis je pense prendre mon 1er joker et je demande le code du menu svp jean-pierre.
0
Réponse 9 / 11
duky
17 mars 2010 à 15:50
bon, je part en réunion, donc le bout de code et je verrais la réponse si elle existe plus tard ou demain, re re merci !!! 

#menuDeroulant{ 								/*attributs generaux du menu*/
	 list-style-type: none;						/*pour retirer les puces*/
}
#menuDeroulant li:hover > .sousMenu {				/*attributs des sous menus déroulant lorsque la souris passe sur les boutons*/
	 display: block;							/*pour passer de balise "inline" en balise "block"*/
 }
#menuDeroulant .sousMenu{ 						/*attributs des sous menus deroulant*/
	 list-style-type: none;						/*pour oter les puces*/
}
#menuDeroulant .sousMenu{ 						/*attributs des sous menus deroulant... encore ? je sais pas, je comprend pas*/
	 display: none; 							/*pour cacher les sous menus et permettre un deroulement*/
	 list-style-type: none;						/*pour retirer (une deuxieme fois ?) les puces*/
	 padding: 0em;								/*pour que les sous menu prennent toute la largueur des boutons*/
}
#menuDeroulant .sousMenu li{						/*attributs des elements de liste des sous menus*/
	 width:100%;								/*largueur des sous menus */
	 font-size:0.8em;							/*taille de police*/
}
#menuDeroulant li{ 								/*attributs des menus principaux*/
	float: left;								/*permet le palcement en ligne : chaque element flottant à droite du precedent*/		
	width:20%;									/*largueur des menus ( 5 menu donc 20% chacun)*/
	font-size:100%;								/*taille de police*/
	text-align:center;							/*pour centrer le texte*/
}
#menuDeroulant{ 								/*attributs generaux du menu ( encore ?)*/
	 width:100%;								/*largueur total des boutons du menu par rapport à la page complete*/
	 list-style-type: none; 					/*pour oter les puces*/
	 padding: 0em; 								/* pour le placement du menu  c'est ici */
	 position: absolute;						/*pour le positionnement*/
	 margin-top: -2em;							/*pour laisser un espace entre le header et le corps*/
	 margin-bottom:2em;
}
#menuDeroulant li a:link, 							/*attributs pour les liens */
#menuDeroulant li a:visited{ 						/*et les liens visités*/
	 display: block;							/*passer les div de inline à block*/
	 padding-bottom:0.15em;						/*pour laisser un espace au dessus des boutons*/
	 padding-top: 0.15em; 						/*pour laisser un espace au dessous des boutons */
	 border-right: 0.1em solid #FFFFFF; 		/*format, couleur et epaisseur de la bordure*/
	 font-weight:bold;							/*pour mettre le texte en gras*/
	 text-decoration: none;						/*pour oter le soulignement auto des liens*/
}
#menuDeroulant li a:hover { 						/*attributs lorsque la souris survol les liens*/
	background-color: #b8e6f8;					/*couleur lors du survol*/
}
#menuDeroulant li a:active { 						/*attributs lorsque les liens sont cliqué*/
	background-color: #3cc3e8; 					/*couleurs lors du clique*/
}
#menuDeroulant .sousMenu li a:link,				/*attributs pour les liens des sous menus */
#menuDeroulant .sousMenu li a:visited{ 			/*et les liens visités des sous menus*/
	display: block; 							/*changer div inline en div block*/
	color: #fa0c04;								/*couleur des textes*/
	border: 0.1em solid black ;					/*format, epaisseur et couleur des bordures*/
		-moz-border-radius : 0.5em 0.5em ;		/*arrondi les angles des bordures*/
	text-decoration: none; 						/*pour retirer le soulignement auto des liens*/						
	background-color:#9af26c;					/* couleur de fond des sous menus*/
 }
#menuDeroulant .sousMenu li a:hover{ 				/*attributs des sous menus "survolés"*/
	background-color: #0795f7;					/*couleur de fond lors du survol*/
}

Tous ca pour le menu + les lignes suivant pour mes images de boutons  :

.bouton1{ 										/*attributs boutons 1 - rouge/presentation*/
	color:black;								/*couleur texte*/
	background-image:							/*source images*/
	url("../../ressource/images/bouton/boutonrouge.png");
	background-repeat:
	repeat;										/*adaptation resolution navigateurs*/
		-webkit-background-size: 100% 100%; 	/*IE*/
		-o-background-size: 100% 100%; 			/*opera*/
		-moz-background-size: 100% 100%;		/*mozilla*/
}
.bouton2{ 										/*attributs boutons 2 - jaune/actions*/
	color:black;								/*couleur texte*/
	background-image:							/*source image*/
	url("../../ressource/images/bouton/boutonjaune.png");
	background-repeat:
	repeat;										/*adaptation resolution navigateurs*/
		-webkit-background-size: 100% 100%; 	/*IE*/
		-o-background-size: 100% 100%; 			/*opera*/
		-moz-background-size: 100% 100%;		/*mozialla*/



par contre c 'est bien plus moche que sur notepad... , allez, genereux, je donne aussi le 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" >
   <head>
       <title>L'AEPE - EPE de Seine-Maritîme</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../CSS/style.css" />	  
   </head>
   	<body>
	<div id="conteneur" style="display:block";>

		<?php include("block_fix/entete.php"); ?>		
		<?php include("block_fix/menu.php"); ?>
		<?php include("corp_page/accueil.php"); ?>								
		<?php include ("block_fix/pied_de_page.php");?>	

	</div>
	</body>
</html>


et donc , ds menu.php : 
<div id="menu">
<ul id="menuDeroulant">
<li><a href="accueil.php" class="bouton1">Presentations</a>
<ul class="sousMenu">
<li><a href="dfsdfsdfs.php">sdfsdfsdf</a> </li>
<li><a href="sdfsdf.php">sdfsdfsdf</a> </li>
<li><a href="sdfsdfsdf.php">sdfsdfsdfsdf</a> </li>
</ul>
</li>
<li><a href="accueil.php"class="bouton2">Nos Actions</a>
<ul class="sousMenu">
<li><a href="sdfsdf.php">Lsdfsdfsdf</a> </li>
<li><a href="sdfsdf.php">sdfsdfsdfsdf</a> </li>
<li><a href="sdfsdfsf.php">dlsugsdfljd</a> </li>
<li><a href="sdfsdfsdf.php">sdfsdfsf</a> </li>
<li><a href="sdfsdfdsf.php">sdfsdfsfd</a> </li>
</ul>
</li>
</ul>
</div>


J'ai retiré les vrai nom de menu, je pense pas que mes chef aprecierais que je diffuse trop d'info sur le net.. La je n'est mis que 2 boutons mais en vrai, il y en à 5 qui sont ts identique.

Voila, par contre comme dit plus haut, je pourrais pas voir la réponse tout de suite !!
Encore merci
0
Réponse 10 / 11
fxtaa Messages postés 1050 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 2 avril 2015 74
17 mars 2010 à 16:31
Je viens de basculer ton code, mais comme ca c est pas possible. Deja si je le laisse a l'état brut je vois rien. Il faut que je vire un des position absolute pour pouvoir afficher les 2 boutons.

La dernière fois que j'ai fait un menu déroulant je l'ai fait en javascript et je pense que le prochain sera directement en flash beaucuoup moin prise de tête

C est vraiment une usine à gaz ton truc la ^^.

Tiens si t as envi de tester :

https://www.alsacreations.com/tuto/lire/602-Creer-un-menu-accordeon-avec-jQuery.html
0
Réponse 11 / 11
duky
18 mars 2010 à 11:22
Bon, et ba c'est partie pour des tutos sur le javascript ! Encore merci ! Je vais mettre "résolu" sur ce post si je trouve comment faire... Car tu a bien résolu mon problème même si d'autre sont apparu.
Au plaisir de se recroiser sur le net !
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
Prélèvement "CB Google" inconnu. Arnaque ?
sandrinepommelet -
Roanisel -

29 réponses
arnaque cb google sur mon compte bancaire
patooun -
samgunsjovirow -

1 réponse