28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Sur mon site, j'ai implémenté un menu que j'ai pris sur les tutoriels d'alsacréations. Je l'ai un peu modifié pour qu'il soit à mon gout mais je suis confronté à un problème que j'arrive pas à résoudre.

En fait, il s'affiche et fonctionne très bien sous firefox. Mais il a un comportement très étrange sous IE et Opera.
Il utilise le scripte " montre " de java

Voici le lien de mon site :
http://www.bistroinvivo.coop/Sitetest2/pagephp/evenements.php

Merci beaucoup pour votre aide.
Bonjour,

Il s'agit d'un problème général, pas seulement du menu, la mise en page du site est mise en pièces par IE6.
Il serait plus urgent de régler ce problème avant de se préoccuper du menu Smiley cligne

Pour commencer, régler le problème de la transparence sous IE6 :
<!--[if lte IE 6]>
<style type="text/css">
div#global {
	position: relative;
	min-height: 100%;
	width: 930px ;
	padding: 0 10px;
	margin: 0 auto;
	background: url(/Sitetest2/image/structure/fond_global-IE.png) repeat-y;
}
/style>
<![endif]-->

fond_global-IE.png est la même image que fond_global.png, les dégradés en moins.
Modifié par Akhilleus (09 May 2008 - 12:48)
Tout d'abords, merci à toi Akhilleus de te pencher sur mon problème ^^

Sinon, je suis sous Vista, et il ne veut pas que j'installe IE6. Donc ça va être difficile pour moi de voir le résultat. Cependant, je devrais avoir accès a un autre ordi avec IE6 donc on va essayer comme ça.

Autre chose, j'ai du mal à voir où intégrer le code que tu m'as donné car il chamboule toute ma balise style. Ici tu remarquera que je suis autodidacte en conception donc j'ai surement quelques lacunes de base.

@ suivre.
Bonjour Azanek,

Azanek a écrit :

Sinon, je suis sous Vista, et il ne veut pas que j'installe IE6. Donc ça va être difficile pour moi de voir le résultat. Cependant, je devrais avoir accès a un autre ordi avec IE6 donc on va essayer comme ça.

La FAQ ou ce sujet devraient te donner quelques pistes pour tester tes productions sur divers navigateurs Smiley cligne

Azanek a écrit :
Autre chose, j'ai du mal à voir où intégrer le code que tu m'as donné car il chamboule toute ma balise style. Ici tu remarquera que je suis autodidacte en conception donc j'ai surement quelques lacunes de base.

En général au même endroit où tu places ton ou tes appels de feuille(s) de styles entre les balises <head></head>, tu peux également faire une feuille de styles externe, spécifique à un navigateur cible et y faire appel, toujours au même endroit, et toujours via ces commentaires :

<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![ endif]-->

Quelques explications dans la FAQ et sur l'estimable site de Laurent Denis Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (13 May 2008 - 23:19)
Y a un truc que je comprends pas je pense.

Dans la FAQ, on me dit que les commentaires conditionnels ne peuvent contenir que du (X)HTML. Hors tu me demandes de le mettre entre les balise <head></head>. Est ce que je devrais pas plutôt le mettre dans le body ?

Parce que après avoir ajouter le code, IE6 charge toujours la même image.

Ou bien, j'ai rien compris a tout ça ^^
Bonsoir,

En général une page (x)html/css se compose de la sorte :

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />	
</head>
<body>

<!-- Contenu du document -->

</body>
</html>


Tu peux comme tu l'as fait sur ta page mettre tes déclarations directement entre les balises appropriées :

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
Tes déclarations
</style>	
</head>
<body>

<!-- Contenu du document -->

</body>
</html>

Tu peux, comme nous te l'avons suggérer, inclure une feuille de style qui ciblera un navigateur spécifique (en l'occurence ici IE6 ) ce qui donnera :


<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css" media="screen">
Tes déclarations
</style>	
<!--[if lt IE 7]>
<style type="text/css">
tes déclarations
</style>
[#blue]ou l'appel d'une feuille de styles externe[/#]
<link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![ endif]--> ([#blue]sans espace après les crochets ouvrants[/#])
</head>
<body>

<!-- Contenu du document -->

</body>
</html>


Pour répondre à ta question, comme tu as pu le lire dans la FAQ :
a écrit :
Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer.

Donc, je te confirme qu'il a certainement quelque chose que tu as mal compris, le commentaire conditionnel ne contient que du (x)html, et le fait de le placer entre tes balises <head> (la place qui lui est dévolue) n'y change rien Smiley smile

Je t'encourage à regarder ton code source, à vérifier s'il ressemble à cela (un indice, la réponse n'est pas oui... Smiley cligne ).
Refait une passe sur tes inclusions PHP, ce n'est pas au point, le commentaire avant la déclaration de Doctype, fera passer IE en mode quirks ce qui n'est pas sans poser problème Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (13 May 2008 - 23:20)
Me revoilà.

Donc j'ai fait les modifs suivantes :

J'ai créé une page pour le commentaire conditionnel de IE et j'ai fait un lien dans le head entre les balise IF comme indiqué.
J'ai enlevé la première note avant l'inclusion du doctype pour éviter le passage en Quirck d'IE.
J'ai fait une deuxième image de fond sans transparence pour IE.

Tout cela a réglé certains problèmes. Mais il en reste encore.

Sous IE :
- Le menu de navigation réagit toujours bizarrement.
- La page occupe pas 100% de la hauteur.
- Un truc bizarre est apparu sur mon menu de gauche ou le dernier caractère du dernier lien est recopier en dessous.

J'aurais aussi une question : y a-t-il moyen de faire comprendre le transparent a IE6 ou il faut que je refasse chacune de mes images avec un fond de la couleur du background ?

Merci beaucoup pour vos prochains commentaires.
Modifié par Azanek (21 May 2008 - 22:35)
Je sais pas trop si c'est permis, mais comme ça fait plus de deux semaines que j'ai posté, je prend l'initiative de remonter mon sujet ^^
Modifié par Azanek (05 Jun 2008 - 20:02)
Bonjour à tous,

Je reviens une nouvelle fois à la charge. Durant ce laps de temps, j'ai essayé de trouver la solution mais j'ai pas réussi.

Donc si vous pouviez m'aider, cela serait très apprécié. Surtout que je ne trouve nul part la solution et je vois pas du tout comment faire.

Mais problème actuelle réside surtout dans le menu qui ne réagit pas du tout comme il faudrait sur IE6 et antérieures.

Merci beaucoup.