Superposer texte sur carroussel ?

[cedric59]

Bonjour,

 

Est-il possible techniquement de superposer un texte sur le carrousel ?

 

En fait, je cherche a mettre un texte centré sur le haut du carrousel ( comme un titre pour l’ensemble des images qui défileront ). De façon a ce que celui ce ne bouge pas lors du défilement des images.

 

Etant novice, je ne sait pas si d'un point de vue technique cela est possible ou pas. Pourriez vous me dire si cela est faisable ou non et si possible m'orienter vers la marche a suivre s'il vous plait.

 

Merci,

Cordialement,

Cedric

[Divine]

Bonjour,

 

Bin oui en le mettant tout simplement en dehors des éléments qui défilent.

 

Pour simplifier au max la structure :

 

<div id="carousel">
    <p>{tontexte}</p>
    <ul id="liste defilante">
         <li>...</li>
         <li>...</li>
    </ul>
</div>

Edited March 13, 2013 by Divine (see edit history)

[cedric59]

Merci pour votre réponse Divine.

 

Le soucis c'est que je n'arrive pas à le "superposer". Quand je modifie le homeslider.tpl , le texte se place toujours en supplément, soit au dessus, soit en dessous mais il ne se superpose pas sur les images qui défilent

 

Voici le tpl en question :

<!-- Module HomeSlider -->
{if isset($homeslider)}
<script type="text/javascript">
{if isset($homeslider_slides) && $homeslider_slides|@count > 1}
{if $homeslider.loop == 1}
 var homeslider_loop = true;
{else}
 var homeslider_loop = false;
{/if}
{else}
var homeslider_loop = false;
{/if}
var homeslider_speed = {$homeslider.speed};
var homeslider_pause = {$homeslider.pause};
</script>
{/if}
{if isset($homeslider_slides)}
<ul id="homeslider">
{foreach from=$homeslider_slides item=slide}
{if $slide.active}
 <li><a href="{$slide.url|escape:'htmlall':'UTF-8'}" title="{$slide.description|escape:'htmlall':'UTF-8'}"><img src="{$smarty.const._MODULE_DIR_}/homeslider/images/{$slide.image|escape:'htmlall':'UTF-8'}" alt="{$slide.legend|escape:'htmlall':'UTF-8'}" legend="{$slide.description|escape:'htmlall':'UTF-8'}" height="{$homeslider.height|intval}" width="{$homeslider.width|intval}" /></a></li>
{/if}
{/foreach}
</ul>
{/if}
<!-- /Module HomeSlider -->

[Divine]

Je ne vois pas ton texte dans le TPL que tu indiques mais à priori comme ceci cela devrait être bon :

 

<!-- Module HomeSlider -->
{if isset($homeslider)}
<script type="text/javascript">
{if isset($homeslider_slides) && $homeslider_slides|@count > 1}
{if $homeslider.loop == 1}
 var homeslider_loop = true;
{else}
 var homeslider_loop = false;
{/if}
{else}
var homeslider_loop = false;
{/if}
var homeslider_speed = {$homeslider.speed};
var homeslider_pause = {$homeslider.pause};
</script>
{/if}
{if isset($homeslider_slides)}
<p>{TONTEXTE}</p>
<ul id="homeslider">
{foreach from=$homeslider_slides item=slide}
{if $slide.active}
<li><a href="{$slide.url|escape:'htmlall':'UTF-8'}" title="{$slide.description|escape:'htmlall':'UTF-8'}"><img src="{$smarty.const._MODULE_DIR_}/homeslider/images/{$slide.image|escape:'htmlall':'UTF-8'}" alt="{$slide.legend|escape:'htmlall':'UTF-8'}" legend="{$slide.description|escape:'htmlall':'UTF-8'}" height="{$homeslider.height|intval}" width="{$homeslider.width|intval}"></a></li>
{/if}
{/foreach}
</ul>
{/if}
<!-- /Module HomeSlider -->

Edited March 13, 2013 by Divine (see edit history)

[cedric59]

C'est exactement ce que j'avais fait mais ça place le texte sur une ligne au dessus des images qui défilent et je cherche a faire une superposition sur les images qui défilent.

[Divine]

Eh bien il faut que tu ajoutes quelques propriétés CSS à ton texte pour le placer où tu le souhaites, comme un position:absolute par exemple.

[cedric59]

Super Divine, grâce à toi je suis sur la bonne voie

 

Reste un petit problème, mon texte est superposé au carrousel, parfait. Le soucis, c'est qu'il est derrière le carrousel au lieu d'être devant et Il n'est pas centré. Par contre, niveau hauteur, c'est exactement à cet endroit que je le voulais.

 

J'ai du faire une erreur quelque part. Sais tu comment je peux rectifier ça s'il te plait ?

 

Voici mon code html :

<center><font class="testtexte" size=6 color=FBF8E9>LE PORTEFEUILLE MAGIQUE EN CUIR</font></center>

 

Mon code CSS :

.testtexte {

position: absolute;
top: 80px;
display:inline-block;
}

 

 

Je ne suis pas très bon dans ce domaine mais j'en apprends tout les jours. Merci à toi pour le temps que tu consacres à m'aider dans cette tache

Edited March 14, 2013 by cedric59 (see edit history)

[Divine]

Pour le centrer un petit "text-align:center" et pour le placer devant un "z-index:10" (remplace 10 par une valeur plus élevée jusqu'à ce que tu tombes sur une valeur qui fasse passer le texte devant)

[cedric59]

Parfait le z-index:10. Merci beaucoup Divine

 

Par contre "text-align:center" ne fonctionne pas. j'ai essayé plusieurs trucs mais impossible de centrer le texte. J'ai aussi essayé les balises <center></center> dans le tpl mais rien y fait. Le texte reste toujours aligner à gauche de l'encadrement du carrousel ( comme sur l'image en fichier joint ).

 

html :

<font class="testtexte" color=FBF8E9>LE PORTEFEUILLE MAGIQUE EN CUIR</font>

 

CSS :

.testtexte {

position: absolute;
text-shadow:3px 1px 2px #555555;
z-index:10;
font-size: xx-large;
text-align: center;
}

[Divine]

Essaye d'ajouter une largeur en plus du text-align:center

[cedric59]

Super, merci pour tout Divine.

[Divine]

Mais de rien