GuppY-ART - Insérer une page externe - Gérer le texte sur une image en CSS

Insérer une page externe - Gérer le texte sur une image en CSS

En première approche, la composition par balises html:

j’utilise un positionnement absolu de mon image sur l’écran et je superpose, également en absolu le texte par une balise html <span> comme ceci :

<span style="color: white; font-size: 20px; position: absolute; top:280px; left: 100px; padding-right: 400px;">Quel avenir pour la planète ? L'univers du bien-être passe par le respect de la nature humaine et la réalisation des projets les plus fous et surtout les plus passionnants que nous puissions imaginer. Que ce soit dans la découverte de sites hors du commun ou dans la créations purement artistiques, il y partout des choses que nous avons eu envie de réaliser... de découvrir Que ce soit ailleurs et autrement ou ici et maintenant, il ne faut pas repousser l'accomplissement des désirs les plus profonds et laisser libre cours à notre créativité.</span>

Ce qui donne le résultat suivant : (page d'accueil en anglais)

Nous obtenons bien un texte dissocié et superposé à l’image, mais cette solution présente encore des discordances :

- L’image se positionne de manière brutale à l’écran et recouvre donc toute autre sorte de présentation existante (voir ci-dessus).

- Le texte doit être formaté pour couvrir exactement les dimensions de l’image et ce pour tout changement de format de l’image (voir les balises: position….padding-right: pour limiter le texte à droite de l’écran)

- Le texte à afficher est nécessairement inclus dans le code et nécessite l’aide d’un spécialiste du code quoique son remplacement (adaptation) ne soit pas inaccessible.

Seconde approche la version améliorée (source http://www.xul.fr/css/texte-sur-image.php)

Consiste à utiliser des calques et CSS quésaco ?: Les feuilles de style en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, servent à pré-définir une mise en page structurée indépendante du contenu.

Le texte et l'image sont placés dans deux calques, eux-mêmes internes à un calque conteneur. Cela permet de positionner le texte quelle que soit la position de l'image dans la page.

Ce sont les propriétés de style top et left qui positionnent le texte sur l'image, en fonction des dimensions de celle-ci.

Le code

</div>

<center><b>Ma maison...</b></center>

</div>

Les calques internes ont une position absolue.
La propriété z-index:2 assure que le texte soit au-dessus de l'image.

Résultat :

Créer une image du texte

L'image d'un texte peut être réalisée très rapidement avec Gimp ou Irfanview en quelques étapes.

Dans le menu Fichier cliquer sur Nouveau. Il faut ouvrir l'option Avancé pour définir le fond comme transparent.
Sélectionner la couleur et une brosse floue.
Dessiner le texte avec la brosse.
Sauver au format GIF ou PNG (le JPG ne supporte pas la transparence). Le nom du fichier est ici.gif.

Le code

</div>

</div>

L'image ici.gif est positionnée au-dessus de l'image cats.jpg grâce à la propriété z-index. Sa position est déterminée par les propriétés top et left.

L’image ainsi créée :

Est superposée à l’image d’origine

Ce qui donne, après superposition :

En appliquant ces principes à notre page, nous arrivons à ce qui suit :

                        <div style="position:absolute; top:25px; left:50px; width:500px; height:400px; z-index:2; font-size:170%; color:white"><center>Quel avenir pour la planète ? L'univers du bien-être passe par le respect de la nature humaine et la réalisation des projets les plus fous et surtout les plus passionnants que nous puissions imaginer. Que ce soit dans la découverte de sites hors du commun ou dans la créations purement artistiques, il y partout des choses que nous avons eu envie de réaliser... de découvrir Que ce soit ailleurs et autrement ou ici et maintenant, il ne faut pas repousser l'accomplissement des désirs les plus profonds et laisser libre cours à notre créativité.</center>
                               </div>
                </div>

Nous vérifions cette fois-ci que l’image et le texte s’insèrent correctement dans la page là où ils ont été positionnés, ce qui permet un meilleur contrôle dans les fenêtres.

Attention: Une intégration du texte dans le code et l’ajustage en position restent cependant nécessairement supervisés par un spécialiste. (image positionnée sur la page d'accueil en français). Il serait toutefois possible d'imposer le format de l'image de manière à réduire les mises en forme.

En dernière approche, c'est la solution intégrale de mise en page par CSS, autrement dit le contrôle de page le plus performant, et pas nécessairement le plus compliqué.

Div et CSS pour une mise en page facile au lieu des habituels tableaux

(source : http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/)

La mise en page en utilisant des tableaux est fortement déconseillée. Mais comment faire autrement ?
Cet article va vous expliquer pas à pas comment arriver aux même résultats, le plus simplement du monde.

Pierre-Baptiste Naigeon nous explique comment :

Tout au long de cet exercice, nous allons utiliser deux fichiers :

index.html : contiendra tout notre code HTML.
style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs.

Pour inclure notre CSS dans notre page HTML, rien de plus simple, il nous suffit d'insérer le code suivant entre les balises <head> et </head> :

En voici le code:

Définissons tout d'abord les propriétés de base de nos blocs. Dans notre fichier CSS :

En voici le code:

div {

text-align:center;

}

Ce petit bout de code définit simplement que pour tous les éléments de type div, le texte sera centré (text-align).

I. Page simple : bandeau, contenu, pied de page.

Nous allons commencer par créer un modèle de page tout bête, comprenant un bandeau, une zone de contenu, et un pied de page
Nous allons définir (parfaitement arbitrairement) des couleurs (uniquement pour bien se représenter les positions) ainsi que les dimensions de nos différents blocs :

Bandeau : 600 x 50 px - couleur : #00CCFF
Contenu : 600 x 400 px - couleur : #FFCC00
Pied de page : 600 x 50 px - couleur : #33FF99

Ce qui va se transcrire dans notre fichier CSS par :

En voici le code:

div#bandeau {

width:600px;

height:50px;

background-color:#00CCFF;

}

div#contenu {

width:600px;

height:400px;

background-color:#FFCC00;

}

div#piedpage {

width:600px;

height:50px;

background-color:#33FF99;

}

Vous remarquerez le signe '#' placé après 'div', et suivi d'un descriptif. Il va permettre de définir un identifiant (unique), auquel s'appliquera le style.
Ici, nous avons donc défini trois identifiants : 'bandeau', 'contenu', et 'piedpage'. Les noms sont, je pense, assez explicites pour ne pas avoir besoin d'en rajouter ;)

Pour chacun des identifiants, nous avons défini trois propriétés :

width : la largeur de notre bloc
height : la hauteur du bloc
background-color : la couleur de fond du bloc

Certains éléments sont redondants, mais laissons les tel quels, ils ne le seront plus dans les exemples suivants.

Une fois les propriétés de ces trois éléments définies, il ne nous reste plus qu'à demander à notre HTML de nous les afficher.
Le code suivant est à placer entre les balises <body> et </body> de notre page :

En voici le code:

<div id="bandeau">Ceci est le bandeau</div>

<div id="contenu">Ceci est le contenu</div>

Ouvrez maintenant votre page index.html à l'aide de votre navigateur préféré, et ohhhh, magie, vous apercevez vos trois éléments positionnés les uns au dessus des autres :

Résultat de l'exemple

ebg

Voir le code mis en place

II. Ajout d'une barre de menu à gauche du contenu

C'est bien joli tout ça, mais des sites sans menus, il n'y en a plus des masses. Qu'à cela ne tienne, nous allons en rajouter un...

Vous aurez sans doute remarqué dans l'exemple précédent que, lorsqu'on met dans notre fichier HTML des divs les uns à la suite des autres, ils s'affichent les uns sous les autres.
Pour afficher deux div l'un à coté de l'autre, il va donc nous falloir utiliser une autre propriété. C'est la propriété float qui va s'en charger.

Nous allons commencer par rajouter les propriétés du nouveau bloc de menus que nous allons créer :

En voici le code:

div#menu {

float:left;

width:100px;

height:400px;

background-color:#FF6699;

}

Il nous faut également rajouter la propriété float à l'élément 'contenu', sinon celui-ci va se 'glisser' sous le menu :

En voici le code:

float:left;

Intercalons maintenant notre menu dans la page HTML entre le bandeau et le contenu :

En voici le code:

Mais, mais, mais !!! Qu'est devenu notre beau pied de page ? Et bien il s'est tout simplement glissé sous le menu et le contenu. Vous pouvez le vérifier simplement en modifiant la largeur de celui-ci, et vous verrez alors apparaitre un petit bout de barre vert qui dépasse.

Pour éviter ce fâcheux problème, il existe là encore une propriété qui va permettre de dire qu'on veut que notre élément se remette à se comporter normalement (qu'il se positionne en dessous du reste quoi !). C'est la propriété clear.

Rajoutons donc cette propriété à notre bloc 'pied de page' :

En voici le code:

clear:both;

Et hop, c'est encore magique, nous obtenons le résultat escompté :

Ajout d'un menu

ebg

Voir le code mis en place

III. Je voudrai séparer verticalement mon menu en deux blocs égaux... Je

Décidément, vous êtes bien contrariants ;) Mais c'est possible, une fois qu'on a bien assimilé les principes ci-dessus.

Petit rappel : sans propriétés spécifiques, les blocs se positionnent les uns sous les autres. En utilisant la propriété float, les blocs se positionnent les uns à coté des autres.

L'idée ici va donc être de créer un bloc 'conteneur', qu'on positionnera à gauche du contenu (à l'aide de la propriété float donc). Et dans ce bloc, nous allons en placer deux autres, 'menuhaut' et 'menubas', qui eux vont se positionner l'un au dessus de l'autre.

Vous me suivez toujours ? Très bien, alors passons à la pratique... Nous allons utiliser le bloc 'menu' comme conteneur. Inutile donc de changer ses propriétés puisqu'il est déjà bien placé.

Propriétés des deux nouveaux blocs dans notre CSS :

En voici le code:

div#menuhaut {

width:100px;

height:200px;

background-color:#66CC33;

}

div#menubas {

width:100px;

height:200px;

background-color:#CC99CC;

}

Pas de propriétés float ici donc, puisque nous voulons que les deux blocs se superposent. Il ne reste plus qu'à demander à notre page de nous afficher ces deux nouveaux blocs, à l'endroit désiré :

En voici le code:

</div>

Et là, roulements de tambour... Merveilleux, exactement le résultat escompté :

Séparation verticale du menu

Image personnelle ebg

Voir le code mis en place

IV. Et un encart de news en haut à droite de mon contenu, sans que ca prenne toute la hauteur, c'est possible ?

Et oui !!! Décidément, le CSS, c'est surpuissant. Nous allons donc définir un nouveau bloc, appelé 'blocnews' (si c'est pas original ça ...).

Cette fois encore, nous allons faire appel à la propriété float.

En voici le code:

div#blocnews {

float:right;

width:150px;

height:150px;

background-color:#FF3300;

}

Rien de nouveau sous le soleil dans la définition des propriétés de notre élément, tout est connu. Passons maintenant à son intégration à notre page :

En voici le code:

Ceci est le contenu

</div>

La seule chose à laquelle il faut faire attention, c'est l'imbrication des différents éléments, qui, si elle est mal faite, peut vous pourrir la mise en page.

Si vous remplacez le texte 'Ceci est le contenu' dans le bloc contenu par un texte très long, vous vous apercevrez que le texte se décale pour suivre le contour du bloc news...

Et hop ! un bloc de news ajouté

Image personnelle ebg

Voir le code mis en place

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2006 Pierre-Baptiste Naigeon. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

La méthode CSS pour superposer du texte

(source http://www.zdnet.fr/actualites/css-superposer-un-texte-sur-une-image-39149265.htm?p=2)

Vous pouvez facilement reproduire l'effet de texte superposé sur une image en regroupant un texte avec styles CSS et une image d'arrière-plan dans un bloc <div>. Bien que cette technique soit simple, il est étonnant de constater combien peu de concepteurs web l'utilisent. Peut-être beaucoup s'inquiètent-ils du positionnement adéquat du texte sur l'image. Ou plus vraisemblablement, le recours à des images composites fait partie de ces habitudes de longue date qui ont la vie dure!

Pour insérer une image d'arrière-plan dans un bloc <div>, il faut utiliser l'attribut background-image. Il faut également définir la taille de ce bloc de sorte qu'elle corresponde aux dimensions de l'image et éviter la répétition de l'arrière-plan. Le fragment de code suivant définit une image d'arrière-plan pour un bloc <div> portant l'identifiant (id) test:

div#test {
    background-image: url(/images/backgroundimage.JPG);
    background-repeat: no-repeat;
    height: 500px;
    width: 380px;
}

<div id="test">Texte superposé</div>

Si le positionnement du texte par rapport à l'image est simple, vous pouvez ajouter toute mise en forme nécessaire du texte dans le style div#test et utiliser les attributs de marge haute et gauche (padding-top et padding-left) pour placer le texte dans le bloc <div>. Par contre, si vous devez contrôler davantage le positionnement du texte ou si le texte se compose de plusieurs lignes et paragraphes, vous pouvez l'imbriquer dans un autre bloc <div>, de la façon suivante:

div#testtext {
    position: relative;
    height: auto;
    width: auto;
    left: 25px;
    top: 200px;
}

<div id="test"><div id="testtext">Texte superposé</div></div>

Notez que l'attribut position du bloc <div> imbriqué a la valeur "relative", si bien que les attributs gauche et haut (respectivement left et top) positionnent le texte à l'intérieur de l'élément qui le contient (c'est-à-dire, le bloc <div> avec l'image d'arrière-plan), et non par rapport à la page dans son ensemble.

Revenons à notre exemple : voici le code mis en place sur mon site sous le titre Multifenêtrage en zone centrale avec CSS.

Image personnelle ebg

Voici mon code mis en place

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Positionnement image et texte par CSS</title>

</head>

<body>

<div id="bandeau">Ceci est le <a href="http://fr.wiktionary.org/wiki/bandeau">bandeau</a></div>

</div>

<div id="test"><b>Quel avenir pour la planète ? </b><p>L'univers du bien-être passe par le respect de la nature humaine et la réalisation des projets les plus fous et surtout les plus passionnants que nous puissions imaginer <a href="http://www.gci-cvesq.com/">GCI-Voile</a>.</p><p> Que ce soit dans la découverte de sites hors du commun ou dans la créations purement artistique, il y partout des choses que nous avons eu envie de réaliser... de découvrir <a href="http://merge.perso.sfr.fr/">Créations EBG</a>.</p><p>Que ce soit ailleurs et autrement ou ici et maintenant, il ne faut pas repousser l'accomplissement des désirs les plus profonds et laisser libre cours à notre créativité. <a href="">Guppy-Art</a></p></div></div>

<b><p>Pour en savoir plus sur ce développement </b><a href="http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/">source d'inspiration</a></p></div>

</br></div>

</body>

</html>

Nous pouvons faire apparaître le résultat de cette composition en page centrale en cliquant ci-après sur la page exemple disponible sur Guppy-Art dans Insérer une page externe ¤ Gérer le texte sur une image en CSS ou en suivant directement ce lien : http://elianbernardgossiome.free.fr/pages/page.php?lng=fr

Avantages de la méthode CSS

La technique du texte avec styles CSS pour superposer du texte sur une photo offre plusieurs avantages:

• fichiers image plus petits: en supprimant le texte de l'image composite, vous pouvez généralement utiliser un taux de compression plus élevé de l'image sans pour autant dégrader la qualité du texte. Votre page se charge ainsi plus rapidement;

• rendu plus net du texte: le texte avec styles CSS est toujours affiché à la résolution maximale de l'écran de l'ordinateur de l'internaute. Vous n'avez à vous soucier d'aucun artefact de compression ou de flou;

• modification du texte plus facile: si vous voulez modifier le texte superposé d'une image composite, vous devez recréer le fichier image. Par contre, la modification du texte dans un bloc <div> revient à éditer n'importe quelle portion de texte sur votre page web;

• positionnement plus flexible: vous avez plus de possibilités pour positionner un bloc <div> sur une page qu'une balise <img>;

• accessibilité du texte: le texte avec styles CSS est entièrement accessible aux internautes ayant besoin de services adaptés et aux moteurs de recherche. Il n'est pas nécessaire d'ajouter des attributs de texte "alt" ni d'autres palliatifs d'accessibilité.

La prochaine fois que vous devrez superposer du texte sur une photo, pensez à utiliser une image d'arrière-plan dans un bloc <div> contenant du texte avec styles CSS, plutôt que de créer une image composite dans Photoshop. L'habitude de recourir aux anciennes techniques est parfois difficile à changer, mais le résultat en vaut la chandelle.

Pour aller plus loin : Un tutoriel facile : http://css.mammouthland.net/css3/

Qui propose encore plus de solutions pour améliorer la présentation :

Boites à bords arrondis, dégradés de couleurs etc..

Cette page exemple se trouve dans pages/page.php

Cette page externe s'affichera dans le cadre central de GuppY. Ceci vous montre comment intégrer dans GuppY des pages externes en PHP ou HTML, en faisant en sorte qu'elles s'ouvrent dans le cadre central et non dans une nouvelle fenêtre.

Date de création : 21/02/2015 @ 19:26
Dernière modification : 26/02/2015 @ 20:36
Catégorie : Insérer une page externe
Page lue 2429 fois

Imprimer l'article