close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

How to center horizontal menus

Thread began 4/23/2009 9:38 am by secure377208 | Last modified 4/27/2009 11:57 am by steve89430 | 4153 views | 10 replies |

secure377208

How to center horizontal menus

I am trying to create a menu to sit at the base of a page which is to be used as an include page at the top of pages in the site, I have managed to place the menu into a table cell and all seems to work except I cannot get the menu to center to the cell despite the cell properties being set to align centrally, I have included an element of the code below if someone could advise how to align it centrally. I am sure this is something simple but I cannot find it documented anywhere.

Thanks in advance

<td width="900" height="30" colspan="5" align="center" valign="bottom" bgcolor="#698AB3"><ul class="level-0" id="cssmw0">
<li class="parent"><span><a href="#">Accommodation</a></span>
<ul class="level-1">
<li><a href="#">Accommodation Search</a></li>
<li class="parent"><a href="#">Hotels</a>
<ul class="level-2">
<li><a href="#">Show All Hotels</a></li>
<li><a href="#">North</a></li>
<li><a href="#">Central</a></li>
<li><a href="#">South</a></li>
<li><a href="#">Close to Bridlington</a></li>
</ul>
</li>
<li><a href="#">Guest Houses</a></li>
<li><a href="#">Self Catering</a></li>
<li><a href="#">Camp and Caravan</a></li>
</ul>
</li>
<li><span><a href="#">Places to Visit</a></span></li>
<li><span><a href="#">About Bridlington</a></span></li>
<li><span><a href="#">Community</a></span></li>
<li><span><a href="#">Advertising</a></span></li>
</ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw0.intializeMenu('cssmw0',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw0.intializeMenu('cssmw0',{select_current: 0, orientation: 1}); }, true); }</script></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
</table>

Sign in to reply to this post

Ray BorduinWebAssist

Do you have a url where we can view the problem. Since the display involves both css and the html it is hard to debug out of context.

Sign in to reply to this post

secure377208

center menu

Unfortunately the site is only available locally as it is still in development, I could create a location and upload it later if it's the only way to resolve the issue, at present I have a number of problems, it seems to be 2 steps forward and 4 steps back at the moment, was just getting somewhere and now it's all in bits again, the annoying thing is that we wanted to move to dreamweaver and css as it was supposed to be much better than basic html and frontpage, but so far I have wasted days on things which could be acomplished within minutes using frontpage, but I dont want to weaken, but if things dont improve quickly then due to workload we may have no option.

I will come back to you with a location when I am back in the position where this is my biggest problem.

Thanks

Sign in to reply to this post

james276087

Originally Said By: Ray Borduin
  Do you have a url where we can view the problem. Since the display involves both css and the html it is hard to debug out of context.  


Hello Ray,
Can you check this site index.htm , because i don't know hwo to explain this. This manu has extra background of menu( make sense?)
thanks for reading it
James

ps. Can we set up this message then i get the email notice when you or someone posted here.

Sign in to reply to this post

secure377208

menu not centered

Hi,
Have managed to upload the page to a temp location at
3-col-template.html

As you will see the menu isnt configured or designed properly yet, want to make sure it will all work the way I want first, anyway as explained the menu as you will see alignes left despite the cell horizontal alignment being centered, the vertical alignment is set to bottom and this is working and positioning correctly, it's just not centering.

To answer the comment about using tables, having used frontpage for design for a number of years I have made the decision to migrate to dreamweaver and css and to be honest with other pressures of work it hasn't been easy, if it wasn't for the money invested I could easily revert.

I need to have a ssi page display at the top of all the sites pages and created the top section include_top.html within photoshop and saved for web. Going with tables seemed to be the easiest solution given my almost non existant knowledge of css or dreamweaver, hence the reason for purchasing the webassist suite.

If someone can advise on how to get the menu to center it would be appreciate so I can at least get this top include page completed.

Thanks in advance

Sign in to reply to this post

Ray BorduinWebAssist

Just place the menu into another table inside that td cell it is in and it will center.

Sign in to reply to this post

secure377208

menu centering

Hi Ray,
Tried that and it had no effect, it seems to me that any placement commands within the html is being overridden by something in the css layout for the menu, with this in mind I played about with menu.css and found that I can get the menu somewhere near by altering the padding value in ul#cssmw1 (the first block) as follows;

ul#cssmw1 {
cursor: default;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 120;

This is probably not the way to go about it but it almost achieves the desired result, having found which part seems to be aligning the menu is there an alternative command I can put in here which will cause the menu to center automatically and more accurately than having to guess it by adding the padding?

Quick update, sorry but it hasnt fixed it, while previewing within dreamweaver the menu looks centered however when the page is published to the server all it has done is shift it slightly to the right and no matter what I increase the padding to it doesnt seem to move it any further over, so it's back to the drawing board.

I really cannot believe that something as simple as centering the menu can be so difficult to achieve, especially when the sales blurb for the program states that no coding knowledge is required. I have just created a sample 3 col fixed layout in css sculptor with header and footer, centered the header text, highlighted it and replaced it with a non edited default horizontal menu and it aligns to the left in the same way, I am sure it's not me being thick here but if you say no coding experience is required to use the software then I expect everything to be intuitive and fairly simple to work out, if you say that a certain level of css knowledge is required to make the program functional then I know that my knowledge is the limiting factor and brushing up on css coding should help me resolve the issue.

I am all for advancement hence the decision to move away from frontpage but to be honest the time required to make the simplest of changes is making the move far from cost efficient, I will be spending the weekend trying to get to grips with it all but unless things improve rapidly I will most likely be taking advantage of the refund period.

As a piece of constructive critisism while you help has been and is appreciated and certainly needed, I do find your one sentance responses do not provide sufficient explaination to allow me to understand the issues causing my problems in order to be able to learn from the experience and apply the knowledge along the learning process. I am fully prepared to accept that my knowledge of css and working with dreamweaver is almost non existant but I have many years experience of basic web design so I am sure you can understand my frustration at being unable to overcome what seems to be the simplest of issues within a program which states that no experience or css knowledge is even required.


Thanks again for your help, hopefully the next three days will increase the required knowledge of all products concerned and allow us to be more productive, in the meantime if you can help me get this darned header centered it would be appreciated, the page is still available on the earlier link and if you need me to send any coding just ask, in case it helps I have copied the header page coding below.

<script type="text/javascript" src="CSSMenuWriter/cssmw/menu.js"></script>
<style type="text/css" media="all">
<!--
@import url("CSSMenuWriter/cssmw/menu.css");
-->
</style>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("CSSMenuWriter/cssmw/menu_ie.css");
</style>

<![endif]-->

<!-- Do not remove the line below!!! It is required for the WeatherWidget. -->
<script src="weatherwidget/weatherwidget.js"></script>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (brid2009top.psd) -->
<table width="901" height="171" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="6">
<img src="_images/header_01.jpg" width="900" height="9" alt=""></td>
<td>
<img src="_images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="_images/header_02.jpg" width="692" height="5" alt=""></td>
<td width="180" height="125" rowspan="3" align="center" bgcolor="#698AB3"><!-- Begin WeatherWidget -->
<noscript>
<a href="http://www.dwuser.com/" title="Dreamweaver Extensions">Dreamweaver Extensions by DWUser.com</a>
</noscript>
<script type="text/javascript">
// <![CDATA[
WeatherWidget({showTime:'false',swf:'weatherwidget/weatherwidget.swf',w:'180',h:'125',redirect:'',textColor:'#FFFFFF',bgColor:'#698AB3',bgAlpha:'100',useBevel:'true',loc:'ukxx0024',units:'e',loadingText:'Loading...',humidityText:'Humidity: ',windText:'Wind: '});// ]]>
</script>
<!-- End WeatherWidget --></td>
<td rowspan="4">
<img src="_images/header_04.jpg" width="28" height="133" alt=""></td>
<td>
<img src="_images/spacer.gif" width="1" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3">
<img src="_images/header_05.jpg" width="210" height="128" alt=""></td>
<td width="455" height="118" align="center">Bridlington Banners</td>
<td rowspan="3">
<img src="_images/header_07.jpg" width="27" height="128" alt=""></td>
<td>
<img src="_images/spacer.gif" width="1" height="118" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="_images/header_08.jpg" width="455" height="10" alt=""></td>
<td>
<img src="_images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td>
<img src="_images/header_09.jpg" width="180" height="8" alt=""></td>
<td>
<img src="_images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td>
<img src="images/header_10.jpg" width="1" height="28" alt=""></td>
<td width="899" height="28" colspan="5" align="center" valign="bottom" bgcolor="#698AB3"><ul class="level-0" id="cssmw">
<li class="parent"><span><a href="#">Accommodation</a></span>
<ul class="level-1">
<li><a href="#">Accommodation Search</a></li>
<li class="parent"><a href="#">Hotels</a>
<ul class="level-2">
<li><a href="#">Show All Hotels</a></li>
<li><a href="#">Bridlington North</a></li>
<li><a href="#">Bridlington Central</a></li>
<li><a href="#">Bridlington South</a></li>
<li><a href="#">Close to Bridlington</a></li>
</ul>
</li>
<li class="parent"><a href="#">Guest Houses</a>
<ul class="level-2">
<li><a href="#">Bridlington North</a></li>
<li><a href="#">Bridlington Central</a></li>
<li><a href="#">Bridlington South</a></li>
<li><a href="#">Close to Bridlington</a></li>
<li><a href="#">Show all Guest Houses</a></li>
</ul>
</li>
<li class="parent"><a href="#">Self Catering Flats</a>
<ul class="level-2">
<li><a href="#">Show all Holiday Flats</a></li>
<li><a href="#">Bridlington North</a></li>
<li><a href="#">Bridlington Central</a></li>
<li><a href="#">Bridlington South</a></li>
<li><a href="#">Close to Bridlington</a></li>
</ul>
</li>
<li class="parent"><a href="#">Holiday Properties</a>
<ul class="level-2">
<li><a href="#">Show all Properties</a></li>
<li><a href="#">Bridlington North</a></li>
<li><a href="#">Bridlington Central</a></li>
<li><a href="#">Bridlington South</a></li>
</ul>
</li>
<li class="parent"><a href="#">Camp and Caravan</a>
<ul class="level-2">
<li><a href="#">Show all Parks</a></li>
<li><a href="#">Bridlington North</a></li>
<li><a href="#">Bridlington Central</a></li>
<li><a href="#">Bridlington South</a></li>
<li><a href="#">Close to Bridlington</a></li>
</ul>
</li>
</ul>
</li>
<li><span><a href="#">Places to Visit</a></span></li>
<li><span><a href="#">About Bridlington</a></span></li>
<li><span><a href="#">Community</a></span></li>
<li><span><a href="#">Business Directory</a></span></li>
<li><span><a href="#">Advertising</a></span></li>
</ul>
<script type="text/javascript">if(window.attachEvent) { window.attachEvent("onload", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }); } else if(window.addEventListener) { window.addEventListener("load", function() { cssmw.intializeMenu('cssmw',{select_current: 0, orientation: 1}); }, true); }</script></td>
<td>
<img src="_images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td>
<img src="_images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="_images/spacer.gif" width="209" height="1" alt=""></td>
<td>
<img src="_images/spacer.gif" width="455" height="1" alt=""></td>
<td>
<img src="_images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="_images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="_images/spacer.gif" width="28" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->

Sign in to reply to this post

Ray BorduinWebAssist

I tested it and it worked when I added the table. Where did you add the table? It should be added directly inside the TD the menu is currently in and should close at the end of the TD contents. Do you have a url to view the problem? That is the easiest way to debug it since it is a combination of html and css that determines the ultimate result.

Sign in to reply to this post

secure377208

centering issue

Hi Ray,
Thanks for that, having placed another table in side the cell and the menu inside the table it still didn't center, the only way I could get it to center was to make the table the same size as the menu and center the table within the cell which gave me the result I wanted in a round about fashion, only problem then was that whenever I made a change to the menu it screwed up the menu listings by adding the whole menu again at the end of the last menu item.

Due to time constraints I have opted to use an alternative menu software for this project, unfortunately the site I am working on is very large and needs to incorporate a number of complex items so it probably wasn't the best site to cut my teeth on. I will attempt to use menu writer on other projects and I am sure it will perform much better within a much less demanding environment.

Thanks for your help.

Sign in to reply to this post

steve89430

horizontal centered menu

See this thread showthread.php?t=597 its a startling omission and one that needs adding soon rather than later. I`m sure it puts people off buying it.

Sign in to reply to this post
loading

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...