Announcement

Collapse
No announcement yet.

layout problem

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • layout problem

    Hi,

    the links of my navbar go out the layout of my header (see image below)



    I get this problem with Firefox and with 800x600 screen resolution.
    How can I fix it?

    Thanks

  • #2
    Too much text for the width.

    Easiest way to handle that is to decrease the font size.

    Alternatives are:

    1. Adding another navbar (on the bottom or top of your banner).
    2. Increasing the width of the navbar itself.

    Chris
    "Anyone who conducts an argument by appealing to Authority
    is not using his intelligence, he is just using his memory."
    ~~~
    Leonardo da Vinci

    Comment


    • #3
      and with Ie the banner looks like this



      How to fix it?

      My forum link: http://www.interfans.org/forum/

      Comment


      • #4
        Can you post a snippet of your navbit template; and if you changed any CSS defaults used in the navbit, can you post that as well? IIRC, had the same problem when using percentages and had to also adjust the margins.

        Chris
        "Anyone who conducts an argument by appealing to Authority
        is not using his intelligence, he is just using his memory."
        ~~~
        Leonardo da Vinci

        Comment


        • #5
          NAVBAR

          Code:
          <script type="text/javascript">
          <!--
          function log_out()
          {
              ht = document.getElementsByTagName("html");
              ht[0].style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
              if (confirm('$vbphrase[sure_you_want_to_log_out]'))
              {
                  return true;
              }
              else
              {
                  ht[0].style.filter = "";
                  return false;
              }
          }
          //-->
          </script>
          
          
          
          <!-- breadcrumb, login, pm info -->
          <table  cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" class="tborder" border="0" width="100%" align="center">
          <tr>
              <td class="alt2" width="100%">
                  <if condition="is_array($navbits)">
                      <table cellpadding="0" cellspacing="0" border="0">
                      <tr valign="bottom">
                          <td><a href="#" onclick="history.back(1)"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td>
                          <td>&nbsp;</td>
                          <td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td>
                      </tr>
                      <tr>
                          <td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><a href="$scriptpath"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink.gif" alt="$vbphrase[reload_this_page]" border="0" /></a> <strong>$navbits[lastelement]</strong></td>
                      </tr>
                      </table>            
                  <else />
                      <div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php?$session[sessionurl]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div>
                  </if>
              </td>    
              
              <if condition="$bbuserinfo['userid']">
              
                  <td class="alt2" valign="top" nowrap="nowrap">
                  <div class="smallfont">
                      <!--<span style="float:$stylevar[right]">[<a href="login.php?$session[sessionurl]do=logout&amp;u=$bbuserinfo[userid]" onclick="return log_out()">$vbphrase[log_out]</a>]</span>-->
                      <if condition="$show['pmstats']"><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl]">$vbphrase[private_messages_nav]</phrase></if>
                  </div>
                  </td>
                  
              <else />
                  
                  <td class="alt2" nowrap="nowrap" style="padding:0px">
                      
                  <!-- login form -->
                  <form action="login.php" method="post" onsubmit="md5hash(vb_login_password,vb_login_md5password,vb_login_md5password_utf)">
                  <script type="text/javascript" src="clientscript/vbulletin_md5.js"></script>
                  <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0">
                  <tr>
                      <td class="smallfont">$vbphrase[username]</td>
                      <td><input type="text" class="button" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="1" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td>
                      <td class="smallfont" colspan="2" nowrap="nowrap"><label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="3" id="cb_cookieuser_navbar" accesskey="c" checked="checked" />$vbphrase[remember_me]</label></td>
                  </tr>
                  <tr>
                      <td class="smallfont">$vbphrase[password]</td>
                      <td><input type="password" class="button" name="vb_login_password" size="10" accesskey="p" tabindex="2" /></td>
                      <td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="4" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /></td>
                  </tr>
                  </table>
                  <input type="hidden" name="s" value="$session[sessionhash]" />
                  <input type="hidden" name="do" value="login" />
                  <input type="hidden" name="forceredirect" value="1" />            
                  <input type="hidden" name="vb_login_md5password" />
                  <input type="hidden" name="vb_login_md5password_utf" />
                  </form>
                  <!-- / login form -->
                      
                  </td>
                  
              </if>    
              
          </tr>
          </table>
          <!-- / breadcrumb, login, pm info -->
          
          <!-- Toplinks -->
          
          <td width="90%" height="39" border="0">
          <if condition="$show['guest']">
          <div width="90%" align="center" class="vbmenu_control">
          
          <a href="http://www.interfans.org/forum/register.php?do=signup"><font color="blue">REGISTRATI</font></a> 
          | <a href="http://www.interfans.org/forum/memberlist.php?" title="Gli utenti del Forum"><font color="black">UTENTI</font></a>
          | <a href="/forum/rules.php" title="Il regolamento della nostra community"><font color="black">REGOLAMENTO</font></a>
          | <a href="http://www.interfans.org/forum/faq.php?" title="Faq"><font color="black">FAQ</font></a>
          | <a href="http://www.interfans.org/forum/profil_pic.php" title="La nostra foto gallery"><font color="black">GALLERY</font></a> 
          | <a href="http://www.interfans.org/forum/albo.php" title="L'Albo d'oro della nostra community"><font color="black">ALBO</font></a>
          | <a href="http://www.interfans.org/forum/showgroups.php?"><font color="black">STAFF</font></a> 
          | <a href="/forum/links.php"><font color="black" title="I links">LINKS</font></a> 
          | <a href="/forum/linkus.php"><font color="black" title="Linkaci">LINK US</font></a>
          <if condition="$bbuserinfo[usergroupid] != 15">
          | <a href="http://www.interfans.org/forum/sendmessage.php"><font color="black" title="Contact Us">CONTACT US</font></a>
          </if>
          
          
          </div>
          </if> 
          
          <if condition="$show['member']">
          <div align="center" class="vbmenu_control">
          
                  
          <a href="/forum/rules.php" title="Il regolamento della nostra community"><font color="black">REGOLAMENTO</font></a>
          | <a href="usercp.php?$session[sessionurl]">PANNELLO UTENTE</a>
          | <a href="faq.php?$session[sessionurl]" accesskey="5">FAQ</a>
          | <a href="memberlist.php?$session[sessionurl]">UTENTI</a>
          | <a href="profil_pic.php">GALLERY</a>
          | <a href="http://www.interfans.org/forum/albo.php" title="L'Albo d'oro della nostra community"><font color="black">ALBO</font></a>
          | <a href="http://www.interfans.org/forum/memberlist.php?postslower=0&postsupper=0&ausername=&homepage=&icq=&aim=&yahoo=&msn=&joindateafter=&joindatebefore=&lastpostafter=&lastpostbefore=&order=DESC&sort=posts&pp=30&ltr="><font color="black">TOP POSTER</font></a> 
          | <a href="search.php?$session[sessionurl]" accesskey="4">RICERCA</a>
          | <a href="search.php?$session[sessionurl]do=getnew" accesskey="2">NUOVI MESSAGGI</a>
          | <a href="/forum/links.php"><font color="black" title="I links">LINKS</font></a> 
          | <a href="login.php?$session[sessionurl]do=logout&amp;u=$bbuserinfo[userid]" onclick="return log_out()">ESCI</a>
              
          </div>
              </if>
          
          </td>
          
          <!-- fine Toplinks -->
          <br>

          Comment


          • #6
            and header

            Code:
            <br /><br />
            
            $spacer_open
            
            <br />
            
            
            <!-- Banner -->
            <div align="center" width="85%">
            <div style="img-align: center;  overflow: hidden; background-color:#000;"><a href="http://www.interfans.org/forum"><script>
            var logo=new Array()
            logo[0]='<img src="http://img289.echo.cx/img289/5356/javier011xg.jpg" border="0" alt="Javier Zanetti" />'
            logo[1]='<img src="http://img341.imageshack.us/img341/484/deki16pv.jpg" border="0" alt="Dejan Stankovic" />'
            logo[2]='<img src="http://img341.imageshack.us/img341/5079/cordoba16ta.jpg" border="0" alt="Ivan Cordoba" />'
            logo[3]='<img src="http://img331.imageshack.us/img331/6425/toldo13nt.jpg" border="0" alt="Francesco Toldo" />'
            logo[4]='<img src="http://img326.imageshack.us/img326/9302/adri0105lc.jpg" border="0" alt="Adriano" />'
            logo[5]='<img src="http://img213.imageshack.us/img213/7223/mancio2vk.jpg" border="0" alt="Roberto Mancini" />'
            logo[6]='<img src="http://img348.imageshack.us/img348/5818/cuchu196lp.jpg" border="0" alt="Esteban Cambiasso" />'
            logo[7]='<img src="http://img343.imageshack.us/img343/5859/figo4cj.jpg" border="0" alt="Luis Figo" />'
            logo[8]='<img src="http://img343.imageshack.us/img343/8954/piza7yr8lt.jpg" border="0" alt="David Pizarro" />'
            logo[9]='<img src="http://img92.imageshack.us/img92/5726/martins8rp.jpg" border="0" alt="Obafemi Martins" />'
            logo[10]='<img src="http://img92.imageshack.us/img92/93/deki1fb.jpg" border="0" alt="Dejan Stankovic" />'
            
            var displaylogo=Math.floor(Math.random()*(logo.length)  )
            document.write(logo[displaylogo])
            </script></a>
            </div>
            </div>
            <!-- fine Banner -->
            
            </tr>
            </table>
            
            $_phpinclude_output

            Comment


            • #7
              Holly, working on it.

              There's some weird tags in it that throwing it off.

              Chris
              "Anyone who conducts an argument by appealing to Authority
              is not using his intelligence, he is just using his memory."
              ~~~
              Leonardo da Vinci

              Comment


              • #8
                Originally posted by ChrisLM2001

                There's some weird tags in it that throwing it off.
                can u be more specific please?

                Comment


                • #9
                  I am getting crazy setting the right forum width to have the forum viewble correct with both 1024x768 and 800x600 screen resolution.

                  But do people still have 800x600 screen resolution?

                  Comment


                  • #10
                    Originally posted by hollyboy
                    I am getting crazy setting the right forum width to have the forum viewble correct with both 1024x768 and 800x600 screen resolution.

                    But do people still have 800x600 screen resolution?
                    Oh, know that feeling.

                    The problem is two fold even once corrected and converted to a totally tableless version:

                    1. Fighting vBulletin's hardcoding -- can't add a different class border other than the default "tborder". Which means if you want something different from the default -- start hacking php or js.
                    2. IE conditionals are being read by Firefox -- so either that means FF isn't displaying it's user-agent string (or mimicking IE); or vBulletin doesn't allow IE conditionals to be displayed within CSS (even if they're escaped properly with CDATA tags).

                    Enclosed how it looks in IE 6.0 (on top) and Firefox 1.0.7 (on bottom) -- the page width is the proper 760px for 800x600 resolutions. Got the width right. Got the inline images to show up fine. Lines up pretty much like a tabled navbar (it loads 3x faster too!!). But not the height, and without a hack (and IE conditionals can be used even with IE 7.0), can't get each to align properly.

                    So anyone have success in using IE conditionals in vBulletin??

                    Chris
                    Attached Files
                    "Anyone who conducts an argument by appealing to Authority
                    is not using his intelligence, he is just using his memory."
                    ~~~
                    Leonardo da Vinci

                    Comment


                    • #11
                      Originally posted by ChrisLM2001
                      Oh, know that feeling.

                      The problem is two fold even once corrected and converted to a totally tableless version:

                      1. Fighting vBulletin's hardcoding -- can't add a different class border other than the default "tborder". Which means if you want something different from the default -- start hacking php or js.
                      2. IE conditionals are being read by Firefox -- so either that means FF isn't displaying it's user-agent string (or mimicking IE); or vBulletin doesn't allow IE conditionals to be displayed within CSS (even if they're escaped properly with CDATA tags).

                      Enclosed how it looks in IE 6.0 (on top) and Firefox 1.0.7 (on bottom) -- the page width is the proper 760px for 800x600 resolutions. Got the width right. Got the inline images to show up fine. Lines up pretty much like a tabled navbar (it loads 3x faster too!!). But not the height, and without a hack (and IE conditionals can be used even with IE 7.0), can't get each to align properly.

                      So anyone have success in using IE conditionals in vBulletin??

                      Chris
                      so u are telling me to have 768 as forum width?
                      Is there any script that set a certain header banner for the ones using 800x600 screen resolution?

                      Comment


                      • #12
                        760px or 768px.

                        Unless you don't care about anyone surfing to your forum on Netscape 4, you need to give them an extra 30px for themselves (and room for the vertical scrollbar so not to cause forum killing horizontal scrolling). It's a requirement, or the right side of the page will be cut off.

                        If you don't care about NS4, you can probably increase it to 780px, with tight margins, but you got to leave some for the vertical scrollbar (IIRC, the default Windows width for it's scrollbars are 16px. A page with no margins, would be 784px in size. That's as tight as it can get without a horizontal scrollbar, but I won't recommend it -- as folks can increase their size on their computer and throw your layout out of alignment).

                        It's easier to get your images resized and use them instead for each resolution. Little more disk space and adding tags, but it can reduce your bandwidth bill considerably <-- especially if you have a lot of 800x600 viewers, but you want to still satisfy those using 1024x768 and 1280x1024 resolutions as well.

                        Chris
                        "Anyone who conducts an argument by appealing to Authority
                        is not using his intelligence, he is just using his memory."
                        ~~~
                        Leonardo da Vinci

                        Comment


                        • #13
                          what about this?
                          http://www.vbulletin.com/forum/showt...05#post1008705

                          Comment


                          • #14
                            Still will have the problems of fitting a larger image in a smaller fixed page (which isn't forgiving). If there's a server or whatever other timeout, the banner may not download properly, which will ruin the layout (see your first example, and that's a nice layout distortion).

                            Always better, if you can, to use images that are already presized (this is your front door logo, not some forum post pic). It will appear sharp (resizing images can distort fonts and images <-- not what you want for your logo), it'll be smaller in file size (saving you $$ on your bandwidth bill), and no chance of a broken page.

                            Chris
                            "Anyone who conducts an argument by appealing to Authority
                            is not using his intelligence, he is just using his memory."
                            ~~~
                            Leonardo da Vinci

                            Comment


                            • #15
                              Originally posted by ChrisLM2001

                              Always better, if you can, to use images that are already presized (this is your front door logo, not some forum post pic). It will appear sharp (resizing images can distort fonts and images <-- not what you want for your logo), it'll be smaller in file size (saving you $$ on your bandwidth bill), and no chance of a broken page.
                              what u mean with prezided images?

                              Comment

                              widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                              Working...
                              X