Help! My header slipped and sidebar slipped to the bottom

Divinum Fiat

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>
 
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.
 
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.
 
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.
 
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:
 
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.
 
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?
 
</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>

Try removing this </div> to see if it gives you a quick fix
 
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
 
Top Bottom