Problème d'affichage lorsque la fenetre du browser s'agrandie

Bonjour,


Je travail sur un site Web www.philiance.com en ce moment et j'ai remarqué un problème, en effet lorsqu'on agrandi la fenêtre de navigateur ( pas zoomer ) en enlevant des barres d'état, les liens-image situés tout en haut grossissent et pixélisent.

Je pense qu'il faudrait faire les liens-image en image vectorielle ou bien obliger les images à ne pas grossirent lorsque que la fenetre du navigateur s'agrandie ( FireFox et IE ).

Voilà le code qui appele les images-liens :

.accueil {	
	position:absolute;	left:10%;	top: 2%;	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/accueil.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.informations {
	position:absolute;	left:20%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/informations.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.offre {
	position:absolute;	left:30%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/offre.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.documents {
	position:absolute;	left:40%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/documents.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.contact {
	position:absolute;	left:50%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/contact.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}

.accueil2 {	
	position:absolute;	left:10%;	top: 2%;	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/accueil2.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.informations2 {
	position:absolute;	left:20%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/informations2.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:3;	}
.offre2 {
	position:absolute;	left:30%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/offre2.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.documents2 {
	position:absolute;	left:40%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/documents2.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}
.contact2 {
	position:absolute;	left:50%; 	top: 2%; 	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./pics/contact2.png", sizingMethod="scale");	height:5%; width:9.5%;	z-index:2;	}

J'attend votre aide avec impatience .

Bonjour,

AlexandreA a écrit :
les liens-image situés tout en haut grossissent et pixélisent

C'est effectivement le risque couru avec des tailles fixées en pourcentages.

En fait, c'est un peu du grand n'importe quoi comme méthode pour positionner et dimensionner tes éléments.
Et il n'y a pas que le positionnement des éléments qui est concerné :
- la page se recharge toutes les cinq secondes (hallucinant ) ;
- ton Doctype est tronqué, et fait donc passer Internet Explorer en mode Quirks (mauvais plan) ;
- la mise en page est faite à coup de tableaux et de balise <font>...

Bref, le conseil que je te donnerais et que beaucoup ici te donneront, c'est :
1 - Apprends les bases de la conception web de qualité avec HTML et CSS (les tutoriels d'Openweb et d'Alsacréations sont vraiment bien pour ça, mais il faudra peut-être commencer par un cours de base sur HTML ou XHTML, pour revoir certaines bases, notamment les notions de balisage sémantique de de séparation strucutre/mise en forme).
2 - Refais complètement le site sur de bonnes bases (celles vu en (1)).
Modifié par Florent V. (16 May 2007 - 15:29)

Oui, merci du conseil.

En effet, le site était déja fait et bon j'ai vite remarqué que l'utilisation des table est récalcitrante, je commence à arranger cela on faisant des div qui sont + legers et facilement manipulables.