[Intermédiaire] site ÜBERBRÜCKEN

Bonjour à tous,

J'ai créé cette page

http://www.stiftung-ueberbruecken.de/_NEU/ziele.html

à partir du gabarit d'Asacréations n°10 : http://www.alsacreations.com/static/gabarits/modele10.html. Il s'agit d'une ébauche de réécriture complète du site internet d'ÜBERBRÜCKEN, une jeune fondation allemande travaillant sur les traumatismes de guerre pour laquelle je travaille.

Or j'ai un énorme problème : On voit bien en bas à gauche un graphique (159*600) qui est celui d'une tête en profil noire avec des trous blancs. Or, tandis que sur mon ordi (Firefox & Safari sur Mac, résolution d'écran 1920*1200) tout se passe à merveille, tout change lorsque je vérifie sur mon vieux PC (Firefox & IE6 résolution d'écran 1280*1024). Là en effet la tête de profil noire devient proportionnellement/anormalement plus grosse, et pour une apparence plus correcte je suis obligé de réduire manuellement la taille générale du contenu du navigateur avec les touches du clavier. Ce faisant, la taille du graphique en background redevenant correcte, elle n'est éventuellement plus masquée par le contenu central et un espace "décent" réapparait entre elle et ce dernier, mais la police d'écriture devient trop petite, illisible pour certaines personnes. Et c'est la même chose sur les vieux ordis Windows au bureau, ce qui n'est pas très glorieux vis à vis de mes collègues et chefs.

N'ayant aucune idée du pourquoi du comment, je voudrais savoir s'il existe une solution à ce problème, puisque l'utilisateur lambda ne doit pas forcément découvrir le site avec une taille exagérément grosse du contenu total, ce qui a pour conséquence de trop rapprocher le graphique en background

body {
	font-size: 80%;  
	background-attachment: fixed; 
	background-image: url(img/kopfhell_schw.gif);
	background-position:bottom left;
	background-repeat: no-repeat; 
	background-color: #566c9e;
}

du contenu central

<div id="global">

...voire même d'en cacher même une partie derrière ce dernier !

Ou y a t'il une erreur générale dans le code css http://www.stiftung-ueberbruecken.de/_NEU/basis.css & http://www.stiftung-ueberbruecken.de/_NEU/styles.css ?

Je vous remercie vivement à l'avance pour vos remarques et vos conseils !

Cordialement,
Florent

Bonjour, des erreurs html

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.stiftung-ueberbruecken.de%2F_NEU%2Fziele.html


et des erreurs css

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.stiftung-ueberbruecken.de%2F_NEU%2Fziele.html

si le problème n'apparaît que sur ie6... tu peux laisser tomber ou ne pas afficher l'image pour ie6

Merci Pascal pour les liens Je comptais le faire bientôt mais là je vais potasser tout ça...

En fait ça serait trop beau si le problème n'apparaissait que sur IE6, mais il apparait aussi sur PC+Firefox dernières versions...

Si c'est un problème de proportion (l'image n'est pas redimensionnée puisqu'elle est l'image de fond du body) c'est lié aux différentes résolutions des écrans...

Il faut essayer avec css3 pour redimensionner le fond ( http://www.alsacreations.com/tuto/lire/808-arriere-plans-css3-background.html )
ou en javascript avec quelque chose comme ça : http://www.buildinternet.com/project/supersized/

une autre solution serait (peut-être) de tester la largeur d'écran avec les media queries (ou en js) et d'appliquer une règle css pour chaque cas (ou une image plus petite pour les écrans plus petits que le 1920 x 1200 ! )

ou mettre l'image dans le html dans une div à width:100% (avec pour parent body) et appliquer à l'image une taille adaptée (20% ?) et placer la div en absolute.