Page 1 sur 2

div fixe : pour les costauds du code

Posté : 18 janv. 2010, 11:22
par Tudgur
Bojour.
Je suis en train de modifier légèrement mon site de façon à garder une partie fixe sur la gauche lorsqu'on utilise l'ascenseur...
J'ai donc réalisé une "maquette" : tout marche impeccablement sur le PC en local avec Firefox, Safari, Chrome et IE8 (je n'ai pas essayé d'autres versions)
Mais lorsque j'uploade la maquette chez mon hébergeur, ça ne marche plus avec IE !!!
Pour les autres navigateurs, pas de problème.
Voici l'adresse de la "maquette" : http://meteo-plouguerneau.fr/div_fixe_b ... ntenu.html
Si quelqu'un pouvait m'en donner la raison en examinant le code source.
Merci

Edit : je viens de constater que c'est code .js ou le script qui perturbe cet affichage : il faudrait peut-être que je crée un fichier .css, mais ça, je ne sais pas le faire...
Je vais chercher.

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 12:54
par mm91
pour info:
ici, avec IE 7, ton menu de gauche se déplace, comme le reste, avec l'ascenceur.

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 14:23
par webmaster
Bonjour,

Ta manière de procéder est vraiment surprenante !
Le plus simple si tu travailles sur une dimension fixe, c'est de mettre une image de fond avec les bords arrondis.

Ensuite si seul la hauteur doit changer, tu peux travailler sur un tableau (en retirant marge et séparation) à trois lignes, dont la première et la dernière auront une hauteur fixe. Il ne te reste plus ensuite qu'à mettre une image dans les fonds, bas et travailler avec la même couleur sur la ligne du milieu.
Même fonctionnement en superposant trois DIV.

La même méthode est applicable avec un tableau à neuf cellules, et ton texte se retrouve sur celle du centre, ou quatre DIV imbriqués et tu places ton texte dans la dernière.
Dans la même idée chaque DIV affichera son angle (comme le tableau à neuf cellules)

Le CSS n'est pas un langage, c'est uniquement un moyen de regrouper les différents styles de chaque balises.

Tu as plein de tuto sur le net sur ce sujet précis, il suffit de taper angles arrondis !

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 15:05
par Tudgur
webmaster a écrit :Tu as plein de tuto sur le net sur ce sujet précis, il suffit de taper angles arrondis !
Justement, j'en ai passé du temps pour trouver les Roudies, Curvy Corners et autres Nifty Corners...
C'est surtout Curvy Corners que j'utilise sur mon site.
Il faut toujours un fichier .js pour ce satané IE qui fait toujours bande à part.
Si tu regardes le code source, il n'y a pas d'images et il passe avec les arrondis même sous IE 7 et IE 6 (mais pas IE 5.5)
D'après les pros, un site devrait être "tableless" : j'essaye donc au maximum d'éviter les tableaux.
Une image, oui pourquoi pas, c'est ce qui existe actuellement pour l'entourage de ma bannière et le bas de page : c'est faisable puisque je pense que la future partie gauche du site sera de taille fixe. Le problème avec les images, c'est que selon la connexion que l'on a, on les voit s'afficher une à une.
Je voulais donc tout faire en Html.

Pour IE7, c'est normal puisqu'il est pire qu'IE8 !

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 15:05
par Tudgur
Tudgur a écrit :Bojour.
Je suis en train de modifier légèrement mon site de façon à garder une partie fixe sur la gauche lorsqu'on utilise l'ascenseur...
J'ai donc réalisé une "maquette" : tout marche impeccablement sur le PC en local avec Firefox, Safari, Chrome et IE8 (je n'ai pas essayé d'autres versions)
Mais lorsque j'uploade la maquette chez mon hébergeur, ça ne marche plus avec IE !!!
Pour les autres navigateurs, pas de problème.
Voici l'adresse de la "maquette" : http://meteo-plouguerneau.fr/div_fixe_b ... ntenu.html
Si quelqu'un pouvait m'en donner la raison en examinant le code source.
Merci

Edit : je viens de constater que c'est le code .js ou le script qui perturbe cet affichage : il faudrait peut-être que je crée un fichier .css, mais ça, je ne sais pas le faire...
Je vais chercher.

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 16:18
par webmaster
Ça dépend le poids de l'image, juste une bande en haut et en bas, c'est une centaine d'octets !

Pour exemple http://rieux-marne.net/test.html

Après avec ou sans tableaux, c'est un autre débat. Les pro pensent ce qu'ils veulent, mais la bible reste pour moi le W3C, et les tableaux restent acceptés....
Autre débat également du combat d'IE et des autres, perso je pense comme toi qu'IE a de grosse lacunes, mais quand je vois des tags de class qui ne fonctionnent que sous Firefox que penser ?

Pour moi ce n'est pas trop aux visiteurs d'acheter la machine et le navigateur capable d'afficher ta page, mais à nous de prendre soin que nos page s'affiche correctement au moins jusqu'à IE6.
Et que des DIV avant IE7, ce n'est pas gagné !
Ce n'est qu'un avis personnel et je m'égare un peu....

La page test fonctionne chez tous le monde pour les navigateurs actuels, bug sous IE6 je ne comprends pas trop pourquoi mais ça doit pouvoir s'arranger, je n'ai pas IE7 sous le coude, mais je pense que ça doit passer également.
Ensuite rien de plus simple que de fixer ton DIV en haut de page comme tu le faisais précédemment, qu'en penses-tu ?

PS, ne bug plus sur IE6, j'ai trouvé une parade !

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 17:21
par mm91
Pour IE7, c'est normal puisqu'il est pire qu'IE8 !
webmaster a écrit : ..............Pour moi ce n'est pas trop aux visiteurs d'acheter la machine et le navigateur capable d'afficher ta page, mais à nous de prendre soin que nos page s'affiche correctement................
Ouf ! tu me rassures !....

Voir tous les sites Internet qui demandent à ta propre machine de travailler !

Le meilleur exemple étant le site de Météo-France: quand on se plaint de l'extrème lenteur à afficher les page, il nous est toujours répondu que c'est de la faute de notre PC.
Moi je pense que c'est surtout la faute à la publicité !

Merci aux météo-amateurs de ne pas suivre le même chemin !

J'ai bien compris qu'il y avait un compromis à trouver: les techniques évoluent et c'est normal d'en profiter (des deux côtés)
Mais justement, s'il y a compromi, les deux "opposants" doivent pouvoir s'exprimer.

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 17:28
par Tudgur
webmaster a écrit :Pour moi ce n'est pas trop aux visiteurs d'acheter la machine et le navigateur capable d'afficher ta page, mais à nous de prendre soin que nos page s'affiche correctement au moins jusqu'à IE6.
Tu as tout à fait raison et cela m'a demandé énormément de temps pour rendre mon site actuel compatible avec tous les navigateurs.
webmaster a écrit : La page test fonctionne chez tous le monde pour les navigateurs actuels, bug sous IE6 je ne comprends pas trop pourquoi mais ça doit pouvoir s'arranger, je n'ai pas IE7 sous le coude, mais je pense que ça doit passer également.
PS, ne bug plus sur IE6, j'ai trouvé une parade !
Dans ton code, je ne comprends pas pourquoi tu fais appel à une image de fond (bas.gif) pour la div bas alors que tu la mets dans la div.
Pour la div haut, tu ne le fais pas...
Et ta parade, elle est déjà dans la source ?
Comment fais-tu tes images arrondies ? un fichier html que tu captures ensuite ?
Je fais avec un .js, (roundies) puis je capture la partie qui m'intéresse avec FastStone Capture ; il y a sans doute beaucoup plus simple...
webmaster a écrit : Ensuite rien de plus simple que de fixer ton DIV en haut de page comme tu le faisais précédemment, qu'en penses-tu ?
De quelle div parles-tu ? Et précédemment, c'était quand ? Je ne comprends pas.
Au fait, Div, c'est masculin ou féminin ? C'est comme on veut ?

PS : j'avais édité mon précédent message et il a été considéré comme un nouveau message !

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 18:20
par webmaster
Tudgur a écrit : Dans ton code, je ne comprends pas pourquoi tu fais appel à une image de fond (bas.gif) pour la div bas alors que tu la mets dans la div.
Pour la div haut, tu ne le fais pas...
Demande à Bill Gates !
C'est la parade pour IE6.....
Tous est dans la source comme tu peux le voir, pas de fichier CSS ou JS.
Tudgur a écrit : Comment fais-tu tes images arrondies ? un fichier html que tu captures ensuite ?
Je fais avec un .js, (roundies) puis je capture la partie qui m'intéresse avec FastStone Capture ; il y a sans doute beaucoup plus simple...
Oui n'importe quel logiciel de dessin ou retouche photo !
Tudgur a écrit : De quelle div parles-tu ? Et précédemment, c'était quand ? Je ne comprends pas.
Au fait, Div, c'est masculin ou féminin ? C'est comme on veut ?
Une balise DIV ou un DIV, mais cela n'engage que moi :lol:
Je parle de celle qui te posait problème au départ.

Code : Tout sélectionner

<div id="cote_gauche" style="position: fixed; float: left; width: 160px; margin-top: 0px;" class="cote_gauche">
Si tu places le code que j'ai écris dans ces DIV, puisqu'il n'y aura plus de JS cela devrait fonctionner.

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 18:46
par Tudgur
Bizarrement, voilà ce que j'obtiens avec ton code (j'ai laissé le fond gris volontairement).
http://meteo-plouguerneau.fr/div_image.html
Où est l'erreur ?
Mes images font 1px de moins en hauteur...
Ps : les logiciels de dessin, je ne maitrise pas...

Re: div fixe : pour les costauds du code

Posté : 18 janv. 2010, 19:52
par webmaster
Alors là !
Essaye avec une image de onze pixels pour voir, c'est un truc de fou.
Sinon en laissant uniquement l'image en fond de DIV ça va fonctionner, mais tu perds la compatibilité avec IE6.

Re: div fixe : pour les costauds du code

Posté : 19 janv. 2010, 09:41
par Tudgur
Bonjour.
Je n'ai pas essayé avec une image plus grande.
Lorsque ma page ne contient que 2 blocs div, sans javascript, ça marche :
http://meteo-plouguerneau.fr/div_fixe0.html
Geovisite fait pourtant appel à un javascript...

Et dès que je mets du contenu (avec java) dans la partie droite, IE ne tient pas la route...
Je crois que je vais abandonner mon projet...
Ou alors essayer avec une iframe dans la div de gauche...
Merci.

Re: div fixe : pour les costauds du code

Posté : 19 janv. 2010, 10:17
par webmaster
Bonjour,

Le JS de Geovisite ne vient pas modifier un élément de ta page non plus !
Tu baisses les bras bien vite, allez on se motive.
Change la dimension de ton image, ça plante à 9 pixels, pas de chance, mais pourquoi 9 pixels ? ? ?
Ça déconne à 15 et fonctionne à 16 ou 17, après pourquoi chercher des problèmes et ne pas prendre une valeur qui fonctionne ?

Re: div fixe : pour les costauds du code

Posté : 19 janv. 2010, 10:44
par Tudgur
Je n'ai pas tout à fait abandonné, mais...
Voilà ce que j'obtiens en mettant mon code ans une div qui est elle même dans la div de gauche. (idem à droite) :
http://meteo-plouguerneau.fr/div_fixe02.html
Cela fonctionne sous IE8 mais pas IE6 ! la div de droite reste à droite mais en dessous de celle de gauche qui de toute façon ne reste pas fixe...
Le problème semble insoluble dans ma configuration.
Encore que, si ça marchait sous IE7 : il n'y a plus beaucoup d'utilisateurs d'IE6...

Re: div fixe : pour les costauds du code

Posté : 19 janv. 2010, 20:18
par webmaster
Bonsoir,

Avec le JS cela me parait impossible !
Le code avec une image de 10 pixel fonctionnait-il avec un DIV fixe sous IE6 ?