PDA

View Full Version : Adding a Flash (.swf) as a header/nav with CSS?


Jittor
10-18-2006, 04:21 PM
I have developed a top header/nav in flash and I wanted to see if I could build a site using CSS and have that at the top as the nav/header. The thing is I am not sure how to add it. I tried it as a banner and it wouldn't show. What is the best way to do this?

domedia
10-19-2006, 12:58 AM
There should be a insert->flash way in your toolbar.

chriskq
10-19-2006, 01:02 AM
using the object embed tag doesnt get around the the swf problem in Internet explorer.... (you kno how in IE you have to click on the flash to activate it/bring focus to it)

you can use a script to write the flash into a div. let me kno if u want me to help you.

domedia
10-19-2006, 05:07 AM
using the object embed tag doesnt get around the the swf problem in Internet explorer
Sure it does, all you need to do is make sure your Dreamweaver copy is up to date ;)
The download has been available for a while here:
http://www.adobe.com/support/dreamweaver/downloads_updaters.html

It would be nice if Adobe sent an email to everyone when updates like these are available..

Jittor
10-19-2006, 05:03 PM
Thanks Dom! I will download the update tonight. I went ahead and tried the insert flash object in DW. I put it in my <div id="header"> tag with the height and width and matched the #wrapper width to that of my header. So far so good. Next I need to add some images - Any suggestion on were to start? Remember, I am new at this so start off slow if you will. - Thanks!

domedia
10-19-2006, 05:21 PM
Insert->Image

Actually Jittor, you shold look and see if you can find some basic tutorials or look in the built in help files. They will guide you through this very nicely :)

Jittor
10-19-2006, 05:28 PM
Insert->Image

LOL - Just can't get a break can I? I know how to do that for any regular html site but I didn't know if I needed to do anything different as far as position and other things. I always forget about the help file, I might give them a try. Thanks.

domedia
10-19-2006, 06:14 PM
Just make sure you've set your cursor in the spot in the design view where you want the image to be, and then insert it as normal.

Jittor
10-19-2006, 06:46 PM
I did just that and it worked just like normal. The problem is when I try to control it using CSS, that's when things start screwing up. I tried to find a basic tutorial on adding/controlling images using CSS but they are all about background images which is the easiest to learn.

This is what I am trying to do.

#image_right_float{
float:right;
padding:10px;
border:2px solid #fff;
}

then I add the <div id="image_right_float> to the image tag:

<div id="image_right_float">images/valid-xhtml10.png</div>

The padding and the float work the border extends all the way the length of the wrapper. Am I doing something wrong?

Jittor
10-19-2006, 09:20 PM
figured it out.

I needed to use a class="" within the tag. Not a <div id="">

domedia
10-19-2006, 11:28 PM
You can do both. :-)
If you choose to wrap a div around the img. You need to set a width in the DIV (don't have to, but you didn't like it stretching all the way.). A DIV is a block element, and will take all available width, unless you tell it otherwise.

If you put the CSS directly on the image tag, that's fine too. You should probably still use an ID (unless you have several images going to be styled exactly the same way.)

Jittor
10-20-2006, 04:01 PM
I couldn't get it to work when I had it in the <div> tags so I used

.leftfloat{
float:left;
border:2px solid #fff;
margin:4px;
}

and

images/test.gif

and it worked. But your saying that if I used:

#image_right_float{
float:right;
width:?px;
padding:10px;
border:2px solid #fff;
}

and had the image placed in the <div> tags by adding a defined width the border would then wrap around that width?

domedia
10-20-2006, 06:12 PM
Yes it would work.
But I like your approach better, you eliminate code thats not needed and apply the CSS directly to the IMG. :)