12 replies [Last post]
blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

Hello,
I've created my new site totally using css at http://www.castleranch.com (first time off the frame and table habit). If you go to my music menu button you'll see a little animation I created in flash. What's odd is my drop down menu seems to be behind the flash animation (evidence by mousing over the videos button). Not sure what to do to get that menu back out in front like all the other pages.

Here's my css

html, body, p, h1, h2, h3, h4, h5, h6, ol {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 
}
 
body {
	background-color: #000;
	background-image: url(graphics/sagebackground.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}
#wrapper {
	width: 950px;
	margin: 0px auto 0 auto;
	background-color: #a8a852;
	overflow: auto;
	background-image: url(graphics/sidebar/gradient.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	}
 
#banner {
	background-image: url(graphics/banner/bannerbackground.jpg);
 
}
#banner p {
	margin: 0;
	background-image: url(graphics/banner/tagline.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	text-align: left;
}
 
#navigation {
	text-align: left;
	background-image: url(graphics/plugin/nav_background.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	height: 26px;
}
 
#maincontent {
	float: left;
	width: 680px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 25px;
	padding-left: 15px;
	text-align: left;
}
#maincontent p {
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	padding-bottom: 10px;
	color: #434361;
	font-weight: bold;
	line-height: 26px;
	padding-left: 10px;
}
#maincontent h2 {
	font-size: 24px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom: 15px;
	background-color: #b9b95c;
	padding-top: 8px;
	padding-left: 5px;
}
#maincontent h1 {
	font-size: 30px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom: 3px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #505074;
	margin-bottom: 20px;
}
 
#maincontent a {
	color: #FFFFFF;
	text-decoration: none;
	}
 
#maincontent a:hover {
	color: #CC3300
}
 
#maincontent img.maincontentpics {
	float: right;
	margin-right: 10px;
	border: medium solid #000000;
	margin-left: 5px;
}
 
#sidebar {
	float: left;
	width: 250px;
	background-image: url(graphics/sidebar/sidebarbackground.jpg);
	background-repeat: repeat-y;
	background-position: left top;
}
 
#sidebar .sidebargraphic {
	float: left;
	position: relative;
	margin-bottom: 5px;
	display: inline;
}
#sidebar .sidebargraphic h2{
	position: absolute;
	width: 225px;
	top: 20px;
	left: 21px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #602110;
	text-align: left;
 
}
 
#sidebar p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 3px;
	text-align: left;
}
 
#sidebar img.sidebarpics {
	float: right;
}
 
#sidebar a {
	color: #EEC469;
	text-decoration: none;
	}
 
#sidebar a:hover {
	color: #669900}
 
#footer {
	clear: both;
	background-image: url(graphics/footer/footer_background.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	height: 50px;
}
#footer p {
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	padding: 10px;
}

Any help getting this figured out would be greatly appreciated!

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

One more thing

I should have mentioned click the "music" menu button to get to that page and then you'll see how the menus are behind the flash animation

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Flash objects, by default,

Flash objects, by default, are windowed. That means they are not a part of the application, but lie above it. No amount of fiddling with the z-index will make any difference.

You must make it windowless. The attribute for that is wmode. You may compile the animation with wmode set to opaque or transparent, or set wmode as a parameter. Do this:

<div id="flashbanner"> 
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" 
      width="950" 
      height="135">
    <param name="movie" value="flash/music/musicheader.swf">
    <param name="wmode" value="opaque">
    <param name="quality" value="high">
    <!--[if !ie]-->
    <object data="flash/music/musicheader.swf"
        type="application/x-shockwave-flash"
        width="950"
        height="135">
      <param name="wmode" value="opaque">
      <param name="quality" value="high">
    </object>
    <!--[endif]-->
  </object>
</div>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

You are correct

Gary,
Thanks so much, I see what you mean about making it windowless. Man, I love this site.

Thanks again

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

One more item

Hi Gary,
I wonder if I could ask one more "looksee" from you. On that same page I'm trying to float a youtube video to the right which I did. When I add it into the paragraph that talks about the band (to wrap the text around the video), that paragraph looses formating. Now I did this with the album cover you see in the left sidebar. You can see there in the css that I floated the img tag but what "tag" do I float with the youtube video...object? You'll see my attempt with the #maincontent .videos { float: right; } Do I have to make the video windowless as you mentionen previously? I wouldn't think so since I'm not doing anything over the top of it like I was earlier.

Thanks for any suggestions.

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

Got it

Gary,
I was able to figure out my last request. Thanks for the help with the banner over flash thing, that worked!!

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

Got it

Gary,
I was able to figure out my last request. Thanks for the help with the banner over flash thing, that worked!!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It has to do with the way

It has to do with the way floats work. They must come before the text that wraps them.

<p><object class="videos"...
    <embed class="videos"...>
  </object>These folks are one of the most talented bands that I've listened to in a long time. Rodrigo y Gabriela.</p>

If you want the next paragraph to immediately follow, and also wrap the float, do nothing else. If you want the following paragraph to drop below the float, then you must clear it or cause the

with the video to enclose its float.

Rework the structure as I showed, and if you're not sure how to take the next step, bring it back.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

Well, I thought I had it

Gary thanks for the comments. I thought I had it, it looks good on FF but does the weird drop thing in IE. I'm sure it's a IE bug thing I need to fix, but not sure how. Here's my new css after a few tweaks from above

html, body, p, h1, h2, h3, h4, h5, h6, ol {
	margin: 0;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
 
}
 
body {
	background-color: #000;
	background-image: url(graphics/sagebackground.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}
#wrapper {
	width: 950px;
	margin: 0px auto 0 auto;
	background-color: #a8a852;
	overflow: auto;
	background-image: url(graphics/sidebar/gradient.jpg);
	background-repeat: repeat-y;
	background-position: left top;
	}
 
#banner {
	background-image: url(graphics/banner/bannerbackground.jpg);
 
}
#banner p {
	margin: 0;
	background-image: url(graphics/banner/tagline.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	text-align: left;
}
 
#navigation {
	text-align: left;
	background-image: url(graphics/plugin/nav_background.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	height: 26px;
}
 
#maincontent {
	float: left;
	width: 680px;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 25px;
	padding-left: 15px;
	text-align: left;
}
#maincontent p {
	text-align: left;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	padding-bottom: 10px;
	color: #434361;
	font-weight: bold;
	line-height: 26px;
	padding-left: 10px;
}
#maincontent h2 {
	font-size: 24px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom: 15px;
	background-color: #b9b95c;
	padding-top: 8px;
	padding-left: 5px;
}
#maincontent h1 {
	font-size: 30px;
	font-family: "Times New Roman", Times, serif;
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom: 3px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #505074;
	margin-bottom: 20px;
}
 
#maincontent a {
	color: #FFFFFF;
	text-decoration: none;
	}
 
#maincontent a:hover {
	color: #CC3300
}
 
#maincontent img.maincontentpics {
	float: right;
	margin-right: 10px;
	border: medium solid #000000;
	margin-left: 5px;
	margin-top: 5px;
 
}
#maincontent object.videos {
	float: right;
}
 
#sidebar {
	float: left;
	width: 250px;
	background-image: url(graphics/sidebar/sidebarbackground.jpg);
	background-repeat: repeat-y;
	background-position: left top;
}
 
#sidebar .sidebargraphic {
	float: left;
	position: relative;
	margin-bottom: 5px;
	display: inline;
}
#sidebar .sidebargraphic h2{
	position: absolute;
	width: 225px;
	top: 20px;
	left: 21px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #602110;
	text-align: left;	
}
 
#sidebar p {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	margin-left: 10px;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-right: 3px;
	text-align: left;
}
 
#sidebar img.sidebarpics {
	float: right;
}
 
#sidebar a {
	color: #EEC469;
	text-decoration: none;
	}
 
#sidebar a:hover {
	color: #669900}
 
#sidebarbubcontainer {
	width: 250px;
	}
#sidebarone {
	float: left;
	text-align: center;
}
#sidebartwo {
	float: left;
	text-align: center;
}
#sidebarthree {
	float: right;
	text-align: center;
}
 
#footer {
	clear: both;
	background-image: url(graphics/footer/footer_background.jpg);
	background-repeat: repeat-x;
	background-position: left center;
	height: 50px;
}
#footer p {
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
	padding: 10px;
}
Any help to get IE to look like FF would be appreciated.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Do this:.note {

Do this:

.note {
    overflow: hidden;
    zoom: 1;  /* for IE6 */
    }
 
.note .videos {
    float: left;
    margin-right: 10px;
    }
=========================
<p class="note">
  <object 
      width="320" 
      height="265"
      class="videos">
    <param name="movie" 
        value="http://www.youtube.com/v/vNc5o9TU0t0&hl=en&fs=1">
    <param name="allowFullScreen" 
        value="true">
    <param name="allowscriptaccess" 
	value="always">
 
    <!--[if !ie]-->
    <object data="http://www.youtube.com/v/vNc5o9TU0t0&hl=en&fs=1" 
        type="application/x-shockwave-flash" 
        width="320" 
        height="265"
        class="videos">
      <param name="allowscriptaccess"
          value="always">
      <param name="allowfullscreen"
          value="true"> 
    </object>
    <!--[endif]-->
  </object>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

Hi Gary, I would assume my

Hi Gary,
I would assume my text describing the video (that I want to wrap) then follows that last object tag followed of course by the closing

?

Your help is much appreciated.

blindlemon57
Offline
Regular
Last seen: 13 years 13 weeks ago
Joined: 2009-04-30
Posts: 13
Points: 0

I answered my own question

I answered my own question by putting into practice your advice and it worked.
Thanks much!!!!

ttjordan81
Offline
newbie
Last seen: 13 years 8 weeks ago
Joined: 2009-06-12
Posts: 1
Points: 0

I was beating my head

I was beating my head against the wall trying to figure why my flash player was on top of my menu dropdown. Thanks for the info... IT WORKS PEOPLE!!! Thanks man...