Jump to content
USB83

Comme avoir une image sur toute la largeur de la page ?

Recommended Posts

Salut,

Sur la page d'accueil, j'aimerai remplacer le slider et les 2 blocs qui s'affichent par défaut, par une image qui prend toute la largeur de la page.

Comme sur l'exemple en pièce jointe

 

En modifiant le tpl index.tpl j'ai pu mettre une image mais elle reste à l'intérieur du cadre

<div id="columns" class="container">

qui impose une largeur max de 1170px, alors que j'aimerai que ça déborde pour prendre toute la largeur de la page

Merci

demo_width.jpg

Share this post


Link to post
Share on other sites

Bonjour,

pour ce faire il faut changer l'emplacement du hook présent dans le code source du template pour réussir à le sortir de la div qui bloque la largeur d'affichage et le laisser libre pour al largeur.

Share this post


Link to post
Share on other sites

Salut

Merci pour ta réponse

Finalement, la modification doit se faire dans le fichier header.tpl plutôt que index.tpl

Le fichier contient d'abord cette partie du haut de la page

<div id="page">
  <div class="header-container">
      <header id="header">

Bannière
Logo - recherche - panier
Menu/Navigation

      </header>
  </div>

Juste après j'ai placé cette portion pour ma bannière :

<div class="container-fluid">
   <div class="row" style="width: 100%;display: inline-block;height: auto;">
       <img class="img-responsive" src="image-banniere-2500px_500px.jpg">
   </div>
</div>

Et ensuite le tpl continue avec :

<div class="columns-container">
                <div id="columns" class="container">

 

Si tu peux me dire ce que tu en penses, si c'est propre, ce que tu aurais fait différemment ...

Merci encore

ps : Je vais à présent essayer de voir comment utiliser deux bannière différentes pour que ce soit responsive, afin qu'une bannière soit affiché sur les écrans tablette (paysage) et desktop et une bannière différente s'affiche si le visiteur utilise un smartphone ou une tablette (mode portait).
Là aussi si tu as des astuces, ce serait sympa

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More