Here is a mockup of how I would like the movie to look and function using a 728x270 movie size.
http://www.cincinnati.com/spec/cinSceneMock.html
The 525x180 black area at the top is black and blank whenever a horizontal photo is displayed which is most of the time. The Photo Gallery is a popup and the actual size is
At the bottom is a standard 728x90 adspace that is served via an adserving system called OAS. Currently we use javascript to display ads that expand past the boundaries of the adspace. This method allows the expandable part of the ad to overlap an existing area or content such as text.
Here is a mockup of how that system works with 2 separate SWF files:
(Resize your browser to simulate the popup size)
http://www.cincinnati.com/spec/cinproposal1.html
While this is an exceptable solution, I prefer the version at top because the bottom of the phone which is offstage in the 525x180 subSWF is visible on top of the 728x90 area at the bottom of the SWF. I also prefer it because on rollover the subSWF is launched and does not close on rolloff. I would of course put a close button.
So my question is can I achieve what I want using CSS or actionscript?(show the offstage portion of the phone object) If CSS I would like a vertical image to appear over the top movie.
I am pasting the entire CSS for the photogallery below and a mockup of the Photo Gallery as a GIF:
http://www.cincinnati.com/spec/cinsceneMock.gif
body {
background-color: #000;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-image: url(/graphics/gallery/logo_cin_gallery.gif);
background-position: top right;
background-repeat: no-repeat;
}
/* defualt link color /
a:link, a:active, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/ end defualt link color /
/ gallery */
#container {
width: 750px;
height: 540px;
}
#container_ad {
width: 100%;
height: 115px;
padding-top: 12px;
background-color: #000;
border-top: 1px solid #ccc;
text-align: center;
}
#lh-col {
width: 530px;
height: 535px;
float: left;
margin: 0;
text-align: center;
}
#lh-col-header {
background-image: url(/graphics/gallery/bg_line.gif);
background-position: left;
background-repeat: no-repeat;
width: 510px;
text-align: left;
padding: 5px;
height: 25px;
}
#photo {
}
#rh-col {
margin-left: 535px;
padding-top: 225px;
width: 195px;
padding-right: 10px;
}
#rh-col-top {
height: 180px;
}
.photoborder {
margin: 0;
padding: 5px;
border: 1px solid #666;
background-color: #fff;
}
#nav_table {
margin-bottom: 8px;
}
h1, h2, h3, h4, h5 {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
color: #fff;
}
p {
font-family: arial,helvetica,verdana,sans-serif;
font-size: 12px;
color: #fff;
}
.date {
font-family: arial,helvetica,verdana,sans-serif;
font-size: 12px;
color: #fff;
}
#photobyline {
font-family: arial,helvetica,verdana,sans-serif;
font-size: 10px;
color: #eee;
}
.caption {
font-family: arial,helvetica,verdana,sans-serif;
font-size: 11px;
color: #fff;
}
#nav {
color: #fff;
text-align: center;
width: 200px;
}
#nav_middle {
background-image:url(/graphics/gallery/gallery_button_bg.gif);
width: 90px;
font-family: arial,helvetica,verdana,sans-serif;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #333;
}
#headleadbar {
font-size: 16px;
font-weight: bold;
}
#side_column {
font-size: 12px;
text-align: left;
}
#side_column ul {
padding: 0 0 0 .2em;
margin: 4px 0 .6em 1.2em;
list-style-type: none;
}
#side_column li {
background-image: url(http://cinweekly.com/graphics/bullet.gif);
background-repeat: no-repeat;
background-position: 0 .3em;
padding-left: 1.3em;
padding-bottom: .4em;
color: #eee;
}
#side_column li a:link, #side_column li a:active, #side_column li a:visited {
color: #eee;
text-decoration: none;
}
#side_column li a:hover {
color: #fff;
text-decoration: underline;
}
/* delete soon */
#latestgalleries {
font-size: 12px;
text-align: left;
}
#latestgalleries h3 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
#latestgalleries ul {
padding: 0 0 0 .2em;
margin: 0 0 .6em 0;
list-style-type: none;
}
#latestgalleries li {
background-image: url(/graphics/gallery/cingallerybullet.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .7em;
padding-bottom: .3em;
}
#latestgalleries li a:link, #latestgalleries li a:active, #latestgalleries li a:visited {
color: #eee;
text-decoration: none;
}
#latestgalleries li a:hover {
color: #fff;
text-decoration: underline;
}
/* end delete soon /
/ end gallery */
