Bordure qui disparaît

Hello !

Je suis en train de faire mon premier site... Le design est provisoire, je me suis bcp inspirée d'un certain site pour le faire, je suis en train d'en faire un autre plus personnel ! Mais j'ai un problème avec le code, qui lui restera le même..

http://ratmassemiettes.free.fr/
Regardez ma page d'accueil (il y a que ça à regarder toute façon ) sous firefox, Opéra, ou que sais je... puis sous internet explorer. Un tout petit détail mais bien ennervant, sous IE 6 (peut être les autres versions, je ne sais pas je n'ai que IE 6) : la bordure n'apparaît que quand on descend avec l'assensceur

Je vous copie le css pour que vous puissiez m'aider, j'ai tout vérifié, le code xhtml et le css, je vois pas où est le problème T__T :

/* DESIGN DU SITE*/
body
{   margin : 10px 0px;
	padding: 0px;
	/*permet de centrer le site sous Ie*/
	text-align: center;
	font-family:"Trebuchet MS" helvetica, sans-serif;
	font-size : 0.8em;
	background: url("../graphismes/graphismes1/titre_site.png") no-repeat fixed top left;
	background-color: #bec2b3;
	
}

#conteneur
{
	width: 770px;
	margin : 0px auto;
	text-align: left;
	background: #eef0e3;
	position : relative;
	top :0px;
	left : 0px;
}

#header
{   
	height: 211px ;
	background: url("../graphismes/graphismes1/header.jpeg") no-repeat;
	margin: 0px;
	
}
/*pour cacher les textes derrière le background*/
#header span, #menu span
{	
	position:absolute;
	left:0px;
	top:-5000px;
	width:1px;
	height:1px;
	overflow:hidden;
}

/*début menu*/

#menu
{	
	height : 36px;
	margin: 0px;
	padding: 0px;
}
#menu dl, #menu dt, #menu dd, #menu ul, #menu li 
{
list-style-type: none;
margin: 0px 0px;
padding: 0;
}
#menu li
{
	float: left;
	margin : 0px 10px;
	
}
#menu dl
{
	float: left;
}

#menu dd
{
	display:none
}

#smenu1, #smenu2, #smenu3
{
	font-size: 1em;
	position : absolute;
	top : 260px;
	left : 65px;
	width : 655px;
}

#menu li a 
{
	font-weight : bold;
	text-decoration :none;
	color : #2d1918
}
#menu li a:hover
{
	font-weight: bold;
	text-decoration: underline;
	color : #0e3109
}

#bouton_accueil
{
	display : block;
	background: url("../graphismes/graphismes1/bouton_accueil.png") no-repeat 0px 0px;
	width: 125px;
	height: 36px;
}
#bouton_accueil:hover
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_accueil.png") no-repeat 0px -36px;
   width: 125px;
   height: 36px;
}
#bouton_lerat
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_lerat.png") no-repeat 0px 0px;
   width: 125px;
   height: 36px;
}
#bouton_lerat:hover
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_lerat.png") no-repeat 0px -36px;
   width: 125px;
   height: 36px;
}
#bouton_chezlesrmm
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_chezlesrmm.png") no-repeat 0px 0px;
   width: 310px;
   height: 36px;
}
#bouton_chezlesrmm:hover
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_chezlesrmm.png") no-repeat 0px -36px;
   width: 310px;
   height: 36px;
}
#bouton_divers
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_divers.png") no-repeat 0px 0px;
   width: 110px;
   height: 36px;
}
#bouton_divers:hover
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_divers.png") no-repeat 0px -36px;
   width: 110px;
   height: 36px;
}
#bouton_liens
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_liens.png") no-repeat 0px 0px;
   width: 100px;
   height: 36px;
}
#bouton_liens:hover
{
   display : block;
   background: url("../graphismes/graphismes1/bouton_liens.png") no-repeat 0px -36px;
   width: 100px;
   height: 36px;
}

/*fin du menu*/

#corps
{
	margin: 0px;
	background-color: #eef0e3;
	background:  url("../graphismes/graphismes1/fond_corps.png") repeat-y;
	padding-top : 65px;
	padding-bottom : 50px;
	padding-left : 65px;
	padding-right : 50px;
}

#contenu
{ 
	border : 2px dashed #b9cdb1;
	margin: 0px;
	padding : 50px;
}

#footer
{
	height: 100px;
	margin: 0px;
	background:  url("../graphismes/graphismes1/fond_footer.png") no-repeat;
	padding-left : 65px;
	padding-right : 50px;
	padding-top: 0px;
	padding-bottom: 0px;
}
#footer p
{
	border : 2px dashed #b9cdb1;
	padding : 2px;
	margin: 0px;
}
#logo
{
	float : left;
	background:  url("../graphismes/graphismes1/logo.png") no-repeat;
	width : 300px;
	height : 391px;
}
.nojs
{
	display : none
}

.cadre
{	
	margin :0px 0px;
	height : 204px;
	width : 400px;
	background:  url("../graphismes/graphismes1/petit_cadre.png") no-repeat;
	padding : 30px 30px;
	
}
.cadre p
{
	font-size: 0.8em;
	height : 144px;
	width : 340px;
	overflow : auto;
	margin : 0px;

}

Je pense que le fautif est mon menu dynamique, car avant que je le fasse, il n'y avait alors que les boutons pour le menu sans les sous menus, tout allait très bien. Maintenant j'ai changé quelques petites choses sur le reste de la page en faisant mon menu, donc ça peut être autre chose aussi.

PS = je présise que le désign appelé par la balise <link/>dans le code xhtml "sansjs.css" c'est le design appellé par défaut pour ceux qui n'activent pas javascript, le design dont j'ai mis le code est appellé par un script plus bas.

A quoi peut être dû cette disparition de bordure ??????

Merci d'avance de votre aide.
Modifié par manzelle_bidule (01 Jul 2006 - 00:24)

Bonjour manzelle bidule,

Pourais-tu s'il te plaît éditer ton premier message pour corriger le lien vers ton site ? Si tu veux faire un lien avec pour texte l'URL de destination, il suffit de taper l'URL, sans balisage spécial. Merci d'avance.

manzelle_bidule a écrit :
A quoi peut être dû cette disparition de bordure ??????

À priori, il s'agirait d'un problème de HasLayout. Si tu donnes une largeur fixe (par exemple width: 100%;) à ton div#corps, ou toute autre propriété conférant le layout à cet élément, la bordure devrait réapparaître.

Comme je connais mal ce bug, lié me semble-t-il soit à une liste, soit à un flottant (je sais plus trop…), je ne peux pas t'assurer qu'il ne restera pas certains problèmes avec cette solution.

Plus d'info chez Laurent Denis (tests sur le HasLayout).

Bonsoir,
Si tu suis le lien indiqué par Mpop, tu trouveras le passage suivant :

a écrit :
la combinaison position:relative et layout peut être problématique si les éléments enfants eux-mêmes ne sont pas dotés de layout. On assistera alors, par exemple, à des disparition de couleurs d'arrière-plan ou de bordures.

C'est bien le cas de ta page :

#conteneur
{
	[b]width: 770px;[/b] /*width, propriété qui confère le layout */
	margin : 0px auto;
	text-align: left;
	background: #eef0e3;
	[b]position : relative;[/b]
	top :0px;
	left : 0px;
}

Tu as donc le choix entre enlever cette position relative (si toutefois elle est inutile ou s'il y a une alternative) ou alors doter l'enfant qui pose problème de layout comme conseillé par Mpop.
Modifié par Alan (30 Jun 2006 - 23:34)

Je vais lire le lien qui m'a été donné, merci ! Mais c'est quoi layout ?

J'avais totalement oublié que j'avais changé ça dans #conteneur... En fait j'ai ajouté une position relative (mais vous remarquerez que je ne fais pas bouger le block en fait..) afin que mon block soit positionné, ce qui me permet de positionner des blocks à l'interieur (par rapport au conteneur et non au body).
J'ai pas trouvé d'autres solutions pour pouvoir positionner mes sous-menus où je voulais dans mon #conteneur... mais bon c'est un peu tordu comme solution, il n'y a pas d'autres moyens ?
Si je ne positionne pas ce block, après je suis obligé de positionner tous les blocks à l'interieur par rapport au body, ce qui n'est pas possible puisque mon block est centré avec margin : auto...

manzelle_bidule a écrit :
Je vais lire le lien qui m'a été donné, merci ! Mais c'est quoi layout ?

C'est, hum… compliqué à expliquer. En gros c'est une propriété du moteur de rendu d'IE windows. Chaque élément de type bloc a un attribut HasLayout avec la valeur 0 (l'élément n'a pas le layout) ou la valeur 1 (l'élément a le layout). Ça permet au moteur d'IE de savoir comment traiter l'élément.

Problème :
– ça n'a rien d'un modèle standard ;
– c'est complètement bugué .

Pour plus d'explications, voir le lien donné plus haut : il y a une traduction d'un article qui explique tout ça sur le site de Laurent Denis.

Hum... J'ai essayé de lire ce qu'il y avait sur le lien, mais c'est un peu compliqué, j'y comprend trop rien

Enfin, concrétement, ce que j'ai compris, c'est qu'il faut :

-soit que je vire la postion : relative de mon conteneur, mais dans ce cas, par quoi la remplacer pour pouvoir avoir un bloc positionné et ainsi pouvoir positionner des blocs en absolu à l'interieur (par rapport au conteneur et non au body) ?
-soit je me débrouille pour que mon block qui bugue (c'est ici le block #contenu qui ne veut pas afficher sa bordure...) se dote du layout.

J'ai essayé de lui donner une largeur, j'ai donc mis 655px (car mon conteneur fait 770 - un marge gauche de 65px - 1marge droite de 50px = 655px), mais là certe ma bordure réapparaissait, mais j'avais le droit à un autre bug bien plus laid : la couleur de fond de mon #contenu (beige) remontait à droite du header
Donc j'ai appliqué une {position : relative; top:0px; left: 0px} à mon #contenu, et là miracle ça marche ! Pourtant la position relative ne fait pas partie des propritétés qui donnent le layout dans la liste sur le site ??!!
N'empêche que ça marche... Mais est ce que j'ai le "droit" d'appliquer une position à un block si c'est pour ne pas le bouger au final ? C'est pas très standard non ?
Le problème en plus si j'ai bien compris, c'est que maintenant je risque d'avoir des bugs d'affichages dans tous mes blocks à l'interieur du conteneur non dotés du layout, non ??


Merci d'avance...

À titre de renseignement, ta page est toute blanche pour moi. Rien n'apparaît... En fait, ce n'est pas tout à fait vrai. Après avoir lu tous les messages jusqu'à la fin, je l'ai réessayée et elle s'est affichée.

J'ai fait "reload" pour voir, et c'est le blanc total encore une fois, même après une douzaine de "reload". C'est en faisant "reload" qu'elle disparaît à tous les coups pour moi mais à partir d'alsacréations, c'est ok. En désactivant javascript, je suis capable de voir les textes sans style.

J'utilise Safari. Y en a-t-il d'autres dans mon cas?

manzelle_bidule a écrit :
J'ai essayé de lui donner une largeur, j'ai donc mis 655px (car mon conteneur fait 770 - un marge gauche de 65px - 1marge droite de 50px = 655px), mais là certe ma bordure réapparaissait, mais j'avais le droit à un autre bug bien plus laid : la couleur de fond de mon #contenu (beige) remontait à droite du header

Pour ma part, j'utilise souvent la propriété spécifique à Internet Explorer zoom: 1 (ou plutôt : la propriété zoom, avec pour valeur 1). Les autres navigateurs l'ignorent (et l'ignoreront éternellement), et elle a l'avantage de conférer le layout au bloc sans influer par ailleurs d'une manière ou d'une autre sur son comportement – du moins à ma connaissance.

largowin a écrit :
À titre de renseignement, ta page est toute blanche pour moi. Rien n'apparaît... En fait, ce n'est pas tout à fait vrai. Après avoir lu tous les messages jusqu'à la fin, je l'ai réessayée et elle s'est affichée.

J'ai fait "reload" pour voir, et c'est le blanc total encore une fois, même après une douzaine de "reload". C'est en faisant "reload" qu'elle disparaît à tous les coups pour moi mais à partir d'alsacréations, c'est ok. En désactivant javascript, je suis capable de voir les textes sans style.

J'utilise Safari. Y en a-t-il d'autres dans mon cas?

Ah ? C'est embêtant ça Personne n'a safari pour tester si ça fait la même chose ??
Perso j'ai testé ma page d'accueil avec firefox, opéra, Nescape6.2, IE.6. Après les autres navigateurs je sais pas

En effet zoom : 1 ça marche aussi, par contre, ce n'est pas gênant d'utiliser une propriété non valide pour après essayer de valider mon code ?? Et mon position : relative sans bouger le block, c'est valide ça ?

Merci

manzelle_bidule a écrit :
En effet zoom : 1 ça marche aussi, par contre, ce n'est pas gênant d'utiliser une propriété non valide pour après essayer de valider mon code ??

Ça sert à quoi de valider le code, à part à rien ?

Plus sérieusement : la validation est une indication, pas une marque de qualité ou d'absence de qualité (en cas de non validation). Valider un code est utile car cela permet de savoir si l'on a respecté le standard utilisé, techniquement parlant. Respecter le standard est utile car cela permet, dans une certaine mesure, de se reposer sur le standard plutôt que d'avoir à tester chaque fonctionnalité, navigateur par navigateur (et des navigateurs, il y en a beaucoup). Les navigateurs faisant normalement tout pour implémenter le standard.

Là, tu veux appliquer un correctif à un navigateur précis. Le fait que la propriété utilisée soit spécifique à ce navigateur – et donc non standard – n'est donc pas un obstacle, bien un contraire ! Tu peux donc ignorer l'avertissement du W3C ou de tout autre validateur.

Cependant, pour faire les choses vraiment bien, on peut préférer placer cette propriété spécifique pour Internet Explorer dans une feuille de style appelée via un commentaire conditionnel.
Si tu ne connais pas cette notion de commentaire conditionnel, je te laisse faire une recherche sur le forum, on en parle souvent.

manzelle_bidule a écrit :
Et mon position : relative sans bouger le block, c'est valide ça ?

Oui, pas de problème de ce côté là.

manzelle_bidule a écrit :


Ah ? C'est embêtant ça Personne n'a safari pour tester si ça fait la même chose ??

Tu peux toujours utiliser ce lien pour le tester: http://www.snugtech.com/safaritest/ Moi, ce lien m'a aussi donné une page blanche

C'est vrai qu'au fond savoir que son site est valide n'apporte pas grand chose, ce qui est intéressant c'est de savoir où sont les erreurs..

J'ai testé le truc pour safari, et c'est vrai que j'ai une page blanche Quelqu'un a une idée d'où ça peut venir ?
Peut être le code javascript qui apelle mon design css ?? ce qui expliquerait qu'on puisse voir le site en désactivant javascript...
A votre avis ?

manzelle_bidule a écrit :
J'ai testé le truc pour safari, et c'est vrai que j'ai une page blanche Quelqu'un a une idée d'où ça peut venir ?

Aucune idée, mais le problème est le même avec Konqueror (pour info, Safari est basé sur Konqueror). Je soupçonne également le javascript de jouer un rôle dans cette histoire.

Pourquoi cette feuille de style appelée via javascript ? Quel est le principe ?

Bah c'est ça : http://perso.orange.fr/michel.deboom/menualsa/hrz-nojs/menu-hrz.htm

Enfin je crois que j'ai bien fait tout ce qui était demandé

C'est parce que le menu déroulant que j'utilise necessite l'activation du javasript. Sans ça il est illisible. N'ayant pas d'autres moyen de le présenter qu'en déroulant, pour les utilisateurs n'activant pas javasript, j'ai fais une feuille de style avec presque aucun style (sansjs.css). Les utilisateurs ayant activé javasript (la majorité des gens donc) peuvent lire le script qui apellent ma feuille de style design1.css et ont donc le design normal.

Mais c'est ça que je soupçonne de ne pas marcher. Je vais essayer de renvoyer mon site mais avec cette fois une unique feuille de style (design1.css) appellée normalement par la balise link/ pour voir si ça marche.

Alors j'ai testé avec le simulateur et là ça s'affiche. Chez vous ça donne quoi ?
J'ai juste supprimé le script qui appellait la feuille de style... Mais du coup les utilsateurs qui ont pas activé javascript peuvent plus lire le menu ! Qu'est ce que je peux faire ?

Ps = vous passerez la ptite intro à côté du logo qui a changé et qui est bourré de fautes d'aurtaugrafe mais c'était juste un ptit délire

Merci d'avance !

Je le vois parfaitement maintenant.

manzelle_bidule a écrit :
. Mais du coup les utilsateurs qui ont pas activé javascript peuvent plus lire le menu !

Je ne comprends pas trop la référence à javascript, car moi, mon javascript est toujours activé et je vois parfaitement ton menu et ton sous-menu.

Bah le problème c'est que certains utilisateurs désactivent javascript (maintenant je ne sais pas pourquoi) et ne peuvent donc pas lire le menu... Certes, c'est une minorité de personnes, mais j'en connais donc c'est pour ça que j'aurais aimé que ça reste accessible sans javascript

manzelle_bidule a écrit :
Bah le problème c'est que certains utilisateurs désactivent javascript (maintenant je ne sais pas pourquoi) et ne peuvent donc pas lire le menu... Certes, c'est une minorité de personnes, mais j'en connais donc c'est pour ça que j'aurais aimé que ça reste accessible sans javascript

Sur le pourquoi de la désactivation de Javascript, il y a pas mal de raisons. Laurent Denis les résume dans un billet du blog d'Alsacréations, il me semble (une chtite recherche ?).

En gros, il y a ceux qui le désactivent par souci de sécurité, ceux qui ont pris javascript en grippe après les abus de JS vers la fin des années 90 (ou un site sur deux voulait redimmensionner la fenêtre du navigateur, afficher des conneries dans la barre d'état, etc.), ceux qui l'ont désactivé par erreur et qui ne savent même pas ce que c'est, ceux qui le désactivent ponctuellement à cause d'un site au javascript bugué et qui ne le remettent pas systématiquement…

… et enfin tous les utilisateurs qui utilisent des logiciels ne gérant pas javascript, comme les navigateurs en mode texte ou les lecteurs d'écran.

Et donc qu'est ce que je peux faire pour que mon site reste accessible sans javasript puisque le ptit système que j'avais mis avant ne marche pas sous safari ?

Une idée ??

merci

Salut,
Tu peux peut-être suivre la méthode indiquée sur cette page.

Ca ressemble, mais d'après une capture d'écran ça ne semble pas poser de problème à Safari. Largowin pourra peut-être nous le confirmer ?