www.webdeveloper.com
Results 1 to 7 of 7

Thread: flash, gif, image align

  1. #1
    Join Date
    Feb 2005
    Location
    CT, USA
    Posts
    112

    aligning CSS flash, gif, image align

    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>
    Last edited by jmcdonald21; 06-23-2005 at 11:56 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    Craiova
    Posts
    154
    I suggest you use
    position:absolute;top:0
    in the div#header line in the css.

  3. #3
    Join Date
    Feb 2005
    Location
    CT, USA
    Posts
    112
    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.

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Mar 2005
    Location
    Craiova
    Posts
    154
    There are 2 gradients over the flash image, but they are difficult to spot.

  6. #6
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    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

  7. #7
    Join Date
    Feb 2005
    Location
    CT, USA
    Posts
    112
    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 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