Logo Hover help

[Ishy]

Forum URL: codesite.proboards.com/

I just recently found this thread with Tumbleweed as the helper
Logo Hover, template request

And so far it works lovely only I have one problem. The overflow:auto doesn't seem to work.

[Michael]

Have you tried any of the other overflow types?

www.w3schools.com/cssref/pr_pos_overflow.asp

[Ishy]

I just gave it a shot and none worked.

[Ishy]

Bump.

[Welshling]

I had this problem and came to realize that i had missed off a character out of the css section. So go to your themes, css styles and make sure you have ended each style with ; and closed any and all tags }

then do the same in your wrappers section, if this doesn't resolve your problem. check back with us.

[Ishy]

First I had it as div style, but then I went to my Global Headers and changed them to div classes, didn't work. Then I added the css to the Advanced Styles & CSS page and still nothing. As far as I know everything has the proper closing tags.

[Welshling]

Could you paste the coding needed for this hover in the banner area, from your wrappers and css areas. On here so i can view them, real quick?

EDIT: Also, ensure you've added the javascript piece of the coding in the thread with Tumbleweed.

[Ishy]

CSS
/*Banner fade this just sets things up for positioning */
.entry1{
position:relative;
top:0px;
left:0px;
width: 950px;
height: 370px;
}
/* this is the background behind the fade description. Height width should be same as entry above */
.image1{
position: absolute;
top:0px;
left:0px;
opacity:4;
width:950px;
height:370px;
z-index:100;
}
.fade_content{
position: relative;
top: 8px;
background-color: white;
border: 0px solid black;
color: black;
font-size: 1em;
padding: 18px;
width:900px;
height:350px;
text-align:left;
}
.columns{
width: 33%;
float: left;
}

Template
<div id="wrapper">
<header>
               <center>
<div class="entry1">
<div class="image1">
<div id="banner-container" role="banner">
<h2 id="banner">
$[forum.title]
</h2>
</div>
   <!--jquery automatically inserts the div content here-->
</div>
</div>
</center>
<br /> <br />

<!--This is your fade content keep it at the bottom-->
<div class="fade_content" style="display:none;">
<center> <h4> Testing this</h4></center>
<br />
   <div class="columns"><div class="title_one">SETTING</div><div class="text_box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</div></div>
<div class="columns">Content for middle</div>
<div class="columns">content for right side</div>



</div>
<script type="text/javascript">
$(document).ready(function(){
$('.fade_content').insertAfter($('.image1'));
});
</script>

Global Header
<script type="text/javascript">
$(function() {
$('.entry1').hover(function() {
$('.image1',this).stop().fadeTo('slow', 0.4)
.siblings().stop().fadeTo('slow', 1);
}, function() {
$('.image1',this).stop().fadeTo('slow', 1)
.siblings().stop().fadeTo('slow', 0);
});
});

</script>


[Welshling]

The only thing I can suggest you try now, is alter the width and height of your transition background.

.fade_content{
position: relative;
top: 8px;
background-color: white;
border: 0px solid black;
color: black;
font-size: 1em;
padding: 18px;
width:900px;
height:350px;
text-align:left;

that part. and or use an image instead of a color, because as you stated there are no breaks in your scripts. So i'm stumped why its not working for you.

[Ishy]

I've tried that with no suck luck sadly

[Welshling]

Ok try removing your other class divs from the wrappers, maybe thats confusing the parent div classes?

So keep. <div class="columns"><div style="width:200px; height:200px; overflow:auto;">info goes here</div></div>

If this still doesn't work, Tumbleweed should know whats going on for you. I am off to bed, sorry. but i will check in again tomorrow. Goodluck.

[Ishy]

The only div's I really have added is the div's that make the hover code, everything else was there before. Thank you for your time though.

[Ishy]

Request Done