Image recouverte par le texte

[Fuvola]

Bonsoir à tous, il s'agit d'une question de débutant, mais dont je n'ai pas trouvé la réponse: comment faire pour qu'une image soit recouverte par un texte, comme je voudrais que ce soit le cas ici: http://www.mxxxxc.com/autres.html
Autre question moins triviale, j'ai trouvé un script amusant ici http://www.webinventif.fr/wp-content/up ... /index.htm, que j'ai utilisé là (entre autres): http://www.mxxxxc.com/2008.html
Il y a une chose que je ne comprends pas: l'auteur du script spécifie une largeur pour son bloc ("width=400" p. ex), mais sans mettre d'unité. Lorsque je mets des pourcentages, par exemple, le script ne marche plus. Comment adapter la largeur du bloc au reste de la page?
Merci d'avance!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

Fuvola, ton lien donne ça :

Oops!
LA page que vous cherchez a été déplacée ou n'existe pas !

il y a une virgule en trop, pas :
http://www.webinventif.fr/wp-content/up ... index.htm,
mais :
http://www.webinventif.fr/wp-content/up ... /index.htm
goût de la précision de html... une virgule en trop ça marche plus.

l'auteur du script spécifie une largeur pour son bloc ("width=400" p. ex), mais sans mettre d'unité.

en style html pur, pour les valeurs de "width" et "height", les unités ne doivent pas être indiquées et par défaut, c'est des pixels.
Ne pourrais-tu retirer ces mentions de' largeur et hauteur du html pour les définir en css, ça m'étonnerait qu'avec des valeurs en "%" dans un style css ton bloc ne s'adapte pas et que le script ne fonctionne pas!
Je ne vois pas où ton script est utilisé dans ta page, tu n'es pas très précise quant à son emplacement, je pourrais le retrouver, mais y'a de quoi s'abîmer les yeux à le retrouver dans ton code non indenté (ou alors, je fatigue c'est samedi soir et je décroche!).
Essaie de styler ton bloc par css, en tout cas.
13/11, 11h43 :

Je n'arrive pas bien à lire ton code, un petit coup de Tidy serait bienvenu

comment faire pour qu'une image soit recouverte par un texte, comme je voudrais que ce soit le cas ici

ICI, où? scrogneugneu !
En css, tu attribues une image de fond au bloc, si c'est du texte, éventuellement un <p>, tu tapes ton texte dans ce <p>, il s'affiche sur l'image de fond... à+?

[GAUNCE]

Bonsoir à tous, il s'agit d'une question de débutant, mais dont je n'ai pas trouvé la réponse: comment faire pour qu'une image soit recouverte par un texte, comme je voudrais que ce soit le cas ici: http://www.mathildeletac.com/autres.html
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Il faut la mettre en background. On ne peut pas écrire sur une image, sauf dans ce cas là!
edit: Bob quand tu es en train de répondre, préviens moi! edit

[Fuvola]

Bonsoir Mongo Bob, bonsoir Gaunce,

ll y a une virgule en trop

Heu! Désolée, c'était la suite de ma phrase...

en style html pur, pour les valeurs de "width" et "height", les unités ne doivent pas être indiquées et par défaut, c'est des pixels.

Bien noté, merci! Je ne savais pas.

Ne pourrais-tu retirer ces mentions de' largeur et hauteur du html pour les définir en css, ça m'étonnerait qu'avec des valeurs en "%" dans un style css ton bloc ne s'adapte pas et que le script ne fonctionne pas!

Eh bien, c'est très surprenant, mais j'avais essayé de faire ce que vous suggérez avant de poser ma question, et le script ne marche plus lorsqu'on indique la largeur dans la feuille css...

ICI, où? scrogneugneu

Oh pardon, je croyais que c'était clair: juste au-dessous de "musique du chambre", il y a une image dont je voulais qu'elle soit recouverte par le texte.
Si je ne la mets pas en image de fond, c'est parce que je voudrais une image différente sur chaque page.
A bientôt!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

Oh pardon, je croyais que c'était clair: juste au-dessous de "musique du chambre", il y a une image dont je voulais qu'elle soit recouverte par le texte.
Si je ne la mets pas en image de fond, c'est parce que je voudrais une image différente sur chaque page.

L'image peut être différente sur chaque page en css, si pour chaque page il y a une "id" particulière pour le bloc qui va contenir icelle...

[Fabrice.Tres.Net]

Oh pardon, je croyais que c'était clair: juste au-dessous de "musique du chambre", il y a une image dont je voulais qu'elle soit recouverte par le texte.
Si je ne la mets pas en image de fond, c'est parce que je voudrais une image différente sur chaque page.

Tu as au moins 2 possibilités:

1. Avoir des paragraphes ou div identifiés par des id différents sur chaque page!
Au niveau css chaque id aura un fond différent correspondant à la page en question.

2. Avoir 2 blocs superposés : un contient l'image au niveau html, le 2 ème le texte écrit sur un fond transparent!
Au niveau sémantique, l'image est dans ce cas du contenu au même sens que le texte!

Une variante de 2 serait d'utiliser un span pour faire apparaître le texte sur l'image.

Dans le cas 2 un excellent exercice de positionnement.

[Mongo Bob]

Je te remercie, Fabrice, de clarifier en français courant, et avec précision, ce que j'essaie maladroitement d'exprimer dans mon sabir brut, naïf et primal

[Fuvola]

Bonsoir Fabrice,
Je crois que j'ai compris! La version 2 me paraît un peu "tordue", si vous me passez l'expression. J'ai opté pour la version 1 (ayant pensé à cette solution juste après avoir posé ma question, comme d'habitude...)
Merci beaucoup pour cette explication claire qui servira certainement à d'autres.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

Eh bien, c'est très surprenant, mais j'avais essayé de faire ce que vous suggérez avant de poser ma question, et le script ne marche plus lorsqu'on indique la largeur dans la feuille css...

euh... et bien, je vais revoir ça à jeun, euh je veux dire, dés que j'ai un moment, quoi
un script qui marche pas pour une question de style ...

[Fabrice.Tres.Net]

Je te remercie, Fabrice, de clarifier en français courant, et avec précision, ce que j'essaie maladroitement d'exprimer dans mon sabir brut, naïf et primal

Je ne voulais rien clarifier du tout, ta réponse n'étais pas encore présente quand j'ai commencé la mienne. Mais la même chose dite de 2 façons différentes c'est mieux!

[Mongo Bob]

edit: Bob quand tu es en train de répondre, préviens moi! edit

désolé, j'avais désactivé mon Gecko Alarm qui me sert bien quand chinon37 ne dort pas (ce qui arrive quand même parfois ).

Je ne voulais rien clarifier du tout,

peu importe, c'était plus clair quand même
>Fuvola : éventuellement, pour cette histoire de script, nous envoyer la partie de code concernée par copier-coller, qu'on puisse comprendre le problème à résoudre?

[Fuvola]

Bonjour Mongo Bob, voilà le code:

<script
type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#parent4").wslide({
width: 500,
height: 450,
autolink: false,
fade: true,
duration: 1000
});
});
</script>

Deux trucs curieux:
1°) si j'enlève ces propriétés pour les mettre dans la feuille de style, le script marche quand même (je retire donc ce que j'ai dit), mais les propriétés en question sont superbement ignorées.
2°) le môssieur explique ici http://www.webinventif.fr/wp-content/up ... lide-2.htm comment créer plein d'effets amusants, mais si je veux modifier le code écrit plus haut en rajoutant par exemple un "col:4,", la modification en question est également ignorée.
La clef du mystère est-elle dans le script?...le voici:

/**
* wSlide 0.1 - http://www.webinventif.fr/wslide-plugin/
*
* Rendez vos sites glissant !
*
* Copyright (c) 2008 Julien Chauvin (webinventif.fr)
* Licensed under the Creative Commons License:
* http://creativecommons.org/licenses/by/3.0/
*
* Date: 2008-01-27
*/
(function($){$.fn.wslide=function(h){h=jQuery.extend({width:150,height:150,pos:1,col:1,effect:'swing',fade:false,horiz:false,autolink:true,duration:1500},h);function gogogo(g){g.each(function(i){var a=$(this);var e=a.attr('id');if(e==undefined){e='wslide'+i}$(this).wrap('<div class="wslide-wrap" id="'+e+'-wrap"></div>');a=$('#'+e+'-wrap');var b=a.find('ul li');var f=h.effect;if(jQuery.easing.easeInQuad==undefined&&(f!='swing'||f!='normal')){f='swing'}var g=h.width;var j=h.height;function resultante(a){var b=a;b=b.split('px');b=b[0];return Number(b)}var k=g-(resultante(b.css('padding-left'))+resultante(b.css('padding-right')));var l=j-(resultante(b.css('padding-top'))+resultante(b.css('padding-bottom')));var m=h.col;if(h.horiz){m=Number(b.length+1)}var n='';var o=Math.ceil(Number(b.length)/m);a.css('overflow','hidden').css('position','relative').css('text-align','left').css('height',j+'px').css('width',g+'px').css('margin','0').css('padding','0');a.find('ul').css('position','absolute').css('margin','0').css('padding','0').css('width',Number((m+0)*g)+'px').css('height',Number(o*j)+'px');b.css('display','block').css('overflow','hidden').css('float','left').css('height',l+'px').css('width',k+'px');b.each(function(i){var b=a.offset();var c=$(this).offset();$(this).attr('id',e+'-'+Number(i+1)).attr('rel',Number(c.left-b.left)+':'+Number(c.top-b.top));n+=' <a href="#'+e+'-'+Number(i+1)+'">'+Number(i+1)+'</a>'});if(typeof h.autolink=='boolean'){if(h.autolink){a.after('<div class="wslide-menu" id="'+e+'-menu">'+n+'</div>')}}else if(typeof h.autolink=='string'){if($('#'+h.autolink).length){$('#'+h.autolink).html(n)}else{a.after('<div id="#'+h.autolink+'">'+n+'</div>')}}var p='#'+e+'-';var q="";$('a[href*="'+p+'"]').click(function(){$('a[href*="'+q+'"]').removeClass("wactive");$(this).addClass("wactive");var b=$(this).attr('href');b=b.split('#');b='#'+b[1];q=b;var c=$(b).attr('rel');c=c.split(':');var d=c[1];d=-d;c=c[0];c=-c;if(h.fade){a.find('ul').animate({opacity:0},h.duration/2,f,function(){$(this).css('top',d+'px').css('left',c+'px');$(this).animate({opacity:1},h.duration/2,f)})}else{a.find('ul').animate({top:d+'px',left:c+'px'},h.duration,f)}return false});if(h.pos<=0){h.pos=1}$('a[href$="'+p+h.pos+'"]').addClass("wactive");var r=$('a[href*="'+p+'"]:eq('+Number(h.pos-1)+')').attr('href');r=r.split('#');r='#'+r[1];q=r;var s=$(r).attr('rel');s=s.split(':');var t=s[1];t=-t;s=s[0];s=-s;a.find('ul').css('top',t+'px').css('left',s+'px')})}gogogo(this);return this}})(jQuery);

Sur ce, je vais travailler. A bientôt!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

[Mongo Bob]

Ce qui est entre balises <script> doit rester dans le <head> du html, de toute façon...
Et là, comme ça, je ne vois plus comment réadapter les largeur et hauteur, les attribuer à quoi pour le css? Faut que je gratte un peu...

[Ymai]

Deux trucs curieux:
1°) si j'enlève ces propriétés pour les mettre dans la feuille de style, le script marche quand même (je retire donc ce que j'ai dit), mais les propriétés en question sont superbement ignorées.

Attention, ce n'est pas du simple Javascript. Il s'agit de jQuery.
Certaines propriétés qui sont fixées dans le script correspondent à du CSS (width, height,..) mais d'autres n'ont rien à voir (fade est un comportement fabriqué à l'aide de Javascript, duration est un paramètre pour ce comportement).
Je pense qu'il vaut mieux laisser dans le script jQuery ce qui appartient à ce script.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.4) Gecko/2008111317 Ubuntu/8.04 (hardy) Firefox/3.0.4

[Mongo Bob]

Certaines propriétés qui sont fixées dans le script correspondent à du CSS (width, height,..) mais d'autres n'ont rien à voir (fade est un comportement fabriqué à l'aide de Javascript, duration est un paramètre pour ce comportement).

Fuvola ne voudrait adapter que "width" et "height"

si j'enlève ces propriétés pour les mettre dans la feuille de style, le script marche quand même (je retire donc ce que j'ai dit), mais les propriétés en question sont superbement ignorées.

Ca dépend de ce que tu as fait exactement
Je ne peux pas recopier et essayer chez moi, mais si tu vires les 2 lignes

Code : Tout sélectionner

width: 400,
height: 450,

du html
et en css tu crées :
script {
background-color: red;
width: 100%
height:100px;
}
que ça se voie bien! Ca le fait? Ou ça casse tout? Franchement, je trouve ça bizarre mais je peux pas tester chez moi avant.
Fais une copie de sauvegarde avant!
Au fait, hors tout css, quand tu modifies juste les valeurs tel quel par des chiffres sans unités, ça le fait?