Aligning menu... on new website. 1

[kirnehator]

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!

 

[audiopro]

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

Which will make the code bloated and difficult to study.

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

http://www.studiosoft.co.uk

 

[kirnehator]

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

 

[audiopro]

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


Keith

http://www.studiosoft.co.uk

 

[kirnehator]

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

 

[kirnehator]

here's the link to what I have and example.....

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

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[spamjim]

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.

 

[kirnehator]

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!

 

[kirnehator]

here's the link to the updated page:

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

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[spamjim]

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

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

 

[kirnehator]

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

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[kirnehator]

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?

 

[audiopro]

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

http://www.studiosoft.co.uk

 

[TheCandyman]

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:

<td colspan="3">
	<img src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_13.gif"[/URL] width="181" height="10" alt=""></td>
<td colspan="7" rowspan="4"><p><a name="FAQ" id="FAQ"></a>FAQ</p>
...
...
...

Change to this:

<td colspan="3" [b]height="10"[/b]>
	<img src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_13.gif"[/URL] width="181" height="10" alt=""></td>
<td colspan="7" rowspan="4"><p><a name="FAQ" id="FAQ"></a>FAQ</p>
...
...
...

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.

 

[audiopro]

Coding individual cells is not going to work.

Keith

http://www.studiosoft.co.uk

 

[TheCandyman]

@ 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.

<table width="100%" border="0" cellpadding="0">
	<tr>
    	<td colspan="3"><img height="10" width="181" alt="" src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_13.gif"></td>[/URL]
    </tr>
    <tr>
		<td valign="top" width="11"><img height="217" width="11" alt="" src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_15.gif"></td>[/URL]
		<td valign="top" width="150">&nbsp;</td>
		<td valign="top" width="20"><img height="217" width="20" alt="" src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_17.gif"></td>[/URL]
	</tr>
	<tr>
		<td valign="top" colspan="3">
			<img height="5" width="181" alt="" src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_18.gif"></td>[/URL]
	</tr>
	<tr>
		<td valign="top" colspan="3">
			<img height="87" width="181" alt="" src="[URL unfurl="true"]http://boats4u.okanaganboating.com/images/boats4u_19.gif"></td>[/URL]
	</tr>
</table>

 

[audiopro]

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

http://www.studiosoft.co.uk