28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Tout d’abord je vous félicite pour ce site et notamment la partie tutoriels…

Je suis un apprenti webmaster et je me fais la main sur un petit site.

Pour cela j’ai récupéré un gabarit CSS sur le présent site (merci alsacréations !) que j’ai ensuite personnalisé.

Les balises html utilisées sont des div id.

Le site est basé sur un conteneur d’une largeur de 750 pixels contenant un header de 100 pixels. Juste en dessous, il y a une barre de menu horizontale de 20 pixels de haut. Dessous il y a un menu à gauche et un autre à droite qui font tous les deux 150 pixels de large sur 300 de haut. Les menus encadrent la zone centrale de 300 pixels de haut à laquelle j’ai affecté un ascenseur. Enfin en bas il y a un petit pied de page de 20 pixels de haut.

Il s’agit d’un site « graphique » dans la mesure où ses dimensions doivent rester fixes car liées à une image de fond que je ne souhaite pas déformer.

C’est justement à cause de cet arrière plan que j’ai un problème. Voilà ce que j’ai fait :
J’ai préparé une image de fond entière au dimension globale de mon site (750*440 px). Ensuite j’ai découpé l’image en fonction de mes différents blocs. Ensuite j’ai inséré chacune de mes parties d’images via les règles de style correspondant à mes différents div.

Cela a très bien fonctionné, du moins sous Firefox (v.2). Mais pas sous Internet Explorer (v. 6 et 7). Le problème sous I.E était que le background situé dans ma zone centrale bougeait en même temps que l’ascenseur.

J’ai fait des recherches sur Internet pour solutionner ce problème et j’ai vu qu’il fallait rajouter la valeur « fixed » à la propriété background au niveau des CSS. Mais il semble que cette propriété ne soit pas reconnue sous Internet Explorer. Au début j’ai cru que ça ne concernait que la version 6 mais il s’est avéré que l’arrière plan bougeait aussi avec la version 7.

Depuis une semaine j’écume quotidiennement différents sites et forum. J’ai constaté que ce problème de background fixed lié à un scroll était bien connu. J’ai testé de nombreuses combinaisons différentes mais rien à faire, j’ai toujours ce problème d’affichage avec Internet Explorer…

Hier j’ai testé une nouvelle bidouille… J’ai lu que I.E ne reconnaissait pas la propriété fixed du background au niveau des div id mais au niveau du body. J’ai donc supprimé mon arrière plan au niveau de la règle de mon div id central où il y a le scroll et l’ai mis dans la règle de mon body en paramétrant sa position pour qu’il vienne se caler auniveau de ma zone centrale…

J’ai réussi à aboutir à quelque chose de bien sous Internet Explorer 6 mais cette fois-ci ça a buggué sous Firefox 2…

Là je ne sais plus trop quoi faire. J’ai l’impression que mon code source commence à souffrir de toutes ces combinaisons effectuées…

Je suis un peu perdu… Quelqu’un peut m’aider ?

Voici l’adresse où ça se passe (sachant qu’actuellement la version en ligne est celle où j'ai mis le background dans le body) :

http://moreibiza.free.fr/

Que me conseillez vous de faire ? La bidouille consistant à mettre l’arrière plan qui doit rester fixe dans la règle du body plutôt que du div concerné est elle la bonne voie ?

Merci de votre aide !

manolo
Bonjour et bienvenu sur le forum Smiley smile

D'après ce que j'ai lu, tu comptes faire un site de taille fixe en hauteur et en largeur. Ce n'est pas ce qu'il y a de plus conseillé, mais ce n'est pas exactement le cœur du problème. Smiley cligne

Ceci dit, j'ai une petite question : pourquoi t'embêter à découper ton design ?
Dans l'optique où celui-ci va rester en l'état, tu peux directement le mettre en background de ton élément conteneur, non ? Smiley rolleyes
salut et merci pour ta réponse !

ah bon on n'est pas obligé de tout découper ? Smiley eek

je me serais compliqué les choses alors...

bon bah je vais essayer de mettre l'image entière dans le conteneur...

encore merci !

manolo
manolo25 a écrit :
ah bon on n'est pas obligé de tout découper ? Smiley eek

Non, on n'est pas obligé. On découpe quand c'est nécessaire, tout simplement.

manolo25 a écrit :
je me serais compliqué les choses alors...

Effectivement.
bonjour,

j'ai fait un test en mettant mon image dans la règle du conteneur, comme on me l'avait judicieusement conseillé, et le résultat semble concluant. merci Cygnus !

je dis "semble" car je ne l'ai pas encore testé sous IE7 ni firefox 3... Dans IE6 j'ai quand même un petit truc bizarre, à savoir une petite barre juste sous mon footer. comme cette barre est jaune sur fond blanc ça ne se remarque pas trop mais c'est quand même étrange...

les choses avances ! Smiley ravi

manolo
manolo25 a écrit :
Dans IE6 j'ai quand même un petit truc bizarre, à savoir une petite barre juste sous mon footer. comme cette barre est jaune sur fond blanc ça ne se remarque pas trop mais c'est quand même étrange...

Je viens de regarder le résultat sous IE6 et 7, et... je ne vois rien d'étrange.
Tu aurais une capture d'écran sous la main ? Smiley rolleyes

D'autre part, je te conseille d'utiliser firebug pour inspecter un peu ta page.
Il te sortira notamment toutes les instructions css inutiles dont tu peux te séparer.

Bonne continuation Smiley cligne