Faire passer le header au dessus du forumline/bodyline ?

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Ven 9 Aoû 2013 - 19:31

Bonjour à vous chers membres du forum des forums !

Je fais appel à votre savoir car il se trouve que j'ai un petit problème d'ordre technique à vous exposer.

Et à défaut de ne pas savoir comment l'expliquer à l'écrit, j'ai tâché de vous l'illustrer :

Tout d'abord, voici ma situation actuelle :

Spoiler:

↓

& ci-dessous, ce que je souhaite obtenir :

↓

Spoiler:

Je souhaiterais donc savoir comment procéder, afin que mon header ( le montage + le ruban qui en fait partit http://img1.imagilive.com/0813/HEADER-FINAL.png ) passe au dessus du corps du forum - ou à l'intérieur - sans le déformer.

En vous remerciant par avance,

Bonne soirée !


Dernière édition par Sparadra le Mar 20 Aoû 2013 - 11:53, édité 1 fois
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Anzu Sam 10 Aoû 2013 - 0:12

Bonsoir,

Pourrait-on avoir le lien du forum concerné ?

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Sam 10 Aoû 2013 - 2:00

Bonjour Anzu,

Le forum concerné est Gates Of Etro, mais pour le nouveau design de ce même forum je m’exerce à cette adresse.

Merci par avance.


Dernière édition par Sparadra le Mar 20 Aoû 2013 - 12:03, édité 1 fois
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Anzu Sam 10 Aoû 2013 - 13:22

Pourriez vous mettre le header sur le forum test histoire que je puisse mieux visualiser le problème ?
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Sam 10 Aoû 2013 - 14:02

Voila qui est fait !
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Lun 12 Aoû 2013 - 14:22

Petit Up ! éwé
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Anzu Lun 12 Aoû 2013 - 15:08

Bonjour,

Je suis dessus, il faut passer par le template du coup, je vous donne ça.
Si jamais votre overall header est modifié, donnez le moi sinon je vais en prendre un par défaut.

EDIT: Dans le template overall header, repérez:

Code:
</script>
 <!-- END google_analytics_code -->
</head>
qui se trouve juste avant:

Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
entre les deux vous mettez:

Code:
<div class="headercenter"><center><img src="http://img1.imagilive.com/0813/HEADER-FINALdc3.png"/></center></div>
Dans la css:

Code:
.headercenter{
  width: 99%;
  top: 10px;
  position: absolute;
}

.bodylinewidth {
  margin-top: 525px;
}
Fonctionne bien chez moi:

edit2: Si jamais, pour le top: 10px je ne savais pas si vous le vouliez collé ou non, si vous ne voulez pas d'espace, mettez 0px.

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Lun 12 Aoû 2013 - 18:23

Bonjour Anzu,

Déjà, un grand merci à vous pour vous être penché sur ma petite histoire de header rebelle !

Je me suis empressée de tester la solution que vous m'avez proposé, mais il semblerait que mon forumline et ma barre menu ne soient pas tout à fait d'accord avec cette nouvelle mise à jour.

Voici le résultat obtenu → http://hikaru-graph-test.forumgratuit.org/

J'ai effectivement modifié le template " overall_header ", peut être est-ce dû à ça ?

Si besoin est, le voici :

Code:
</div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
  <head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des elements et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
   <script type="text/javascript">
$(document).ready(function() {
            $(".cssactif_progressif").css("display", "none");
            $(".cssactif_progressif").fadeIn(500);
    });
</script>
    
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
    
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}
<div id="navigation"><div id="navig">{GENERATED_NAV_BAR}</div></div>
   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation --><div class="cssactif_progressif">

En espérant que ça puisse aider,

Merci par avance !
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Anzu Lun 12 Aoû 2013 - 18:37

Possible d'avoir le css associé ?
(au moins celui de la barre)
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Lun 12 Aoû 2013 - 19:25

Oui bien sûr, la voici :

Code:
/* BARRE NAVIGATION */

#i_logo
{
  margin-top: 22px;
}

#navig a
{
  font-family: Georgia;
  font-weight: bold;
  color: #5E8B91 !important;
  text-shadow: 1px 1px 0px #9C9C9C;
}
#navig a:hover
{
  color: #efefef !important;
}


#navigation
{
  position: fixed;
  z-index: 999;
  height: 30px;
  width: 100%;
  margin-left: -8px;
}
#navig
{
  width: 900px;
  margin: auto;
  text-align: center;
  background-image: url('http://img1.imagilive.com/0712/Bois.png');
  border-bottom: 2px solid #939393;
  padding-bottom: 3px;
}

#navig a
{
  font-weight: bold;
}
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Ven 16 Aoû 2013 - 19:31

Je me permet un petit Up ! èwè
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Dim 18 Aoû 2013 - 22:00

Deuxième petit Up ! ewè
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Anzu Lun 19 Aoû 2013 - 2:04

Bonsoir,

Désolée pour le retard, un peu occupée en ce moment.
Dans votre css, ici:

Code:
#navigation
        {
          position: absolute;
          z-index: 999;
          height: 30px;
          width: 100%;
          margin-left: -8px;
          top: 0px;
        }
J'ai remplacé le fixed par absolute et j'ai rajouté le top 0px

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire passer le header au dessus du forumline/bodyline ?

Message par Sparadra Mar 20 Aoû 2013 - 11:53

Bonjour !

AH ! Un très grand merci à vous Anzu pour vous être penché sur ma petite histoire, c'est parfait. Merci merci ;w;

Problème résolu 

Bonne journée & bon très courage pour l'entraide !
Sparadra

Sparadra
*

Féminin
Messages : 44
Inscrit(e) le : 24/02/2012

http://gates-of-etro.actifforum.com/
Sparadra a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum