1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help! My header slipped and sidebar slipped to the bottom

Discussion in 'XenForo Questions and Support' started by Core Freedom, Jan 3, 2012.

  1. Core Freedom

    Core Freedom Well-Known Member

    I just created a page and placed the bode below in it. The entire header and sidebar shifted to the bottom of the page. If you look at the home page now, you'll see the last node/page at the very bottom with these rotating widgets in it. That's the culprit. As soon as I uncheck the page and make it invisible, the page goes back to normal.

    I also placed this same code as part of a node-to-page, http://corefreedom.com/pages/powertools/, and it shifted the entire header to the bottom too.

    Help please?

    <center><b style="color: dark grey; font-weight: normal;">
    <b><p style="padding: 5px; background-color: #E1E8F2; border: dotted 2px #00518A;">Our goal for a better world is to have 1 million widgets placed by the end of the year 2012.</center></b></p>
    <br>
    <center><b><font face="verdana" size="2"><b style="color: blue; font-weight: normal;"><b>
    </style>
    <center></head>
    <body>
    <table id="customers">
    <tr>
    <th><center>HO'OPONOPONO</center></th>
    <th> <center>LAW OF ATTRACTION</center></th>
    <th><center>GRATITUDE</center></th>
    </tr>
    <tr>
    <td></td>
    <td><center>Click on Widget to get the Code</center></b></td>
    <td></td>
    </tr>
    <tr class="alt">
    <center><td><!-- 25Pix.com Widget -->
    <script type="text/javascript" src="http://widgets2.25pix.com/w25widgets/Hooponopono.cz/ACTIVE/var-rot1-v/load.js.php?wid=a064cc62&gen=0"></script><div id="w25id-a064cc62" style="color:#edfced;font-size:9px;">With gratitude to: <a class="w25a" style="color:#edfeec;text-decoration:none;"
    href="http://corefreedom.com/">blueprint4love</a>, <a class="w25a" style="color:#edfeec;text-decoration:none;" href="http://www.idreamcatcher.com">The Law of Attraction</a></td></center>
    <center><td><!-- 25Pix.com Widget --><!-- 25Pix.com Widget -->
    <script type="text/javascript" src="http://widgets2.25pix.com/w25widgets/LOA/cz/var-rot1-v/load.js.php?wid=6c5876de&gen=0"></script><div id="w25id-6c5876de" style="color:#edfbeb;font-size:9px;">With gratitude to: <a class="w25a" style="color:#edfaed;text-decoration:none;" href="http://corefreedom.com/">blueprint4love</a>, <a class="w25a" style="color:#edfaed;text-decoration:none;" href="http://www.idreamcatcher.com" title="Law of Attraction website">The secret and Law of Attraction</a></div>
    <!-- 25Pix.com Widget --></td></center>
    <center><td><!-- 25Pix.com Widget -->
    <script type="text/javascript"> eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('9 8={a:{b:\'1',c:{"7":"6","2":"0","3":"4","5":"#e","l":"#p","q":"n:i.o.m\\/g.f","h":"#j"},k:d}};',27,27,'160||width|height|90|textcol|grat|wtype|w25_settings_a7307c7d|var|widget|client_id|user|{lines:["Today!","You...","Me...","This love community","Interesting ideas that can motivate and inspire me","Life and the people in it","The opportunity to help others, it feels great!","Abundance that surrounds all of us","Having so many ways to share my creativity with the world","The positive changes occurring daily in my life","All my clients","All the animals in the world","The beauty that surrounds me everywhere I go","My family and friends","My health"],title:"I am Grateful for:"}|f3faff|gif|249IG|borcol||2995D9|user2|bgcol|com|http|imgur|1769c3|bgimgurl'.split('|'),0,{})) </script> <div id="w25id-a7307c7d" style="color:#edfded;font-size:9px;">With gratitude to: <a class="w25a" style="color:#edfaed;text-decoration:none;" href="http://corefreedom.com" title="Blueprint4Love">Blueprint4Love</a>, <a class="w25a" style="color:#edfaed;text-decoration:none;" href="http://corefreedom.com/forum" title="Blorum">Blorum</a>, <a class="w25a" style="color:#edfaed;text-decoration:none;" href="http://www.idreamcatcher.com" title="Law of attraction">How to use The Law of attraction</a></div> <script type="text/javascript" src="http://widgets2.25pix.com/w25widgets/grapp/ge/v1/load.js.php?wid=a7307c7d&gen=1"></script>
    <!-- 25Pix.com Widget --></td></center>
    </table></center>
    </body>
    </html>
    <br>
    </div></b></font>
    <center><b><font face="verdana" size="3"><center><b><p align="center"><p style="padding: 5px; background-color: #FCF8C0; border: dotted 2px #FF9900;">Our widgets are free as is the rest of our website. <a href="http://corefreedom.com/page/donations/" target="blank">Donations </a> are welcomed and graciously accepted.<br><font face="verdana" size="2">Your generosity is a means of positive energy exchange, which we hold in the highest regard. May the amount you choose be multiplied to you and those whose lives you touch by a minimum of ten thousand fold! </b></p></font></center>
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Your markup is very badly formed.

    This line for example: <center><b><font face="verdana" size="2"><b style="color: blue; font-weight: normal;"><b>

    You need to redo the code as it's not valid in a lot of areas.

    This site should help: http://www.w3schools.com/
     
    Core Freedom likes this.
  3. Core Freedom

    Core Freedom Well-Known Member

    LOL! Hey, I'm trying and at least I'm not panicking! :D
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Indeed, better to try and fail than not try at all :)

    I would highly recommend creating a custom css template and then referencing the classes in your pages.
    It is much simpler and quicker to update a single class than multiple pages.
     
    Core Freedom likes this.
  5. Core Freedom

    Core Freedom Well-Known Member

    I know how to create a custom template in XF but once it's complete I don't know what to do with it (how to get it where I need it to go. It's linking the template to appearing it where I want it to appear that I can't figure out.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    I'll outline the basic steps.

    1. Create the css template, call it anything you like, as long as it's unique and ends with .css, for example: corefreedom.css

    2. In your Pages, include that css template by using this line of code: <xen:require css="corefreedom.css" />

    3. Create your css in the corefreedom.css template, for example:
    .cf_header_text {
    font-size: 150%;
    color: red;
    }

    4. Use that class in your Page as follows:
    <div class="cf_header_text">This is the header</div>

    Note how the class names match (minus the period).

    Hopefully that gives you some pointers.
     
    wickedstangs and Core Freedom like this.
  7. Core Freedom

    Core Freedom Well-Known Member

    Up #2 makes perfect sense, #3+4 is rather chinese-ish - I will give it a try as soon as I'm done fixing the ugly code up there! - Thank you so much, really appreciate it!! :notworthy:
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Here's how 3 & 4 would look using inline styling:

    <div style="font-size: 150%; color: red;">This is the header</div>

    So as you can see, all it does is change the inline styling to a class which is referenced in a separate template.

    The benefit of this system is you can use that class hundreds of places, in multiple pages, but it only needs to be updated once in the css template to apply to all pages.
     
    Core Freedom likes this.
  9. Core Freedom

    Core Freedom Well-Known Member

    I get the concept but I really don't get the 'how', but I will keep at it...one step at a time. :D
     
  10. Core Freedom

    Core Freedom Well-Known Member

    Brogan, I fixed some of the code, best I could using M3, but they're tutorial is not helping much since it teaches individual components. I moved it from a page to a forum instead and it looks exactly how I want it (for now), so from that point of view it seems correct. But I can't figure out what pushes the header and the sidebar down. That is something I can't seem to figure out, at least not looking at M3. :(

    What are things that make the header and sidebar slip like this?
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

    It's usually due to incorrect opening and closing tags.
     
    Core Freedom likes this.
  12. Brett Peters

    Brett Peters Well-Known Member

    Try removing this </div> to see if it gives you a quick fix
     
    Core Freedom likes this.
  13. Core Freedom

    Core Freedom Well-Known Member

    Yay, that was it!!!! Thank you sooooo much, Brett! :love:
     
    Brett Peters likes this.
  14. Brett Peters

    Brett Peters Well-Known Member

    Good to hear
     
    Core Freedom likes this.
  15. Core Freedom

    Core Freedom Well-Known Member

    oh, oh, I spoke a bit too soon. It's shoving the header just a tad bit too far up, right over the 'alert' area in the forum section. I don't get how a code at the bottom can affect something at the top. :p
     
  16. Brogan

    Brogan XenForo Moderator Staff Member

    Because the header isn't actually at the top of the page, it is just moved there using CSS.
     
    Core Freedom likes this.
  17. Core Freedom

    Core Freedom Well-Known Member

    so how can a code inside a forum node shove the right sidebar up?
     

Share This Page