Understanding Menu Templates - how to stretch menu to fit width available.
Posted: Fri May 16, 2008 10:50 pm
Hello, I did some reading and decided CMSmadeSimple seemed like the tool to convert my old site to a CMS driven site. I'm going through the learning curve of making my templates, and I am finding the menu system hard to understand.
On my site, I have top level navigation, "home | About Us | Stuff | Contact us".
It sits at the top of the page, like this:
Other sub menu items go into a separate area on the page.
When I created my static site, I knew I would only have four top level menu items, so in the style sheet, I divide the menu area of 720 px into four chunks of 179px. Of course now I am creating a CMS driven site, it doesn't seem good practise to do this. What if I want later to add a fifth top level menu item?
Any tips on how to do this automatically, and keep the tabs stretched out to 100% would be much appreciated. I am really stuck as I can no longer specify the LI width in my css... If can't do this with just css, does the CMS give me anyway of knowing how menu items there are, so I can somehow make this a % variable for the CSS?
I've attached my static code template below. I very much appreciate any pointers to docs (read everything I have found) or any other info. Thank you in advance
On my site, I have top level navigation, "home | About Us | Stuff | Contact us".
It sits at the top of the page, like this:
Other sub menu items go into a separate area on the page.
When I created my static site, I knew I would only have four top level menu items, so in the style sheet, I divide the menu area of 720 px into four chunks of 179px. Of course now I am creating a CMS driven site, it doesn't seem good practise to do this. What if I want later to add a fifth top level menu item?
Any tips on how to do this automatically, and keep the tabs stretched out to 100% would be much appreciated. I am really stuck as I can no longer specify the LI width in my css... If can't do this with just css, does the CMS give me anyway of knowing how menu items there are, so I can somehow make this a % variable for the CSS?
I've attached my static code template below. I very much appreciate any pointers to docs (read everything I have found) or any other info. Thank you in advance
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>csstemplate</title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #313233;
}
/* header style is the top black box to contain the menu and logo */
#header {
width: 790px;
height: 119px;
background-image: url(/bin/layout-img/logo-blue.png);
background-repeat: no-repeat;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
}
/* main wrapper div, used for header gradient BG */
#mothership {
background-image: url(/bin/layout-img/top-bk-grad.png);
background-repeat: repeat-x;
}
/* Content box I had problem with as it shifts down when you add a paragraph,
added 10 px padding to offset the 10px paragraph margin below also allows footer to butt against content area
*/
#content {
width: 790px;
padding: 0px 0px 10px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(/bin/layout-img/content-bk-grad.png);
background-repeat: repeat-y;
}
/* paragraph fix to stop div moving when i add a new paragraph to content */
p {margin:0 10px 10px}
/* Define the swipe bar that contains content illustrations - this should be changable when the page highlight colour changes */
#swipe {
height: 246px;
background-image: url(/bin/layout-img/stripe/blue-bk-grad.png);
background-repeat: repeat-x;
}
/* black background for content to allow page scaling */
#contentBG {
background-color: #000000;
}
/* space for the footer image of the content area */
#footer {
width: 790px;
height: 79px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
background-image: url(/bin/layout-img/content-bottom.png);
background-repeat: no-repeat;
}
/* this is for the bottom background gradient till we go to flat grey */
#footerBG {
height: 178px;
background-image: url(/bin/layout-img/footer-bk-grad.png);
background-repeat: repeat-x;
}
/*
Menu styles.
Need to change dynamically depending on number of menu items, and for current "selected" element
*/
#menu {
/* if you remove the float:left you get a space in the f***king top of the browser and waste a friday night until you work out you need to put in 0 margin which seems obvious now but wasn't somehow for the last five hours */
margin:0 auto;
list-style: none;
width: 720px;
position: relative;
text-align: center;
padding: 0;
margin-left: auto;
margin-right: auto;
height: 34px;
top: 86px;
}
#menu li {
float: left;
/* now we need to set the pixel (Internet Exploder complains if you use a percentage) width (x) of each menu item depending on how many menu elements there are: 718px (menu width) / number of menu items = width (x) */
width: 179.5px;
font-family: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size: 67.5%;
text-align: center;
height: 34px;
}
#menu a {
color: #ffffff;
display: block;
margin: 0;
text-decoration: none;
/* Now we need to set the line height to center the text vertically and the menu element height */
line-height:34px;
background-color: #cccccc;
background-image: url(/bin/layout-img/stripe/grey-bk-grad.png);
background-repeat: repeat-x;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 3px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#menu A:hover {
color: #ffffff;
border-left-width: 0px;
background-color: #47B0D2;
background-image: url(/bin/layout-img/menu-bg-grad.png);
background-repeat: repeat-x;
border-left-width: 3px;
}
/*
Clever trick to highlight the menu item for the page you are currently on see:
http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
for details
*/
#home #menu #nav-home,
#about #menu #nav-about,
#stuff #menu #nav-stuff,
#contact #menu #nav-contact
{
color: #ffffff;
border-left-width: 0px;
background-color: #47B0D2;
background-image: url(/bin/layout-img/stripe/blue-menu-bk-grad.png);
background-repeat: repeat-x;
}
-->
</style>
</head>
<!--
Clever trick to highlight the menu item for the page you are currently on; see default.css for more details.
-->
</__body id="home">
<div id="mothership">
<div id="header" align="center" >
<ul id="menu">
<li><a id="nav-home" href="http://a.htm">home</a></li>
<li><a id="nav-about" href="http://b.htm">about us</a></li>
<li><a id="nav-stuff" href="http://d.htm">stuff</a></li>
<li><a id="nav-contact" href="http://e.htm">contact</a></li>
</ul>
</div>
<div id="swipe"></div>
<div id="contentBG">
<div id="content">
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div id="footerBG">
<div id="footer"></div>
</div>
</div>
<__body>
</__html>