Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] HTML CSS inserts appear under page and cat buttons (http://forum.bytesforall.com/showthread.php?t=9327)

teak Aug 31, 2010 07:50 PM

[SOLVED] HTML CSS inserts appear under page and cat buttons
 
Why is it, when I add an HTML div with CSS styles, into the body bottom inserts section, it shows up under the page and category buttons?

Thanks - Teak (I'm new, by the way.)

juggledad Sep 1, 2010 01:55 PM

What versions and what is the URL?

teak Sep 1, 2010 03:24 PM

Atahualpa 3.4.9, Wordpress 3.0.1. No URL yet, have it running locally on my Mac. (Will use export feature of Atahualpa to put on to server.)

juggledad Sep 1, 2010 05:28 PM

what is it you are putting in the body bottom inserts section (exactly)

teak Sep 1, 2010 05:49 PM

Here is one of the div's:

<div id="popout" style="position: fixed; bottom: 0%; left: 0px; width: 100%; height: 20%;">

There is also a JavaScript in the HTML that changes the bottom attribute to move the div around:

<script type="text/javascript">
function showpopout() {
document.getElementById("popout").style.bottom="50 %";
}
</script>

juggledad Sep 1, 2010 05:50 PM

Is this EXACTLY what you placed in that area - no more - no less?
do a copy/paste in your reply and hit the HTML icon above the reply box and insert your code betweer the open html and close html code

also - where is the </div>

teak Sep 1, 2010 05:54 PM

No, but all of the other div's are in that one. The JS is more complicated.

juggledad Sep 1, 2010 05:59 PM

without seeing the code you put in or the page there is no way to tell you what might be happening.
copy and paste all the code if you want some help

teak Sep 1, 2010 06:07 PM

<script type="text/javascript">
var i=-200
var t

function showpopout() {
document.getElementById("popoutbuttonh").style.bot tom=i+"%";
document.getElementById("popout").style.bottom=i+" %";
if (i<0) {
i=i+20
t=setTimeout("showpopout()",0);
} else {
document.getElementById("popout").style.bottom=0+" px";
document.getElementById("popoutbuttons").style.bot tom="-150%";
i=0
}
}

function hidepopout() {
document.getElementById("popoutbuttonh").style.bot tom=i+"%";
document.getElementById("popout").style.bottom=i+" %";
document.getElementById("popoutbuttons").style.bot tom="0%";
if (i>-150) {
i=i-20
t=setTimeout("hidepopout()",0);
} else {
i=-200
}
}
</script>

<div id="popout" style="position: fixed; bottom: -150%; left: 0px; width: 100%; height: 80%; background-color: #666666; overflow: hidden;">

<div id="popoutboxt" style="position: absolute; top: 1%; left: 1%; width: 97%; height: 4%; padding-left: 1%; background-color: #888888; overflow: hidden;">
HTML here...
</div>

<div id="popoutboxa" style="position: absolute; top: 6%; left: 1%; width: 30%; height: 93%; padding: 0% 1% 0% 1%; background-color: #888888; overflow: hidden;">
HTML here...
</div>

<div id="popoutboxb" style="position: absolute; top: 6%; left: 34%; width: 30%; height: 93%; padding: 0% 1% 0% 1%; background-color: #888888; overflow: hidden;">
HTML here...
</div>

<div id="popoutboxc" style="position: absolute; top: 6%; left: 67%; width: 30%; height: 93%; padding: 0% 1% 0% 1%; background-color: #888888; overflow: hidden;">
HTML here...
</div>

<div id="popoutbuttons" class="button buttonhover" onclick="showpopout()" style="position: fixed; bottom: 0%; right: 0px; width: 100px; height: 17px; text-align: center; overflow: hidden;">
More Info
</div>

<div id="popoutbuttonh" class="button buttonhover" onclick="hidepopout()" style="position: fixed; bottom: -150%; right: 0px; width: 100px; height: 17px; text-align: center; overflow: hidden;">
Hide Info
</div>

juggledad Sep 1, 2010 06:23 PM

your first <div...> is missing the </div>

teak Sep 1, 2010 06:55 PM

Fixed that, but it's not the problem...

juggledad Sep 1, 2010 07:10 PM

Well since you don't want to post what you have coded and there was one error in your HTML, I suggest you review the rest to see if you have more errors.

Take it all out and add a little at a time

teak Sep 1, 2010 08:04 PM

It's not a problem with my code. I know this because I deleted my code and put in one div. The div appeared under the page, cat and title. (The title is floating above the picture.) The div I put in looks like this:

<div style="position: absolute; top: 1%; left: 1%; width: 98%; height: 98%; background-color: #eeeeee;"></div>

teak Sep 2, 2010 12:25 PM

Figured it out. It has to do with the "z-index" of the header. I just put a z-index of more then 999 to all my div's and problem solved. Had to read throe all the Atahualpa CSS to figure this one out. Thanks for trying juggledad.

- Teak


All times are GMT -6. The time now is 11:01 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.