tweak CSS to expand header

Question

for this site:

http://yoursdproperty.com/

do you see how there some extra white space all the way at the top?

how would i expand that image to get rid of that space?

The weird thing is that the flash file that runs the header images has already been changed by me to be the width of the page. Something in the CSS though makes it the old size of 940 wide.

please note that im only interested in making adjustments to the css or html, not flash or javascript

Answer 1

Add margin-top:-45px to class at-flashheader

Answer 2

Your flash movie needs to be 960 x 250 in order for it to be the full width and length of that space (it will be behind the broker's picture, right?).

Position it at left:0; and top:0; and you're straight.

Answer 3

Not an answer to your question, but why is this in Flash in the first place? As far as I can see, the only effect this has is that the header remains blank when you turn off JavaScript.

Answer 4

I'd say a few points:

1. Make it a javascript image fading gallery. It's less processor intensive and more likely to work on all platforms as well as being easier to get working.

2. This may be a bit much, but chaing the site width to 960px (see www.960.gs) will make it fit better within browser windows of people running at 1024x768 (still a common resolution) without horizontal scrollbars.

Answer 5

You need to change the width on the embed tag in the html

<embed height="250" width="1050" wmode="transparent" quality="high" name="topheader" id="topheader" src="/templates/pjo_joomlaforall/images/header.swf" type="application/x-shockwave-flash">

and then remove width:940 from div #at-flashheader

Answer 6

do it with actionscript in the flash, by using the stage width and stage height variables. if you don't have the flash source, wrap the swf into an new swf around so the new swf scales up the nested swf.

Answer 7

You would have to do what Emily says, to make the Flash fill the header area.

In your case, you would change the width of the object/embed tag in the FlashObject call:

var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", "1050", "250", "7");

But you would still have white space at the top, because the swf file (or rather the images in the swf file) has that built in, as far as I can tell. You would have to edit the Flash to get rid of the white space.

Answer 8

The Question (is this correct?):

1. How do I make the Flash movie extend to the full width of the page (instead of 940px)?
2. How do I cause the Flash movie to reside at the top of its parent element - and thereby at the head of the page?

The above should be done without modifying Javascript or Flash.

---

The Answer:

Part 1:
It seems that you are using FlashObject in order to embed the flash.
FlashObject accepts several arguments, the 3rd and 4th of which represent the width and height attributes of the element.

As long as those attributes are set they will override ANY other CSS classes you apply.
To change the width to 100%, you must change that 940 to 1040, or possibly to '100%'.

 <script type="text/javascript">
    var fo = new FlashObject("/templates/pjo_joomlaforall/images/header.swf", "topheader", '100%', 250, 7);
    fo.addParam("wmode", "transparent");
    fo.write("flashcontent");
 </script>

While this may count as using Javascript, it is the only solution that could work.

Part 2:
The actual swf you are dealing with is 240px wide and 200px tall.
The part of the flash file which is 'image' is only 50px tall, and is in the vertical center of the swf.

There is no way to use CSS to enlarge that 50px center within the SWF.
What you can do is use CSS enlarge the swf so that the height of the center matches your needs, and then some more CSS to crop off the top and bottom whitespace.

Place the embed tag inside an element whose overflow is hidden, and apply a negative top margin (or negative position) to the embed equal to the whitespace you wish to crop.

<style type="text/css"> 
#at-flashheader{ 
    overflow:hidden
}
#flashcontent{
    margin-top:-40px;
}
</style>
<div id="at-flashheader"><div id="flashcontent"></div></div>

'Course, this won't really work if the width of the swf is a percentage, as the height of the whitespace wont be constant. If you set the width to a constant such as 1040px, you can set the negative top margin accordingly.

---

As an aside:

You really should be doing this with Mootools or JQuery instead of Flash.
Case in point - I have Flashblock on my browser, and had to jump through hoops just to see what you were talking about. Had I been on my iPhone, jumping through hoops wouldn't have helped.