Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS, nested DIVs and Flash 1

Status
Not open for further replies.
wbodger

wbodger

Programmer
Apr 23, 2007
769
US
I have a page which uses CSS to place images and objects within a page, one of which is a flash panel. Directly above the Flash panel, there is an image map with 3 drop down menus built within a DIV tag. I used relative positioning so that the drop down menus would stay where they are supposed to be with different window sizes, but that means that everything below those menus gets bumped down when they are made visible.

First, the page is at:

Next, the code is
Code: 
	<center><div id="container">
			<div id="navheader"><img src="images/nav_header.jpg" alt="YCM Youth Conference Ministries Information" width="777" height="96" border="0" usemap="#Map">
				<div id="sonservants" STYLE="DISPLAY:none; Z-INDEX:99; WIDTH:83px; BACKGROUND-COLOR:#e0d6ca">
					<ul style="PADDING-LEFT:2px; PADDING-BOTTOM:4px; PADDING-TOP:4px; LIST-STYLE-TYPE:none;  margin-left:0px; text-align:left; margin-top:0px; margin-bottom:0px;">
						<li><a class="menu" href="">SS Schedule</a>
						<li><a class="menu" href="">FAQs</a>
						<li><a class="menu" href="">Downloads</a>
						<li><a class="menu" href="">Photos</a>
						<li><a class="menu" href="">Videos</a>
						<li><a class="menu" href="">Speakers/<br>Musicians</a>
						<li><a class="menu" href="">Register</a>
						<li><a class="menu" href="">Evaluations</a></li>
					</ul>
				</div>
				<div id="fits" STYLE="DISPLAY:none; Z-INDEX:99; WIDTH:94px; BACKGROUND-COLOR:#e0d6ca">
					<ul style="PADDING-LEFT:2px; PADDING-BOTTOM:4px; PADDING-TOP:4px; LIST-STYLE-TYPE:none; margin-left:0px; text-align:left; margin-top:0px; margin-bottom:0px;">
						<li><a class="menu" href="">FITS Schedule</a>
						<li><a class="menu" href="">FAQs</a>
						<li><a class="menu" href="">Downloads</a>
						<li><a class="menu" href="">Photos</a>
						<li><a class="menu" href="">Videos</a>
						<li><a class="menu" href="">Speakers/<br>Musicians</a>
						<li><a class="menu" href="">Register</a>
						<li><a class="menu" href="">Evaluations</a></li>
					</ul>
				</div>
				<div id="greatescape" STYLE="DISPLAY:none; Z-INDEX:99; WIDTH:109px; BACKGROUND-COLOR:#e0d6ca">
					<ul style="PADDING-LEFT:2px; PADDING-BOTTOM:4px; PADDING-TOP:4px; LIST-STYLE-TYPE:none; margin-left:0px; text-align:left; margin-top:0px; margin-bottom:0px;">
						<li><a class="menu" href="">GE Schedule</a>
						<li><a class="menu" href="">FAQs</a>
						<li><a class="menu" href="">Downloads</a>
						<li><a class="menu" href="">Photos</a>
						<li><a class="menu" href="">Videos</a>
						<li><a class="menu" href="">Speakers/<br>Musicians</a>
						<li><a class="menu" href="">Register</a>
						<li><a class="menu" href="">Evaluations</a></li>
					</ul>
				</div>
			</div>
		</div></center>
		<center><div id="container1">
		<div id="flashpanel">
					<OBJECT id="panel" codeBase="[URL unfurl="true"]http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"[/URL] height="399" width="777" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" VIEWASTEXT>
						<PARAM NAME="_cx" VALUE="20558">
						<PARAM NAME="_cy" VALUE="10557">
						<PARAM NAME="FlashVars" VALUE="">
						<PARAM NAME="Movie" VALUE="flash/panel.swf">
						<PARAM NAME="Src" VALUE="flash/panel.swf">
						<PARAM NAME="WMode" VALUE="Transparent">
						<PARAM NAME="Play" VALUE="-1">
						<PARAM NAME="Loop" VALUE="-1">
						<PARAM NAME="Quality" VALUE="High">
						<PARAM NAME="SAlign" VALUE="">
						<PARAM NAME="Menu" VALUE="-1">
						<PARAM NAME="Base" VALUE="">
						<PARAM NAME="AllowScriptAccess" VALUE="sameDomain">
						<PARAM NAME="Scale" VALUE="ShowAll">
						<PARAM NAME="DeviceFont" VALUE="0">
						<PARAM NAME="EmbedMovie" VALUE="0">
						<PARAM NAME="BGColor" VALUE="593326">
						<PARAM NAME="SWRemote" VALUE="">
						<PARAM NAME="MovieData" VALUE="">
						<PARAM NAME="SeamlessTabbing" VALUE="1">
						<PARAM NAME="Profile" VALUE="0">
						<PARAM NAME="ProfileAddress" VALUE="">
						<PARAM NAME="ProfilePort" VALUE="0">
						<PARAM NAME="AllowNetworking" VALUE="all">
						<PARAM NAME="AllowFullScreen" VALUE="false">
						<embed src="flash/panel.swf" quality="high" bgcolor="#593326" width="777" height="399" name="panel" wmode="transparent" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] />
					</OBJECT>
			<div id="iframeheader"><img src="images/iframes_pane.jpg" width="777" height="301" alt="">
				<div id="iframe1"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
				<div id="iframe2"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
				<div id="iframe3"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
				<div id="emailinput"><form name="newsletter" method="post" action="newslettersignup.asp">
						<input name="emailaddress" height="20" type="text" style="BORDER-RIGHT: #95a8a5 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #95a8a5 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #95a8a5 1px solid; COLOR: #000000; PADDING-TOP: 4px; BORDER-BOTTOM: #95a8a5 1px solid; FONT-FAMILY: georgia; BACKGROUND-COLOR: #6f8a86" value="E-mail Address" size="25" onFocus="javascript:document.newsletter.textfield.value='';">
						&nbsp; <input type="submit" value="Submit" style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; COLOR: #b3c1bf; BORDER-TOP-STYLE: none; PADDING-TOP: 2px; FONT-FAMILY: georgia; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #586d6a; BORDER-BOTTOM-STYLE: none"></form></div>
			</div>
			<div id="footer"><img src="images/footer.jpg" width="777" height="47" alt="" usemap="#Map3" border="0" id="IMG1"><br>
				<br><span class="style2"><nobr>site by <a href="[URL unfurl="true"]http://www.metaleapdesign.com"[/URL] target="_blank">Metaleap Design</a></nobr></span></div>
		</div>
	</div>
	</center>

and the css is
Code: 
#navheader 
{
	align:center;
	z-index:0;
}
div#navheader #sonservants
{
	position:relative;
	float:left;
	left:311px;
	top:0px;
}
div#navheader #fits
{
	position:relative;
	float:left;
	left:414px;
	top:0px;
}
div#navheader #greatescape
{
	position:relative;
	float:left;
	left:527px;
	top:0px;
}
#flashpanel 
{
	left:124px;
	top:96px;
	background-color:#593326;
}
div#flashpanel #iframeheader 
{
	position:relative;
	top:0px;
	float:left;
	z-index:0;
}
div#flashpanel #iframeheader #iframe1
{
	position:relative;
	top:-245px;
	float:left;
	left:37px;
	width:220px;
	height:190px;
	z-index:1;
}
div#flashpanel #iframeheader #iframe2
{
	position:relative;
	top:-245px;
	float:left;
	left:65px;
	width:210px;
	height:190px;
	z-index:1;
}
div#flashpanel #iframeheader #iframe3
{
	position:relative;
	top:-245px;
	float:left;
	left:100px;
	width:205px;
	height:190px;
	z-index:1;
}
div#flashpanel #iframeheader #emailinput
{
	position:relative;
	top:-225px;
	left:75px;
	z-index:1;
}
div#flashpanel #footer
{
	position:relative;
	top:-231px;
	float:left;
	z-index:0;
}

Any thoughts on how to accomplish this? If I use absolute positioning, then it only works with one screen resolution, right? And if I use relative positioning then it pushes down the div below it when they are displayed. So, basically, help!!

Please.

Willie
 
Sort by date Sort by votes
OK, I decided to try visibility instead of display and it looks great in IE, but now the drop down menus just plain don't appear in FF. Does FF use some different syntax? The page is still here:
and my show/hide code is:

Code: 
<script language="javascript" type="text/javascript">
	/* SHOW-HIDE Layer				*/
	function showlayer(layer, layer2, layer3){
		var myLayer=document.getElementById(layer).style.display;
		if(myLayer=="none"){
			document.getElementById(layer).style.visibility="visible";
			document.getElementById(layer2).style.visibility="hidden";
			document.getElementById(layer3).style.visibility="hidden";
		} else { 
			document.getElementById(layer).style.visibility="visible";
			document.getElementById(layer2).style.visibility="hidden";
			document.getElementById(layer3).style.visibility="hidden";
			}
	}
</script>
 
Upvote 0 Downvote
Luckily for your problem, you have been ill-informed about absolute positioning. Absolutely positioned elements are taken out of document flow, do not participate to document flow (do not interact with other elements in a way to push them around) and are positioned according to their first positioned parent. Failing that (if there is no positioned parent), they're positioned according to the viewport (browser window) -- the situation you've mentioned. The positioning that defines the way you described is called fixed positioning.

In order to get rid of your issue, just make the dropdowns absolutely positioned and their parent container relatively positioned (without any displacement, i.e. use of left/right/top/bottom properties). Your dropdowns will have their default position (top/left 0 values) at the top-left corner of the parent container.

I would personally not make my main navigation a single image, but that requires a serious rework of the page.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Yeah, it's not 'my' page, but I am reworking it for friends.

So, if the parent container is relatively positioned and I make the drop downs absolutely positioned, they will stay where they should stay (under the appropriate place) if the page is re-sized? I will give that a shot, thank you very much for the input!

wb
 
Upvote 0 Downvote
Indeed. The positioned parent container (make sure you are aware of the parent container dimensions -- you can inspect it in Firebug or similar tool or just give it borders/background colour) will act as a bounding box for the absolutely positioned elements. As long as the positioned parent container is positioned relatively, it will act as a normal element on the page itself.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Sweet, it worked, thank you very much! So, I have another question on that page. There are 3 scrolling iframes that don't scroll in FF, but work fine in IE. The code is
Code: 
<div id="iframe1"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>

with the div being controlled in the style sheet. Is there something wrong in the way it is called?

And, should the DTD be:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

or is there a better DTD to use for this stuff? Thanks for the help, I greatly appreciate it!

wb
 
Upvote 0 Downvote
And finally (I hope). I can show the hidden layers and change which ones I show, but if I go away from them altogether then I am left with that last one still standing. I tried to do a hide all script
Code: 
function hideall(layer, layer2, layer3){
document.getElementById(layer).style.visibility="hidden";
document.getElementById(layer2).style.visibility="hidden";
document.getElementById(layer3).style.visibility="hidden";
}
and then stuck it in the DIV for each drop down.
Code: 
<div id="sonservants" STYLE="visibility:hidden; Z-INDEX:99; WIDTH:83px; BACKGROUND-COLOR:#e0d6ca" onMouseout="hideall('sonservants','fits','greatescape');">
It worked, but as soon as I go off of the part of the image map that triggers the show, then it goes away (ie, can't use the drop down). I had thought that putting it on the DIV would attach it to that whole 'container', but I was wrong again and I am out of ideas, so... Any thoughts on this one as well?

And again, thank you very much for your input!

wb
 
Upvote 0 Downvote
wbodger, in regards to your questions:

1. About the iframes:

The design of this part of the page is very poor. The image you use as a background should be a background. This image does not provide content, it provides the visual background (although putting titles there is another no-no).

Using displaced relative positioning to shift all content up and lie it over the image is too complex and for some reason FF cannot really access elements that are placed on the image (this could be due to displacement, which usually presents more problems than it solves).

I recommend re-writing this part to have graphic as a background to the enclosing div (with an appropriate padding to take into account the space on top and on the sides and remove all positioning from the iframe holders -- instead use normal document flow with margins to position the three iframe holders. Furthermore, you would remove extra positioning from all the elements below that. I tested this design out and it would work.

2. About the dropdowns:

Again, I think there are better ways to handle dropdowns (namely the highly used Suckerfish Dropdowns method), however I don't know how easy it will be for you to adapt those methods to work with your image map. The fact is that other methods use the elements in such a way, that the initial menu option (the one that opens the dropdown) and the dropdown itself are both inside one element. Thus you're always hovering over the element, as long as you're on the selection or the dropdown.

Maybe the best way would be to visit the forum216 and ask the guys there for help with JS.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
OK, I think I understand what you are saying about the background image, but it is causing me issues. If I float the iframes, then they are blocks and I can adjust them with padding, but that does weird things to the background image, but if I don't float them, then they just stack unless I use the displaced relative positioning. So, I am sure there is something that I am missing, but I really have no idea what. I am continuing to try different combinations to get this to work right, but not having much luck (although, the iframes do scroll now in FF).

Again, thank you for the info, it is very helpful and informative, I am definitely learning from it.

Code: 
<div id="iframeheader">
	<div id="iframe1"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
	<div id="iframe2"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
	<div id="iframe3"><iframe scrolling="auto" src="homepage_pane.html" width="100%" height="100%" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
	<div id="emailinput"><form name="newsletter" method="post" action="newslettersignup.asp">
			<input name="emailaddress" height="20" type="text" style="BORDER-RIGHT: #95a8a5 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #95a8a5 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #95a8a5 1px solid; COLOR: #000000; PADDING-TOP: 4px; BORDER-BOTTOM: #95a8a5 1px solid; FONT-FAMILY: georgia; BACKGROUND-COLOR: #6f8a86" value="E-mail Address" size="25" onFocus="javascript:document.newsletter.textfield.value='';">
			&nbsp; <input type="submit" value="Submit" style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; COLOR: #b3c1bf; BORDER-TOP-STYLE: none; PADDING-TOP: 2px; FONT-FAMILY: georgia; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: #586d6a; BORDER-BOTTOM-STYLE: none"></form></div>
</div>

and then the CSS

Code: 
div#navheader #iframeheader 
{
	position:relative;
	top:0px;
	background-image:url('images/iframes_pane.jpg');
	width:777;
	height:301;
}
div#navheader #iframeheader #iframe1
{
	position:relative;
	left:0px;
	top: 0px;
	width:150px;
	padding-left:37px;
	padding-top:50px;
	padding-bottom:12px;
}
div#navheader #iframeheader #iframe2
{
	position:relative;
	left:0px;
	top:0px;
	width:150px;
	padding-left:20px;
	padding-top:55px;
	padding-bottom:12px;
}
div#navheader #iframeheader #iframe3
{
	position:relative;
	left:0px;
	top:0px;
	width:150px;
	padding-left:15px;
	padding-top:55px;
	padding-bottom:12px;
}

wb
 
Upvote 0 Downvote
Well, I have (almost) everything working so far as those iframes go minus 2 issues, one in IE and one in FF . If you look at the page


you see in Firefox that it looks great, but the scrollbars don't work in the iframes. The only way I could get those iframe DIVs to layout correctly without using displaced relative positioning was to float them left and then add padding

Code: 
div#navheader #iframeheader 
{
	position:relative;
	background-image:url('images/iframes_pane.jpg');
	width:777;
	height:301;
}
div#navheader #iframeheader #iframess
{
	position:relative;
	float:left;
	padding-left:37px;
	padding-top:55px;
	padding-bottom:12px;
}
.
.
.
here is the html
Code: 
<div id="iframeheader">
	<div id="iframess"><iframe scrolling="auto" src="ss_pane.html" width="220" height="190" frameborder="0" marginwidth="0" marginheight="0"></iframe></div>
.
.
.
</div>
It seems that the block nature of the float is causing problems, but if I don't float those DIVs, then they are either in a vertical line or I have to use that displaced relative positioning and the scroll bars still don't work? Any thoughts?

The other problem is in IE the top of the background image does not show up, somehow it gets cut off and I have no idea how. Any thoughts on this one?

Thanks!

wb
 
Upvote 0 Downvote
FF Issue: Your #emailinput is positioned over the iframes, thus obstructing their use. If you add clear: both; to its CSS declaration, it fixes the issue. Read more on floats and clearing here:
IE Issue:
It seems there's an issue with IE hasLayout property. Adding zoom: 1; is a well known solution to this problem that does not effect the rendering at all. Just google about hasLayout to learn more.



___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Wow, those took care of those two issues, thanks again. I am enjoying the learning and the testing, but there are definitely things that I can't come up with myself, so thank you for helping me out!!

Willie
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
760
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
732
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
587
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
600
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top