www.webdeveloper.com
Results 1 to 5 of 5

Thread: Can't get menu in front of swf

  1. #1
    Join Date
    May 2006
    Posts
    81

    Can't get menu in front of swf

    I replaced a background image in a header with an embedded swf file. Previously, there was a horizontal menu that appeared at the bottom of the header div. Now that the swf file is in place, the menu is gone. Here's my header code:

    Code:
    <div id="header">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1100" height="206">
      <param name="movie" value="http://www.spotlessga.com/wp-content/themes/chasmogamous/images/header.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent">
      <embed src="http://www.spotlessga.com/wp-content/themes/chasmogamous/images/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1100" height="206" wmode="transparent"></embed>
    </object>
    <div id="menu">
    	<ul>
    		<li class="first page_item<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
    		<?php wp_list_pages('title_li=' ); ?>
    	</ul>
    	<div id="search">
    		<form method="get" action="<?php bloginfo('url'); ?>/">
    			<fieldset>
    			<input id="s" type="text" name="s" value="<?php the_search_query(); ?>" />
    			<input id="x" type="submit" value="GO" />
    			</fieldset>
    		</form>
    	</div> 
    </div>
    </div>
    Here's the original CSS:

    Code:
    #header {
    	width: 1100px;
    	height: 206px;
    	margin: 0 auto;
    	/* background: url(images/img02.gif) no-repeat top left; */
    }
    
    /* Menu */
    
    #menu {
            	width: 960px;
    	margin: 0 auto;
    	padding-bottom: 30px;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 23px 0 0 28px;
    	list-style: none;
    	line-height: normal;
    }
    
    #menu li {
    	float: left;
    	padding: 0 2px 0 2px;
    }
    
    #menu li.first a{
    	float: left;
    	background: #08A24A;
    	padding: 9px 20px;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 11px;
    	color: #FFFFFF;
    }
    
    #menu a {
    	float: left;
    	background: #213C9C;
    	padding: 10px 20px;
    	text-decoration: none;
    	text-transform: uppercase;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: bold;
    	font-size: 11px;
    	color: #FFFFFF;
    }
    
    #menu a:hover {
    	text-decoration: none;
    	background: #08A24A;
    	padding: 9px 20px;
    }
    
    /* Search */
    
    #search {
    /*	float: right; */
             float: left;
    	width: 200px;
    /* added */
             margin-top: 20px;
    }
    
    #search form {
    	margin: 0 0 0 2px;
    	padding: 0;
    /*	margin-top: -10px; */
    }
    
    #search fieldset {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    
    #search input {
    }
    
    #search #s {
    	width: 150px;
    }
    
    #search #x {
    	margin: 0;
    	padding: 0;
    	width: 30px;
    	background: #406800;
    	color: #FFFFFF;
    }

  2. #2
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    I'm not sure if you are meaning that the .swf has covered up the menu or that the menu just no longer appears. From what I see there is no z-indexing so I take it that the menu is to appear after (underneath) the .swf. The #menu appears to be in the #header div, correct?
    Code:
    #header {
    	width: 1100px;
    	height: 206px;
    height for header is set at 206 and the height of .swf is also 206. So where is the room for the menu? Increase the header height and that should take care of it (don't forget besides menu height, menu also has 30px padding).
    Best wishes,
    EfV

  3. #3
    Join Date
    May 2006
    Posts
    81
    Thanks for your help. The site is www.spotlessga.com. The menu isn't appearing at all; I would like for it to overlap the bottom of the swf, like it overlapped the identical background image before I inserted the swf.

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    If I understand this correctly, when you used the background image in <header>, the only content in that div was <menu> and inside <menu> was <search>. Is that correct? the background image showed through because it was not content but background. So <menu> did not have to contend with other content in <header>. But now you have an <object> also in <header>. <object> takes up 1100 X 206 px, or the entire space of <header> (according to your CSS). There is no room to display <menu>.
    To test this theory, replace the .swf with an image 1100 X 206 px and place it in <header> as content, not background. I'm pretty sure you'll see you have the same problem. Another way to test this is to increase the height of <header> by 100px or so. Give <menu> plenty of room underneath the <object>. If it shows, then there's just not enough room with 206 px height.
    For 2 elements, like an <object> and a <menu> to occupy the same space at the same time, you will have to stack them using positioning and z-indexing.
    http://www.w3schools.com/Css/pr_pos_z-index.asp
    And Google z-indexing for more info.
    With positioning and z-indexing your menu will fit inside <header> and over the top of part of the <object>. So I'd say your problem is not the .swf it's a CSS thing.
    Best wishes,
    EfV

  5. #5
    Join Date
    May 2006
    Posts
    81
    Your assessment of the problem is 100%...I am trying to stack the menu on top of the swf. I tried z-indexing and it didn't work, so I must have done something wrong. I guess I will take another look.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles