PDA

View Full Version : Centering flash and forms relative to an already centered png


seektruth
05-26-2009, 11:19 PM
Hi everyone,

I'm hoping one of or many of you can help me. i've been working on this project for 2 days now never having used html or what do you call it css in my life and i could really do with a bit of imparted wisdom.

i'm trying to get this website together on a shoe string and ive very nearly done it all but one thing. the website is basicly a background a png with hotspots as the main body and overlaid flash slideshows and forms.

Now the png which is the main body is centered over the background and i can add the flash and forms in the centre of the screen no problem and it works fine accross all browsers. the problem comes when you start reducing the size of the window once the window i reduced lower than the size of the main png body the flash slideshows and forms start to move from the centre to the left as the window decreases.

im aware that no one is really going to want to look at this thing when its the size of a postage stamp but i still feel that the job wont be properly done untill the flash slideshows and forms remain centered relative to the png body of the website.

if you go to http://jdmdesigns.webs.com/Posters-and-Wallpapers.html and start to reduce the size of your browser down you will see what i mean.

Id be forever in your debt if one of you could sugest how i can fix this as it is doing my head right in.

Peace

edbr
05-27-2009, 02:32 AM
not really if you make a page of images thats what you get. you cant effectively scale them.
i can only advise you look at dw tuts and start to use standard html to make a layout

seektruth
05-27-2009, 07:38 AM
This really doesn't help me much Iím sorry to say, how can I not make a website of images when thatís what I have, I realise your a moderator of some description here but to be frank your glib response disappoints me greatly. Firstly I donít think you've fully understood what Iím trying to achieve, did you even look at the web page concerned?, secondly if I was to make a web page from standard HTML what would that entail did I mention Iíd never used html and css before Monday morning I have seen websites of a similar layout to what Iím trying to achieve? Thirdly since when is a form an image isnít it written in something called PHP is that an image as well? And finally if a flash object is put on a page using a URL is that also an image or is it an I frame or an imbedded item coz Iím pretty sure itís not an image?

Now generally Iím a pretty resourceful guy and donít need a lot of help with most things but this in new to me and to be fair seems a little complex. To just arbitrarily assume that Iíve not looked at any tutorials or done any research whatsoever into this issue is frankly a little insulting. I came to you for help and got totaly dismissed is that what this website is about?.

If there is anyone out there that is willing to help me out or at least have a look into this please could you take the time to help a man out.

Peace

edbr
05-27-2009, 07:52 AM
im not dismissing you , but if you think putting web pages into a page leads me to think you haven't followed any tutorials is not arbitary. if giving advise is insulting to you , you are a delicate flower arent you.

look into using relative positioning, and you should optimise your images its very slow to load

seektruth
05-27-2009, 08:13 AM
Thank you that was all I needed a gentle push in the right direction, "relative positioning" thatís great. I understand that at the moment it is a collection of slideshows from photo bucket and a form from jot forms; this is a mock up, it's what Iím using as a base to start from. Yes I do want to write my own code in the long run but we've all got to start somewhere haven't we? I work visually and find it hard translating things into coordinates in my mind. I did do something to optimise the images when I uploaded them I did notice that it is a very slow website but assumed that because .webs is only giving me the bare minimum of bandwidth what with me paying no money what-so-ever to have this thing hosted.

Again with the insults though is it one of those things where you've been doing this for so long it seems stupid when people ask you something that you feel to be easy if so you know just try and stop and think not everyoneís been there and done it like you? and what if I am a delicate flower who cares doesnít it take all sorts to make a world its like your putting some sort of negative connotation on having emotions whatís that about?

Corrosive
05-27-2009, 08:16 AM
You could look at using a relatively positioned 'wrapper' with no background. Make it the width of your box image and then position your div with the flash relative to the wrapper rather than the edge of the screen.

Have a look at this tutorial...

http://www.dreamweaverclub.com/css-center-content.php

Just on the other note; Ed has given you good advice. The approach you are taking will be full of problems and you'd be better off learning some more and opting for a more conventional way of laying your page out. Two days is not really enough time to learn how to build a website IMO. Although, you have done much better than I did in my first two days of learning!

Corrosive
05-27-2009, 08:20 AM
Again with the insults though is it one of those things where you've been doing this for so long it seems stupid when people ask you something that you feel to be easy if so you know just try and stop and think not everyoneís been there and done it like you? and what if I am a delicate flower who cares doesnít it take all sorts to make a world its like your putting some sort of negative connotation on having emotions whatís that about?

Ed didn't insult you in his first post. He told you the truth. You jumped down his throat! You will hopefully see that we love to help people of all levels and abilities from noobs to experts on this forum.

seektruth
05-27-2009, 08:24 AM
I realised at about 4 a.m yesterday that I might have made a poor decision with my initial approach to this site but by this time I was committed, if I’ve come across blunt and snappy its because I’m frazzled balancing this with work and my kids not that that’s an excuse, seriously thanks for the advise both of you.

I just want to get this site working so I can put it to bed and move on to the next one which will not be in the same format I can assure you.

again thank you for the help,

Peace

Corrosive
05-27-2009, 08:30 AM
[COLOR=black]I realised at about 4 a.m yesterday that I might have made a poor decision with my initial approach to this site but by this time I was committed, if Iíve come across blunt and snappy its because Iím frazzled balancing this with work and my kids not that thatís an excuse, seriously thanks for the advise both of you.

No problem, we have all been there :wink:

Learn and play some more and you'll no doubt some back to this design with a refreshed approach in the future.

By the way, if it is any consolation, the designs on your site are awesome. I really like them.

seektruth
05-27-2009, 08:53 AM
you know what you dead right i've got too close to this thing, i'm taking the day off to spend some time with my boy, by the time i come back i'll have a fresh head, i just shouldn't have set my self 1 week as a deadline to get this done, i guess there is a reason why web designers earn well :-D

Dude if you dont mind i'm sure you've got you own shiz to deal with but if you wouldnt mind explaining how to move that wrapper around and position it over the body image that would be great. i read the tutorial you sugested and i get the concept but to be honest i just dont get css and html at the moment im fighting tooth and nail to understand it but everytime i learn something like another million things come off the back of it. and i think ed is right i looked at some of my images and one of them is like 7mb that cant be good right, resizing and resampling i think i can handle. right.. anyway no more website till tomorrow.

Peace

OUT.

Corrosive
05-27-2009, 09:38 AM
You'll need to venture into code view to do this but I have never used co-ords for links so I don't know how it will effect them. I'd suggest something like this though...

HTML:

</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="22.5" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (website template.psd) -->
<div id="wrapper">
<div align="center">
<div align="center"><img src="http://jdmdesigns.webs.com/Flash(portfolio)%20backdrop.png" alt="" width="800" height="630" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="151,8,201,28" href="http://jdmdesigns.webs.com/Index.html">
<area shape="rect" coords="219,8,304,28" href="http://jdmdesigns.webs.com/Portfolio.html">
<area shape="rect" coords="323,10,401,27" href="http://jdmdesigns.webs.com/About-Us.html">
<area shape="rect" coords="543,7,646,25" href="http://jdmdesigns.webs.com/Place-Order.html">
<area shape="rect" coords="421,9,520,26" href="http://jdmdesigns.webs.com/Talk-to-Me.html">
</map>
<!-- End ImageReady Slices -->
</div>
<div align="center"><div id="Layer1" style="position:absolute; width:100%; height:370px; z-index:1; left: 0px; top: 230px;"><div style="width:480px; text-align: center;"><embed type="application/x-shockwave-flash" wmode="transparent" src="http://w563.photobucket.com/pbwidget.swf?pbwurl=http://w563.photobucket.com/albums/ss72/jdmdesigns/a786f958.pbw" height="360" width="480">
<div align="center"></div>
</div>
</div>
</div>
<!-- --><script type="text/javascript" src="http://staticthumbs.freewebs.com/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script> <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script>
</div>
</body>
</html>

CSS:

#wrapper {
margin: auto;
width: 800px;
}

(replace size with preferred width)

You also need to add a doctype such as...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

seektruth
05-27-2009, 04:20 PM
The boys asleep so a quick 5 mins looking into this cant hurt,
Thanks for your reply corrosive, ok nows the bit where i make myself look complietly dumb, that CSS code where do i put that? i know where the code editor is for the HTML but im giggered if i can find where im suposed to put the CSS stuff, at this point it is a fair comment for you to tell me to jog on and read dreamweaver for dumies,

Corrosive
05-27-2009, 04:25 PM
at this point it is a fair comment for you to tell me to jog on and read dreamweaver for dumies,

Ha, ha...but, yes, I did when I started :wink:

Your CSS styles should go in a separate stylesheet with the extension .css

You then put all your styles in this and link it to your pages using something like...

<link href="css/main.css" rel="stylesheet" type="text/css">

The wrapper code you have seen goes in there.

You really do need to go and read some good resources. Here you go...blow your mind here...

http://w3schools.com

seektruth
05-27-2009, 04:40 PM
ok i'll do a few of those thutorials before i come lumbering back in here with my size 12s, seriously though thanks for your patience, i really did think i was gona lose it for a while earlier if i couldn't find some sort of light at the end of the tunnel. i've got no problem putting the work in there was just sooo many turorials using different aproaches for the same thing and differing opinions on the same subjects it made it difficult to know what to trust and where to start which wigged me out a bit. but any hoo i've got a reference to be getting on with now so i'l work my way through http://w3schools.com and see what comes out at the end of that. Just out of interest how long did it take you to get what you'd consider to be a good grasp of html and css?

Corrosive
05-27-2009, 04:44 PM
Well...I wish I'd found this forum sooner but say, 3 - 4 months? It got easier once it all 'clicked' into place. I am always learning though.

W3schools you can trust, I promise.

domedia
05-27-2009, 05:08 PM
W3schools you can trust, I promise.
There's mixed feelings about w3schools, even though it's a weejun website ;)

seektruth
05-27-2009, 09:03 PM
YEEEEEEEEEEEEEEEEEEEEES you F*&£^"@ dancer!!!!!!!

I could kiss you That is awsome after the boy went to bed i read through most of that site (to be fair i stuck to what was relevant to my current issue but i swear i will be checking there before i ask anything here)...

BUT... more importantly my feedback form is firmly imbedded in the center of my png no matter what i do with the browser size it stays relative.

I learned a lot along the way im not so terified of the code now and i feel like i really achieved something

"With a little help from a friend" didnt john lennon say that, any way if your ever in portsmouth there is a definite pint waiting for you corrosive

STAR

Corrosive
05-28-2009, 06:27 AM
I could kiss you


Ha, ha...please don't!


any way if your ever in portsmouth there is a definite pint waiting for you corrosive



That sounds much more like it :)

Glad you got it sorted.