So I am working to include a custom contact form on the facebook page. Also a video. I was wondering how to center the background image on the page so it doesn’t move. The size of the page is 520x600. An example of a page doing this is:
https://divlr.com/sf/adobe/flashrocks_production/tab/
What is DivLR btw?
Is there anyway to export a page from fireworks cs5 that has working contact boxes that I can then put php code associated with in dreamweaver?
Thank you.
I was wondering how to center the background image on the page so it doesn’t move.
It’s not really clear what you are asking here. Are you having a problem with the page you linked to?
Is there anyway to export a page from fireworks cs5 that has working contact boxes that I can then put php code associated with in dreamweaver?
I’m not sure, but if is is possible, it would be better not to. It’s better not tu use a graphics program to output web code.
Well I didn’t want the code, just nice looking forms.
Basically I want an E-Mail capture form on the facebook page and a video.
I am not fantastic with CSS but if I see an example I can hack and change to suit my needs.
The Adobe link I gave you was an example of a centered background image with html and css over it for Facebook. But when I go into the code I can’t see any code that names the background image.
Honestly what I have been doing so far in order to make the pages graphic intensive is creating an image in photoshop, then setting clickable hotspots in fireworks for buttons.
I haven’t really found a guide that went in-depth for making small webpages. Or seen any free (good) templates that I could edit.
It’s still not clear what you mean by centering a bg image. Do you mean centering a web page? A web page is not an image, though you can have images on it.
You can grab the code for that form by viewing the page source. And you can also grab the CSS styles that determine the layout. But you need to be familiar with HTML and CSS to understand what’s going on there.
Neither HTML nor CSS will create form functionality for you, though. Some services like CampaignMonitor provide you with a form you can place on your site that easily lets people subscribe to your email list, though.
This is the code for the background image at the top of the page you linked to:
#main {
background-image: url("../img/tab-main-bg.jpg");
}
I understand, I was searching the HTML, didn’t look at the call to css. Ok I understand.
I know you cant create hotspots on a background image, is there easy code to float the buttons over the background image so I can have roll over effects?
Yes, that’s not too hard. I think the old way was to use image maps, but they are not well liked now. Depending on what you want to do, I can think of a few ways, perhaps none ideal. But you could arrange a bunch of <a> elements over the background element and have a different background appear on them on hover. They could either sit over the background image, or the bg image could be sliced among them. Depends on what you are doing, though. Maybe we need a visual.
Ok. I really appreciate the help btw.
http://mangrovecreations.com/naplesflatbread/Newtab2facebooknfb746oct42011-hotspots.jpg
That is a facebook page I made.
It would be nice to have rollover functions on it.
Obviously the buttons are not clickable because the HTML with the hotspots is in the iframe tab application on facebook.
Now if I wanted to put a video there would I use the graphic part as the background image, then make a centered div container and then use the row of buttons (take the buttons out in photoshop) and give them their own divs and float them over the background image?
I’ve worked on wordpress themes and done it before with a graphic logo, but I can’t remember how.
I don’t really understand why, but I’m not really familiar with FB pages.
I don’t really get where the video comes into it, but certainly for the buttons, make each of those a separate image in PS, and then create a UL with floated LIs (with <a>s in them) for the buttons. Give them width and height and set the Ps images as bg images on them. You could have a nice rollover effect by using CSS sprites.
I’ll explain. Basically instead of an html file being hosted on your server like that background image was, in facebook there is an application called an iframe application that doesnt just take a url like a standard iframe, but the actual html code.
So by me giving you the image link, then the hotspots wouldn’t work because the code for the hotspots is on facebook’s app.
You could see the actual page at facebook.com/naplesflatbread.
Video is something i need to incorporate for my next client.
I’ve seen it done here: https://www.facebook.com/ScottPilgrim?sk=app_7146470109
and here: https://www.facebook.com/GetHimtotheGreekMovie
Also, the flash cannot auto initialize on facebook. So you have to create a graphic that when pressed then initializes.
I would ideally like to have that video hosted on youtube if possible.
I just don’t understand layouts very well. I can’t code from scratch.
I’ve tried slicing etc, but it always leads to a jumbled image.
But I will try the tags you gave me.