Barre de navigation vertical

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

Résolu Barre de navigation vertical

Message par Freaky™ le Mar 13 Déc 2011 - 18:59

bonsoir, bonsoir !
J'aimerai un petit coup de pouce ... css il me semble pour pouvoir mettre ma barre de navigation, non pas à l'horizontale, mais à la verticale. Avec un lien de la navbar par ligne donc...


Merci beaucoup !


Dernière édition par Freaky™ le Sam 24 Déc 2011 - 14:08, édité 1 fois

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Mar 13 Déc 2011 - 19:04

Bonsoir Freaky,

Est-ce un menu déroulant vertical que tu aimerais ou bien juste des liens à la ligne suivante ?
De quel côté du forum voudrais-tu la navbar ? Collée au bord ou centrée ?

Bref, un p'tit schéma ne serait pas du luxe pour t'aider efficacement...

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Mar 13 Déc 2011 - 19:20

Bonsoir Final-Blonde
Erf, je suis désolé è.é Pour une fois que j'oublie et qu'il ne me semble pas nécessaire il en faut un, lol.

Voici pour le schéma, j'espère qu'il t'aidera à mieux appréhender =)
& Non, il ne s'agit pas d'un menu déroulant. Je voudrais "juste" que la navbar soit vertical afin de la positionner "sur" la bannière dont l'image que tu vois ici sera fixée à gauche du forum si tout se passe bien...



Je suis lassée de la navbar horizontale, je veux essayer une autre mise en page ._.
Merci n_n

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Mar 13 Déc 2011 - 22:35

Woups, me suis perdue en conjectures ôÓ

Revenons en à nos moutons, et en fait il y a le choix entre deux façons, dont l'une que perso je préfère parce qu'elle est plus "clean":
- Ce serait d'assembler le header et la navbar verticale dans un même tableau principal, ceci directement dans le template overall_header.
Pourquoi ? Parce que justement plus propre et gérable en un seul bloc.

Pour cela, il me faudrait le lien de ton header.

L'autre façon serait par l'identifiant CSS a.mainmenu, mais c'est plus galère à positionner et selon les résolutions ainsi que les navigateurs, carrément, un bon:
Pfiou !

A toi de me dire ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Mar 13 Déc 2011 - 23:17

Optons pour la manière "clean" =D ? Car si tu souffles rien qu'à l'idée de passer par le css, j'ose même pas imaginer le bazar que se doit être...
Seul potentiel pépin à l'horizon, il s'agit d'une ban' de fond, non d'une simple bannière. J'espère que ça ne vas pas poser souci ?
Les voici

Image de fond :
Spoiler:
Code:
http://img15.hostingpics.net/pics/301042Sanstitre2copie.png

Et la bannière transparente
Code:
http://img15.hostingpics.net/pics/351618blanc.png

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Jeu 15 Déc 2011 - 10:05

Salut Freaky !

Pas eu de disponibilité avant, because journée chargée en cours divers et vari(és)ablement ennuyeux... Grrr

Ensuite, pour devoir passer par le CSS aussi afin de positionner les liens du menu, et parce que c'est une seule même variable qui contient tous les comportements html du menu, j'ai donc accessoirement quelque peu galéré afin de trouver le truc qui forcerait ces fichus liens à se mettre à la ligne, évidemment, absolument tout bête et quasi sous mes doigts:
Le famous display: block; directement à l'identifiant des liens, ce qui génère, évident, automatiquement un saut de ligne.
Nous aurions pu aussi créer les liens via leur url, ce qui aurait été franchement plus simple, sauf que tu n'aurais plus eu les fonctions automatiques comme:
MP noramal qui fait place au Nouveau MP, Connexion et S'enregistrer qui font place au Déconnexion [ USERNAME ]
C'est au haut niveau du script, et là je ne suis pas encore amie-ami avec !
Cette variable {GENERATED_NAV_BAR} contient donc tous les liens et le code de l'espacement horizontal & nbsp; (sans espace) entre chaque lien et c'est exactement là que résidait tout le problème.
(J'avais pourtant le souvenir que ce n'était pas aussi ardu...)
Bref, re- Grrr

Trêve de lamentations, c'est parti avec tout d'abord positionner le header (logo, bannière) dans PA >> Affichage > Entête et navigation >
Et comme tu semblais sous-entendre que je t'ai forcé la main avec le schéma, voilà le retour de la piecetta :
Spoiler:

Mr. Green

Le HTML dans le template overall_header, trouve et supprime :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
Plus haut, nous avons la grande balise pour le logo à gauche :
Code:
<!-- BEGIN switch_logo_left -->
C'est par là que tout va se passer.

Dans le tableau en place pour l'entête (header et menu), plus précisément dans la cellule (td), nous allons créer un div (pour la position "relative" que seul Firefox ne lit pas dans un tableau) afin de donner un "parent" qui contiendra un tableau pour la bannière, un autre bloc pour les mêmes raisons que le précédent avec un tableau pour l'"héritier" ("enfant"), ceci pour le menu, et ainsi pouvoir lui attribuer un:
position: absolute; ainsi lisible pour toutes les résolutions d'écran et plus malléable à positionner au pixel près.

A la place de :
Code:
         <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 -->
Copie-colle :
Code:
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr> 
<td>
<div id="myheader">
<!-- BEGIN switch_logo_left -->
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td class="transheader"><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="0" /></a></td>
</tr></table></div>
<!-- END switch_logo_left -->
</td>
                                         
<td align="left" valign="top">
<div id="verticalbar">
<table class="verticalnavig" align="left" border="0" cellspacing="0" cellpadding="0"><tr>
<td align="left" valign="top">
<div>{GENERATED_NAV_BAR}</div>
</td></tr></table>
</div>
</td>
A ce point, nous avons créé deux attribut "id" et deux "class" :
- id="myheder" bloc principal de l'entête que nous pouvons définir comme "parent"
- class="transheader" à la cellule (td) de la bannière que nous pourrions aussi définir comme "héritier" / "child"
- id="verticalbar" bloc du menu que nous pouvons définir comme "parent"
- class="verticalnavig" tableau que nous pouvons définir comme "héritier" / "child" et contenant la variable du menu

Au CSS maintenant.
Tout d'abord, je n'ai pas encore vraiment cherché pour le header, parce que ta seconde image (transparente c'est ça ?) devrait absolument être de la même dimension que l'image même. Cela dit, j'ai donné un attribut pour cette fonction, mais je ne me suis pas attardée.

Donc, je te balance le CSS avec déjà quelque chose que tu laisses de côté pour l'instant, et restons concentrées sur le menu.
Spoiler:
/*--------------------------- menu vertical pour Freaky -------------------------------------*/
/*header
------------------------------*/

#myheader {
position relative;
width: auto;
margin: 0px;
}
/*transparency sur header*/
.transheader {
background: #f00 url(http://img15.hostingpics.net/pics/351618blanc.png) no-repeat fixed 0 0; /*ordre a respecter pour les normes W3C avec le raccourci background > color image repeat attachment position*/
margin: 0px;
z-index: 2;
}
#i_logo {
background-position: 0 0;
z-index: 1;
}

/*vertical menu
------------------------------*/
/*bloc global de la navbar*/

#verticalbar {
position: relative;
width: auto;
margin: 0px!important;
}
/*menu a soummettre au nouveau par ses identifiants de base
----------------------------------------------------------------------*/

.mainmenu {
position: relative;
width: auto;
margin: 0px!important;
}
/*killer code de tout espace des images du menu par leur identifiant d origine*/
.mainmenu img {
background-color: transparent;
background-image: none;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
/*killer de toute trace des liens par leur identifiant d origine*/
a.mainmenu {
color: transpent;
font-size: 0 0em;
line-height: 0;
text-decoration: none!important;
}
a.mainmenu:hover {
color: transparent;
}
/*tableau du menu vertical*/
.verticalnavig {
position: absolute;
top: 0px;
left: 0px;
padding: 0px;
margin: 3px 0 3px;
}
/*gestion des liens du menu vertical*/
.verticalnavig a {
display: block;
color: #000;
font: italic small-caps bold 13px "Lucida Grande",sans-serif; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly*/
text-align: left;
white-space: nowrap; /*pour que le titre du lien reste sur une ligne*/
padding: 0px;
margin: 0px;
}
.verticalnavig a:hover {
color: #dad;
}
/*------------------------------------------------------- fin menu vertical pour Freaky -------------------------------------*/
Il me semble que ça se passe de plus de commentaires vu que le CSS en est truffé (en magenta)...
Seule petite précision, le CSS suit l'ordre logique du squelette que forme le HTML.


A toi de jouer maintenant !

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Sam 17 Déc 2011 - 13:47

Ouah °° Que de lecture, lol
Je poste rapidement car je suis sur le départ pour t'informer que j'ai connaissance de ta réponse, je lis tout ça dans le détail dès ce soir, je te remercie beaucoup d'avoir pris de ton temps à trouver une réponse n_n

J'éditerai ce post si personne ne post d'ici là

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Sam 17 Déc 2011 - 14:52

Je poste, parce que les posts édités sont ceux que je rate, ne voyant rien arriver dans mon mail, mais merci de t'être manifestée Freaky.

Si il y a autant de texte, dans cette prose libre il y a néanmoins des informations dont tu devrais avoir connaissance.
En outre, c'est très calculé de ma part : Comprendre ce qui a été fait et que ultérieurement, tu puisses te débrouiller au mieux quand tu voudras apporter des modifications (ce jour arrivera, si si, on se lasse vite d'un design).

Prends ton temps, moi mon boulot est fait Mr. Green

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Dim 18 Déc 2011 - 16:05

@Final-Blonde a écrit:Et comme tu semblais sous-entendre que je t'ai forcé la main avec le schéma, voilà le retour de la piecetta :
Qui a parlé de forcer la main Razz Nan mais quelle idée ^^

J'ai suivi tes explications, le rendu correspond +/- à ce que je recherche c'est parfait °° Il va falloir que je prenne un peu de temps pour lire le code en détail par contre et que je retouche le css (ou le tableau) car la navigation est écrasée à droite pour le moment. Je vois si j'arrive à corrige ça, sinon je reviens appeler à l'aide =) Merci ^^

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Dim 18 Déc 2011 - 17:15

Voilà en gros ce que ça doit te donner :

Chez moi le header et le menu sont bien à gauche du forum (non de la page, mais c'est facile à modifier si c'est ce que tu veux).

J'ai omis de te dire que la bannière-image elle va dans le PA >> Images > Mode avancé > Logo du forum
Et ensuite se référer à mon smart schéma, siyouplé.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Lun 19 Déc 2011 - 9:40

Oui c'est bien le rendu, bon sauf que je me retrouve avec une image rouge au lieu de transparente dieu sait ce que j'ai encore trafiqué, mais mettons ça de côté..
En fait je voyais le rendu ainsi :



& c'est là que je crains que ça ne relève pas d'un tableau... Car la navbar se superpose à l'image (de fond... de la ban... là je sais plus trop)

(avec le lien du fora de test se sera encore mieux effectivement lien)


Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Lun 19 Déc 2011 - 9:56

Ce que je ne comprends pas c'est que tu as l'image "transparente" (qui ne l'est en effet pas) à droite, alors que chez moi elle est bien en dessous de la première image, et ce même sur les autres navigateurs...

Si, ça devrait être possible de mettre les liens sur l'image,
Là n'est pas le problème, plutôt que nous avons l'air d'avoir des codes différents toi et moi alors que nous devrions avoir exactement la même chose.
Peux-tu donner le template overall_header et tout ton CSS ?

Et donc tu voudrais la bannière à gauche de la page et non du forum, c'est ça ?

EDIT : Est-ce que ton image 1 est une image de fond ou un logo (bannière), et ou l'as-tu mise ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Lun 19 Déc 2011 - 10:09

Avant de te noyer sous les codes, je vais déjà réinitialiser le template (il n'y a pas de gros changement) et refaire ta manip, car j'ai bidouillé dans tout les sens pour essayer d'obtenir ce que je t'ai présenté dans mon précédent message ._.
(sachant que je voulais mettre à gauche le tableau)

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Lun 19 Déc 2011 - 13:05

Essaie de ne donner aucun style supplémentaire aussi, jusqu'à ce que nous ayons tout placé, y compris l'image transparente.

Une fois que tu auras ce que tu voulais, là où tu le voulais, tu pourras donner libre cours à ta créativité.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Lun 19 Déc 2011 - 19:30

Okay, ça me semble plus sage en effet.
Alors pour le template, je pense qu'on a le même, mais voici :

Code:
<!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 ?l?ments */
            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 contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments 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 -->
</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 width="100%" cellspacing="0" cellpadding="0" border="0">
              <tr>
<td>
<div id="myheader">
<!-- BEGIN switch_logo_left -->
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td class="transheader"><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="0" /></a></td>
</tr></table></div>
<!-- END switch_logo_left -->
</td>
                                       
<td align="left" valign="top">
<div id="verticalbar">
<table class="verticalnavig" align="left" border="0" cellspacing="0" cellpadding="0"><tr>
<td align="left" valign="top">
<div>{GENERATED_NAV_BAR}</div>
</td></tr></table>
</div>
</td>
                  <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 -->

Et voici pour le css, assez basique en fait

Code:
        /*--------------------------- menu vertical pour Freaky -------------------------------------*/
        /*header
        ------------------------------*/
        #myheader {
        position relative;
        width: auto;
        margin: 0px;
        }
        /*transparency sur header*/
        .transheader {
        background: #f00 url(http://img15.hostingpics.net/pics/351618blanc.png) no-repeat fixed 0 0; /*ordre a respecter pour les normes W3C avec le raccourci background > color image repeat attachment position*/
        margin: 0px;
        z-index: 2;
        }
        #i_logo {
        background-position: 0 0;
        z-index: 1;
        }

        /*vertical menu
        ------------------------------*/
        /*bloc global de la navbar*/
        #verticalbar {
        position: relative;
        width: auto;
        margin: 0px!important;
        }
        /*menu a soummettre au nouveau par ses identifiants de base
        ----------------------------------------------------------------------*/
        .mainmenu {
        position: relative;
        width: auto;
        margin: 0px!important;
        }
        /*killer code de tout espace des images du menu par leur identifiant d origine*/
        .mainmenu img {
        background-color: transparent;
        background-image: none;
        width: 0px;
        height: 0px;
        padding: 0px;
        margin: 0px;
        }
        /*killer de toute trace des liens par leur identifiant d origine*/
        a.mainmenu {
        color: transpent;
        font-size: 0 0em;
        line-height: 0;
        text-decoration: none!important;
        }
        a.mainmenu:hover {
        color: transparent;
        }
        /*tableau du menu vertical*/
        .verticalnavig {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px;
        margin: 3px 0 3px;
        }
        /*gestion des liens du menu vertical*/
        .verticalnavig a {
        display: block;
        color: #000;
        font: italic small-caps bold 13px "Lucida Grande",sans-serif; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly*/
        text-align: left;
        white-space: nowrap; /*pour que le titre du lien reste sur une ligne*/
        padding: 0px;
        margin: 0px;
        }
        .verticalnavig a:hover {
        color: #dad;
        }
        /*------------------------------------------------------- fin menu vertical pour Freaky -------------------------------------*/

/*apparence des forums
------------------------------*/
a.forumlink {
  font-size: 16px;
  font-family: Georgia;
  text-decoration: none;
}

div#forum_description {
  background-color: #f5f5f5;
  border: 3px solid #e4e1de;
  padding: 2px;
}

.forumline {
  border: 10px #e7e7e7 solid;
}

/*navbar
------------------------------*/
a.mainmenu {
  background-color: #e4e1de;
  color : #666;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  font-family: arial;
  cursor: pointer;
  border: #d9d6d2;
  border-right-style: solid;
  border-right-width: 12px;
  padding-right: 8px;
  padding-left: -18px;
  padding-top: 1px;
  padding-bottom: 1px;
}

a.mainmenu:hover{
  background-color: #e4e1de;
  color : #666;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  font-family: arial;
  cursor: pointer;
  border: #b2aba5;
  border-right-style: solid;
  border-right-width: 12px;
  padding-right: 8px;
  padding-left: -18px;
  padding-top: 1px;
  padding-bottom: 1px;
}



/*apparence des messages
------------------------------*/

/*sous titre 1*/
.ST1 {
  font-style: italic;
  text-transform: uppercase;
  font-weight:bolder;
  font-size: 22px;
  font-family: georgia;
}

/*sous titre 2*/
.ST2 {
  font-style: italic;
  text-transform: uppercase;
  font-weight:bolder;
  font-size: 16px;
  font-family: arial;
}

/*mise en forme italique gras soulignement */
i {
  color: #f07d7d;
}

body {
  background-repeat: no-repeat;
}


Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Lun 19 Déc 2011 - 19:49

Ah oui, mais non !
Plus bas tu annules tout ce que nous avons fait pour "massacrer" les liens de base du menu.
Dans le CSS si on utilise les mêmes identifiants, ce sont ceux qui viennent en dernier dans la feuille de style qui prennent effet.

Supprime donc ce pavé (tu peux les sauvegarder dans le Bloc-notes ou Notepad++ si tu veux réutiliser ces valeurs, bien qu'il y ait des raccourcis pour toutes tes lignes "padding" et "border", mais ceci est une autre histoire):
Spoiler:
/*navbar
------------------------------*/
a.mainmenu {
background-color: #e4e1de;
color : #666;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
font-family: arial;
cursor: pointer;
border: #d9d6d2;
border-right-style: solid;
border-right-width: 12px;
padding-right: 8px;
padding-left: -18px;
padding-top: 1px;
padding-bottom: 1px;
}

a.mainmenu:hover{
background-color: #e4e1de;
color : #666;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
font-family: arial;
cursor: pointer;
border: #b2aba5;
border-right-style: solid;
border-right-width: 12px;
padding-right: 8px;
padding-left: -18px;
padding-top: 1px;
padding-bottom: 1px;
}
Dans le hover, on ne met que les propriétés qui doivent changer du normal.

Dis-moi si maintenant nous voyons bien la même chose ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Mar 20 Déc 2011 - 11:08

Zut, je pensais que c'était l'inverse, que la feuille retenait les premiers inscrits ._. Là c'est bon on a la même chose n_n

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

Freaky™ a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Mar 20 Déc 2011 - 20:44

Bon maintenant que je t'ai bien promenée dans le template, nous bougeons encore ô'Õ

En fait il s'agissait dans un premier temps de mettre le menu à la verticale et j'ai pour habitude d'user et d'abuser de différents subterfuges entre tableaux et blocs (div) pour arriver à séparer les éléments.

Maintenant nous allons épurer tout ça tout en gardant nos identifiants et la "stratégie" dans ses grandes lignes.
C'est l'étape le menu sur la bannière.

- Pour que la bannière reste un lien vers l'index, on met l'image à sa place dans les images>
"Logo du forum"
- Suivre ensuite la capture plus haut.

- Dans le template overall_header de base (supprime le personnel avec suppr) sur l'index des templates < Général
Nous allons supprimer toute cette partie :
Code:
            <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>

            <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
Et à nous la liberté !

Pour positionner le tout à gauche de la page, nous remontons la butte du template pour nous installer entre les grandes balises :
Code:
   <!-- END hitskin_preview -->
/////////////////////////////////// ICI ///////////////////////////////////////
   <!-- BEGIN switch_login_popup -->
C'est l'endroit idéal pour ne pas déformer la page et ne pas influer sur la largeur du forum.
Copie-colle :
Code:
   <!-- END hitskin_preview -->

<table><tr><td>

<div id="headernavbar">
<table id="myheader" align="left" cellspacing="0" cellpadding="0" border="0"><tr>
<td align="right" valign="top">
<div id="verticalbar">
<!-- BEGIN switch_logo_left -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<!-- END switch_logo_left -->
<div class="verticalnavig">
{GENERATED_NAV_BAR}
</div>
</div>
</td>
</tr></table>
</div>

</td></tr></table>
 
   <!-- BEGIN switch_login_popup -->

C'est épuré, si si.
Nous devons garder ces blocs dans les blocs pour le positionnement des deux éléments principaux :
- Le header et le menu sur le header :
Le problème est que certains navigateurs (comme Firefox) ne lit pas la position "relative" dans un tableau.
Nous devons l'avoir pour, dans cette position relative-parent > attribuer la position absolue-héritier, afin que nous puissions positionner comme nous le souhaitons, mais surtout pour que le positionnement soit le même pour toute résolution d'écran.
Fin du cours.

Le CSS nous l'avons déjà plus ou moins en place, mais maintenant nous pouvons positionner :
Spoiler:
/*--------------------------- menu vertical pour Freaky -------------------------------------*/
/*header et navbar
---------------------------------*/
#headernavbar {
position: relative;
width: auto;
margin: 4px 0 0 4px; /*ordre du raccourci idem pour le padding > top right bottom left*/
}
/*header
------------------------------*/
#myheader {
display: block;
width: 700px; /*largeur de limage dans le logo*/
height: 450px; /*hauteur de l image dans le logo*/
margin: 0px;
}
#i_logo {
background-position: 0 0;
}

/*vertical menu
------------------------------*/
/*bloc global de la navbar*/
#verticalbar {
position: relative;
width: auto;
margin: 0px;
}
/*-------------------------------- menu a soummettre au nouveau par ses identifiants de base ----------------------------*/
.mainmenu {
position: relative;
padding: 0px;
margin: 0px;
}
/*killer code de tout espace des images du menu par leur identifiant d origine*/
.mainmenu img {
background-color: transparent;
background-image: none;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
/*killer de toute trace des liens par leur identifiant d origine*/
a.mainmenu {
color: transpent;
font-size: 0 0em;
line-height: 0;
text-decoration: none!important;
}
a.mainmenu:hover {
color: transparent;
}
/*------------------------------------------------------------ Fin du massacre ------------------------------------------------*/

/*tableau du menu vertical*/
.verticalnavig {
display: block;
position: absolute;
top: 130px; /*position depuis haut de la page a modifier au choix*/
left: 540px; /*position depuis la gauche de la page a modifier au choix*/
width: auto;
padding: 0px;
margin: 3px 0 3px;
}
/*gestion des liens du menu vertical*/
.verticalnavig a {
display: block;
color: #000;
font: italic small-caps bold 13px "Lucida Grande",sans-serif; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly*/
text-align: left;
white-space: nowrap; /*pour que le titre du lien reste sur une ligne*/
padding: 0px;
margin: 0px;
}
.verticalnavig a:hover {
color: #dad; /*on ne met que la propriété qui chande du sans le hover*/
}
/*------------------------------------------------------- fin menu vertical pour Freaky -------------------------------------*/
- En rouge, absolument mettre les codes tels qu'ils sont.
- En olive, le positionnement depuis le haut et la gauche de la page.
Si tu veux le tout collé, sans marge en haut et à gauche, tu mettras un simple margin: 0px; qui veut dire qu'il n'y aura aucune marge sur les 4 côtés.
- Pour le style des liens autour des liens, tu utiliseras les identifiants en bleu.

Pour l'instant j'ai laissé l'image en transparence. Nous pourrons l'ajouter une fois que tu auras fait les modifications que tu désires tant sur le positionnement que sur l'apparence du menu ( voir entre les balises css /*commentaire*/ ).
Je t'aiderai ensuite pour les raccourcis CSS (ça allège passablement la feuille de style) et pour la double image transparente.

Résultat pour de vrai (sur Opera, Firefox, IE9, Google, Safari) :
Spoiler:


Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Ven 23 Déc 2011 - 18:50

Nickel =D
Par contre j'ai peur de toucher à tout cela maintenant >< En imaginant que je veuille recenter, je passe par le template ou le css ?

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

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

Résolu Re: Barre de navigation vertical

Message par Final-Blonde le Ven 23 Déc 2011 - 19:18

Tu veux dire centrer la bannière ? (donc avec le menu)
Si oui, il faudrait que je regarde, mais je serais bien contente si tu ne laissais pas ton sujet trop longtemps sans nouvelle, parce que je ne peux pas laisser mes templates et surtout mon CSS avec des paramètres de tuto.

Après vérification, il faut agir déjà sur le template puisque les cellules (td) sont alignées à gauche.
Puis-je voir les paramètres concernés du template et du CSS ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation vertical

Message par Freaky™ le Sam 24 Déc 2011 - 14:07

Erf, désolé pour l'attente
Au final, je vais rester sur l'alignement gauche, ça me parait plus sympa :-)

Je te remercie de ta précieuse aide ^^

Freaky™
**

Messages : 64
Inscrit(e) le : 22/01/2010

Freaky™ 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