flash, gif, image align

**jmcdonald21** · 06-23-2005 09:50 PM

I am having trouble aligning two gradient gifs I created on either side of my flash header. I want them to abut the flash seamlessly, but the right is overlapping.
Here is the page: http://www.mjmcdonaldfam.com/gregs_stuff/greg.htm

Here is the code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3c.org.TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Fiery G.</title>
		<meta name="author" content="Josh McDonald" />
		<meta name="generator" content="notepad" />
		<meta name="keywords" content="Greg Richter" />
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />

		<meta http-equiv="Content-Style-Type" content="text/css" />

<style type="text/css">
<!--

body {
	background-image:url(background.jpg);
	margin:0;
	padding:0;
	font-family:georgia,hellvetica,"times new roman",sans-serif,serif;
	color:#000;
	background-color:#fff;
	font-size:medium;
}

a:link {
	color:#000;
	text-decoration:none;
}

a:visited {
	color:#d8bfd8;
	text-decoration:underline;
}

a:hover,a:active {
	color:#fff;
	background-color:#87ceeb;
	text-decoration:none;
}

p:first-letter {
	font-size:x-large;
	color:red;
}

h1,h2,h3,h4,h5 {
	font-weight:normal;
	color:inherit;
}

div#header {
	text-align:center;
	color:#fff;
	border-bottom:2px solid #000;
	background-color:#000000;
}

div#header img {
	padding:0;
	margin:0 auto;
	position:fixed;
}
	

div#header h1 {
	text-align:center;
	padding:0;
	margin:0;
	background-image:url(fgdna.jpg);
	background-position:center;
}

div#main {
	text-align:center;
	background-repeat:no-repeat;
	background-color:white;
 	width:700px;
	line-height:150%;
	margin:2.8em auto;
}

div#main img {
	float:left;
	margin:0;
	padding:0;
	position:relative;
	border:0;
}

div#main h2 {
	margin:0;
	padding-top:6.7em;
}


p.main {
	text-align:center;
	text-indent:2em;
}


#clean {
	clear:both;
	height:1em;
}

div#footer {
	clear:both;
	padding:1em .5em 1em;
	border-top:1px solid #000;
	text-align:center;
}
 
div#footer ul {
	padding:0;
	margin:0;
	list-style-type:none;
}

div#footer ul li {
	display:inline;
	margin-right:1em;
	border-right:1px solid #000;
	border-left:1px solid #000;
	padding:0 .5em 0 .5em;
	margin:auto;
}

div#validation {
	float:left;
	padding:0;
	margin:0;
}

-->
</style>
	</head>
<body>

<div id="header">
	<img src="left_dnagradient.gif" />
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="350" height="76" id="dna" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="dna.swf" />

	<param name="quality" value="best" />
	<param name="bgcolor" value="#494949" />
	<embed src="dna.swf" quality="best" bgcolor="#494949" width="350" height="76" id="dna" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
	<img src="right_dnagradient.gif" />
</div>

<div id="main">
	<img src="willispure_logo.gif">
	<a href="home.htm" onMouseOver="document.home.src='home_press.gif'" onMouseOut="document.home.src='home.gif'"><img src="home.gif" border="0" id="home" alt="home" /></a>

	<a href="apoc_affairs.htm" onMouseOver="document.aa.src='aa_press.gif'" onMouseOut="document.aa.src='aa.gif'"><img src="aa.gif" id="aa" alt="Apocalyptic Affairs" /></a>
	<a href="rectal_health.htm" onMouseOver="document.drh.src='drh_press.gif'" onMouseOut="document.drh.src='drh.gif'"><img src="drh.gif" id="drh" alt="Rectal Health Department" /></a>
	<a href="faq.htm" onMouseOver="document.faq.src='faq_press.gif'" onMouseOut="document.faq.src='faq.gif'"><img src="faq.gif" id="faq" alt="FAQ" /></a>
	<a href="movies.htm" onMouseOver="document.myoovies.src='myoovies_press.gif'" onMouseOut="document.myoovies.src='myoovies.gif'"><img src="myoovies.gif" id="myoovies" alt="Movie reviews" /></a>
	<a href="comments.htm" onMouseOver="document.comments.src='comments_press.gif'" onMouseOut="document.comments.src='comments.gif'"><img src="comments.gif" id="comments" alt="Comments" /></a>
	<a href="bio.htm" onMouseOver="document.bio.src='bio_press.gif'" onMouseOut="document.bio.src='bio.gif'"><img src="bio.gif" id="bio" alt="Staff Bio" /></a>
	
	<h2>What?</h2>
		<p class="main">What? BLAHBLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH</p>

		
	



<div id="footer">

	<div id="validation">
		<a href="http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>
	</div>
	<ul>
		<li><a href="*">Biography</a></li>
		<li><a href="*">E-mail</a></li>

		<li><a href="*">Copyright &copy; Gregory J. Richter 2005</a></li>

		<li><a href="*">Site design by Joshua McDonald</a></li>
	</ul>
</div>
</body>
</html>

**byeee** · 06-24-2005 12:54 AM

I suggest you use
position:absolute;top:0
in the div#header line in the css.

**jmcdonald21** · 06-24-2005 07:00 PM

I tried your suggestion Byee, it didn't work right either. It pushed the gifs down on either side from the top of the page. I adjusted the padding to 0 also, but that didn't do anything.

**ray326** · 06-24-2005 09:29 PM

The only way I've found to center that flash object in Firefox is

div#header * { margin:auto }

I don't see any images in the HTML.

**byeee** · 06-25-2005 01:46 AM

There are 2 gradients over the flash image, but they are difficult to spot.

**bathurst_guy** · 06-25-2005 11:28 AM

Why not place these gradient gifs together with a gap in the middle (the size of the swf) as one gif and make the header have this as a centred background image

**jmcdonald21** · 06-26-2005 02:38 AM

Hey thanks bathurst_guy, that was a great idea. It worked perfect. Check out the end result: http://mjmcdonaldfam.com/gregs_stuff/greg.htm

Thread: flash, gif, image align

Thread Tools

Display

aligning CSS flash, gif, image align

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions