AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

    Problème d'alignement [Header VS Bodyline]

    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 4:43

    Bonsoir,

    Alors voilà, cela ne règle toujours pas le problème et d'ailleurs j'avais moi même tenter cette option mais en vain.

    Le moyen que je vois serait de pousser manuellement le Bodyline, mais cela peut provoquer des décalage dans les autres résolution d'affichage.

    Du coup cela m'empêche de continuer mes modification car je dois pouvoir l'aligné

    ps.: si vous connaissez le moyen de faire en sorte que le bodyline débute un peu plus bas encore se serait d'autant pratique pour moi mais ce n'est que superflue
    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 5:58

    Après vérification sur mon forum de test, je viens de me rendre compte que c'est ton image qui a un problème.

    En effet, ta forme se trouve à être plus large d'un côté que de l'autre, comme le démontre ce screen :

    Spoiler:

    Il s'avère que Kaname est plus décalé que la jolie miss à droite. Ton image est donc plus grande d'un côté que de l'autre et décalée même lorsque centrée.

    Les solutions :

    1. Retourne dans ton fichier de construction (le format dépend de ton logiciel) et déplace Kaname jusqu'à ce qu'il soit à égalité avec la position de la miss, de façon à ce que le centre de ton image soit au bon endroit.
    2. Lie tous les calques supérieurs à la barre bleue (après en avoir fait une copie mise en invisible, au cas où) et centre ce calque avec ta barre.


    Ton problème ne se révèle donc pas être une erreur de codage, mais bien une inattention au moment de la création du fond. ^^

    Essaie, tu me diras si ça règle ton problème. :)

    WhiteClover



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 6:16

    Bien c'est ce que je commençais à croire mais bon, enfin sa c'est règler, reste juste à savoir si, comme je crois que c'est le cas vu la largeur de l'image, que tu possède une résolution plus grande que la mienne, est-ce que tu détecte toujours un léger décalage? ou autre.

    Maintenant me reste plus a réussi a descendre le bodyline un peu plus bas Very Happy
    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 6:24

    Pour cela, tu n'as qu'à ajouter un margin-top à ton bodyline.

    Contente de t'avoir apporté la solution. De mon point de vue, ça fonctionne. :)



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 6:25

    Encore merci!

    Pour le Margin-Top sa fonctionne pas c'est ce que j'essaie depuis quoi... déjà 2h xD
    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 6:33

    Sinon, tu peux toujours insérer une div dans ton template ou une image transparente (png) en tant qu'espaceur.

    J'ai remarqué effectivement que le margin était capricieux dans bien des cas. Malheureusement, je n'ai pas cerné exactement lesquels.

    Ah, mais de rien, ça fait plaisir. x)



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 6:34

    Ouais j'Avoue le margin est un capricieux de premier, enfin bref, je vais mettre une div avec une hauteur et sa suffira a règler le problème temporairement jusqu'à ce qu'une nouvelle idée brillante me frôle l'esprit. !!!
    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 6:45

    D'accord. N'oublie juste pas de mettre un & nbsp ; à l'intérieur de ta div. Wink

    Tu me diras si ça fonctionne. ^^



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 6:47

    Encore moi Very Happy

    Bah sa fonctione a moitier si je puis dire ainsi.

    En fait pour faire cours, sa fonctionne mais cela déplace mon scroll de récent topics, et si je tente de déplacer se scroll, sa déplace mon bodyline

    Vive les prise de tete à 1h du mat xD
    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 6:57

    D'où vient de scroll? C'est un widget automatique où tu l'as créé manuellement?

    Au pire, je ne sais pas où est situé le widget dans le code, mais essaie de déplacer ta div.


    Oui, effectivement, tu parles d'une heure pour se péter la caboche. XD



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 7:00

    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://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}
                

                <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"  style="margin:auto;">
          <tr>
                            <td class="header_box"><div class="menu"> <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                   <tr>
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                   </tr>
                </table></div>
    <table><tr><td><div class="news_mess"><marquee behavior="scroll" direction="up" scrollamount="1" height="120"> <div id="recent-topics"></div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script></marquee></div></td></tr><tr><td><div class="the_news"> BLABLA BLA BLA BLA </div></td></tr></table></td>
                    </tr>
                    <tr><div class="espace_bodyline"></div>
             <td class="bodyline">

                <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="90%" 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 -->

    Sa c'est le Overall Header et le code du scroll provient d'un code que j'ai trouver ici, utilisant le widget du portail

    Code:
    <div class="news_mess"><marquee behavior="scroll" direction="up" scrollamount="1" height="120"> <div id="recent-topics"></div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script></marquee></div>

    pour mon problème, je crois qu'il suffit d'utilisé "position: relative ou absolute" et le Z-index du moins sa me parait logique mais j'arrive pas a me rappeler qu'est-ce qui fait quoi. Mes cours de Css sont loin xD et en meme temps avec les code php (ou java? xD j'sais plus ) je m'y perd assez rapidement

    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 7:11

    Nan, car si tu utilises la position relative, tu ne feras que déplacer ta division par rapport à sa position normale et si tu utilises une position absolue, tu n'auras plus aucune influence sur le reste de la page.

    Ce que tu peux faire, c'est aller placer ta division dans le template « index_box », en haut complètement. Peut-être que ça fonctionnerait. ^^'



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 19 Juil 2011 - 7:13

    C'est règler!!!!!!!! yahou!!!! J'ai réussi au moment ou tu postais en fait.

    Je devait metre ma div entre "tr" pour créer une nouvelle ligne et puis voilà tout fonctionne.

    Encore merci pour ton temps!!

    ps.: bon avec les fautes que je mets sa signifie d'aller se coucher, sur ce, bonne nuit
    • Revenir en haut
    Minishiro
    Minishiro
    FémininAge : 28Messages : 288

    Mar 19 Juil 2011 - 7:21

    Ah. Alors, je suis contente pour toi. (: Moi aussi, je filais.

    Bref. Pour les informations sur le CSS, je te recommande un passage rapide sur Google, sinon y'a toujours Alsacréations qui est super.

    Au plaisir de t'aider à nouveau. x)



    Problème d'alignement [Header VS Bodyline] WvHxu
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 24 Nov 2024 - 1:39