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: <!-- m --><a class="postlink" href="http://www.mjmcdonaldfam.com/gregs_stuff/greg.htm">http://www.mjmcdonaldfam.com/gregs_stuff/greg.htm</a><!-- m -->
Here is the 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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"right_dnagradient.gif" />
</div>
<div id="main">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"willispure_logo.gif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" onMouseOver="document.home.src='home_press.gif'" onMouseOut="document.home.src='http://www.webdeveloper.com/forum/archive/index.php/home.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"home.gif" border="0" id="home" alt="home" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"apoc_affairs.htm" onMouseOver="document.aa.src='aa_press.gif'" onMouseOut="document.aa.src='http://www.webdeveloper.com/forum/archive/index.php/aa.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"aa.gif" id="aa" alt="Apocalyptic Affairs" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"rectal_health.htm" onMouseOver="document.drh.src='drh_press.gif'" onMouseOut="document.drh.src='http://www.webdeveloper.com/forum/archive/index.php/drh.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"drh.gif" id="drh" alt="Rectal Health Department" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.htm" onMouseOver="document.faq.src='faq_press.gif'" onMouseOut="document.faq.src='http://www.webdeveloper.com/forum/archive/index.php/faq.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"faq.gif" id="faq" alt="FAQ" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"movies.htm" onMouseOver="document.myoovies.src='myoovies_press.gif'" onMouseOut="document.myoovies.src='http://www.webdeveloper.com/forum/archive/index.php/myoovies.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"myoovies.gif" id="myoovies" alt="Movie reviews" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"comments.htm" onMouseOver="document.comments.src='comments_press.gif'" onMouseOut="document.comments.src='http://www.webdeveloper.com/forum/archive/index.php/comments.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"comments.gif" id="comments" alt="Comments" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bio.htm" onMouseOver="document.bio.src='bio_press.gif'" onMouseOut="document.bio.src='http://www.webdeveloper.com/forum/archive/index.php/bio.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"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://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"*">Biography</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"*">E-mail</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"*">Copyright © Gregory J. Richter 2005</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"*">Site design by Joshua McDonald</a></li>
</ul>
</div>
</body>
</html>I suggest you use
position:absolute;top:0
in the div#header line in the css.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.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.There are 2 gradients over the flash image, but they are difficult to spot.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 imageHey thanks bathurst_guy, that was a great idea. It worked perfect. Check out the end result: <!-- m --><a class="postlink" href="http://mjmcdonaldfam.com/gregs_stuff/greg.htm">http://mjmcdonaldfam.com/gregs_stuff/greg.htm</a><!-- m -->
Here is the page: <!-- m --><a class="postlink" href="http://www.mjmcdonaldfam.com/gregs_stuff/greg.htm">http://www.mjmcdonaldfam.com/gregs_stuff/greg.htm</a><!-- m -->
Here is the 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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"right_dnagradient.gif" />
</div>
<div id="main">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"willispure_logo.gif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"home.htm" onMouseOver="document.home.src='home_press.gif'" onMouseOut="document.home.src='http://www.webdeveloper.com/forum/archive/index.php/home.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"home.gif" border="0" id="home" alt="home" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"apoc_affairs.htm" onMouseOver="document.aa.src='aa_press.gif'" onMouseOut="document.aa.src='http://www.webdeveloper.com/forum/archive/index.php/aa.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"aa.gif" id="aa" alt="Apocalyptic Affairs" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"rectal_health.htm" onMouseOver="document.drh.src='drh_press.gif'" onMouseOut="document.drh.src='http://www.webdeveloper.com/forum/archive/index.php/drh.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"drh.gif" id="drh" alt="Rectal Health Department" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"faq.htm" onMouseOver="document.faq.src='faq_press.gif'" onMouseOut="document.faq.src='http://www.webdeveloper.com/forum/archive/index.php/faq.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"faq.gif" id="faq" alt="FAQ" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"movies.htm" onMouseOver="document.myoovies.src='myoovies_press.gif'" onMouseOut="document.myoovies.src='http://www.webdeveloper.com/forum/archive/index.php/myoovies.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"myoovies.gif" id="myoovies" alt="Movie reviews" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"comments.htm" onMouseOver="document.comments.src='comments_press.gif'" onMouseOut="document.comments.src='http://www.webdeveloper.com/forum/archive/index.php/comments.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"comments.gif" id="comments" alt="Comments" /></a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"bio.htm" onMouseOver="document.bio.src='bio_press.gif'" onMouseOut="document.bio.src='http://www.webdeveloper.com/forum/archive/index.php/bio.gif'"><img src=http://www.webdeveloper.com/forum/archive/index.php/"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://www.webdeveloper.com/forum/archive/index.php/"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=http://www.webdeveloper.com/forum/archive/index.php/"*">Biography</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"*">E-mail</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"*">Copyright © Gregory J. Richter 2005</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"*">Site design by Joshua McDonald</a></li>
</ul>
</div>
</body>
</html>I suggest you use
position:absolute;top:0
in the div#header line in the css.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.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.There are 2 gradients over the flash image, but they are difficult to spot.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 imageHey thanks bathurst_guy, that was a great idea. It worked perfect. Check out the end result: <!-- m --><a class="postlink" href="http://mjmcdonaldfam.com/gregs_stuff/greg.htm">http://mjmcdonaldfam.com/gregs_stuff/greg.htm</a><!-- m -->