Nederlands Ondersteuningsforum :
Welkom op het Nederlandse Ondersteuningsforum van ActieForum.


Om ondersteuning te vragen of om in één van onze andere forumsecties te kunnen posten dien je een account te hebben, bedankt voor het inloggen als je al geregistreerd bent, of registreer direct een account op ons ondersteuningsforum als je dit nog niet gedaan hebt.

Header

Vorige onderwerp Volgende onderwerp Go down

Header

Bericht van Blackraven op za 12 sep 2015 - 12:00

hehe sorry daar was ik weer xD

Ik ben bezig met een header waarin hij uit twee delen bestaat:

1. Het normale plaatje Header
2. Een html header die in de template staat.

Nu onder ik zelf geen problemen omdat hij bij mij goed staat zoals hij hoort:
http://i.imgur.com/SURVved.jpg

Maar iemand anders ondervond het probleem dat hij niet op de juiste plek staat:
https://i.gyazo.com/1fd5103a0b5f1ceaaa0d745646fc6145.jpg

Nu heb ik hem geprobeerd te centeren maar dan komt hij helemaal rechts te staan op de pagina en de margins codes werken blijkbaar niet voor verschillende grote schermen, is er een mogelijkheid dat ik dit op een andere manier kan aanpassen?

dit is de website:
http://untildawn.actieforum.com/

Blackraven
Actief Forumlid

Vrouw Aantal berichten : 102
Leeftijd : 21
Taal : Nederlands
Locatie : Thuis
Registratiedatum : 10-04-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://untildawn.actieforum.com/
Blackraven is bedankt door de starter van dit topic.

Re: Header

Bericht van Lone Wanderer op zo 13 sep 2015 - 11:08

Ik heb het idee dat je de code van je header op de verkeerde plaats hebt staan. Als ik naar de broncode kijk op je site, lijkt het alsof je hem tussen de head-tags hebt staan. De head-tags zijn niet voor je header, maar voor scripts en metadata en dat soort dingen.

Je header kun je beter wat verder naar onderen zetten, tussen de body-tags (die staan ook in de overall_header template, maar dan wat verder naar onderen). Ik zou hem denk ik net onder de regel met {SITE_DESCRIPTION} zetten.
Als je hem dan position .absolute meegeeft, zal hij verplaatsen ten opzichte van het forum zelf en niet ten opzichte van de browser, zoals hij nu doet. Ik zou het geheel ook niet met margins verplaatsen. Als je gewoon left gebruikt in plaats van margin-left heb je min of meer hetzelfde resultaat, maar dan op een nettere wijze Smile

Dus, kort gezegd:
- verplaats je banner div met alles wat erin staat naar een plek binnen de body-tags
- .absolute zal dan ten opzichte van je forum werken in plaats van ten opzichte van je browser
- vervang margin-left en margin-top voor left en top (of right en bottom, net wat het beste uitkomt)

Ik hoop dat je hiermee wat verder bent geholpen en als mijn uitleg te vaag is of je komt ergens niet uit, laat het maar weten Smile

Lone Wanderer
Medaille Forumlid
Medaille Forumlid

Oud Beoordeler Vrouw Aantal berichten : 144
Registratiedatum : 26-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hongerspelenRPG.actieforum.com
Lone Wanderer is bedankt door de starter van dit topic.

Re: Header

Bericht van Blackraven op zo 13 sep 2015 - 21:21

nee het is nog steeds niet opgelost, ik heb hier onder de code gezet misschien heb ik wel iets fouts gedaan hoor xD

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 elements */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

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

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

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

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

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         if(pm != null) { 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}');
         if(report != null) { report.focus(); }
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         $(document).ready(function() {            
            Ticker.start({
               height : {switch_ticker.HEIGHT},
               spacing : {switch_ticker.SPACING},
               speed : {switch_ticker.SPEED},
               direction : '{switch_ticker.DIRECTION}',
               pause : {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']);
   _gaq.push(['_trackPageLoadTime']);

   <!-- BEGIN google_analytics_code_bis -->
   _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
   _gaq.push(['b._trackPageview']);
   <!-- END google_analytics_code_bis -->

    (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="" /> <em>Hit</em>skin.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" style="z-index: 10000 !important;">
      <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>
                  <!-- 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 />&nbsp; </span>
<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
   
 
<!== BANNER IMAGE HERE== !>
<div style="position: absolute;left:0px;top: 50px;">
  <center>
    <table>
<tr>
<td>
<img src="http://i.imgur.com/zN4YfQA.png" style="width: px; height: px; border: px solid #f6f6f6;">
</td>
<td>
<div style="background-image: url('http://i.imgur.com/8Ng767N.png'); width: 500px; height: 200px; position: absolute; margin-left: 8px; margin-top: -210px;font-family: Open Sans Condensed; text-align: center;">
  <div style="padding: 20px; font-size: 60px; text-transform: Uppercase; color: #fff;">UNTIL DAWN
<div style="font-size: 15px; color: #fff;"><hr>No matter how many lives that I live, I will never regret
<hr></div></div></div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#121212; width: 500px; height: 50px; position: absolute; margin-top: -260px; margin-left: 310px;"></div>
</td>
</tr>
<tr>
<td>
<div style="background-image: url('http://i.imgur.com/Uew3npU.png'); border: 1px solid #fff; width: 475px; height: 120px; position: absolute; margin-left: 310px; margin-top: -210px; padding:10px;">
<table>
<td>
  <div style="background-image: url('http://i.imgur.com/FoKrEcp.png'); width: 200px; height: 95px; padding: 10px; font-family: Arial; font-size: 10px; color:#212121; text-align: Justify;">Welkom op <b>Until Dawn</b>, een vampier RPG waarin je mens of vampier speelt in het dorpje Blackwood. <br/> <br/>Meld je snel aan met Voor - en Achter naam.</div>
</td>
<td>
<div style="background-image: url('http://i.imgur.com/FoKrEcp.png'); width: 225px; height: 95px; padding: 10px;">
<table>
<tr>
<td>
  <div style="background-color:#163138; width: 98px; padding: 5px; color: #fff; font-family: Open Sans Condensed; text-transform: uppercase; font-size: 12px; "><a href="http://untildawn.actieforum.com/t1-plot-and-rules">PLOT</a></div>
</td>
<td>
<div style="background-color:#163138; width: 98px; padding: 5px; color: #fff; font-family: Open Sans Condensed; text-transform: uppercase; font-size: 12px; "><a href="http://untildawn.actieforum.com/t1-plot-and-rules">RULES</a></div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#163138; width: 98px; padding: 5px; color: #fff; font-family: Open Sans Condensed; text-transform: uppercase; font-size: 12px; "><a href="http://untildawn.actieforum.com/t3-membergroups">MEMBERGROUPS</a></div>
</td>
<td>
<div style="background-color:#163138; width: 98px; padding: 5px; color: #fff; font-family: Open Sans Condensed; text-transform: uppercase; font-size: 12px; "><a href="http://untildawn.actieforum.com/f2-updates">Updates</a></div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#163138; width: 98px; padding: 5px; color: #fff; font-family: Open Sans Condensed; text-transform: uppercase; font-size: 12px; "><a href="http://untildawn.actieforum.com/t2-faceclaim">FACECLAIM</a></div>
</td>
<td>
<div style="background-color:#163138; width: 98px; padding: 5px; color: #fff; font-family: Open Sans Condensed; text-transform: uppercase; font-size: 12px; "><a href="http://untildawn.actieforum.com/t6-membergroup-claim">MEMBER CLAIM</a></div>
</td>
</tr>
</table>
</div>
</td>
</table>
</div>
</td>
</tr>
</table>
  </center>
  </div>
 
 
                  </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>

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

Blackraven
Actief Forumlid

Vrouw Aantal berichten : 102
Leeftijd : 21
Taal : Nederlands
Locatie : Thuis
Registratiedatum : 10-04-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://untildawn.actieforum.com/
Blackraven is bedankt door de starter van dit topic.

Re: Header

Bericht van Lone Wanderer op ma 14 sep 2015 - 20:43

Is dit de code die je nu op je forum gebruikt? Want zoals ik het bij mij nu zie werkt het gewoon allemaal zoals het hoort, volgens mij Razz

Lone Wanderer
Medaille Forumlid
Medaille Forumlid

Oud Beoordeler Vrouw Aantal berichten : 144
Registratiedatum : 26-07-13
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://hongerspelenRPG.actieforum.com
Lone Wanderer is bedankt door de starter van dit topic.

Re: Header

Bericht van Blackraven op ma 14 sep 2015 - 21:08

haha ja sorry, ik heb zelf nog wat zitten klooien en het is gelukt!

Bedankt voor je help, want hij stond inderdaad verkeerd^^ en met een paar kleine aanpassingen werkte hij!

Blackraven
Actief Forumlid

Vrouw Aantal berichten : 102
Leeftijd : 21
Taal : Nederlands
Locatie : Thuis
Registratiedatum : 10-04-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken http://untildawn.actieforum.com/
Blackraven is bedankt door de starter van dit topic.

Re: Header

Bericht van 10spetter10 op ma 14 sep 2015 - 21:08

..Ondersteunings Vraag opgelost en gesloten.


Je mag me altijd een pm sturen wanneer ik iets vergeet af te werken, ook ik ben maar een mens!


Veel Voorkomende Problemen | Forum Tools | Tutorials | Skin Aanvraag | Forum Promotie Goedkeuring | Wachtwoord Hoofd-Beheerder kwijt? | Geen ondersteuning via PM | TIP! Vul je browser, forumversie, forum url en of je gebruikt maakt van templates  en/of CSS in op je profiel! Zo kunnen wij je nog beter helpen!

10spetter10
Beheerder
Beheerder

Man Aantal berichten : 1282
Leeftijd : 19
Taal : Nederlands
Locatie : België
Registratiedatum : 08-07-12
Oprichter van het forum : Ja
Templates gewijzigd : Ja
CSS : Ja

Profiel bekijken
10spetter10 is bedankt door de starter van dit topic.

Vorige onderwerp Volgende onderwerp Terug naar boven


Permissies van dit forum:
Je mag geen reacties plaatsen in dit subforum