View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

How to center horizontal menus

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

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

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