problème bandeau

[hugoprod]

bonsoir à tous,

je possède en ce moment un petit souci de bandeau (http://hugoprod.fr/) sur la partie haute (slider ou des logos s'affichent), je souhaiterais la réduire dans la hauteur.
Est ce possible?

[lefabdu51]

Re : problème bandeau

fichier tmpl.header.css
ajuster une hauteur:
#header .row3 {
width: 100%;
padding: 0px 0px 25px 0px;
margin: 0px;
background-color: transparent;
}

[hugoprod]

Re : problème bandeau

/**************************************************************************************/
/*
/*    Designed by 'AS Designing'
/*    Web: http://www.asdesigning.com
/*    Web: http://www.astemplates.com
/*    License: Creative Commons
/*
/**************************************************************************************/


/**************************************************************************************/
/*   Header
/**************************************************************************************/
/**************************************************************************************/


#header
{
  width: 100%;
  margin: 0px 0px 25px 0px;
  background-position: left top;
  background-repeat: no-repeat;
}

#header .content
{
  margin: 0px auto 0px auto;
  overflow: visible;  
}

#header .breadrow .content
{
  overflow: hidden;
}


/**************************************************************************************/
/*   Header Row 0                                      */

#header .row0
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;  
  text-align: right;
  min-height: 36px;
}

#header .row0 .content
{
  padding: 0px 0px 0px 0px;  
  overflow: hidden;
}

#header .row0 .search input
{
  float: right;
  width: 150px;
  height: 18px;
  margin: 0px 0px 0px 8px;
  padding: 0px 40px 6px 3px;
  background-color: transparent;
  background-image: url('../images/bg.search.png');
  background-repeat: no-repeat;
  background-position: top right;  
}

#header .row0 ul.menu
{
  height: 23px;
  list-style: none;
  margin: 13px 5px 0px 0px;
  padding: 0px 0px 0px 0px;  
  overflow: hidden;  
}

#header .row0 ul.menu li
{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 18px;
  overflow: hidden;
  display: inline;
}

#header .row0 .menu li a.home img
{
  position: relative;
  width: 11px;
  height: 9px;
  background-position: bottom;
  margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#header .row0 .menu li a.home img:hover
{
  background-position: top;
}

#header .row0 .menu li a.search img
{
  position: relative;
  width: 11px;
  height: 9px;
  background-position: bottom;
  margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#header .row0 .menu li a.search img:hover
{
  background-position: top;
}


#header .row0 .menu li a.contact img
{
  position: relative;
  width: 11px;
  height: 9px;
  background-position: bottom;
  margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

#header .row0 .menu li a.contact img:hover
{
  background-position: top;
}


/**************************************************************************************/
/*   Row 1                                          */


#header .row1
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 30px 0px;    
  overflow: hidden;
}


/********** Top Menu ***************************************************************/


#header .row2
{
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

#header .row2 #mainmenu
{
  width: auto;
  height: 60px;
  float: left;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  position: relative;    
  z-index: 20;
  text-align: center;
}

#header .row2 #mainmenu ul.menu
{
  float: left;
  display: block;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;  
  text-align: center;
  list-style-type: none;
  overflow: visible;
}

#header .row2 #mainmenu ul.menu li
{  
  float: left;
  height: 60px;
  margin: 0px 0px 0px 0px;  
  padding: 0px 0px 0px 0px;
  position: relative;
  list-style: none;
  background: none;
  z-index: 100;
  overflow: visible;
  display: none;
}

#header .row2 #mainmenu ul.menu li a
{
  height: 34px;
  display: block;  
  margin: 5px 0px 5px 0px;  
  padding: 16px 30px 0px 30px;
  font-weight: bold;
  text-decoration: none;  
  border: none;
  border-style: none;
  outline-style: none;
  position: relative;
  text-align: center;
}

#header .row2 #mainmenu ul.menu li.current,
#header .row2 #mainmenu ul.menu li.active,
#header .row2 #mainmenu ul.menu li.actives,
#header .row2 #mainmenu ul.menu li:hover
{
  display: block;
  background-position: left top;
  background-repeat: repeat-x;  
}

#header .row2 #mainmenu ul.menu li span
{
  display: block;
}

#header .row2 #mainmenu ul.menu ul
{
  display: none;
  margin: 0px 0px 0px 0px;
  padding: 1px 0px 0px 0px;
  top: 60px;
  left: 0px;
  position: absolute !important;
  z-index: 0 !important;
  overflow: visible;
  text-shadow: none;
}

#header .row2 #mainmenu ul.menu > ul > li  
{
  float: none !important;
}

#header .row2 #mainmenu ul.menu ul .bgtop,
#header .row2 #mainmenu ul.menu ul .bgbottom
{
  padding: 0px;
  margin: 0px;
}

#header .row2 #mainmenu ul.menu ul li
{   
  height: 15px;
  margin: 0px 0px 0px 0px;
  padding: 7px 0px 6px 0px;
  border: none;
}

#header .row2 #mainmenu ul.menu ul li a
{   
  margin: 0px 0px 0px 0px !important;  
  padding: 0px 0px 0px 35px !important;
  text-align: left;    
  display: block;
  text-decoration:none;
  outline-style: none;
  border: none;  
  background-image: none;
  border-radius: 0px;
}

#header .row2 #mainmenu ul.menu li.current ul,
#header .row2 #mainmenu ul.menu li.active ul,
#header .row2 #mainmenu ul.menu li.actives ul,
#header .row2 #mainmenu ul.menu li:hover ul
#header .row2 #mainmenu ul.menu ul li,
#header .row2 #mainmenu ul.menu ul li:hover
{
}

#header .row2 #mainmenu ul.menu ul li.parent
{
  background-position: top right;
}

#header .row2 #mainmenu ul.menu ul ul
{
  display: none;
  margin: 0px 0px 0px 0px;
  padding: 1px 0px 0px 0px;
  top: -17px;
}

#header .row2 #mainmenu ul.menu ul ul li
{
}

#header .row2 #mainmenu ul.menu ul ul li a
{   
  display: block;
  text-decoration: none;
}

#header .row2 #mainmenu ul.menu ul li.parent ul li a
{
  background-image: none;
}

#header .row2 .headerimg
{
  float: right;  
}

  
/**************************************************************************************/
/*  Header Row 3                                       */

#header .row3
{
  width: 100%;
  padding: 0px 0px 25px 0px;
  margin: 0px;
  background-color: transparent;
}

#header .row3 .content
{
  margin: 0px auto 0px auto;  
  padding: 0px;
  overflow: hidden;  
  display: block;
  clear: both;
}

#header .row3 h1,
#header .row3 h2,
#header .row3 h3,
#header .row3 h4,
#header .row3 h5
{
  margin: 0px 0px 15px 0px;
  padding: 0px 0px 0px 0px;  
}

#header .row3 .slider
{
  float: left;
  padding: 0px 0px 0px 0px;
  margin: 30px 0px 0px 0px;  
}

#header .row3 p
{
  padding: 0px 0px 10px 0px;  
}

#header .row3col1
{
  float: right;
  margin: 0px 0px 0px 0px;  
}

#header .row3col1.fullheader
{
  float: left;
}

#header .row3col2
{
  float: right;
  margin: 0px 0px 0px 0px;
}

#header .row3 #companyname
{
  height: 150px;
  margin: 5px 0px 5px 0px;  
}

#header .row3 #companyname.fullheader
{
  height: 150px;  
  margin: 60px 0px 65px 0px;  
}

#header .row3 .companyname
{
  margin: 0px 0px 0px 0px;
  padding: 40px 0px 0px 0px;
    font-weight: normal;
  border: none;
}

#header .row3 #companyname a
{
  border: none;
}

#header .row3 .slogan
{
  border: none;
  font-size: 10px;
  font-weight: normal;
  margin: -2px 1px 0px 0px;
  text-align: left;  
}

#header .row3 .search
{
  margin: 0px 0px 0px 0px;
}

#header .row3 .search input
{
  border: none;
  width: 205px;  
}

Aucun changement..

[Rajoz]

Re : problème bandeau

Bonjour hugoprod,

Le plus simple pour trouver ce type de problème c'est de se servir des outils des navigateurs par exemple Firebug pour Firefox ou cliquer bouton droit puis Inspecter l'élément pour Chrome (chaque navigateur a son outil).

Le bandeau avec le slider et le logo correspondent à la ligne row3 qui fait partie du header. La ligne fait 275px de hauteur alors que les éléments eux-mêmes sont moins hauts : le slider fait 150px et le logo 42px. Il y a donc un problème dans le css et il faut regarder en particulier les margin et padding de ces 4 éléments dans le fichier tmpl.header.css

#header (l'ensemble de l'en-tête)
ligne 17 : margin: 0px 0px 25px 0px;
Cette marge en bas est la séparation entre le header et la suite (après la partie noire), donc ne gêne pas.

#header .row3 (la ligne concernée dans l'en-tête)
ligne 311 : padding: 0px 0px 25px 0px;
Cet écart vers le bas est aussi dans la séparation après, donc ne gêne pas.

#header .row3 .slider (le slider)
ligne 338 : margin: 30px 0px 0px 0px;
Comme le slider est positionné de façon absolue en haut (top: 0px; ) cette marge en haut ne gêne pas.

#header .row3 #companyname.fullheader (le logo)
ligne 373 : height: 150px; margin: 60px 0px; 65px 0px;
Cela donne pour ce logo 275px de hauteur (150 + 60 + 65). Je pense que c'est la marge du bas qu'il faut revoir, cad mettre quelque chose comme margin: 60px 0px 10px 0px; Il faudra voir au résultat si la valeur que j'indique (10px) est la bonne.

#header .row3 .companyname (toujours le logo)
ligne 379 : padding: 40px 0px 0px 0px;
Cet espace vers le haut de 40px doit probablement servir à centrer le logo en hauteur par rapport au slider.

Note: les numéros de ligne sont ceux qui me sont donnés par Chrome, il peut y avoir un peu d'écart je n'ai pas vérifié dans le code..

Amicalement,
Rajoz

[hugoprod]

Re : problème bandeau

impossible je ne fais que bouger les marges et non pas une réduction du bandeau dans la hauteur

[Rajoz]

Re : problème bandeau

Bonjour hugoprod,

Les informations que j'ai données concernent le placement des différents éléments composant le bandeau. J'ai oublié le fond noir du bandeau.

La couleur noire du fond du bandeau correspond à deux images définies dans le fichier css/style.default.css (pour le style default) :

body
{
    color: #3F3C38;
    background-color: #FFFFFF;
    background-image: url('../images/styles/default/bg.body.png');
    background-position: left top;
    background-repeat: repeat-x;
}

body.fullheader
{
    background-image: url('../images/styles/default/bg.bodyfull.png');
    background-position: left top;
    background-repeat: repeat-x;
}

La classe fullheader est définie (dans params/params.content.php ligne 21) quand il y a un module en position slider :

$body_bg = '';
if($this->countModules('slider'))
    $body_bg = 'class="fullheader"';

Cette classe permet d'utiliser soit bg.body.png soit bg.bodyfull.png. Sur le site comme il y a un slider, c'est le fond bg.bodyfull.png qui est utilisé. Cette image a une zone noire de bandeau plus haute.

Pour réduire le bandeau, il y a deux possibilités :

1) Réduire la hauteur de la zone noire correspondante dans l'image utilisée pour le fond puis repositionner si besoin les éléments du bandeau en jouant sur les marges comme je l'avais indiqué. (penser à vider le cache du navigateur).

2) Modifier le php dans params.content.php pour que fullheader ne soit pas défini (ajout des commentaires en rouge dans le code) puis repositionner si besoin les éléments du bandeau. Le code devient :

$body_bg = '';
[COLOR=#ff0000]/*[/COLOR]
if($this->countModules('slider'))
    $body_bg = 'class="fullheader"';
[COLOR=#ff0000]*/[/COLOR]

J'espère que cette fois je n'ai rien oublié...

Amicalement,
Rajoz

[hugoprod]

Re : problème bandeau

Je suis aller réduire l'image bg.body.... Avec gimp mais toujours la même chose .

[Rajoz]

Re : problème bandeau

Bonjour Hugoprod,

Comme je l'avais écrit :

Sur le site comme il y a un slider, c'est le fond bg.bodyfull.png qui est utilisé.

Sur le site, l'image qui a été modifiée c'est bg.body.png, donc pas la bonne.

Il faut recommencer avec l'autre : bg.bodyfull.png.

Amicalement,
Rajoz

[hugoprod]

Re : problème bandeau

modification faites toujours le même soucis

[Rajoz]

Re : problème bandeau

Bonjour Hugoprod,

modification faites toujours le même soucis

Je ne sais pas quelle image tu as modifié, mais ce n'est toujours pas la bonne. Sur ton site l'image bg.bodyfull.png concernée est toujours strictement identique a celle du template as002031free que j'ai téléchargé chez AS Designing.

L'adresse donnée par Firebug pour l'image de fond du site à modifier est : http://hugoprod.net/templates/as002031free/images/styles/default/bg.bodyfull.png

Amicalement,
Rajoz

[hugoprod]

Re : problème bandeau

Alors j'ai modifié les deux images avec gimp full pas full et c'est toujours pareil

[Rajoz]

Re : problème bandeau

Bonjour hugoprod,

Alors j'ai modifié les deux images avec gimp full pas full et c'est toujours pareil

Tu as dû oublier de vider les caches de navigation parce que d'après ce que je vois sur ton site le bandeau noir a très nettement diminué de hauteur.

Comme je l'avais indiqué de façon détaillée dans mes précédents posts, maintenant il faut positionner les deux éléments (companyname et slider) de cette ligne row3 en adaptant leurs marges en hauteur : Firebug est ton ami pour trouver ces marges verticales.

Amicalement,
Rajoz

[Rajoz]

Re : problème bandeau

Bonjour hugoprod,

J'ai eu un peu de temps pour regarder le template as002031free. Il y a la possibilité de mettre du code CSS dans les paramètres : Extensions > Gestion des templates > AS002031Free - Par défaut > Options > Custom CSS.

Voici un exemple de code que tu peux y mettre pour supprimer les marges des éléments du bandeau

#header .row3 { padding: 0!important; }
#header .row3 #companyname,
#header .row3 .slider { margin : 0!important; }

Après il faudra régler ces marges (si besoin) en fonction de ce que tu souhaites pour la position des ces éléments.

Amicalement,
Rajoz

[hugoprod]

Re : problème bandeau

c bon, il y a du mieux, je cherche maintenant à monter le slider et réduire le blanc entre le slide et module loogin et affiche.

[Rajoz]

Re : problème bandeau

Bonjour hugoprod,

c bon, il y a du mieux, je cherche maintenant à monter le slider et réduire le blanc entre le slide et module loogin et affiche.

Comme je l'ai déjà dit il suffit de regarder avec Firebug ou l'outil "Inspecter l'élément" de chrome pour avoir la réponse.
La structure du haut du template est la suivante :

<div id="header">                --> englobe les trois lignes
    <div class="row0">...</div>  --> ligne noire avec Contact
    <div class="row2">...</div>  --> ligne blanche ave Home
    <div class="row3">...</div>  --> ligne noire avec logo et slider
</div>
<div id="content">..</div>       --> début du contenu (login + affiche)

Maintenant vu cette structure il faut regarder le bas de header et de row3 et le haut de content :

• #header { margin: 0px 0px; 25px 0px; } : 25px de marge vers le bas --> à mettre à 0.
• #header . row3 { padding: 0px 0px 25px 0px } : 25 px de padding vers le bas --> à mettre à 0.
• #content --> pas de marge ni de padding en haut donc ok.

Puisqu'il s'agit de points que j'ai déjà mentionnés dans ce post, je vais être précis, pour réduire le blanc il faut ajouter dans les paramètres du template :

#header { margin: 0!important; }
#header .row3 { padding: 0!important; }

Amicalement,
Rajoz