Adding Buttons in dreamweaver

  Ade_1 20:17 16 Dec 2005

Hi, im experiancing a little trobule when inputting buttons in dreamweaver, they are fine to be put in but when they come out they have gaps between them and i just cannot figure out how to sort it. I am creatign a HTML Template (as i dont really know alot of other web design coding, but i am hope to start to look into it.)

  Ade_1 20:57 16 Dec 2005

If anyone knows any websites which says what to do that would also be great. ANy suggestions really thanks alot!

  Ade_1 16:27 18 Dec 2005

anyone help?

  powerless 20:02 18 Dec 2005

Got a working sample, on your site?

  Ade_1 20:03 18 Dec 2005

no, i do not..., do you understand what i mean?, i can quickly do a sample to show you?

  Ade_1 20:07 18 Dec 2005

the website i am usuing at the moment is fine due to the fact i had someone do it for me. But i do not have contact unfrotunately with them anymore. I was hoping to create a new template you see

  Ade_1 20:14 18 Dec 2005

i have a screenshot, i have moved the buttons up as much as possible but i dont seem to be able to get it up anymore... click here

  Taran 21:05 18 Dec 2005

OK, forget about creating a new template for the moment.

Left click once in a table cell where you want the buttons to go.

In the Properties panel at the bottom of the page in Dreamweaver where it says Vert (just below where it says Horz) select Top from the drop down list of options. This changes the vertical alignment of the table cell so that all content is shoved up to the top of that cell.

Now, back on the Properties panel change the cell width to around 150 pixels. Alter all cells in the left table column to the same width or things will be a bit odd-looking.

Insert a Flash button (Insert >> Media >> Flash Button) into the table cell your links will live in - that should be the one you have vertically aligned to top and made 150 pixels wide.

Now run the Flash Button insert again, and then again without hitting your return/enter. Each button should drop down just below the last with a very tiny gap between them.

The same principle can be applied to custom buttons like yours.

Without access to the page it is impossible to diagnose properly, but as long as your button graphic does not have a wide or transparent border that shoves its position al over the place the buttons should naturally drop one below the other.

  Taran 21:21 18 Dec 2005

I should realy have added that the above is to point you in the right direction for aligning content in a table cell and for testing whether the buttons will bunch up properly.

There are lots of ways of acheiving your goal state, but I want you to get used to sizing a column to fit your buttons and aligning the content before we go further.

Once you get things cooking on gas you can use your own button graphics and see what happens.

Making a template is an excellent way of managing a site by ensuring common elements are locked and kept constant between pages. Once you get your layout working for you you can start to consider templating a site with it.

  Ade_1 18:08 19 Dec 2005

Taran, yes, there is a very small gap still between them, is there anythign i can do to help you to understand it easier?

  Taran 19:54 19 Dec 2005

Give me/us access to a sample page online and I/we can take a closer look.

It's worth noting here that unless you design the graphics for your buttons to take a small gap into account you will always get one.

You can oversize the border area of the button graphic and make it either transparent to allow the page background to show through or make it the same colour as the rest of the button but you will still have a small gap.

An option could be to use image slices or hotspots on a larger graphic, although there are potential accessibility issues at stake.

Try this example, which took about 2 minutes flat in Fireworks: click here

Put a hotspot or slice where the button part of a single graphic is and assign a hyperlink to that area. Basically your entire navigation could be one image with several such hotspots covering what would normally be individual buttons.

Note that I don't recommend this solution, but it can work.

Most good image editing programs can support this sort of thing.

Perhaps it could be of use ?


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Best Black Friday Deals 2017

How modern book design was influenced by illustrated manuscripts

Best Black Friday Apple Deals 2017

Les meilleurs logiciels de montage vidéo gratuits (en 2017)