menu customised - close but no cigar

[Max P]

Hi

Thanks to Calguy, I have made some advances in my first template and menu design. Considering this is my first ever CMSms (in fact first ever CMS site altogether) there is hope for all out there with menu problems.

OK I have got this far: http://www.i-dl.com/pmc

you'll see that the menu has dipped below the proper line height because of the visited link floating on the left!

Here is my css for the navigation:

#navbar {
height: 40px;
background: #8ca9da;
border-bottom: 1px #6780aa solid;
border-top: 1px #4b5d7b solid;
overflow: hidden;}

a.nav, a.nav:link, a.nav:visited {
display:block;
float: right;
height:30px;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#000;
line-height:35px;
overflow:hidden;
border-left: 1px #e9e9e9 solid;
border-right: 1px #6780aa solid;}

a.nav:hover {
text-decoration: underline;}

a.nav:active {
text-decoration: underline;}

I have also included the div tag #navbar in which the horizontal bar is held.

This is my pmc_hz_nav template code (hacked about from another posting)

{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->current == true}
url}">{$node->menutext}
{else}
url}">{$node->menutext}{/if}
{/foreach}
{/if}

and called from the page template like this:



{menu template='pmc_hz_nav' number_of_levels='1'}



Now, I assume that the smartycode is saying: for each item on the node list make a node, if the page is current make the link act accordingly to the behaviour of class currentnav from the template css, otherwise, dress it up as stated in the nav class. Both currentnav and nav will be coded into html in the form a [class] href=[the link defined by the page order] with the label [defined in the menu text].

Now I can back engineer this, but there would have been no way I could have designed this, so there may well be mistakes in there that I cannot see.

If you click on the final link of the menu, (farthest link on the left - the menu is floated right) then it starts to behave as I expect. Can anyone help me straighten out the menu?

I really appreciate the help and as you'll agree I'm almost there.

PS, to any gurus out there, please forgive the CSS, I suspect that it is not perfect but I am still learning so I use one entry per line.

Regards

Dave

[calguy1000]

uhm..... you'd be best off by going one line at a time with the css.

I got it to look alot better by removing alot of your styles (keep in mind, I am by far no css expert).... but menus like this are simple to setup.  and they're not specific to cms made simple.

Code: Select all

a.nav, a.nav:link, a.nav:visited {
display:block;
float: right;
padding-left: 10px;
padding-right: 10px;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#fff;
}

Your menu manager template looks fine, and you understand it perfectly.... so the rest is just a styling issue.

[Max P]

Once again, I appreciate your support in this matter.

After porting my site into a template I have the following issue with my menu, I know that it must be css or a .tpl file that eludes me but can anyone see what would be causing this behaviour?

my static site looks like this (menu only) attachment pmc_stat.jpg

here is the xhtml and the css for the static site:









{content removed}

PMC Safety Netting Ltd | Affordable Protection throughout the UK





PMCSafety Netting Ltd



{content removed}









Home
Health and Safety
The PMC Team
News
Awards
Quote Form




Find PMC
Gallery
Quote Form


{content removed}


Company Information




using this stylesheet (mainly)

html, body{
margin: 0;
padding: 0;}

#header {
margin-top: 0px;
padding-top: 0px;
height: 150px;
background-color: #263d79;}

#headertext {
position: absolute;
width: 200px;
top: 10px;
left: 250px;
color: #fff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .7em;
font-weight: normal;}

#red {
width: 215px;
color: #ff0000;
font-family: Arial;
font-size: 3em;
font-weight: bolder;
background-color: #fff;
position: absolute;
top: 10px;
left: 10px;}

#blue {
padding-left: 5px;
width: 210px;
color: #263d79;
font-family: "Times New Roman", serif;
font-style: italic;
font-size: .8em;
background-color: #fff;
position: absolute;
top: 110px;
left: 10px;}

#headerimage {
position: absolute;
float: right;
top: 10px;
right: 10px;
width: 200px;
height: 125px;
background-image: url(../images/logoweb.png);
background-color: #fff;
background-repeat: no-repeat;
}

#navbar {
height: 40px;
background: #8ca9da;
border-bottom: 1px #6780aa solid;
border-top: 1px #4b5d7b solid;
overflow: hidden;}

a.nav, a.nav:link, a.nav:visited {
display:block;
float: right;
height:30px;
padding-left: 10px;
padding-right: 10px;
margin-top: 10px;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#000;
line-height:35px;
overflow:hidden;
border-left: 1px #e9e9e9 solid;
border-right: 1px #6780aa solid;}

a.nav:hover {
text-decoration: underline;}

a.nav:active {
text-decoration: underline;}

#leftcol {
margin-top: 30px;
width: 200px;
position: relative;
float: left;}

#sidenav {
width: 144px;
margin-left: 30px;
margin-bottom: 30px;
}

#imageContainer {
width: 200px;
}

a.leftnav, a.leftnav:link, a.leftnav:visited {
display: block;
width:144px;
height:25px;
margin-top: 2px;
background-image: url(../images/side_btn.gif);
text-decoration: none;
line-height: 23px;
color: #fff;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
text-indent: 10px;}

a.leftnav:hover {
text-decoration: underline;
background-image: url(../images/side_btn_hover.gif);}

a.leftnav:active {
text-decoration: underline;
background-image: url(../images/side_btn_hover.gif);}

ul.indentlist {
margin-left: 250px;
color: #b30018;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;}

.entry {
margin-left: 220px;
margin-right: 50px;
color: #4d4e50;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: .8em;}

h1 {}

h2 {margin-left: 220px;
color: #263d79;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.2em;}

h3 {margin-left: 220px;
color: #263d79;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;}

h4 {margin-left: 220px;
color: #263d79;
font-family: Verdana, Helvetica, Arial, sans-serif;}

#placeholder {
width: 260px;
height: 183px;
position: absolute;
top: 1100px;
left: 850px;}

#footer {
height: 100px;
background-color: #263d79;
border-top: 1px #000000 solid;}

The part in bold is the part that I turne into a menu for CMSms using the following template:












{sitename} | {title}
{description}
{metadata}
{stylesheet}




PMCSafety Netting Ltd



PMC Safety Netting Ltd

Unit 3

Appian Way

Europa Business Park

Grimsby

NE Lincolnshire

DN31 2UT

T: 01472 267733

F: 01472 350921

E: info@pmcsafety.net









{menu template='pmc_hz_nav' number_of_levels='1'}





{menu start_page=$page_alias}

{content}


Company Information




here is the menu smarty:

{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->current == true}
url}">{$node->menutext}
{else}
url}">{$node->menutext}{/if}
{/foreach}
{/if}

the styling is the same as the bold section of the css code above.

When I preview the CMSms site I get the image shown in pmc_admin.jpg, better viewed here http:www.i-dl.com/pmc

Als, there is some Current page wording that appears from somewhere

I know that Calguy has been good enough to spend some time on this and I am really close to sorting this out now, I just don't understand what is happening in the back of my CMSms site to cause this menu break!

Any ideas?

I don't mind fixing it but I don't know where to start.

I have tried the alterations that Calguy suggested for the css and this did help the line height, but it hasn;t stope the menu headings flying around inside the navbar div tag as if they are on a conveyor belt!



Regards

Dave