[Résolus] Background ... Répétition d'un cas !

Bonjour, bonsoir à tous, à toutes,

J'ai décidé de me relancer depuis quelques temps dans une revision Web ... Et je me revois à repasser en revues les quelques connaissances que j'avais ... Malheureusement certaines de celles-ci doivent s'être égarée bien loin !

Je rencontre un problème (normal me direz-vous sinon je posterais dans le bar ) principalement sur background-repeat: no-repeat dans une balise Div.

J'explique le cas :

Je crée une balise Div :

    <div id="menu"> <a href="<$FrontPageLink$>">Page principale du blog</a><br>
      <a href="<$RssLink$>">Suivez ce site (Flux)</a> <ArchiveList> <a href="<$ArchiveLink$>"><$ArchiveName$></a><br>
      </ArchiveList> <a href="<$IndexPageLink$>">Archive Index</a><br>
      <CategoryList> <a href="<$CategoryLink$>"><$CategoryName$></a><br />
      </CategoryList> </div>

J'y associe la mise en forme que je souhaite :

#menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	border: 1px solid #CC0033;
	position: absolute;
	visibility: visible;
	z-index: 99;
	left: 605px;
	top: 220px;
	height: 350px;
	width: 203px;
	padding: 5px;
	overflow: auto;
	background-attachment: fixed;
	background-image: url(../img/word.png);
	background-position: center 0px;
	/*background-repeat: no-repeat;*/
}

Hors comme vous pouvez le constater j'ai un élément d'arrière plan (plus particulièrement l'image word.png) située à 0px du bas, et centrée et attachée fixe. Jusque là pas de problème (j'aime bien les détails ).

Je visualise l'appercu dans mon navigateur et là je vois que l'arrière-plan se répète ! Oh surprise j'ai oublié background-repeat: no-repeat dans ma mise en forme.

J'y cours j'y vole ... Et hop j'insère ce qui me manque ... Et hop je raffraichis ma page et ... ... Plus d'arrière-plan !
J'enlève le background-repeat: no-repeat et ... un arrière-plan !

D'emblée je me suis connecté à AlsaCreations.com et j'ai fait une recherche sur background-repeat: no-repeat ... Malheureusement je n'ai pas trouvé de sujet abordant la même chose que moi ...

Auriez-vous une idée ?

Thanks,

G.
Modifié par Groumphy (19 Aug 2005 - 20:34)

Pour vous aider j'ai mis le modèle en ligne.

J'ai essayé de placer l'image à l'intérieur du Div ... Et cela ne pose pas de problème ... Un peu incompréhensible. Mais ... Le problème ne viendrais t'il pas que le Div soit inclus dans un autre Div situé dans le bas de la mise en page ?

Hmmm le problème vient bien comme je l'avais dit ...

Le Div est incrusté dans un autre Div se trouvant dans le pied. Ce Div est positionné de manière absolue ...

Pour preuve voici que je modifie le style suivant :

#menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	border: 1px solid #CC0033;
	position: absolute;
	visibility: visible;
	z-index: 99;
	left: 605px;
	top: 220px;
	height: 350px;
	width: 203px;
	padding: 5px;
	overflow: auto;
	background-attachment: fixed;
	background-image: url(../img/word.png);
	background-position: 617px 380px;
	background-repeat: no-repeat;
}

Je me dis que le but est atteint !! Mais (ouaip j'sais y a toujours un mais !) lorsque je fais défiler la page ... L'arrière plan reste fixé (ce qui au passage donne un très bel effet de scroll ! ) ! Ce qui est normal me direz-vous car j'ai background-attachment: fixed ! Dans ce cas, soit je la supprime soit je met l'attribut scroll ... Et bien à nouveau j'ai un arrière plan fantome !

Et là je ne vois pas ou sont mes erreurs... Auriez-vous l'amabilité de m'indiquer ou je me suis trompé ?

Thanks,

G.

salut,

Ton arrière plan reste fixe seulement avec Firefox, avec IE il défile.

Y'a un truc que je ne comprends pas si tu défini un div de taille supérieure à ton background-image, c'est normal qu'il se répète, d'où mon interrogation: que veux-tu qu'il s'affiche sur le reste de ton div ? rien ?
Le navigateur n'agrandira pas ton image en fonction de la taille de ton div.

Et je pense que overflow: auto; est ce qui peut faire obstruction, puisque tu dit au navigateur de décider lui même.
Je n'ai pas compris non plus à quoi sert le background-position.

Hello Sylvain... Merci de ton intervention.

Alors pour répondre à ta question, tu m'informes qu'avec FF l'arrière plan est fixe mais qu'il défile seulement avec IE. Hors je puis t'assurer qu'il défile aussi avec Opéra, et IE n'est pas mon navigateur fétiche et pour ce fait, j'utilise des PNG afin de lui rendre la pareille (disons qu'il s'agit d'une guerre des navigateurs personnelle).

J'ai définis un div supérieur en taille à mon background car il m'est nécessaire d'avoir un div plus grand pour une succession de menu dans le div ...

De ce fait, l'arrière-plan doit être positionné en bas à droite et ne pas bouger afin de ne pas encombrer les menus (que j'aurais prédéfinis par défaut pour qu'ils n'empiètent pas sur le background). Voila donc le pourquoi...

Concernant l'attribut scroll, j'vais faire quelques test ... Et je te dirais ce que l'on peut en sortir avec !

Enfin, le background-position sert simplement à placer l'arrière-plan en bas à droite. Juste le bord du div (comme cité plus haut).

Merci de ton intervention, j'attend tes remarques et commentaires (ainsi que les autres bien entendus !),

G.

Bon, j'avoue au vu du nombre de tes posts que tu es sûrement bien plus expérimenté que moi.

J'ai peut-être, j'ai bien dit peut-être, une petite idée, pourquoi ne pas mettre un div container qui contiendrait donc ton div #menu et un autre div qui contiendrait ton background-image avec un padding-left ou un float-right;

Mais peut-être veux tu que tes liens chevauchent ton image, alors là je ne verrais qu'une solution, utiliser un logiciel style photofiltre créer une image vierge de 203*350 et y positionner ton image word.png en bas à droite.

Tu dis être anti IE, et ça je te soutiens entièrement, mais malheureusement, il est toujours le plus utilisé, mais peut-être plus pour longtemps, Firefox 80.000.000 de téléchargements

Hello Sylvain,

Certe j'ai une légère connaissance du Web et de la programmation Web (JS etc.) mais je suis loin d'être expérimenté et on ne juge certainement pas quelqu'un avec le nombre de post... Ce serait dommage

D'ailleur, c'est pour ne pas perdre ces légères connaissances que je me remets à étudier un peu la construction de sites internets. Comme tu peux le voir, sur cette page est exprimée plusieurs type de positionnement, plusieurs types de code etc...

Cependant, je suis un scripteur et pas un Webmasters et de ce fait mes questions (certes peu fréquentes mais parfois si bêtes !).

Pour en revenir au sujet, oui, j'ai eu l'idée aussi d'utiliser le div #conteneur mais je n'ai pas encore eu l'occasion de tester ... Cela se fera dans quelques heures.

Et enfin, je ne suis pas anti IE, je trouve que c'est un "navigateur comme les autres", à quelques imperfections près ; mais il est vrai que j'aspire à ce que FireFox, Opéra et autres browser alternatifs puisse un jour prendre la main...

Merci de ces conseils, je te tiens évidement informés des eux tests que je ferais (Div Auto & Div #conteneur).

A tantot,

G.

Hello,

Me revoila, ... Alors j'ai essayé les différentes propositions dites ici, malheureusement elles ne fonctionnes pas ... Cela reste absolument pareil !

Quelqu'un a t'il d'autre idée ?

Thanks,

G.

Y a plus d'idée ??

je pense que je vais adopter cette solution ci ...
Et remanier mon menu avec des UL / LI car il s'agit bien d'une liste ...

Cela m'étonne que personne n'aie tilté sur cette demande ...
Modifié par Groumphy (17 Aug 2005 - 22:12)

Alors la solution que j'ai adoptée est la suivante :

#menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	border: 1px solid #CC0033;
	position: absolute;
	visibility: visible;
	z-index: 99;
	left: 605px;
	top: 220px;
	height: 450px;
	width: 203px;
	padding: 5px;
	background-image: url(../img/word.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-color: #FFFFFF; */
}

et déplacement du DIV #menu dans le DIV #conteneur

Cela semble fonctionner... Pouvez-vous me dire si cela vous parait correct au niveau ... Heu ... Codage