Barre de navigation qui ne s'aligne pas !

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

Résolu Barre de navigation qui ne s'aligne pas !

Message par Melodiam le Jeu 28 Fév 2013 - 10:12

Coucou, c'est encore moi ! ^^

Voilà, j'ai un souci avec ma barre de navigation ! Elle est censée être fixe, ça c'est ok. Le truc c'est que j'aurais aimé qu'elle prenne toute la longueur du forum. Or là elle ne le fait pas et en plus elle n'est pas bien alignée ! D:

Spoiler:

Voilà mon code CSS :
Code:
.naviga {
position: fixed;
top: 0px;
width: auto;
color: #212121;
padding:2px;
font-family: georgia;
text-transform: uppercase;
background-color: #0A0A0A;
border-radius : 3px;
border-bottom: 2px solid #641714;
}

Une div "naviga" encadre aussi mon code template !


Pourriez-vous m'aider ? ^^'


Dernière édition par Melodiam le Jeu 28 Fév 2013 - 11:09, édité 1 fois

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Matriochka le Jeu 28 Fév 2013 - 10:15

Bonjour,

Dans ton CSS, remplace width: auto; par width:100%;

Serait-il possible d’avoir ton template overall_header pour l’alignement ? À mon avis, tu as mis ta barre de navigation à l’intérieur de bodyline alors qu’il faut la mettre en dehors.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Milouze14 le Jeu 28 Fév 2013 - 10:17

Salut Melodiam,


un
margin-left:0;
et
margin-right:0;
devrait régler l'affaire Wink .
Edit oups désolé Matriochka Wink .
a++



Milouze14
+ Hyperactif +

Masculin
Messages : 4562
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Melodiam le Jeu 28 Fév 2013 - 10:31

Merci vous deux ! Very Happy Pour les 100% c'est bon, faut régler l'alignement du coup :/

Voilà mon template overall_header :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <!-- BEGIN meta_emulate_ie7 -->
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
      <!-- END meta_emulate_ie7 -->
      <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" />
      {META_FAVICO}
      {META}
      <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>
      {HOSTING_JS}
      <!-- BEGIN switch_ticker -->
      <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
      <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
      <!-- END switch_ticker -->
      <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 = false, logInBackgroundClass = false;
      <!-- END switch_login_popup -->
      //]]>
      </script>
      {GREETING_POPUP}
      <!-- BEGIN hitskin_preview -->
      <style type="text/css">
      #hitskin_preview {
          margin: 0; padding: 0;
          position: fixed;
          top: 0; left: 0;
          width: 100%;
          height: 65px;
          background: url('http://illiweb.com/fa/hitskin/hitskin_bar.png') repeat-x left -15px;
          color: #fff;
      }
      * html #hitskin_preview { /* Fix for IE6 since it doesn't implement fixed positionning */
          position: absolute;
          top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop);
          z-index: 2;
          background: transparent url('http://illiweb.com/fa/hitskin/hitskin_bar-ie6.gif') repeat-x left -15px;
      }
      * html { /* Gunlaug's Speed fix for the above positionning fix. Sorry for the fix for the fix */
        background: #fff url(foo) fixed;
        }
      #hitskin_preview h1 {
          float: left;
          margin: 3px 0 0 0;
          padding: 0 0 0 10px;
          font: italic normal 25px Arial,sans serif;
          color: #fff;
      }
      #hitskin_preview h1 img {
          vertical-align: middle;
      }
      #hitskin_preview em {
          color: #7CBA2C;
          font-weight: bold;
      }
      #hitskin_preview a {
      color: #fff;
      }
      #hitskin_preview a:hover {
      text-decoration: underline;
      }

      #hitskin_preview .content {
          text-align: right;
      }
      #hitskin_preview .content p {
          margin: 4px 1em 0px 1em;
          font-size: 13px;
          line-height: 1.8em;
          color: #fff;
          font-weight: bold;
      }
      #hitskin_preview .content p span {
          font-weight: normal;
          font-size: 0.8em;
      }
      body {
          margin-top: 40px !important;
      }
      {hitskin_preview.HITSKIN_RTL_CSS}
      </style>
      <!-- END hitskin_preview -->
    <script type="text/javascript">
    function visibilite(thingId)
    {
    var targetElement;
    targetElement = document.getElementById(thingId) ;
    if (targetElement.style.display == "none")
    {
    targetElement.style.display = "" ;
    } else {
    targetElement.style.display = "none" ;
    }
    }
    </script>   
    <script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/198368448645211924/accordeons.js"></script>

    </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://illiweb.com/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}
      <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
          <tr>
            <td class="bodyline">
                        <table cellspacing="0" width="100%" cellpadding="0" border="0" align="center">
                  <tr>
                    <td><center><div class="naviga" align="center">{GENERATED_NAV_BAR}</div></center></td>
                  </tr>
                </table><br/>
                <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>
                      <td align="center" width="100%" valign="middle">
                        <div class="maintitle">{MAIN_SITENAME}</div>
                        <br />
                        <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                      </td>
                      <!-- END switch_logo_left -->

                      <!-- BEGIN switch_logo_center -->
                      <td align="center" width="100%" valign="middle">
                        <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a><br />
                        <div class="maintitle">{MAIN_SITENAME}</div>
                        <br />
                        <span class="gen">{SITE_DESCRIPTION}</span>
                      </td>
                      <!-- END switch_logo_center -->

                      <!-- BEGIN switch_logo_right -->
                      <td align="center" width="100%" valign="middle">
                        <div class="maintitle">{MAIN_SITENAME}</div>
                        <br />
                        <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                      </td>
                      <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 -->
                <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 -->

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Matriochka le Jeu 28 Fév 2013 - 10:32

Là :
Code:
                    <td><center><div class="naviga" align="center">{GENERATED_NAV_BAR}</div></center></td>
Retire la cellule que tu as mise. Et déplace ta div en-dehors de la table, donc avant :
Code:
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Melodiam le Jeu 28 Fév 2013 - 10:42

Donc je met ma div "naviga" avant le <table ... et je la ferme après le "center"> ? ^^'

Je suis désolée hum, je suis lente !

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Matriochka le Jeu 28 Fév 2013 - 10:49

Tu mets comme ceci :
Code:
<div class="naviga" align="center">{GENERATED_NAV_BAR}</div>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
La balise center peut également être retirée, elle n’est pas conseillée et peut largement être contournée avec une ou deux lignes de CSS.

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Melodiam le Jeu 28 Fév 2013 - 11:04

Alors, la navigation persiste à ne pas vouloir prendre toute la page ^^'

Cela me donne ceci du côté gauche :
Spoiler:

En tous cas j'ai déplacé la div correctement Smile

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Matriochka le Jeu 28 Fév 2013 - 11:06

Pas de souci, on y arrive petit à petit Smile

Dans ton CSS ajoute ceci :
Code:
body {margin:0px;}

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation qui ne s'aligne pas !

Message par Melodiam le Jeu 28 Fév 2013 - 11:09

OUHOU ! Ça marche, super ! MERCI BEAUCOUP ♥ cheers

Melodiam
****

Messages : 206
Inscrit(e) le : 16/04/2012

Melodiam a été remercié(e) par l'auteur de ce sujet.

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


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