Hello there,

I'm looking for a little assistance in aligning my website menu properly. Made a new 1024 layout in photoshop and imported it to dreamweaver. I got all my pages made, except that the long pages break the menu and pulls it apart.

I know a long time ago when i learned this stuff the was a little line of code to align the pieces back to the top, so the menu isn't broken.

Can anybody please help me out? would be much appreciated! thanks!  

Quote:

Made a new 1024 layout in photoshop and imported it to dreamweaver

Which will make the code bloated and difficult to study.

Quote:

the was a little line of code to align the pieces back to the top

You would be better looking at why the code is broken rather than attempting to fix the problem with a Mickey Mouse Menu Fix.

Keith
www.studiosoft.co.uk

well if I align the piece back to the top... that's fixing it! and not mickey mousing anything.  

If the code was properly written it wouldn't need fixing.
 

Keith
www.studiosoft.co.uk

thanks audiopro. are you lending a hand or are you just criticizing?  

here's the link to what I have and example.....   http://boats4u.okanaganboating.com/faq.html

What I suspected, the code is bloated, uses tables for layout and is padded out with 'spacer' images.
I would suggest you remove the entire content of the page, leaving the header, menu and footer sections and see if the menu plays nicely then.
The length of page should have no effect on the menu.

Keith
www.studiosoft.co.uk

While it does use an older style table design method, this is not too bloated to repair.

The FAQ menu area needs to have its cells vertically aligned to the top (valign="top").

There's a problem with "boats4u_13.gif" and "boats4u_15.gif". What if your menu text expands beyond their height of 210 pixels? You might try slicing these images horizontally so that the bottom half can repeat as a table cell background to expand with any text in the menu.

Thank you spamjim! valign="top" was the fix. Although i'm not over the hurdle just yet. image "boats4u_18.gif" also needs to be moved up. which I'm still having troubles with.

I fond this while doing my research:

The default vertical alignment in cells of tables is "middle"; you can alter the vertical alignment by using valign="top" or valign="bottom" or valign="middle" in either the tr tag or the td tag. Using <tr valign="top"> will force the content of all the cells in that row to be aligned to the top of the cell. Using <tr valign="bottom"> will force the content of all the cells in that row to be aligned to the bottom of the cell.
Using <td valign="top"> will force the content of just that particular cell to be aligned to the top of the cell. Using <td valign="bottom"> will force the content of just that particular cell to be aligned to the bottom of the cell. Using <td valign="middle"> will force the content of just that particular cell to be aligned to the middle of the cell.

So I tried on both, the tr and td tag and i'm still not sure how to move "boats4u_18.gif" to the top to fix my broken menu.

Any help is much appreciated!

here's the link to the updated page:

http://boats4u.okanaganboating.com/faq.html

The reason why the page is malformed is that boats4u_18.gif is in a different table cell to the rest of the menu graphic.
see - http://www.studiosoft.co.uk/test/test.htm where your table borders are highlighted in red.

Using tables to lay out the page makes any manual editing difficult and time consuming.


 

Keith
www.studiosoft.co.uk

You need to add a height value for the menu area...

<td valign="top" align="left" height="210"><p id="menuheaderbox">FAQ</p>  

spamjim... I tried that and it wasn't working.

At one point I had the side bars up, but now everything is still shuffled even using the valign="top" attribute.

:s

You did ask me if I was lending a hand or criticising, I am trying to help.

It is still not working for the reason already stated - your images are in different cells of the table.
http://www.studiosoft.co.uk/test/test.htm

To fix it, the table will either have to be re-created or better still, removed altogether.

 

Keith
www.studiosoft.co.uk

Thank you audiopro. I have built it like this once before and it worked in the end. I'm not quiet sure what you mean by re-created? And if I remove it all together then I certainly don't have any images with my menu! The customer really like the way the site looks, so I don't really want to scrap it.

Also I had a look at your link. I'm not sure what you are trying to show me exactly? I get that my images are in different cells but how do you align them properly?  

Quote:

I get that my images are in different cells but how do you align them properly?

If you keep them as they are, you can't.

You need to at least re-create the table to make the entire menu appear in 1 cell, so the rest of the page can form round it.

Whether the layout is pleasing to the client is not the issue here. To me the issue is spending 2 or 3 days getting a single web page to behave, this should be ringing alarm bells.

The same layout can be achieved using 4 or 5 divs and no tables.

Keith
www.studiosoft.co.uk

What you can do is set the height of the <td> to be the same size as you images within them on the left side.

Look at Line 71:

Was this:


Change to this:

I do agree that is is sloppy, but doing this for each <td> on that left side will make it work.  The problem you will have is if the size changes (more text/links) this could break and not be fixed without starting from scratch.

Coding individual cells is not going to work.

Keith
www.studiosoft.co.uk

@ audiopro - I wouldn't recommend it but it could be made to work, but i won't argue on that since it won't help kirnehator any. css with div's is more my style.


@ kirnehator -

On line 71 remove the line of inner code you have and insert this in between those <td>  </td> tags.  Problem solved.

It could be made to work by creating another table within the 'menu' cell and putting the entire menu in there but that would make the layout even more complicated.

Keith
www.studiosoft.co.uk

thank you CandyMan this got me one step closer to finishing up:
"<td colspan="3" height="10"><img src="http://boats4u.okanaganboating.com/images/boats4u_13.gif" width="181" height="10" alt=""></td>"

You can see the updated page: http://boats4u.okanaganboating.com/faq.html

I was able to move the menu up to the top with what Candyman recommended. I also tried the other stuff mentioned above to try and align the bottom half of the menu to bring it up. So close to solving this. I would sure like to learn how to make a site div's and css, but for this one I'm running a little late. So I would like just to solve what I have for now.

@ audiopro. "You need to at least re-create the table to make the entire menu appear in 1 cell, so the rest of the page can form round it."
I have thought about this too, but I'm not quite sure how to put the graphics to the background and build a css menu over top of the image. Since I'm obviously building a site to specific design provided by the customer. I'm using the skill I have. Now the center of the menu, were I can delete the image and insert my text, that I then form to links and apply css to get it to look like I made on the home: http://boats4u.okanaganboating.com/index.html

the home page is a good example of how I wish the menu to look like except that I also need to align it to the top as well :S

Thanks for your help guys!

Your links are not working for me

Keith
www.studiosoft.co.uk

Using tables to layout a site is not an acceptable means of web design and development.

This should not be a problem as this should not be practiced.

Darryn Cooke
www.darryncooke.com | Marketing and Creative Services

If table layout is a sin, you should speak to the operators of this forum.  

You might be confusing 'acceptable' and 'ideal'.

Hi

Quote:

If table layout is a sin (...)

... then HTML5 is absolution for the masses : <table role="presentation"> .

( HTML5 | The elements of HTML | Tabular data | The table element )
 

Feherke.
http://free.rootshell.be/~feherke/