drop downs and animation don't play nice

How do I fix this so that the drop down buttons work and that the ribbon appears above the  animation?

Animation
http://nsitedesigns.com/nsitedesigns/am/2.html

"normal" page
http://nsitedesigns.com/nsitedesigns/am/index.html

The animation was created using Wow Slider.
am.css
style.css
jquery.js
wowslider.js
script.js
nsitedesignsAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
Ioannis ParaskevopoulosConnect With a Mentor Commented:
Hi,

Please see the attached png. It seems that you haven't properly closed the
<div class="container">

Open in new window

. See on the bottom the right befor the
<!-- HEADER END -->

Open in new window

Difference
Giannis
0
 
nsitedesignsAuthor Commented:
I made modifications to css as follows:
	#mainpic_container {
		width:950px;
		[b]z-index:99999;[/b]}

#toplayer {
	[b]z-index:1[/b];}

	.ribbon {
	float: left;
	height: 293px;
	margin-left: 25px;
	margin-top:-115px;
	position: absolute;
	width: 195px;
	[b]z-index:2;[/b]
	}

Open in new window

0
 
Ioannis ParaskevopoulosCommented:
There could be other significant differences, but this is a start. Fix this and we may have a farther look.

Giannis
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Ioannis ParaskevopoulosConnect With a Mentor Commented:
I have also changed the z-index in :
http://nsitedesigns.com/nsitedesigns/am/engine1/style.css
 on :
#wowslider-container1 { 
	zoom: 1; 
	position: relative; 
	max-width:950px;
	margin:0 auto;
	z-index:-100;
	border:none;
	text-align:left; /* reset align=center */
}

Open in new window


Check the following fiddle:
http://jsfiddle.net/eaSNf/1/

Giannis
0
 
nsitedesignsAuthor Commented:
I don't see the change to the following on your fiddle.  I never used fiddle.  What was displayed is what was in place.

#wowslider-container1 {
      zoom: 1;
      position: relative;
      max-width:950px;
      margin:0 auto;
      z-index:-100;
      border:none;
      text-align:left; /* reset align=center */
}
0
 
nsitedesignsAuthor Commented:
Giannis,

I see that I had TWO div containers.  I got rid of the extra one so I didn't need to add the second closing div.  Didn't make any impact on the 2 questions but it was good that it was removed.  THanks.
0
 
Ioannis ParaskevopoulosConnect With a Mentor Commented:
Sorry, it seems i got you the wrong fiddle:
http://jsfiddle.net/eaSNf/2/

I made the z-index to -100

Giannis
0
 
nsitedesignsAuthor Commented:
Well, the new fiddle brought the drop downs and ribbon to the front but the animation doesn't appear.  Actually, the animation seems to be happening behind the ribbon.  Any idea how to fix that?

http://nsitedesigns.com/nsitedesigns/am/2.html
0
 
Ioannis ParaskevopoulosCommented:
Hey, i made it -100, but it doesn't need to be -100. Try -1

Giannis
0
 
nsitedesignsAuthor Commented:
Didn't make a hill of beans difference.  : (
0
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
Ok Your solution is here, You are using, I have checked it in your page so now change your am.css, I think ribbon position will be a little bit change I hope you can manage the margin and can manage the position.

1.
am.css Line 184

#nav_container {
    display: inline-block;
    padding: 0;
    width: 950px;
    z-index: 200;
}

Open in new window

2.
am.css line 97

.ribbon {
    float: left;
    height: 293px;
    margin-left: 25px;
    margin-top: -115px;
    position: absolute;
    width: 195px;
    z-index: 300;
}

Open in new window

0
 
nsitedesignsAuthor Commented:
Close.  When I change to your recommendations the drop down buttons work but the ribbon is too far down the page.  The top of the ribbon should meet the top of the white background.  See example #2 below. When I change the margin-top from -115px to - margin-top: -140px; it sits in the right position but the drop downs now don't work.  See #1 screen shot below

#1  .ribbon margin-top  setting at -115px
http://screencast.com/t/mjIuqqF5Z3i

#2 ribbon margin-top  setting at -140px
http://screencast.com/t/eiEB6Cryb

How do I get the ribbon to sit in the right place but still have the drop down buttons work?
0
 
nsitedesignsAuthor Commented:
Hoping to go live soon.  Can anyone else provide solution to raise ribbon on left.  

http://nsitedesigns.com/nsitedesigns/am/index.html
http://nsitedesigns.com/nsitedesigns/am/am.css
0
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
Change style of am.css line no 97 to:

.ribbon {
    float: left;
    height: 293px;
    margin-left: 25px;
    margin-top: -44px; /* Or set Height if not sufficient position*/
    position: absolute;
    width: 195px;
    z-index: 300;
}

Open in new window

0
 
nsitedesignsAuthor Commented:
That is so weird.  I tried lowering the value like you did and when I did that, the drop downs failed to work.  Thanks for your help!
0
 
nsitedesignsAuthor Commented:
Crap I was so focused on moving the ribbon and having drop downs work that I missed the whole point and that the drop downs don't work on the home page with the animation.

http://nsitedesigns.com/nsitedesigns/am/index.html
0
 
nsitedesignsAuthor Commented:
I am reopening this question.  Still having problems.
0
 
Jagadishwor DulalBraces MediaCommented:
Not a good points for me????

Change your css :
#wowslider-container1 {
    border: medium none;
    margin: 0 auto;
    max-width: 950px;
    position: relative;
    text-align: left;
}

#nav {
    background-color: #40956C;
    float: right;
    position: relative;
    width: 100%;
    z-index: 100;
}

Open in new window


In your script the wowslider-container1 is overflow:visible make it hidden
0
 
nsitedesignsAuthor Commented:
I reopened this question.  It isn't working now.  If you want extra points, please take a look again.  Subject is "Animation and Drop Downs Fighting Each Other"
0
All Courses

From novice to tech pro — start learning today.