18073 sujets

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

Mon site ne passe pas avec Internet Explorer

Bonjour à tous,
je viens de terminer mon site, http://hypjo.free.fr, que j'ai fait à la main, c'est-à-dire seulement avec un éditeur de texte.
Je l'ai fait valider sur la page du w3c, et l'ai testé sur différents navigateurs, sous différentes plates-formes.
Arrivé au tour d'Explorer, sous Windows, je me rends compte que le site fait carrément planter le navigateur Smiley sweatdrop (j'ai testé seulement sous Windows 2000)
Par contre la version Mac d'IE affiche le site sans sourciller.
Je ne comprends vraiment pas ce qui cloche, j'utilise juste html et css, et un peu de javascript. Smiley ohwell
Peut-être avez-vous une idée du pourquoi IE me boude.. Smiley smile
Et au passage, on m'a déjà dit que vu le contenu du site plutôt.. absent Smiley lol pour le moment, les pages que j'ai écrites sont assez lourdes, pleines de <div> imbriqués..
Voilà, je vous remercie par avance pour vos commentaires et vos idées Smiley smile
Modifié par Hyp (06 Apr 2006 - 18:49)
Salut, Smiley smile

Effectivement sous IE, ça part en sucette lol Smiley biggol

J'ai pas regardé le code très en avant mais il y 2 choses qui me me "choquent" un peu :

1° l'utilisation inutile de div "separateur" alors que tu pourrais jouer sur les margin/padding des conteneurs concernés.

2° l'utilisation d'un margin-left en utilisant un positionnement relatif en précisant la valeur left dans la classe .par_titre. Je n'en vois pas l'utilité non plus à première vue ...
a écrit :
.par_titre /* Titre du paragraphe */
{
position: relative; top: 0px; left: 50%; height: 19px; width: 700px; margin-left: -350px; padding: 0px; border: 0px;
background-color: #FFFFFF; color: #000000; z-index: 27; background-image: url(titre_fond.png); background-repeat: no-repeat;
}
Salut, et merci pour ta réponse Smiley smile
Je vais voir comment enlever le div .separateur;
Et le div .par_titre je fais 50% + une marge négative pour le centrer en largeur.. Ca je ne vois pas comment m'en passer ?
Hyp a écrit :
Et le div .par_titre je fais 50% + une marge négative pour le centrer en largeur.. Ca je ne vois pas comment m'en passer ?


En utilisant ce qui est fait pour ça, c'est à dire les marges calculées automatiquement.

margin: 0 auto;

Et voilà.
Hyp a écrit :
Je vais voir comment enlever le div .separateur;


Et si tu commençais par abjurer la religion des div ?

C'est quoi un div ? C'est juste un élément HTML de type bloc, qui a une mise en forme (et une portée sémantique) neutre.

Dans BEAUCOUP de cas (la plupart, en fait), on aura intérêt à utiliser des paragraphes, des titres de section, des listes et éléments de liste, des blocs de citation, etc.

Si le but est de remplacer chaque td de tableau par une div, je vois pas trop pourquoi se casser la tête...

En tout cas, je te conseillerais de remanier ton code.
Pour chacune de tes dates tu peux avoir un titre de niveau 2, par exemple (h2). Pour le texte qui suit, pourquoi pas un simple paragraphe.

Tu vires complètement tes div vides qui servent à créer des espaces, et tu fais un petit
h2 {margin-top: 20px;}

(en supposant que tes dates sont maintenant des titres de niveau 2).

Dis-nous ce que ça donne.

Bonne continuation Smiley biggrin
Tiens, mon validateur HTML a trouvé ça dans ton code :
<img src="site/about.gif" alt="bouton"

La balise n'est pas fermée, et il y en a quelques unes dans ce cas là.

Au passage, ton rollover en javascript aurait pu être fait, à moindre frais, en CSS.
Et bien merci pour toutes ces réponses Smiley smile
Je vais de ce pas alléger mon code Smiley cligne

Juste un détail, pour le rollover, qui affiche le titre des menus, je voulais utiliser le css, en suivant ce tuto mais le résultat est incompatible IE Mac.. Pas catastrophique mais je voulais quelque chose compatible (en théorie Smiley lol ) avec tout.. Smiley confused
J'ai modifié quelques trucs..
Plus de div separateur, plus de div pour le titre des paragraphes; <h2> à la place;
par contre je me demandais; il est possible d'imbriquer <h1> dans <h2> ?
Pour l'instant le titre des paragraphes ressemble à ça:

<h2>
	<div class="bouton"><a href="javascript:sw('p5');"><img src="site/about.gif" alt="bouton"></a></div><h1>Mercredi 29 Mars</h1>
</h2>

ou alors ça:

<h2>
	<div class="bouton"><a href="javascript:sw('p4');"><img src="site/about.gif" alt="bouton"></a><h1>Dimanche 26 Mars 2006</h1></div>
</h2>


avec le css:


h1 /* titre des paragraphes */
{
	position: absolute; top: 2px; left: 20px; background-color: transparent; color: #FFFFFF; font-size: 13px;
	margin: 0px; padding: 0px; border: 0px; z-index: 29;
}

h2 /* barre de titre des paragraphes */
{
	position: relative; top: 0px; height: 19px; width: 700px; margin: 0 auto; margin-top: 20px; padding: 0px; border: 0px;
	background-color: #FFFFFF; color: #000000; z-index: 27; background-image: url(titre_fond.png); background-repeat: no-repeat;
}

Dans le premier cas <h1> ne s'affiche pas Smiley confused et dans le deuxième, si il est inclus dans le div bouton, il s'affiche mais le validateur me renvoie une erreur.

a écrit :

Pour chacune de tes dates tu peux avoir un titre de niveau 2, par exemple (h2). Pour le texte qui suit, pourquoi pas un simple paragraphe.

Je ne voulais pas mettre de paragraphes simples car chaque paragraphe doit je pense avoir un id unique pour pouvoir être affiché / masqué par les ptits boutons blancs des barres de titre.. Mais peut-être existe-t-il d'autres solutions ?

edition: pour les titres je me prenais la tete pour rien maintenant ça donne ça:

<h2>
			Dimanche 26 Mars 2006<div class="bouton"><a href="javascript:sw('p4');"><img src="site/about.gif" alt="bouton"></a></div>

		</h2>


h2 /* barre de titre des paragraphes */
{
	position: relative; top: 0px; height: 19px; width: 700px; margin: 0 auto; margin-top: 20px; padding: 0px; border: 0px; text-indent: 20px;
	background-color: #000000; color: #FFFFFF; z-index: 27; background-image: url(titre_fond.png); background-repeat: no-repeat; font-size: 13px;
}


2nde édition: par contre impossible d'imbriquer un div dans <h2> je pense ?
D'où toutes les erreurs que je reçois dans le validateur Smiley ohwell
Modifié par Hyp (07 Apr 2006 - 11:10)
Hyp a écrit :
Juste un détail, pour le rollover, qui affiche le titre des menus, je voulais utiliser le css, en suivant ce tuto mais le résultat est incompatible IE Mac.. Pas catastrophique mais je voulais quelque chose compatible (en théorie Smiley lol ) avec tout.. Smiley confused

Le tuto que tu comptais suivre s'attaque à un problème plus complexe, où un élément doit permettre, au survol, l'affichage d'un autre élément. Là, tes boutons, c'est juste afficher une image différente pour le même élément, donc c'est plus simple.

L'élément doit être un lien (balise a) en display:block, avec les dimmensions qui vont bien, et une image de fond.
Ensuite, règle CSS de type a:hover {background: url(deuxiemeimage.png);}, et le tour est joué.
Pour optimiser, on fera peut-être un preload en javascript pour un affichage instantanné.
Houlà, je pense qu'il te manque des bases de syntaxe XHTML + CSS...

Je serais toi, j'irais voir du côté d'Openweb !

Non, on ne peut pas imbriquer des div dans des h2. Et encore moins des h1 dans des h2 (utilité et logique d'imbriquer un titre de niveau 1 à l'intérieur d'un titre de niveau 2 ???).

Si, tu peux te contenter de paragraphes :
<p id="paragraphe2-8">Bla bla bla bla bla...</p>


Ou encore te passer de ces div en trop :
<h2>
	Dimanche 26 Mars 2006
	<a class="bouton" href="javascript:sw('p4');"><img src="site/about.gif" alt="ici je n'écris pas 'bouton' mais je précise à quoi sert le bouton"></a>
</h2>


Tu as l'air de supposer que seuls les div peuvent accueillir des identifiants ou des classes... C'est une erreur, tout simplement (lue quelque part ?). TOUS les éléments HTML peuvent en accueillir.
mpop a écrit :

Le tuto que tu comptais suivre s'attaque à un problème plus complexe, où un élément doit permettre, au survol, l'affichage d'un autre élément. Là, tes boutons, c'est juste afficher une image différente pour le même élément, donc c'est plus simple.

L'élément doit être un lien (balise a) en display:block, avec les dimmensions qui vont bien, et une image de fond.
Ensuite, règle CSS de type a:hover {background: url(deuxiemeimage.png);}, et le tour est joué.
Pour optimiser, on fera peut-être un preload en javascript pour un affichage instantanné.

Ben, il est déjà en css ? Rollover avec une seule image pour les pastilles (avec l'histoire du background-position, lu ici d'ailleurs si je ne m'abuse), et javascript pour afficher et masquer les titres.

Ok pour les paragraphes, je vais modifier ça Smiley smile

Et je vais passer sur OpenWeb, parce que j'ai comme toi l'impression qu'il me manque une base solide Smiley ohwell

Merci Smiley smile
Modifié par Hyp (07 Apr 2006 - 14:02)
Hyp a écrit :
Ben, il est déjà en css ? Rollover avec une seule image pour les pastilles (avec l'histoire du background-position, lu ici d'ailleurs si je ne m'abuse), et javascript pour afficher et masquer les titres.

Lol autant pour moi Smiley langue
bonjour

J'ai regarder un peu ton site. je suis tomber sur la page escalade (Navigateur Mozilla par default chez moi) et j'ai eu des petits problèmes de lecture avec le texte.

je suis une bille en programmation j'apprend comme tout le monde mais le fait de décortiquer les tutos dechez alsa m'a beaucoup aidé.
et si je puis me permettre Smiley confused , les styles CSS sont très utiles pour placer les éléments dans la page. en evitant trop de balises div.

c'est chez alsa

C'est peu être vrai que la compatibilité ie n'est pas encore règlée mais je crois que pour règler ces problèmes là il faut d'abord règler les problèmes à la base, un bon code = moins de problèmes.

j'espère ne pas avoir été trop direct. en tout c'est simplement pour essayer de t'aider. Smiley confus
David.
Ok ben merci pour les conseils Smiley smile

Davee a écrit :

j'espère ne pas avoir été trop direct. en tout c'est simplement pour essayer de t'aider. Smiley confus
David.

Je t'en prie ça me fait pas de mal Smiley biggrin
Sujet clos
Aller à