18073 sujets

Questions générales et questions de débutants

Incompatibilité avec les navigateurs

Pages :
Bonsoir,

Je travaille sous mac avec dreamweaver 8. Lorsque je fais l'aperçu sur dreamweaver, tout est bon. Mais dès que j'upload, j'ai mes .classe qui ne sont plus à leur place. Smiley ohwell

Pour voir le résultat, ici.
Voici une partie du code CSS (j'ai retiré les menus qui ne me pose pas de problème):

/* CSS Document */
body {
margin: 0;
font-family: verdana, arial, sans-serif; 
font-size: 0.8em; 
 height: 99999px; /* pour combler le bug sous IE du design */
}

* {margin: 0; padding: 0;}

.head1 {
background-color: #bddef6;
width: 85em;
height: 175px;
border-left: 1px solid #1c86d0;
border-right: 1px solid #1c86d0;
border-top: 1px solid #1c86d0;
}

.logo {
float:left; 
margin:0; 
border:0;
}

.gauche {
position: absolute;
left: 0; 
background-color: #bddef6;
height: 65.7em;
width: 147px;
border-left: 1px solid #1c86d0;
border-bottom: 1px solid #1c86d0;
}

.centre {
margin-left: 147px; 
width: 600px;
height: 65.7em;
border-bottom: 1px solid #1c86d0;
}

.droite {
position: absolute;
margin-left: 70em;
top: 16.6em;
left: 0%;
height: 65.7em;
width: 15em;
background-color: #bddef6;
border-right: 1px solid #1c86d0;
border-bottom: 1px solid #1c86d0;
}

.main-texte {
background-image:url('images/fond_01.png');
position: absolute;
width: 600px;
height: 700px;
float: right;
margin-left: -20.5em;
}

.map1 {
margin-top: 2em;
background-image:url('images/image_04.jpg');
width: 147px;
height: 192px;
position: absolue;
}

.map2 { /* autre partie de la mapmonde par transparence */
padding: 0%;
margin-top: 2em;
background-image:url('images/image_05.jpg');
width: 215px;
height: 192px;
position: absolue;
}

.imgmenu {
background-image: url('images/image_02.jpg');
width: 162px;
height: 121px;
margin-top: 3em;
margin-left: -1em;
}

.imgbas {
width: 100px;
height: 88px;
background-image:url('images/image_02.png');
float: right;
margin-top: 57.4em;
}


Mon code html:


<body>
<div class="head1">
<img src="images/logo.png" class="logo" alt="logo alse" width="147" height="175" />

<div id="navcontainer">
	<ul id="navlist">
	<li><a href="http://www.alseportage.com" title="Accueil">Accueil</a></li>
		<li><a href="http://www.alseportage.com/concept.html" title="Concept">Concept</a></li>
		<li><a href="http://www.alseportage.com/missions.html" title="Missions">Missions</a></li>
		<li><a href="http://www.alseportage.com/club_affaire.html" title="Club affaire">Club affaire</a></li>
		<li><a href="http://www.alseportage.com/partenaires.html" title="Partenaires">Partenaires</a></li>
		<li><a href="http://www.alseportage.com/contacts.html" title="Contacts">Contacts</a></li>
		<li><a href="http://www.alseportage.com/faq.html" title="questions">faq</a></li>
    </ul>
</div>
<img src="images/image_02.jpg" class="imgmenu" alt="photo d&acute;homme assis regardant la mer" width="162" height="121" /></div>

<div class="gauche">
<img src="images/image_04.jpg" class="map1" alt="image mapmonde" width="147" height="192" /></div>

<div class="centre">
<img src="images/image_05.jpg" class="map2" alt="suite mapmonde" width="215" height="192" />
<img src="images/fond_01.png" class="main-texte" alt="fond du texte" width="600" height="700" /></div>

<div class="droite">
<img src="images/image_02.png" class="imgbas" alt="une main qui tient un globe" width="100" height="88" />
</div>
</body>
</html>


Pourquoi ça ne colle pas Smiley decu J'ai essayé sur PC, car j'en ai aussi un... mais le résultat est le même Smiley ohwell

JE ne sais plus quoi faire..... j'ai lu pleins de tutos, de bouquins, ..... et toujours rien Smiley fache

Quelqu'un pourrait me redonner un peu d'espoir Smiley smile ?

D'avance, merci.....
Modifié par koss70 (21 Apr 2006 - 22:04)
koss70 a écrit :
Je travaille sous mac avec dreamweaver 8.

Le problème se situe précisément là.
Le mode rendu visuel de Dreamweaver donne une approximation du rendu probable de la page. Il faut vérifier avec un vrai navigateur.
koss70 a écrit :
Voici une partie du code CSS (j'ai retiré les menus qui ne me pose pas de problème):

/* CSS Document */
body {
height: 99999px; /* pour combler le bug sous IE du design */
}

.head1 {
width: 85em;
}

.gauche {
height: 65.7em;
}

.centre {
height: 65.7em;
}

.droite {
margin-left: 70em;
height: 65.7em;
}

.main-texte {
margin-left: -20.5em;
}

.imgbas {
margin-top: 57.4em;
}

Pfiou, c'est ce qu'on appelle avoir la folie des grandeurs !
Un body de cent mille pixels de haut ? Rien que ça ?
Des marges de 50 à 80 EM ?

Pour info,
1em = la hauteur par défaut d'une ligne de texte.
70em = la hauteur par défaut de 70 lignes de texte.
Bonsoir mpop,

Merci de ta réponse.
EN ce qui concerne les 99999px:
a écrit :

height: 99999px; /* pour combler le bug sous IE du design */

J'ai lu, je ne sais plus trop où, peut-être sur alsa ou sur le site de meyer, enfin quelque part, que pour éviter les bug sur IE, il fallait mettre cette propriété.
Mais, hélas, sur IE, ça n'a pas résolu mon problème. En revanche sous firefox, j'ai réussi à obtenir quelquechose. Tu peux tester avec un PC, car j'ai firefox installé sur mon mac.

Camino, négatif
Opéra, pas encore

Merci encore.
mpop a écrit :

Pour info,
1em = la hauteur par défaut d'une ligne de texte.
70em = la hauteur par défaut de 70 lignes de texte.


Pour préciser, un EM est surtout une valeur relative à la police utilisée, en imprimerie EM devait avoir la largeur du caractère "M".

Bien d'accord mpop avec toi l'utilisation des EM dans ce cas est à proscrire et n'a pas de sens fonctionnel.

@koss70: tu devrais revoir l'ensemble de tes marges signalées par mpop.
Bonsoir Igor,

Dans ce cas là, je travaille en %?
Je tiens à préciser que ce site est destiné à 70% pour les non-voyants Smiley biggrin

@mpop: j'ai retiré les 99999px Smiley cligne
koss70 a écrit :
J'ai lu, je ne sais plus trop où, peut-être sur alsa ou sur le site de meyer, enfin quelque part, que pour éviter les bug sur IE, il fallait mettre cette propriété.

On utilise parfois ce genre de ruses (même si celle-ci ne me dit rien), mais dans des cas très précis et pour corriger des problèmes très spécifiques.
koss70 a écrit :
@mpop: j'ai retiré les 99999px Smiley cligne

Il doit rester un peu de « folie des grandeurs » quelque part, car page fait toujours 30 fois la taille du contenu visible…
@mpop:
a écrit :
Il doit rester un peu de « folie des grandeurs » quelque part, car page fait toujours 30 fois la taille du contenu visible…


bizarre, chez moi, c'est correct.... enfin moi et mon mac Smiley confus Smiley ohwell

Je suis en train de tout convertir en %. Correct? Smiley smile

Merci Smiley cligne
Modifié par koss70 (21 Apr 2006 - 23:47)
koss70 a écrit :
Je suis en train de tout convertir en %. Correct? Smiley smile

Les valeurs en pourcentages pour les largeurs, padding ou marges sont utilisables surtout à l'horizontale, où elles prennent pour référence la largeur du bloc parent (si le bloc est directement dans le body, c'est la largeur de la fenêtre qui sert de base). Si dans mon body j'ai un bloc avec une largeur de 70%, il prendra 70% de la largeur de la fenêtre.

À la verticale, c'est beaucoup plus compliqué. Le bloc ne peut prendre une hauteur en % que si la hauteur du bloc parent est déjà fixée (en pixels, par exemple, ou en EM). Pour les marges verticales en %, je ne sais pas trop sur quoi elles se basent, mais je trouve que leur comportement est souvent incohérent. Je déconseille fortement leur utilisation.

Pour positionner un bloc en hauteur en CSS, en gros on a deux méthodes :
– le laisser prendre la place qui est la sienne en fonction de sa place dans le flux du code HTML.
– positionner le bloc en absolu position: absolute;, en donnant au pixel près la position de son bord supérieur par rapport au sommet de la page.

La première solution, de loin la plus satisfaisante, peut accepter un certain nombre de "correctifs" et de nuances, en utilisant en particulier les éléments flottants (propriété float) et, à l'occasion, des éléments en positionnement relatif.

Il existe un certain nombre de tutoriels sur le positionnement en CSS :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/
Modifié par mpop (22 Apr 2006 - 00:21)
Merci pour tes bons conseils Smiley cligne

En ce qui concerne les liens recommandés:

a écrit :

Il existe un certain nombre de tutoriels sur le positionnement en CSS :
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/


J'y suis déjà allée.... mais peut-être n'ai-je pas pris assez de temps pour assimilier le tout Smiley langue
JE vais m'y plonger à nouveau.

Encore une fois, merci Smiley smile
Bonsoir,

Une remarque qui n'a rien à voir 
title="Accueil">Accueil</a></li>
title="Concept">Concept</a></li>
title="Missions">Missions</a></li>
title="Club affaire">Club affaire</a></li>
title="Partenaires">Partenaires</a></li>
title="Contacts">Contacts</a></li>
title="questions">faq</a></li>

Je ne crois pas que l'attribut title apporte beaucoup d'informations par rapport au texte en lien Smiley rolleyes
Ce serait même le contraire dans le dernier cas où il est moins explicite
Modifié par Alan (22 Apr 2006 - 00:51)
Bonsoir Alan,

Oui, tu as tout à fait raison Smiley biggrin
J'attends de savoir ce que le client veut mettre Smiley cligne
koss70 a écrit :
En ce qui concerne les liens recommandés:
J'y suis déjà allée.... mais peut-être n'ai-je pas pris assez de temps pour assimilier le tout Smiley langue
JE vais m'y plonger à nouveau.

J'ai donné ces liens, mais il se peut que tu aies déjà le niveau et que ça ne t'apporte pas grand chose. À toi de voir. Dans certains cas le fait de revenir à des choses qu'on avait déjà vues, mais quelques temps après, une fois qu'on a eu l'occasion d'expérimenter des choses, ça peut être intéressant.
Youpi, problème résolu sur firefox, enfin celui de mac Smiley lol

En revanche sur IE pour PC, c'est la grande cata! Et oui, mpop, tu as raison, sous IE, c'est les "grandes profondeurs", l"abysse" de la barre de navigation" Smiley eek

Mais comment résoudre ce problème.

J'ai ajouté selon les bons conseils d'alsa:

Dans le code CSS:

#global {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 65%;
text-align: left; /* on rétablit l'alignement normal du texte */
}


et les div en dessous de body.

C'est très embêtant tout cela Smiley fache Tant que je n'aurai pas terminé le CSS, je ne peux passer au texte Smiley decu

Quelqu'un à une autre idée Smiley smile

Merci Smiley cligne
@mpop:
a écrit :
Dans certains cas le fait de revenir à des choses qu'on avait déjà vues, mais quelques temps après, une fois qu'on a eu l'occasion d'expérimenter des choses, ça peut être intéressant.


Oui, tu as tout à fait raison. J'y suis encore retournée tout à l'heure..... Smiley smile

Mes livres de chevet, CSS2 de Meyer, Le Zen des CSS (je ne citerai pas le maître Smiley lol Smiley ravi ), XHTML et CSS de Jean Engels et CSS 1 et 2 avec Dreamweaver Smiley smile

Mais avec tout ça, j'ai la tête farçi... pfouuuu, je ne sais plus qui est quoi, ni où et comment, enfin.... tout ça me panique un peu Smiley confused

Mais ne t'inquiéte pas, je suits tes conseils du mieux que je peux et j'ai encore beaucoup à apprendre Smiley sweatdrop Smiley decu
Bonjour !
a écrit :
et CSS 1 et 2 avec Dreamweaver

Si je puis me permettre une petite pique, tu auras dû prendre un livre sur Dreamweawer aussi. Smiley ravi

Même si tu le sais : > Menu fichier > Aperçu dans le navigateur > choix d'un navigateur (ou configuration d'un ou plusieurs navigateurs tests).

L'aperçu de dreamweawer est proche de Firefox pour le rendu de certains comportements, mais pas pour tous. Il faut le voir comme un hybride entre IE 6 et firefox 1.5, s'en servir pour se faire une idée de l'affichage, mais ne pas lui faire entièrement confiance et toujours tester sur différents navigateurs.
Bonsoir Neko,

a écrit :
Si je puis me permettre une petite pique, tu auras dû prendre un livre sur Dreamweawer aussi.
JE connais...... Smiley cligne

MAis le problème réside dans mon utilisation de mac et non de pc Smiley biggrin Je suis une fana de mac.... et quelque fois c'est plutôt stressant question compatibilité Smiley biggol
J'ai regardé aussi avec Netscape..... Smiley decu Enfin peut-être qu'avec la version sur PC, le résultat est meilleur Smiley biggrin

Quelqu'un peut tester pour moi? Smiley cligne
Pages :
Sujet clos
Aller à