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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

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