Forums Développement Multimédia

Aller au contenu

Problème d'affichage : à mon tour !

CODE HTML CSS

30 réponses à ce sujet

#1 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 03 March 2011 - 17:14 PM

Bonjour, alors voilà, je me remets à Dreamweaver et au développement de site internet.
Dans un premier temps, je cherche à me réadapter à tout cela en m'entrainant. Seulement voilà, dans un premier temps, connaissant les magnifiques incompatibilités entre les navigateurs (ex : Explorer et Firefox), je cherche un moyen de résoudre définitivement ce problème. Je précise que je me suis pas mal renseigné sur cela en trouvant des astuces sur quelques sites comme la fameuse commande du type <!--[ if IE lt 7]>....<! [endif] -> ou les différentes feuilles CSS prédéfinies par exemple.
Mais sur ces point-là, j'y reviendrai un peu plus tard...

Actuellement, dans le cadre de mon entrainement, je revois les tableaux, en en réalisant un très simple avec un code que je ne pense pas être si mauvais bien qu'il comporte peut-être des imperfections de débutant. Seulement voilà, immédiatement après avoir réalisé mon tableaux, j'ai testé pour voir si aussi bien dans explorer que dans firefox, il marchait...et bien verdict...NON ! Quel étonnement hein ?!

Enfin j'avoue quand même que je ne m'attendais pas à rencontrer un problème si rapidement par un simple tableau ! Après vérification d'une page Web entière, ok, mais là...

Toutefois, j'ai pu remarquer que si sur Explorer, le tableau rendait comme il fallait, ce n'est pas le cas sur Firefox ou l'ensemble reste soudé mais se décale vers le bas à droite de mon contenu.
Alors voilà qu'étant donné que je ne pense pas mon code si mauvais que ca (doit pas y avoir 50 façon de l'écrire), je commençais à me demander si les histoire de Explorer qui entraine des bugs et tout ca, et bien ce n'était pas plutôt l'inverse, c'est à dire Firefox, qui en entraine ?
Car lorsque je tape mon code, encore une fois, je ne vois vraiment pas ce qu'il ya à améliorer pour empêcher le bug et si je partais d'un base Firefox pour qu'il soir correct, je ne vois pas comment changer cette façon d'écrire qui me semble déjà bonne dans la méthode.

Voilà mon code HTML et CSS et les rendus sous les deux navigateurs...

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Test.css" type="text/css" rel="stylesheet"/>
</head>

<body>
        <div id="conteneur">
                <table>
                <tr>
                        <td colspan="4">TITRE</td>
                                </tr>
                <tr>
                <td>Case 01</td>
                    <td>Case 02</td>
                    <td>Case 03</td>
                    <td>Case 04</td>
                                </tr>
                <tr>
                        <td colspan="2">Sous Case 01</td>
                    <td colspan="2">Sous Case 02</td>
                </tr>
                <tr>
                        <td colspan="4">THE END</td>
                </tr>
                        </table>
        </div>                          
</body>
</html>

@charset "utf-8";
/* CSS Document */

#conteneur {
                height:200px;
                width:400px;
                background-color:#FFCC00;
                border:solid 2px;
                }

table {
                height:190px;
                width:390px;
                background-color:#FFFFFF;
                margin:10px;
                }

tr {
                height:42px;
                width:385px;
                background-color:#00FFFF;
                text-align:center;
                }
               
td {
                height:42px;
                width:385px;
                background-color:#00FFFF;
                text-align:center;
                }

Merci pour vos éclaircissements, c'est vraiment très important et comme je l'ai dit, j'aurai encore des choses à demander plus tard, mais déjà voyons ca...

Modifié par nicky14, 03 March 2011 - 17:29 PM.


#2 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 03 March 2011 - 17:23 PM

http://img638.images.../exploreraq.jpg

http://img835.images...81/firefoxh.jpg

Modifié par nicky14, 03 March 2011 - 17:25 PM.


#3 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 03 March 2011 - 18:41 PM

Bonsoir nicky14,

j'espère que tu n'es pas en pleine hérésie :idea:

Es-tu en train de tenter de faire un layout avec des tables par hasard ?

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#4 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 03 March 2011 - 19:23 PM

Bonsoir nicky14,

pour résoudre ton problème n'impose pas de width et height à l'élément table :idea:

CSS
table {
background-color:#FFFFFF;
margin:10px;
}

Ren
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#5 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 03 March 2011 - 19:54 PM

Ah...il se pourrait bien que j'ai bu quelque chose de travers en effet... :oops:
C'est dur de s'y remettre !! :neutral:

Merci beaucoup pour l'aide ! Ca marche et maintenant je sais ca.
J'avais des doutes sur certains points autour de la table j'avoue, mais je pensais pas à ca exactement quand même...

A vrai dire autrement, question compatibilité entre Firefox et Explorer, selon mes travaux, soit sur l'un soit sur l'autre, ca bug.

Je reviendrais, comme annoncé plus haut...
++

Modifié par nicky14, 03 March 2011 - 19:56 PM.


#6 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 03 March 2011 - 20:12 PM

J'aurai quand même une question...

Pourquoi cela n'a pas marché avec Firefox alors que cela s'affichait bien dans Explorer ? Est-ce parce que Explorer supporte mieux les erreurs que Firefox comme il m'avait semblé le lire ?
Je me rappelle plus beaucoup des règles pour la "table" dans le CSS, il ne faut jamais de width et height alors ou c'est juste spécifique à mon cas ici?
Car il me semble avoir déjà tapé ces valeurs par le passé et sans souci ensuite entre les deux navigateurs...enfin je vais revoir ca pour confirmer ou pas...

Modifié par nicky14, 03 March 2011 - 20:14 PM.


#7 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 03 March 2011 - 20:53 PM

Bon apparemment, soit on met des height et width dans "table" soit dans les "tr" et "td" mais pas dans tous alors car les valeurs sont déjà définies. J'ai des travaux avec soit l'un soit l'autre, et entre les deux navigateurs, beh ca marche.
Je sais pas si c'est ca exactement mais c'est bien pour ca que je disais que j'avais des doutes sur la "table" au sens large. J'ai du mal à re-cerner certains points là-dessus...

#8 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 13 March 2011 - 19:43 PM

Me revoilà ! Alors je vais utiliser le même topic car cela concerne encore un problème d'affichage.

J'ai besoin de réaliser un site en design extensible et comme on le sait, ce n'est pas aussi simple que le design fixe bien entendu.
J'ai fait pas mal de recherches et j'ai trouvé plusieurs pistes qui tournent toutes autour de la même chose avec les histoires de html et body avec des marges à 0, des pourcentages etc etc...Seulement après avoir visualisé l'ensemble de ces solutions, aucune ne m'est très claire et même si tout tourne autour de la même chose, selon les exemples, ce n'est pas tout à fait pareil alors je m'y perds un peu...

Je sais que ce n'est pas conseillé mais j'ai besoin pour créer mon site d'avoir une image en fond et pour le moment, rien devant à part un menu/bouton "entrer". En fait, cela serait une page d'accueil avant d'entrer sur le site qui présenterait l'ensemble en prenant toute la taille de l'écran.
Seulement voilà, bien évidemment, j'ai aussi besoin de l'adapter selon la résolution des visiteurs. Sur cela aussi j'ai fait des recherches sur plusieurs sites connus ou pas comme celui-ci qui me donne une astuce utile mais pas suffisamment convaincante malgré tout...
Mon lien

Alors voilà ma question, que me conseillez-vous comme code à rentrer exactement pour réaliser tout cela ?

Modifié par nicky14, 13 March 2011 - 19:45 PM.


#9 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 14 March 2011 - 12:51 PM

Bien alors, j'ai effectué de nouveau quelques tests en me basant sur le code source de cette page:
http://www.cssplay.c...background.html

J'ai changé l'image de fond mais voilà que je rencontre quelques problèmes. Si sur le site ci dessus l'image de fond du lapin semblent correctement proportionné, celle que je rajoute, peu importe sa définition que je calibre dans photoshop, elle se retrouve toujours compressée par le navigateur. Alors là déjà je comprends pas car comme je disais, le lapin lui semble correctement proportionné et non-compressé...
J'ai remarqué toutefois qu'en fait, mon image n'était pas si compressée que ca en réalité. Effectivement, elle l'est selon le nombre de barres de menus en haut du navigateur. Moins il y en a, plus l'image s'affiche correctement proportionnée.
Mais bien entendu, je ne veux pas que les menus en haut définissent la répartition de l'image. Je veux que l'image soit déjà correcte peu importe la quantité de barres de menus en haut. Comment faire cela ?



Finalement, après nouvel essai entre Firefox et Explorer qui chez moi ont des barres de menus plus ou moins hautes, le lapin est aussi réparti différemment selon.
Je me doute bien donc que c’est une histoire de définition mais comment faire en sorte que l’image de fond soit le plus proche possible proportionnellement à son origine ? Car peu importe comment l’on change sa définition dans Photoshop, c’est toujours pareil. Je me doute bien là aussi que cela vient sans doute des body et html à 100% et que répartir l’image proportionnellement dans le navigateur n’est pas possible entièrement surtout si elle n’a pas une définition égale à celle du navigateur du genre un 1280x1024 alors que le navigateur serait en 1280x768 par exemple. Il y aurait obligatoirement des parties de l’image rognées.
Mon image est en 1280x960 et mon écran en 1280x1024. Alors voilà pourquoi en 100% en CSS, ca s’étire…Mais ca s’étire si en plus il ya des barres de menus en haut, et si j’en enlève, ca devient de plus en plus proportionné. Mais on ne peut pas non plus enlever tous les menus !!!
Alors comment faire pour que l’image soit le plus proportionné possible, peu importe le nombre de menus ?

Même si je suis peut-être largué sur certains points, ce n’est pas en restant tout seul dans mon coin que je vais résoudre ca. Alors répondez-moi SVP que je ne parle pas tout seul. Je ne demande qu’à apprendre et comprendre, et j’ai fait des recherches sur des problèmes similaires mais là, j’ai besoin d’une aide sur un problème spécifique à mon cas.
Je n’ai pas de code à fournir à part ceux des exemples des sites que je cite sur lesquels je me base dans un premier temps afin de régler et comprendre les notions de définition. Voilà pourquoi comme je le disais dans mon premier message, que me conseillez-vous comme code précis à entrer dans mon cas, soit une image de fond correctement proportionnée ou qui s’en approche le plus pour un design extensible ?

Merci.

#10 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 14 March 2011 - 20:43 PM

Bonsoir.
Comment as-tu définit dans ta CSS la taille de ton image ???

Si tu regarde bien ton exemple, l'image s'étire aussi dans le sens de déformation de la fenêtre lors de son redimensionnement !
Il n'y a pas vraiment de solution à ton problème hormis ne renseigner que la hauteur OU la largeur mais surtout pas les deux.

#11 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 15 March 2011 - 11:44 AM

Merci pour ta réponse.

Je continue mes essais et il semble que je touche au but en trafiquant effectivement soit la hauteur soit la largeur en partie. Je reviendrais si je suis à nouveau dans l'impasse mais tant que j'avance, je veux le faire, le voir, le constater et l'analyser par moi-même jusqu'au possible, en espérant toutefois ne pas mal avancer sans m'en rendre compte vu mon inexpérience...

De toute manière, en fonction de la définition de l'image et du navigateur, ce n'est pas possible d'afficher une image entièrement et proportionnée sur la largeur et la hauteur. Voilà pourquoi des barres de défilement apparaissent dans tous les cas soit à l'horizontal soit à la vertical ou les deux.
A ce propos justement, on parle de définition d'écran, mais y-en a t-il pas aussi une pour le navigateur ? Car mon image est en 1280x960, mon écran en 1280x1024 mais sur le navigateur, pour ne pas entrainer l'affichage de barres de défilement, il faut une définition de 1263x797 environ. Cela semble lié en fonction de la hauteur des menus en haut du navigateur.

Je débute plus ou moins sur la programmation de site. Je sais que le design extensible n'est pas conseillé aux débutants mais j'aimerais faire ca alors voilà...
Voilà le genre de site que je souhaiterais approcher : http://gregoryronot-...-un-coup-doeil/ mais avec avant cela une page d'intro avec image de fond et bouton/menu "entrer".

#12 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 15 March 2011 - 15:34 PM

Heuuu, ton dernier lien mène sur un site dont l'image n'est pas extensible.
Pour cet exemple tu places en fond une image assez grande pour pouvoir recouvrir un moniteur de grande taille et tu centres sa position.

#13 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 15 March 2011 - 17:11 PM

Oui, mais je voulais juste montrer le design que je souhaite. En gros que ca prenne la taille entière du navigateur avec le côté extensible en plus tout de même et adaptable pour toutes résolutions donc.

Merci pour le conseil, je testerais.

#14 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 15 March 2011 - 19:31 PM

Ça c'est faisable assez facilement sans avoir d'image extensible et donc déformable.

#15 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 15 March 2011 - 19:44 PM

C'est-à-dire ? Tu veux dire qu'il est possible d'obtenir une image sur le fond global sans qu'elle soit extensible ni adaptée pour toutes définitions ? Mais alors comment faire pour qu'elle change selon la définition en fonction des visiteurs dans ce cas-là ?

<body>
 
<div class="arriere"><img alt="" src="Photo0748-1.jpg" /></div>
 
</body>

html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
max-width:1600px;
min-width:640px;
}
 
#arriere {
position: absolute;
}
 
.arriere img {
width : 100%;
}
</html>

Avec cela, inspiré d'un code pour aider sur le net, j'ai bien mon image de fond sur toute la largeur et répartie proportionnellement avec la hauteur automatique.
L'image d'origine est en 1280x960. Si je réduis ma définition à 800x600, l'image est bien redimensionnée et entière autant sous Firefox que Explorer.
Ca serait bon à partir de là ?

#16 Ren

  • Moderateur
  • PipPipPipPipPipPipPipPip
  • 600 messages

Posté 16 March 2011 - 21:11 PM

Bonsoir nicky14,

voici un article passionnant qui répondra à toutes les questions que tu te poses à ce sujet !
Je pense que tu vas le dévorer :neutral:

http://css-tricks.co...ackground-image

Voici le site qui montre le résultat : http://ringvemedia.com

Ren.
---------- anonymation - Studio de création ----------
www.anonymation.com - blog.anonymation.com
---------------------- Projets internes ---------------------
www.mavoiturealouer.com - www.cosplay-it.com

#17 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 17 March 2011 - 11:07 AM

Merci beaucoup ! Très intéressant en effet l'aperçu. Je vais voir ca...

#18 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 17 March 2011 - 20:27 PM

Bien alors, en l'état actuelle des choses, comme je l'ai précisé, j'arrive à obtenir une image sur le fond intégral et qui s'adapte à d'autres définitions écran correctement sans trop de déformation.

Cela dit, ce que je cherche à réaliser actuellement, c'est un bouton "entrer" situé sur une zone bien précise de l'image de fond. Ce bouton sera en fait une petite image comprenant un lien qui amènera ensuite sur le site en lui-même. Sur ma définition normale, j'ai réussi à placer parfaitement cette image/bouton/lien (appelez-y comme vous voulez), mais le problème se pose pour l'adapter et le conserver à la même place en fonction des différentes définitions.
J'ai fait plusieurs essais sans succès et continue à chercher. Ici, contrairement à l'image de fond, je n'ai pas à signaler un étirement sur 100% et ce sont ces nouvelles données à rentrer qui me perturbent...
Alors voilà, que me conseillez-vous comme code à rajouter pour réaliser cela ? Merci.

<body>

<div class="arriere"><img alt="fond_site" src="Intro31.png" /></div>
<div class="entrer"><a href="#"><img alt="bouton_entrer" src="entrer.png" /></a></div>
</body>

html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
max-width:1600px;
min-width:640px;
background:#000000;
}

#arriere {
position: absolute;
}

.arriere img {
width : 100%;
}

.entrer img {
        position: absolute;
        left: 877px;
        top: 338px;
}

a img {
border:0;
}
 

Modifié par nicky14, 17 March 2011 - 20:31 PM.


#19 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 17 March 2011 - 20:38 PM

Bonsoir.
Faudra chercher le bon pourcentage mais si tu souhaites que ça soit extensible, il faut toujours éviter les pixels comme mesure.

PS : Excellent ton lien Renaud mais c'est du CSS3 donc faire gaffe aux "vieux" navigateurs et leur proposer une alternative. Oupps, je viens de lire jusqu'au bout !!!


#20 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 17 March 2011 - 21:04 PM

Ah alors il me suffit juste à travers le code que j'ai rentré et ".entrer img" d'afficher des pourcentages ? Si c'est juste ca ca devrait aller vite même si faut le faire % par %...

#21 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 17 March 2011 - 21:21 PM

Si ton image se redimensionne bien ça pourrait peut-être fonctionner, je ne sais pas, je n'ai jamais fais de tels essais.
Ce que tu cherches à faire là est assez ardu, faut faire des tests et voir le comportement et surtout tester sur les navigateurs différents…
Apparemment pas gagné d'avance mais tu as l'air acharné.

#22 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 17 March 2011 - 23:06 PM

Oui, je sais que je commence pas forcément par ce que les débutants devraient...

J'ai testé avec des pourcentages, et même si j'arrive à le placer là ou je veux avec, une fois que je teste sur une nouvelle définition, ca se décale.
Mais je vais continuer à tester, j'ai d'autres idées.

Merci bien.

#23 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 18 March 2011 - 11:00 AM

Bien alors j'ai continué mes tests hier soir et même si j'ai encore des idées, ca reste assez ardu oui...

Mon image/bouton, une fois positionnée correctement en 1280x1024 se retrouve réduite correctement en 800x600 et reste sur le même axe verticale mais par contre, elle se décale sur le haut.
J'ai touché à toutes les valeurs possibles de pourcentages en gardant le code ci-dessus sur le ".entrer img" mais rien n'y fait une fois que je change de définition.
Il doit pourtant bien y avoir un moyen de faire cela même si c'est compliqué...Mais que cela soit un code spécifique à rentrer ou une intense réflexion, je commence à douter un peu là...

Il est possible de faire un site extensible adapté pour toutes définitions quand ca concerne une image de fond ou un fond tout court, et aussi quand il comprend des blocs de menus par-ci par-là comme j'ai pu le voir sous différents tutoriels. Cela dit, faire ce que je veux, c'est-à-dire une petite image par dessus une autre image qui est le fond du navigateur, le tout en extensible, c'est pas le même procédé apparemment que pour de simples menus...
A moins que ca ne soit quelque chose à voir avec le type de balise...block ou inline ?...qui permet dans ce cas-là d'y adapter pour ce que je veux pour une image tant qu'elle n'est pas en fond. Je ne sais pas...

Si ya un magicien dans la salle, je suis preneur ! ;-) Merci.

Modifié par nicky14, 18 March 2011 - 11:01 AM.


#24 Eddy.vh

    Éternel apprenti.

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 1194 messages

Posté 18 March 2011 - 13:58 PM

De toute manière, lorsqu'on joue avec les positions absolue, tout devient à mon idée assez incertain. On sort les éléments de leur flux normal et ça peut parfois aider dans certains cas mais pas toujours des plus faciles à gérer.
L'idéal pour ton cas et pour le moment pourrait peut-être se trouver du côté de flash !!! Ou patienter et attendre le HTML5 et CSS3 (Je vais commencer à l'étudier prochainement).

#25 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 18 March 2011 - 14:09 PM

J'ai trouvé la solution. J'ai changé quelques lignes de code et enlevé la position absolue de sur mon image. Résultat, elle se place exactement là ou il faut aussi bien sur Firefox que Explorer et sous d'autres définitions.
Ca fait au moins une chose de réglée.

Nouveau problème : le PNG ! Comme vous avez pu le voir, j'utilise des images png et comme on le sait, sous Explorer 6, la transparence n'est pas bonne et c'est bien ce qu'il m'arrive avec un fond gris à mon image/bouton.
Là encore, j'ai fait des recherches et testé des solutions, mais à part celle du PNG-8 qui rend toutefois un aspect assez...dégueulasse, rien n'est vraiment convainquant. Enfin aussi, peut-être que je m'y prends pas bien pour ca...
Sinon je pensais donner deux CSS à ma page d'accueil, un avec Firefox et un autre pour Explorer avec le bouton seulement sur Firefox et le lien pour accéder au site serait simplement l'image de fond sur Explorer. Il me semblait avoir vu que c'était possible mais je ne sais pas comment faire ca.
Enfin ma priorité reste de régler le problème PNG...

Si vous avez des idées et conseils pour tout ca, je suis preneur !
Et merci de me suivre depuis quelques jours, c'est très sympa.

Modifié par nicky14, 18 March 2011 - 14:10 PM.


#26 Kosic

  • Guests

Posté 18 March 2011 - 15:31 PM

Qui navigue encore avec Explorer 6 ? ;-)

#27 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 18 March 2011 - 16:30 PM

Et bien beaucoup trop de monde encore selon certaines sources !

Je suis en train de me prendre la tête méchamment là sur tout ca !! Entre les problèmes de print sous les logiciels graphiques et les incompatibilités entre navigateurs ici, franchement mes pauvres, vous travaillez vraiment avec des trucs pas au point sérieux !
Non fin voilà, je vais pas abandonner pour autant ! Mais faut pas nous en vouloir après si c'est pas..."parfait".

Ici, j'ai trouvé un code java pour gommer les défauts du PNG sous Explorer 6 avec ce code source conseillé : Mon lien
Ca marche bien...sauf quand je change de définition ou là, sous Explorer, plus rien ne s'adapte proportionnellement à la nouvelle définition.

Autre problème qui n'est pas en rapport avec ce code :
Sous Firefox tout reste très propre, sauf quand je passe en définition inférieure avec mon image de fond. Elle s'en retrouve craquelée si on peut dire sur plusieurs points comme des formes ou du texte. Même le bouton/image sous Firefox en prend un coup dans ce cas-là.
Sous Explorer, c'est craquelé même si les tailles et éléments sont alignés comme sous Firefox et cela quelque soit la définition aussi bien en enregistrant l'image sous un format PNG et aussi étrangement, en JPEG...
On peut vraiment pas faire ce que l'on veut dès qu'on passe à une étape supérieure !!

Sur les sites, c'est bien joli de proposer des solutions pour lutter contre Explorer, mais ca ne marche vraiment pas toujours, il faut le java activé, et à condition aussi que la base de notre travail soit simple, ce qui n'est pas vraiment mon cas car tout se chamboule après comme je viens de le signaler malgré un code prometteur tant qu'on ne parle pas d'adaptation pour les définitions...

Concernant Explorer 6, un conseil, débarrassez-vous en !!! C'est vraiment le navigateur qui fout la m**** et ce n'est pas bien compliqué de passer à la version au dessus !
Le monde serait meilleur sans lui ! D'ailleurs au fil de mes visites sur le net, j'ai pu voir je ne sais pas combien de sites officiels, professionnels ou pas, qui marchaient sous Firefox et plus vraiment sous Explorer ! Alors faudrait savoir après cela ce qu'il faut faire vis-à-vis des exigences que pourraient avoir des professionnels sur notre site, afin de bien se faire voir ?!

Bon, j'y retourne (et prends vos idées au passage si vous en avez...).

Modifié par nicky14, 18 March 2011 - 16:37 PM.


#28 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 18 March 2011 - 18:34 PM

Bien alors voilà ce que ca fait...

Après utilisation d'un autre code java : Mon lien, le résultat est le même que dans mon message précédent, à savoir la résolution des problèmes PNG entre Firefox et Explorer avec le tout bien propre ! Mais à la condition d'activer le java.

Cela dit, lors du changement de définition écran, si Firefox reste ok, Explorer lui, non. Plus rien ne s'adapte en fonction de la définition, et il faut naviguer avec des barres de défilement autant en bas que à droite. De plus, le bouton part n'importe ou...

Bref, soit ca marche niveau définition sans le java aussi bien sous Firefox que Explorer, mais ce n'est pas toujours très propre avec les effets craquelés, soit c'est très propre sous les deux avec le java mais Explorer n'adapte plus selon la définition...
Visiblement, superposer deux images l'une sur l'autre (fond + bouton ici), est un mélange trop...instable pour l'application du code java qui dérègle tout ce qu'on avait cherché déjà au point de se cogner la tête contre les murs !! Super !

Malgré tout, encore une fois, je vais chercher...mais la limite approche, surtout quand ya pas que ca à faire !!

<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->
</head>

<body>
<div id="arriere"><img alt="fond_site" src="Intro31.png" /></div>
<div id="entrer"><a href="#"><img alt="bouton_entrer" src="entrer.png" /></a></div>
</body>
</html>

html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
max-width:1600px;
min-width:640px;
background:#000000;
}

#arriere img {
width : 100%;
}

#entrer {
margin-left:70%;
margin-top:-48%;
}

#entrer a img {
border:0;
width:50%;
}

Code java dans fichier à part :

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/


var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}
 


#29 nicky14

    Ceinture Orange

  • Members
  • PipPipPip
  • 40 messages

Posté 18 March 2011 - 23:08 PM

Nouveau phénomène curieux après nouveaux essais et finalement, dans un certain sens, c'est tout bon ! C'est tout bon dans le sens ou finalement, tout s'affiche et se réduit bien correctement en fonction de la définition sous Explorer...mais à condition de réactualiser la page volontairement ! Si si, je comprends vraiment pas d'où est-ce que cela vient pour que ce bug stupide s'affirme... :?

L'important c'est que ca marche mais il serait bon de signaler aux visiteurs sous Explorer et faible définition qu'il faut actualiser...
J'ai l'idée d'entrer un code pour actualiser automatiquement la page, du genre...<meta http-aquiv="refresh" content="30">
...mais j'ai des doutes pour l'après première actualisation. Ca risque de gêner la visite...

Autre chose, mon image de fond est en PNG, donc vous devinez que le chargement est long. Bien plus qu'en jpeg qui lui est rapide mais moche sous Explorer. Même en réduisant la taille du PNG à celle du JPEG, c'est très long...sous Explorer ! Et oui, Firefox, le chargement PNG est immédiat, mais interminable sous Explorer bien sûr ! :cool:
Pourtant l'image s'affiche bien à l'écran mais la barre de chargement en bas n'en fini pas. Peut-être que l'image s'affiche vite car je suis sur mon PC et que via un autre PC qui n'aurait pas les données sur son disque dur, ca serait long...??

Autre chose encore, j'aimerais savoir s'il est possible dans les commentaires conditionnels d'entrer des directives non pas pour le CSS mais le HTML ? Et si oui, comment faire ?

DONNEZ-MOI VOTRE AVIS SVP !!!!!!
Merci.

Modifié par nicky14, 18 March 2011 - 23:21 PM.


#30 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 19 March 2011 - 11:36 AM

#conteneur {
height:200px;
width:400px;
background-color:#FFCC00;
border:solid 2px;
/*donc (400+2+2)x(42+2+2) = 404x46*/
}

table {
height:190px;
width:390px;
background-color:#FFFFFF;
margin:10px;
/*donc (390+10+10)x(190+10+10) = 410x210 + grand que conteneur*/
}

tr {
height:42px;
width:385px;
background-color:#00FFFF;
text-align:center;
/*donc 385x42*/
}

td {
height:42px;
width:385px;
background-color:#00FFFF;
text-align:center;
/*donc 385x42*/
}

Conclusion, Firefox réagit à peu près bien dans ton cas de figure, c'est IE qui semble résoudre ton problème mais il fait n'importe quoi en fait.

#31 metaroid

    Ceinture Orange

  • Members
  • PipPipPip
  • 37 messages

Posté 19 March 2011 - 16:21 PM

Voir le messagemetaroid, le 19 March 2011 - 11:36 AM, dit :

#conteneur {
height:200px;
width:400px;
background-color:#FFCC00;
border:solid 2px;
/*donc (400+2+2)x(200+2+2) = 404x204*/
}

table {
height:190px;
width:390px;
background-color:#FFFFFF;
margin:10px;
/*donc (390+10+10)x(190+10+10) = 410x210 + grand que conteneur*/
}

tr {
height:42px;
width:385px;
background-color:#00FFFF;
text-align:center;
/*donc 385x42*/
}

td {
height:42px;
width:385px;
background-color:#00FFFF;
text-align:center;
/*donc 385x42*/
}

Conclusion, Firefox réagit à peu près bien dans ton cas de figure, c'est IE qui semble résoudre ton problème mais il fait n'importe quoi en fait.




1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP