CSS Q
- Started
- Last post
- 7 Responses
- st33d
I can't find a CSS tutorial or resource or anything that will tell me how to weld two images either side of my Flash. The closest I've got is this:
http://www.robotacid.com/misc/fo…
I need the two pngs bolted either side, kinda like curtains.
I've tried numerous combinations of relative positioning and the fuckers aren't playing ball.
Can anyone help please?
- myobie0
ok, this will work and should be fairly easy
x = the width of your flash movie
y = the width of *one* of your png bordersi am assuming both of your png's are the same width
souround the flash movie with two divs, give the outer most one id="wrapper" and the inner one id="wrapper2"
in css:
#wrapper {
padding-left: y;
background: url(your_left_bg.png);
}
#wrapper2 {
padding-right: y;
background: url(your_right_bg.png);
}make sure there is no other padding or margin
i would never do it this way, but it's the easiest way to get the images out of the way and into the bg of a div (which is preferable)...
you are still going to have to work out the positiong of the bg
either lookup the css attribute or download CSSEdit if you have a mac
hope that helps some
- kodap0
wrap the object inside a div, after the left div that contains the left image, before the right div that contains the right image...
then:
div_left, div_object, div_right{
display: inline;
float: left;
margin: 0;
padding:0;
}and I think you won't really need to specify margins or paddings for the divs..
simple
- kodap0
make a div and specify the total width of your images+ the swf object
instead of having two images, make just one, that will fill the whole background,
then:
#wrapper{
width:900px;
background:url(whole_back.jpg) ;
text-align:center;
}or what myobie said ...
- kodap0
make a div and specify the total width of your images+ the swf object
---
[the total width of this wrapper]=
[left side]+ [movie]+[right side]
- st33d0
Thanks fo teh help.
I managed to float the lot in a row (uploaded to previous link) but I think I was trying to get the image to be able to disappear off the left side on re-size.
Impossible me thinks. But I should be able to get a top left outwards design working with floats and use less images.
Thankee.
- myobie0
if you want it to disappear on resize, you can make it the background of the body
- st33d0
Nah, I mean as in the flash always in the center of the browser and the image being able to slide under the left hand side of the browser.
I've never seen it done so either it's inadvisable or impossible. Think about it; when was the last time you saw any content slide off left without a scroll bar appearing? I aint gonna start dicking around with my user's scroll bar.
Cheers for the help though. Much appreciated.