Sujets similaires

Sujet: [RESOLU]Barre hitskinnienne Lun 05 Nov 2012, 13:17

Coucou,
J'ai suivie trois tutoriel pour ma barre de navigation.
Résultat, je n'arrive pas à faire ce que je veux de mon CSS.
Dèjà, le voici en hide

Voilà le rendu : http://creactifspace.forumgratuit.org/

Moi j'aurai aimé : la barre en opacité 50 %
et les bord arrondis
=> Je l'ai déjà pour le border mais comment faire pour que ce soit le cas sur la barre en elle même ?

Merci d'Avance !
Mag'

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 05:21

Salut Maguitte !

Alors, tout d'abord je me permet de ré-organiser plus proprement ton CSS, si tu le veux bien.
J'en profite pour faire quelques corrections mineures (rien de transcendant, c'est juste pour avoir un code vraiment propre selon les standards) :

Code:: /*MISE EN FORME DE LA BARRE HITSKINIENNE */
.navi {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
border-bottom: 1px double #F21D96;
opacity: 0.9;
}

.mainmenu {
font-size: 12px;
color: #FEFEFE;
}

a.mainmenu {
text-decoration: none;
color: #FEFEFE;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

a.mainmenu:hover {
text-decoration: none;
color: #FEFEFE;
border-bottom: 1px solid;
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
/* FIN DU CODE */

Pour résoudre ton problème, il s'agit de fixer l'opacité de ta barre.
Sauf que le fond coloré rose de la barre, il ne vient pas de ta classe .navi.

Je vois dans ton HTML quelque chose (de très mal) qui ressemble à :

Code:: <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #990066; z-index:250; width: 100%; height : 25px;">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>

Il vaudrait mieux créer une classe pour ce "tableau", et y appliquer l'opacité.
Un détail aussi, pour fixer la position, seuls 2 éléments suffisent : top ou bottom et left ou right. Inutile d'en avoir 3 Wink

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 11:27

J'ai pris le code d'un tutoriel de CSSactif.
Donc, je dois créer une class.
Mais je remplace mon html par quoi ?

voilà overall_header :

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" />

<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />


<link rel="canonical" href="{switch_canonical_url.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>


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



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



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


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
   
      pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
      pm.focus();
   
   
      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();
   
   
      ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
   
});


   var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;



$(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
         });
   });
});

//]]>
</script>
{GREETING_POPUP}

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

{HOSTING_JS}

<script type="text/javascript">
//<![CDATA[
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
   _gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);


_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._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>

</script>
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #990066; z-index:250; width: 100%; height : 25px;" ><tr><td> </td></tr></table>

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



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


<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" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}><span class="navi">{GENERATED_NAV_BAR}</span></td>
</tr>
</table><br>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>

               <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">
                  
                  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                  <br /><br><br><br><br>
                  
                  <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>
               
            </tr>
         </table>

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

         
         <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;">
                           
                           <li>{switch_ticker.ticker_row.ELEMENT}</li>
                           
                        </ul>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         
         <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">
                              
                              <div>{switch_ticker.ticker_row.ELEMENT}</div>
                              
                           </div>
                        </div>
                     </div>
                  </td>
               </tr>
            </table>
         </div>
         

         <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}">
                              
                              {giefmod_index1.MODVAR}
                                 
                                 <div style="height:{SPACE_ROW}px"></div>
                                 
                              
                           </div>
                        </td>
                        <td valign="top" width="100%">

                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>
</body>
</html>

J'ai isolé la partie dont tu parlais :

Code:: <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}"> <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #990066; z-index:250; width: 100%; height : 25px;" ><tr><td> </td></tr></table>

<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">

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 11:53

Maguitte2008 a écrit:: J'ai pris le code d'un tutoriel de CSSactif.

Erf oui, tous ne sont pas encore revu/retravaillé donc il est possible de tomber sur des tutoriels qui ne sont pas très très bons encore à l'heure actuelle (facile à repérer, les titres en verts ce sont ceux qui sont tout beaux/tout propres). Wink

Maguitte2008 a écrit:: Donc, je dois créer une class.
Mais je remplace mon html par quoi ?

En fait il faut que tu remplace cette balise :

Code:: <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: #990066; z-index:250; width: 100%; height : 25px;" >

Par quelque chose de plus sympathique comme par exemple :

Code:: <table class="fond-navi">

Ensuite, tu rajoute la classe .fond-navi (ou le nom que tu auras choisi) dans ton CSS en y replaçant toutes les propriétés que tu as supprimé...

Et tu rajoute la propriété d'opacité, que tu fixe à opacity: 0.5; si c'est une transparence de 50% que tu désire.

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 12:00

Je vais essayé çà tout de suite.
J'édite pour te tenir au courant !
Merci =)

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 12:32

Alors, deux questions.
Tout d'abord, maintenant j'ai les bords arrondis mais j'aimerai juste en bas, comment faire ?
Parce que là j'ai les quatre, et c'est pas terrible ! "/

Et si un jour je voudrais mettre ma barre au centre (de la taille de ma ban') comment je peux faire ?
Voilà c'est deux choses que j'aimerai savoir pour plus tard.

Merci de ton aide =)

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 12:39

Pour créer tes arrondis, voici un outil simple d'utilisation qui pourra te dépaner (et qui demande pas d'être un crack en codage) Wink

En ce qui concerne ta barre, je ne suis pas sûr de comprendre ce que tu souhaites faire ?

Sujet: Re: [RESOLU]Barre hitskinnienne Mar 06 Nov 2012, 12:55

Hum...
Si tu veux qu'elle soit au même niveau que la bannière.

Au pire c'est pas très grave, c'était juste pour savoir si c'était fesable.

EDIT ; mais c'est que c'est génial ! Et hop! Dans mes favoris ! Merci Espeon ;p

Sujet: Re: [RESOLU]Barre hitskinnienne Mer 07 Nov 2012, 08:12

Bonjour,
Actuellement ta barre de navigation est au même niveau que la bannière. Tu veux dire, la mettre en bas, comme par défaut ?

Sujet: Re: [RESOLU]Barre hitskinnienne Mer 07 Nov 2012, 09:19

Non, je veux dire en largeur.
Pour qu'elle soit centrée (toujours en haut et fixe) mais de la même largeur que la bannière.

Sujet: Re: [RESOLU]Barre hitskinnienne Mer 07 Nov 2012, 09:22

Et bien c'est la propriété width qui joue ce rôle.

Actuellement elle vaut 100%, donc ta barre prend toute la largeur disponible.
Il s'agit donc de la fixer, puis de la centrer horizontalement grâce à margin: 0 auto; (à adapter en fonction de ton CSS, je te réponds d'une manière générale là).

Voilou, et de rien pour l'outil Wink

Sujet: Re: [RESOLU]Barre hitskinnienne Mer 07 Nov 2012, 09:44

Merci pour toutes ces réponses qui me seront utiles.
Je peux donc dire que le problème est résolu.

Sujet: Re: [RESOLU]Barre hitskinnienne Mer 07 Nov 2012, 11:55

Merci Maguitte pour le "résolu". Very Happy

A bientôt !

J'archive.

[RESOLU]Barre hitskinnienne

[RESOLU]Barre hitskinnienne

Sujets similaires

Sujets similaires

Partenaires Or