phpBB-fr.com

[chon]

Bonjour à tous,

j'ai trois éléments dans ma bannière et j'aimerais qu'ils se répartissent horizontalement en fonction de la taille de la fenêtre de l'explorateur.
J'ai mon logo calé à gauche en float-left, une image à droite calée en float-right et mon titre au centre que je ne sais pas centrer automatiquement entre les deux.

Quelqu'un a-t-il la solution ?

Par avance, merci pour votre aide !

[sub60]

salut

Quelqu'un a-t-il la solution ?

certainement, mais sans rien voir et sans connaître le style utiliser c'est difficile de répondre, un lien peut être ?

[Steph]

Merci pour la réponse. Effectivement un peu court...

La base est Prosilver.

Malheureusement, je travaille la skin hors ligne.

Ça donne ça :

image

Dans l'overall-header.html, ça donne ça :

Code: Tout sélectionner

      <div class="headerbar">
         <div class="inner"><span class="corners-top"><span></span></span>         

         <div id="site-description">
            <a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
            <div id="header-center">
               <div id="header-top_image" title='VFL-FR'></div>
               <h1>{SITENAME}</h1>
               <p>{SITE_DESCRIPTION}</p>
               </div>
               <div id="header-right_image" title='La photo du moment'></div>
            <p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
         </div>

Pour les CSS, ça donne ça pour le titre :

Code: Tout sélectionner

#header-center {
   display: block;
   float: left;
   text-align: center;
   height: 150px;
   width: auto;
   margin: 10px 10px 10px 0;
}

#header-top_image {
   background: url("{T_THEME_PATH}/images/VFL-FR_Title.png") no-repeat;
   height: 90px;
   width: 400px;
   margin: 0 auto 10px auto;
}

Et pour la photo de droite :

Code: Tout sélectionner

#header-right_image {
   background: url("{T_THEME_PATH}/images/vfl-fr_header-photo.png") no-repeat;
   display: block;
   float: right;
   height: 150px;
   width: 224px;
   margin: 10px 10px 10px 0;
}

Voilà, j'espère avoir été assez complet pour les infos. Bien sûr, si il y a des infos totalement inutiles ou erronées, ne pas hésiter à le dire...

Merci pour votre aide.

[sub60]

la réponse est la

float: left;
text-align: center;

il peut pas être a gauche et centrer au milieux en même temps, c'est soit l'un soit l'autre
et pour infos il y a aussi un tuto dans le forum Doc pour centrer la description

[Steph]

Merci pour ton aide sub60.

Je progresse, mais c'est pas encore tout-à-fait ça...

Désormais, j'obtiens ça :

image

Comme on peut le voir, "VFL-FR Le forum des amateurs..." n'est pas centré. Je précise que ce n'est pas du texte mais une image. J'avoue sécher un peu...

Code CSS pour le logo :

Code: Tout sélectionner

#logo {
   float: left;
   width: auto;
}


Pour la partie centrale :

Code: Tout sélectionner

#header-center {
   height: 150px;
   width: auto;
}

#header-top_image {
   background: url("{T_THEME_PATH}/images/VFL-FR_Title.png") no-repeat;
   height: 90px;
   width: 400px;
   margin: 0 auto 10px auto;
}

Pour la photo de droite :

Code: Tout sélectionner

#header-right_image {
   background: url("{T_THEME_PATH}/images/vfl-fr_header-photo.png") no-repeat;
   float: right;
   height: 150px;
   width: 224px;
}

Voilà ! Merci à vous pour votre aide.

[Steph]

Bonjour chon,

J'ai mis tes images en liens car elles ne respectent pas les conditions fixées ici ---> annonces-a-lire/sujet17573.html

Taille maxi d'une image : 500 pixels - poids 150 ko

Nous te remercions de ne pas poster des images de grande taille/de gros poids afin de ne pas alourdir/modifier l'affichage normal des pages.

@+

[chon]

Oups, mille excuses... ferai pu !

[chon]

Un petit up...