Forum Moderators: not2easy
I'm trying to get this horizontal nav bar to work but I'm having problems getting the horizontal navigation to work how I want it to.
The CSS came pre-installed with the CMS. I've been able to tweak things (not to much) so that its looks as I wanted it to but for some reason I don't know how to:
A) Close the gap between the 'film strip' of images at the top of the page and the horizontal navigation strip.
B) Get the horizontal navigation to expand fully horizontally. What I mean is so that Home is flush to the left and Contact Us is flush to the right hand side
Due to time constraints for this last minute project. I'm using all the original styles sheets and style names that came with it at install. I've only change the colours and borders.
ANY help would be GREATLY received.
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
The main style sheet that governs this nav bar is below...
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */
#menuwrapper {
overflow: hidden;
background-color: #3D174A;
border-top: 2px solid #794887;
border-bottom: 2px solid #794887;
width: 100%;
}
/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
width: 180px;
}
/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#primary-nav ul {
position: absolute;
top: auto;
display: none;
}
#primary-nav ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}
#primary-nav li {
margin-left: -1px;
float: left;
}
#primary-nav li li {
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
}
#primary-nav li a {
border-right: 2px solid #794887;
border-left: 2px solid #794887;
color: #FAF7FA;
}
#primary-nav li li a {
border: 1px solid #794887;
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #3D184B;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive {
background-color: #660066;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth {
background-image: url(modules/MenuManager/images/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #660066;
}
/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, #primary-nav li:hover ul, #primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul, #primary-nav li.menuparenth ul ul {
display: none;
}
#primary-nav li:hover ul, #primary-nav ul li:hover ul, #primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul, #primary-nav ul li.menuparenth ul, #primary-nav ul ul li.menuparenth ul {
display: block;
}
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
#primary-nav li li a {
height: 1%;
}
-->
Hope this not being too cheeky but I have bitten off more than I can chew!
Regards
Afroken
[edited by: DrDoc at 8:29 pm (utc) on Mar. 25, 2006]
#primary-nav li {width: 16%;}
It won't be totally flush, though
PS: you shouldn't put links on this forum, the moderators will delete it.
