CSS - Getting Lost, Advice

Please refer to the web site: h*t*t*p://alturl.com/yhba

Please look at the web site mentioned above and pay close attention to the "|" dividing the menu links (About, Events, Teams, Shop).

Problem: This "|" should not appear at the end of the menu (after the "Shop" link). However it seems that it is showing up in the Windows Firefox & Safari but not in Firefox when being run under the Apple operating system.

Please see if it is visible for you and if so, pleassee suggest how I may go about fixing the issue.

HTML:
Code:

<div id="navigation">
<a href="/about" class="navigation-about">About</a>
<a href="/events" class="navigation-events">Events</a>
<a href="/teams" class="navigation-teams">Teams</a>
<a href="/shop" class="navigation-shop last">Shop</a>
</div>

CSS:
Code:

#navigation {
    background:url(../_images/menu_bg.png) repeat-x;
	height:68px;
	width:100%;
	padding:10px 0 10px 0;
	margin:0 0 20px 0;
	}
/*#navigation a { color:#666; padding: 0 10px 0 10px; text-decoration:none; }*/


.navigation-about, .navigation-events, .navigation-teams, .navigation-shop {
    float: left;
    display: block;
    padding: 0 0 0 12px;
    font-size: 105%;
}

#navigation a.last{
background-image: url();
}

#navigation-logo {
	display:block;
	float:left;
	margin:3px 0 0 10px;
	padding-right:25px;
	}

#navigation a, #navigation a:visited {
	display:block;
	text-decoration:none;
	color:#666;
	padding:0 10px 0 10px; 
	background-image:url(../_images/nav_divider.png);
	background-repeat:no-repeat;
	background-position:right;
	font-weight:bold;
	}

Thank you!

I moved internal css to an external file and then linked the page to that file and lost my hand cursor on links. How do i get it back. Right now the arrow cursor remains when links are rolled over. Can be viewed at.

kopertone.com/newsite/index1.html

Also, in fire fox, I want dotted lines under my text links when rolled over, but not image links; how do I remove the dotted lines under my image links? Thanks!

APPEARS TO BE HASLAYOUT ISSUE IMAGE WITHIN ANCHOR NOT CLICKABLE.

Hi Guys looking for a spot of help please.

IE is driving me up the wall.

Ive wrote a jQuery script for scrolling a list horizontally upon user clicking left or right. The list has anchors within it which are blocks which I want to be clickable with an image inside (fine in FF etc) but in IE the image within the anchor loses its ability to be clicked the rest if fine apart from I manually have to set the cursor to pointer to show the user its clickable still.

Just when they click the item image within the anchor it does nothing.

Here is a slim version of the HTML :

Code:

<ul>
<li><a href="/page1.html"><span class="box_wrap"><span class="img"><img src="1.jpg" border="0" height="75" /></span><span>Item 1</span></span></a></li>
		<li><a href="/page2.html"><span class="box_wrap"><span class="img"><img src="2.jpg" border="0" height="75" /></span><span>Item 2</span></span></a></li>
		<li><a href="/page3.html"><span class="box_wrap"><span class="img"><img src="3.jpg" border="0" height="75" /></span><span>Item 3</span></span></a></li>
		<li><a href="/page4.html"><span class="box_wrap"><span class="img"><img src="4.jpg" border="0" height="75" /></span><span>Item 4</span></span></a></li>
		<li><a href="/page5.html"><span class="box_wrap"><span class="img"><img src="5.jpg" border="0" height="75" /></span><span>Item 5</span></span></a></li>
		<li><a href="/page6.html"><span class="box_wrap"><span class="img"><img src="6.jpg" border="0" height="75" /></span><span>Item 6</span></span></a></li>
		<li><a href="/page7.html"><span class="box_wrap"><span class="img"><img src="7.jpg" border="0" height="75" /></span><span>Item 7</span></span></a></li>
		<li><a href="/page8.html"><span class="box_wrap"><span class="img"><img src="8.jpg" border="0" height="75" /></span><span>Item 8</span></span></a></li>
		<li><a href="/page9.html"><span class="box_wrap"><span class="img"><img src="9.jpg" border="0" height="75" /></span><span>Item 9</span></span></a></li>
		<li><a href="/page10.html"><span class="box_wrap"><span class="img"><img src="10.jpg" border="0" height="75" /></span><span>Item 10</span></span></a></li>
		<li><a href="/page11.html"><span class="box_wrap"><span class="img"><img src="11.jpg" border="0" height="75" /></span><span>Item 11</span></span></a></li>
		<li><a href="/page12.html"><span class="box_wrap"><span class="img"><img src="12.jpg" border="0" height="75" /></span><span>Item 12</span></span></a></li>
		<li><a href="/page13.html"><span class="box_wrap"><span class="img"><img src="13.jpg" border="0" height="75" /></span><span>Item 13</span></span></a></li>
		<li><a href="/page14.html"><span class="box_wrap"><span class="img"><img src="14.jpg" border="0" height="75" /></span><span>Item 14</span></span></a></li>
		                  
        </ul>  

CSS Code:

Code:

ul {
  width: 9999px;
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
  top: 0;
}

ul li {

  	display:block;
	list-style:none; 
	margin:0; 
	padding:0; 
	border:0; 
	text-align:center;
	float:left;
	width:118px;
	height:133px;  
}

ul li a{
	display:block;
	border-right:1px solid #e2f5fe;
	outline:none;
	text-decoration:none;
	background:#FFF;
	padding:3px 2px 3px 2px;
	line-height:15px;
}

ul li a:hover{
	background:#e2f5fe;
	color:#fe0084;
}

ul li span.box_wrap { 
	display:block;
	background:#FFF;
	height:127px;
}

ul li span.box_wrap span{
	padding:0px 3px;
	font-size:12px;
} 

ul li span.img { 
	padding:2px 0px 2px 0px;
	display:block;
}

Just when you try to click any of the images within the boxes its not clickable. Really stumped.

Any help or pointers would be greatly appreciated. Thanks in advance!

I want to start using em to specify widths and heights, specifically because of the fact that it correlates with the font size. However, the problem I'm having is that I have no idea what the conversion between % for width and em would be.

I'm not worried about height in this fashion, simply because vertical scrolling isn't ugly, but if I specify too high of an em for width, that makes a layout span the entire page for my browser, someone else might not have the same effect, and thus scroll horizontally.

Should I just stick to use em for height and % for width? I really want to use em though...need advice on this.

Hi Guys,

I've had a hunt around the forum but haven't yet found anything too specific, so here goes...

Basically, I have a design all done in photoshop and ready to be physically created in CSS, no problem there, I can do that.

However, I really need to be able to implement some content management into this site and am a little stuck on the best way to go.

I've been on google and looked at solutions, downloaded Joomla so far, but this looks like it could be very difficult to get my design into it, so to speak and I'm not so hot on PHP.

The templates in Joomla seem quite complex and look nothing even close in layout to my design!

Does anyone have any advice on a good CSS based CMS (ideally free!) that I can easily integrate my own design to?

If anyone has any experience or advice on doing this, it would be much appreciated. I don't need to be able to do anything massively complicated, just apply my own design, with some content pages, news etc.

Any advice/suggestions, very much appreciated!

Thanks

Jon

okay i want to make myself a website and to make it decent i seem to need to know HTML, PHP, CSS etc etc :s it all seems really hard i know quite a bit of macromedia flash and i know quite a bit of html but i am all new to CSS and PHP. CSS from what i can gather is what i need to know and i don't have a clue about it can somebody give me a link to an easy tutorial for CSS? or if anyone knows where i can start? most tutorials i just end up giving up on because i just can't be bothered reading any further thanks fir reading this i just need to know the basics so i can have a play around with and teach myself.

Daz

I had posted in another thread about this but it's been awhile and I am not sure if that thread is still "alive" so to speak. Here is what I am after -

www.tmhdesign.com/buzza.jpg

Here are my attempts:

www.tmhdesign2.com

www.tmhdesign2.com/default2.asp

www.tmhdesign2.com/default3.asp

I have come close in IE but in Firefox it bombs. I can't fathom how that bottom background can be positioned so the text in the navigation and content divs can sit on top of it.

Would you all please peek at this layout, www.tmhdesign.com/buzza.jpg and give me some advice on the structure you'd use. I see a two column layout with a footer and header. I did not lay this out but rather it was given to me by a clients' graphic artist. I am curious to know if you think it will work. I am a bit challenged with the bottom swoosh that is in both the left hand column and the right main body. The designer has main body text going into what I would think would be the footer area?

Hello,

Here's the site, it's being built on a CMS called Sitestaker.
http://www.mera.sitestacker.com

I can't for the life of me fix all the messed up positioning. here is my CSS. I used another CSS file from a previous site, so there are duplicates and who knows what else I am missing so I can easily lay this thing out. Where can get some CSS templates that I could use to start out a new site. the cms is using Cake PHP if that helps any. I am not a programmer and it is driving me nuts attempting to do the job of one. thanks for your help. I have managed with my other sites, but I can't fix this one. www.theinlan.com
Code:

body {
	
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #666;
	background-color:#FF9933;
	margin: 10 10 10 10;
	
}

#header {
	background-color:#FFFFFF;
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
	height: 133px;
	
	

	
}
#header_right{
		
	
}



#search {
	
	width: 150px;
	margin-left: 10px;
	float: right;
	
	
}

#header_container {
	background-color:#cc6600;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	
}

#header_wrapper {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 133px;
	background-color: #cc6600;
	
	/*/#cc6600/*/
		
}


#menu_wrapper {
	width: 900px;
	/*/background:url(images/mera_slice_09.jpg) repeat-x;/*/
	
	margin-right: auto;
	margin-left: auto;
	
}

#menu {
	background-color:#333333;
	width: 900px;
	padding: 10px 0px 0px 0px;
	font-size: 14px;
	
	font-weight: bold;
	
	
}

#menu .item {
	
	float:left;
	width: 120px;
	margin-right: auto;
	margin-left: auto;
	height: 30px;
	padding-top: 13px;
	text-align:center;
	
	
}


#menu a {
	color: #666666;
	text-decoration:none;
	
}

#menu a:hover {
	color: #CCC;
	
}


#menu .main_menu {
	float:left;
}

#breadcrumbs {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-family:Verdana, Geneva, sans-serif;
	font-size: 9px;
	color: #666;
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
	
	
}


/*/#r1c1 {
	width: 100%;
	
	height: 38px;
}/*/

#r1c1 {
	background-color:#CC9966;
	
	/*/Dan's New Stuff/*/
	
	width: 180px;
	float:left;
	
	/*/ width: 800px;/*/
	/*/padding: 40px 0px 0px 20px;/*/
	font-size: 14px;
	margin:30px 10px 10px 10px;
	padding: 10px;
	/*/font-weight: bold;/*/
	
	
	
} 

#r1c1 .item {  /*/ controls positioning of menu items & text/*/
	
	width: 175px;
	height: 30px;
	
	text-align:middle;
	background:url(/data/sites/34/images/merabutton.png);
	background-repeat:no-repeat;
	padding:5px 0px 0px 0px; /*/controls positioning/*/
	
	
}

#r1c1 a { /*/ this is the menu font styling/*/
	color: #333333;
	text-decoration:none;
	padding:5px 0px 0px 10px;
	
}

#r1c1 a:hover {  /*/ this is the menu button hover color/*/
	color: #999999;
	
}


#r1c1 .main_menu {
	
}


#r1c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 640px;
}

#r2c2 {
	padding: 15px 0px 15px 15px;
	margin-left: auto;
	margin-right:  auto;
	width: 700px;
	float: left;
}

#r3c2 {
	margin-left: auto;
	margin-right:  auto;
	width: 750px;
}

#r2 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r4 {
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
}

#r2c2 .title {
	
	font-size: 24px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
	line-height: 40px;
	
}
#content_area {
	background-color: #e6ebba;
	width: 1000px;
	margin-left: auto;
	margin-right:  auto;
	margin-bottom: 0px;
	
	
}
#content_bg { /*/ white content area with dropshadow edges/*/
	width: 1275px;
	
	margin-left: auto;
	margin-right:  auto;
	background: url(images/me) repeat-y ;
	/*/height: 1000px;/*/
/*/padding-left: 40px;
	padding-right: 45px;
	}
	/*/

#mainpositions{    /*/ look at tables created in index to see how it was done
						tables ,once formatted work the best to hold together 
						two column layout accross browsers./*/
	width:900px;
	margin-left: auto;
	margin-right:  auto;
	
	}

#footer_wrapper {
	/*/
	background:url(images/mera_slice_02.jpg) repeat-y;
	width: 100%;
	margin-top: 0px;
	position: bottom;
	/*/
}

#footer {
	background:url(/data/sites/34/images/footer.png) repeat-x;
	/*/width: 100%;/*/
	margin-left:auto;
	margin-right:auto;
/*/	color: #FFF9933; 
	text-align:center;
	padding-top: 30px;/*/
	height:369px;
	
}

#r3c1 {
	
	padding: 10px 10px 10px 10px;	
	
}

#r2 {
	
	
}

.cells {
	padding: 10px 10px 10px 10px;	
	vertical-align: top;
	text-align: left;
}


#menu .style .menu .submenu_item {

	background: url(images/dropdown.png) repeat-x;

	height:27px;
	text-align: left;
	font-size: 12px;

	padding-left:10px;
	padding-right:14px;
	padding-top: 10px;
	width: 900px;
	cursor: pointer;


}

#menu .style .menu .submenu_item_children {

	
}

#menu .style .menu .submenu_item:hover{

	color: #ccc;

}

#menu .style .menu .submenu_item:hover > div > a{

	color: #CCC;

}

#menu .style .menu .submenu_item a {

	text-decoration:none;

	color:#6699FF;

}

.submenu_item, .submenu_separator {

	display:none;

	position:absolute;

}

HERE IS THE INDEX FILE

PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{PAGE_TITLE}}</title>
<base href="{{BASEHREF}}" />
<link href="{{CSS_HREF}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="{{JS_SRC}}" ></script>
<style type="text/css">
<!--
body {
    margin-left: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
}
-->
</style>
<meta name="verify-v1" content="mQhyWuqXn58ls4L3sIdz1oujvxtwMSi8YIWGW8HPAGg=" />
{{HEAD}}
</head>
<body>

<div id="header_wrapper">
<div id="header_container">

    <div id="header" tpl_position="header">{{HEADER}}</div>
    <div id="header_right" tpl_position="header_right">{{HEADER_RIGHT}}</div>
    <div id="search" tpl_position="search">{{SEARCH}}</div>
</div>
</div>
<div id="menu_wrapper">
    <div id="menu" tpl_position="menu">{{MENU}}</div>
</div>

<div id="content_area">

<table id="content_bg" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>


<div id="breadcrumbs" tpl_position="breadcrumbs">{{BREADCRUMBS}}</div>


<div id="r1c1" tpl_position="r1c1">{{R1C1}}</div>


<div id="r2c2" tpl_position="r2c2">{{R2C2}}</div>
 
<div id="r3c2" tpl_position="r3c2">{{R3C2}}</div>
  </td></tr>
</table>
</div>

<div id="footer_wrapper">
<div id="footer" tpl_position="footer">{{FOOTER}}</div>
</div>


</body>
</html> 

Hello,

I am working on a web site with a two column layout, "Content" on the left and "Sidebar" on the right.

Sidebar
1) Sidebar is divided into sections (div). Each section has header.

Content
Content can display the following data (each is a different page):

2) In HomePage.html a list of blog articles is displayed. Each blog article has a title.

3) In ShowArticle.html a specific article is displayed (Title, Body, Tags).

4) In Documents.html a list of documents is displayed but in this case the page
has a title and a subtitle. For example:

Documents
here you can find all the documents you need.

5) In Contact.html a title with subtitle is displayed just as in (4).
After the title and subtitle there is only paragraphs with the contacts.

So basically that's it ... I am trying to figure the correct way to use <h1>, <h2>, etc.

The text font, weight and color is always the same ... what changes is the size.

For example, if in HomePage the Post Header could be <h1> because there is no page title, in Documents there is a page title and a subtitle (should be this a paragraph? it's more like a description phrase then a section separator). So in Documents each Document could have <h3> ...

And if there is a Page Title (h1) then should side bar have <h2>? I suppose it is more correct to be h1.Sidebar.

And in ShowArticle I am displaying one article. Should I use the <h1> in the title? Then it would be the same tag then in Sidebar section ...

I have been looking in a few web sites and blogs and they differ ...

Anyway, I am just trying to make this right ...

Any help is welcome.

Thanks,
Miguel

Hi all, I have modified a wordpress theme for my website and its nearly perfect except for an issue where my photo is being cutoff and I have had a look but it appears to be beyond my skill level and is making me pull my hair out.

Would REALLY appreciate if anyone can solve this one for me!

hmmm I cannot post the url yet as i am new

dubdubdub.lightwork.co.nz/?p=1 is the url please replace dubdubdub with www thanks

that is the url and its the second image down, the larger image. It works fine in firefox and ie7, but in ie6 (which it needs to work in it is being cutoff as you can see.

Any help would REALLY be appreciated. happy to do something in photoshop or whatever in return

Mark

Hello,

I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment.

I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below.

Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text.

Any help / links in the right direction would be really appreciated.

Code for the text:
Code:

p.mainbody
{ 
z-index: 1000; 
vertical-align:top; 
padding-left: 200px; 
padding-right: 250px; 
text-align:left;

code for the menu:
Code:

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ 
ul.MenuBarVertical 
{ 
vertical-align:top; 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
cursor: default; 
width: 10em; 
/*height:10em;*/ 
} 
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ 
ul.MenuBarActive 
{ z-index: 1000; } 
/* Menu item containers, position children relative to this container and are same fixed width as parent */ 
ul.MenuBarVertical li 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: relative; 
text-align: left; 
cursor: pointer; 
width: 10em; 
} 
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ 
ul.MenuBarVertical ul 
{ 
margin: -5% 0 0 95%; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: absolute; 
z-index: 1020; 
cursor: default; 
width: 8.2em; 
left: -1000em; 
top: 0; 
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ 
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } 
/* Menu item containers are same fixed width as parent */ 
ul.MenuBarVertical ul li { width: 8.sem; } 
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ 
/* Outermost menu container has borders on all sides */ 
ul.MenuBarVertical { border: 1px solid #CCC; } 
/* Submenu containers have borders on all sides */ 
ul.MenuBarVertical ul { border: 1px solid #CCC; } 
/* Menu items are a light gray block with padding and no text decoration */ 
ul.MenuBarVertical a 
{ 
display: block; 
cursor: pointer; 
background-color: #EEE; 
padding: 0.5em 0.75em; 
color: #333; 
text-decoration: none; 
} 
/* Menu items that have mouse over or focus have a blue background and white text */ 
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus 
{ 
background-color: #33C; 
color: #FFF; 
} 
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible 
{ 
background-color: #33C; 
color: #FFF; 
} 
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenu 
{ 
background-image: url(SpryMenuBarRight.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenuHover 
{ 
background-image: url(SpryMenuBarRightHover.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ 
ul.MenuBarVertical iframe 
{ 
position: absolute; 
z-index: 1010; 
filter:alpha(opacity:0.1); 
} 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ 
@media screen, projection 
{ 
ul.MenuBarVertical li.MenuBarItemIE 
{ 
display: inline; 
float: left; 
background: #FFF; 
} 
}

Many Thanks

Hello,

I am creating a form that includes a few JQuery scripts and TinyMCE Editor:
http://www.27lamps.com/Beta/Form/Form.html

I am having a few problems with my CSS:

1. Restyling the Select

(a) When using IE the Drop Down List is on the right instead of on the bottom;
(b) The current item in the list should have a different background color;

(Please check the select on the bottom of the page to check these 2 items working fine.
In this case I used a different class)

2. Error messages

Please, submit the form. After the Name input you will get a error message.
How can I make this message to not expand and still have the padding?
And also having the text aligned left.

One problem I am having with my form is every time I use a list inside my form somethings get "broken".
This is because the form is using a list.

What should be the best way to counteract the styles of the form list into a child list?

Any suggestion to improve my form CSS would be great.

Thanks,
Miguel

http://www.beckin.com
http://www.bestdropshipper.net

I just recently updated my firefox to the most available version. This firefox version absolutely sux. I don't know why all these browsers have to keep causing trouble for designers.

You will notice that my css style for Beckin Designs no longer works.

Code:

<style type="text/css">
@font-face {
	font-family: English;
    font-weight: normal;
	src: url(fonts/English_.ttf);
}
</style>

If you view this site in other browsers or the firefox version previous to the latest release you will notice it displays fine. However, not in the new firefox.

Next, the best dropshipper menu doesn't display correctly either.

How can I go about fixing these issues? Do I need to do some time of if statement. Please let me know exactly how to address these issues.

Thanks!!

Hi all, just begun on the path of learning CSS and a little advice needed. I am experimenting with an image and thought it would be easy to animate my banner pic with a flash animation, but its not.

Basically I have a transparent GIF image rather like a picture frame with irregular inside edges. I want the flash animation to show in the centre, ie so that the gif image overlays it and parts are hidden by the jagged edges of the gif.

I thought this would be simple to achieve with what I have picked up so far but not so!

Could someone let me know how to achieve this.

EDIT- sorry should have made it clearer, this is two images, one over the other.