18041 sujets

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

[Réglé] Mettre du texte par dessus une image

Bonjour,

Voila je débute dans la prog et le css. Je m'y suis mis que depuis hier alors désolé si je ne comprend pas tout.

J'ai réussi a mettre une image en arriere plan centrer sans souci.
Et je voudrais rajouter du texte centré par dessus cette image avec un lien hypertexte sur chacunes des lignes que .


a écrit :
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />

<title>arriere plan</title>

<style type="text/css">

<!--
body {
background-color:black;
background-image:url("arplan.jpg");
background-repeat:no-repeat;
background-position:center center;
}
-->
</style>



</head>
<body>
</body>
</html>

Modifié par zen56 (26 Feb 2007 - 14:02)
Bonsoir et bienvenue à toi,
Pour commencer avant ta balise <html> tu dois ajouter la déclaration de doctype XHTML pour éviter certains problèmes comme
l'incohérence de mise en page d'un navigateurs à l'autre
en particulier entre Internet Explorer (IE) et les autres navigateurs.

Si tu es motivé je te conseille de lire ces cours XHTML et CSS:
http://www.tuteurs.ens.fr/internet/web/html/

et par la suite ces articles
http://css.alsacreations.com/Bases-et-indispensables/

Tu dois aussi ajouter la langue (lang="fr" xml:lang="fr") mais je préfère ne
pas t'en dire plus, tu apprendras la significations de ce code au fur et à mesure.
J'ai changé les balises de commentaires (<!-- -->) pour des raisons de compatibilité avec les futurs version de XHTML...
Donc pour ton texte centré, il faut utiliser la propriété text-align
avec la valeur center:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>arriere plan</title>
<style type="text/css">
/*<![CDATA[*/
body {
background-color:black;
background-image:url("arplan.jpg");
background-repeat:no-repeat;
background-position:center center;
text-align:center;
}
/*]]>*/
</style>
</head>
<body>
<a href="lien">Ton texte</a>
</body>
</html>

Bon courage!
Modifié par Hermann (04 Feb 2007 - 15:15)
merci c'est cool de m'avoir répondu aussi rapidement.

Y'a beaucoup de documentation a lire mais aussi plein de chose a retenir, merci pour les liens, je vais avoir de quoi m'occuper.

Le texte est bien centré mais je voudrais aussi le centré verticalement. POur bien comprendre voici mon url :

http://site.voila.fr/bladproduction

merci encore.
Modifié par zen56 (03 Feb 2007 - 10:59)
Bonjour,

Le plus simple, pour que le texte corresponde à la zone de l'image, est de placer l'image comme image de fond d'un bloc centré.

Disons que l'on veut un bloc large de 500px.

[b]HTML :[/b]
<body>
	<div id="page">
	... mon contenu ...
	</div><!-- fin de div#page -->
</body>

[b]CSS :[/b]
div#page {
	width: 500px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	color: white; /* Important : donner une couleur au fond ET au texte */
	background-image: url("arplan.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
}


Quelque chose comme ça.
Modifié par Florent V. (03 Feb 2007 - 11:53)
le texte est bien centré pas de souci mais je n'est qu'une partie de l'image.

Y'a peut etre quelques chose que j'ai mal fait. voici mon code mais ca progresse a grand pas merci pour le coup de main.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>arriere plan</title>

<body>

	<div id="page">

	Le texte a afficher<br>
	... mon contenu ...

	</div><!-- fin de div#page -->

</body>


<style type="text/css">

/*<![CDATA[*/

body div#page {

	width: 1024px;

	margin-top: 50px;

	margin-left: auto;

	margin-right: auto;

	background-color: black;

	color: yellow; /* Important : donner une couleur au fond ET au texte */

	background-image: url("arplan.jpg");

	background-repeat: no-repeat;

	background-position: center center;

	text-align: center;

}




/*]]>*/

</style>
</head>
</html>

Modifié par zen56 (03 Feb 2007 - 16:28)
zen56 a écrit :
Y'a peut etre quelques chose que j'ai mal fait.

Oh, pas seulement une. Smiley cligne

Je vois trois choses : une erreur de syntaxe HTML, une « mauvaise pratique », et enfin un « oubli ».

Erreur de syntaxe : l'élément body (c'est à dire les balises <body> et </body> et tout ce qui se trouve entre les deux) ne peut se placer à l'intérieur de l'élément head. Il faut le placer juste après l'élément head, avant la fermeture de html. La structure à respecter est :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
	<title>...</title>
	<style type="text/css">...</style>
</head>
<body>
	...
</body>
</html>


Mauvaise pratique : donner une largeur de 1024px à un conteneur global. Simple question de logique : un écran qui affiche 1024px devra afficher les bordures de la fenêtre du navigateur, la barre de défilement... et il est également possible que la fenêtre du navigateur ne prenne pas toute la largeur disponible. La largeur maximale, pour une compatibilité avec la résolution 1024x768, devrait donc être 990px. Je recommenderais plutôt une largeur de 980px, pour être tranquille.

Oubli : l'image de fond du conteneur global ne s'affichera que sur la hauteur de ce bloc. Si le bloc en question a peu de contenu, alors il sera court, et l'image de fond sera tronquée. Si on veut que l'image s'affiche en entier, il faudra utiliser une hauteur minimale (min-height) pour ce bloc.


En fait, suivant ton design, mettre l'image comme fond du conteneur global n'est pas forcément la meilleure solution. Ça dépendra de ce que tu veux faire exactement. Si tu donnais plus de précisions (par exemple une maquette-image), ça serait plus simple de te conseiller. Smiley cligne
Houla, je vois que j'ai encore du boulot, lol.
merci pour tes conseils Florent,

voila ce que je voudrais avoir en gros

http://site.voila.fr/bladproduction

Le texte centré verticalement et horizontalement dans le rond de l'image avec un lien hypertexte pour cahcun des textes.
Hors pour le moment comme tu l'a signalé l'image s'affiche que s'il y a du texte. Ca me donne ca et il manque un bout. lol

http://site.voila.fr/testcss

donc voila, j'espere que c'est réalisable.

Merci encore d'avance
Techniquement, un
div#page {
	min-height: 510px;
}

(avec le correctif suivant pour Internet Explorer 6, tant qu'à faire), te permettra d'afficher toute l'image de fond.

Ensuite, il faudrait savoir ce que tu veux horizontalement : le contenu peut-il déborder l'image sur les côtés, ou bien faut-il le limiter à la largeur de l'image ? S'il faut le limiter à la largeur de l'image, il faudra utiliser un width: 640px sur div#page, par exemple.


Par contre, j'aurais une très grosse objection à faire, en matière d'ergonomie et d'accessibilité : le texte placé sur une image comme ça, c'est proprement illisible ! En plus (désolé d'être un peu brutal), c'est moche et ça sent le Web de il y a 10 ans !

Sans polémiquer sur les qualités graphiques de l'image, placer du texte sur une image possédant autant de contraste (avec des zones noires, des zones blanches, des zones intermédiaires grises ou colorées...) est impossible si on veut maintenir une certaine lisibilité.

Je remiserais donc cette idée au placard.
c'est dommage, je trouvais que c'était pas si mal que ca. J'étais a moitié content de moi en plus.

Que me conseil tu de faire a la place alors? Je débute en prog et je ne sais pas faire grand chose.

ps : j'ai rajouté min-height: 510; mais l'image ne s'affiche toujours pas en entiere et j'utilise IE 7.0 et mozilla. JE dois quand même appliquer ton patch?
Modifié par zen56 (04 Feb 2007 - 15:17)
zen56 a écrit :
Que me conseil tu de faire a la place alors? Je débute en prog et je ne sais pas faire grand chose.

Ce n'est pas une question de programmation, mais d'ergonomie.
Si tu es content de ton image, utilise-la comme illustration, mais place le contenu en dessous ou à côté, par exemple.

zen56 a écrit :
ps : j'ai rajouté min-height: 510; mais l'image ne s'affiche toujours pas en entiere et j'utilise IE 7.0 et mozilla.

510 quoi ? 510% ? 510em ? 510pt ? 510px ?
Attention à bien préciser l'unité dans tes instructions CSS. Smiley cligne
salut,


Ca y est j'ai trouvé ce que je voulais faire c'est peut-etre pas tres propre niveau codage ou programmation mais ca marche. Voila le résultat :

http://site.voila.fr/testcss

et le code qui s'applique.

Merci a tous pour votre aide. Si quelques choses ne collent pas, faut pas hésiter a me le dire.

<style type="text/css">

body div#page {
	width: 655px;
	height: 525px;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	background-image: url("arplan.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
}
</style>
</head>
<body bgcolor=black>
	<div id="page">
<br><br><br><br><br><br><br><br>
	 <p align="center"><font color="yellow">Animations de logos</font><span style="font-size:14pt;"></span></p>

<p align="center"><font color="#63F542">Catalogue artiste peintre</font></p>

    <p align="center"><font color="aqua">Visites immobilières</font>    </p>
	</div>
Disons que ça peut aller, mais que le rendu visuel dépend beaucoup du contenu inséré (tous ces retours à la ligne à coup de <br>...) et des attributs de mise en forme directement dans le code HTML.

Si jamais on veut modifier sensiblement la mise en page, il faudra donc tout reprendre, au lieu de ne changer que la feuille de style.
oui c'est vrai les "<BR>" c'est pas génial mais je n'est pas trouvé comment faire pour le moment mais je continu a lire des docs concernant le CSS pour voir si on peut faire autrement.

En tout cas merci pour le coup de main et je posterais un message si j'arrive à trouver un autre moyen de faire autrement.
Sujet clos
Aller à