can't fit li's to ul width - SOMEWHAT RESOLVED
Permalink 1 user found helpful
I'm working onhttp://eclinical.exstream.tv and trying to arrange the 2nd level menu li's to fit the width of the ul. If you look at the site and hover over "CONTACT" in the header nav you'll see that "INFO" floats way left and "DIRECTIONS" floats way right. I have it set this way because it works for "ABOUT US" and "SERVICES" in the first level but I'm not sure if there's a better way to do this. If I was doing this without Concrete5 I know I could add id's to specific li's but I'm not sure how to create an id through this cms.
My css is as follows:
header nav ul { display: inline-block; margin: 0; padding: 0; }
header nav ul li { float: left; border: 1px solid transparent; padding-top: 1px; }
header nav ul li a { display: block; color: #fff; font-size: 18px; padding: 12px 8px 4px 8px; text-decoration: none; }
header nav ul li:hover a { color: #000000; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ }
header nav ul li.nav-selected, header nav ul li.nav-path-selected { border-radius: 3px; border-color: transparent #FFFFFF #FFA32A transparent; }
header nav ul li a:hover { color: #000; }
header nav ul ul { display: none; position: absolute; left: 0; margin: 48px -184px; background-color: #FFFFFF; z-index: 110; line-height: 15px; text-align: center; width: 960px; top: -13px; border-radius: 8px; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.3); }
header nav ul ul:hover a{ color: #6CB5DA; }
header nav ul li:hover ul { display: block; }
header nav ul li ul li { float: left; width: 19.7%; padding-bottom: 0px; border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF; border-radius: 8px}
header nav ul li ul li.lastItem { float: right; margin: 0 auto; }
header nav ul li ul li a { min-height: 280px; border-width: 1px; padding: 20px 15px 20px 20px; color: #0069AE; font-size: 15px; top: 0px; display: block; position: relative; text-align: left; text-decoration: none; }
header nav ul li ul li span { display: block; margin: 10px auto; color: #5D5A51; line-height: 20px; letter-spacing: .5px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
header nav ul li ul li a:hover { background: none; color: #000; background: -moz-linear-gradient(-55deg, rgba(125,185,232,.4) 0%, rgba(125,185,232,0) 80%); /* mozilla */ background: -webkit-linear-gradient(-55deg, rgba(125,185,232,.4) 0%,rgba(125,185,232,0) 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-55deg, rgba(125,185,232,.4) 0%,rgba(125,185,232,0) 80%); /* Opera 11.10+ */ background: -ms-linear-gradient(-55deg, rgba(125,185,232,.4) 0%,rgba(125,185,232,0) 80%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b75af', endColorstr='#0b75af',GradientType=0 ); /* IE6-8 fallback on horizontal gradient */}
header nav ul li ul li:hover { color: #000; }
header nav ul li ul li.nav-selected { border: none; }
Any help would be appreciated.
My css is as follows:
header nav ul { display: inline-block; margin: 0; padding: 0; }
header nav ul li { float: left; border: 1px solid transparent; padding-top: 1px; }
header nav ul li a { display: block; color: #fff; font-size: 18px; padding: 12px 8px 4px 8px; text-decoration: none; }
header nav ul li:hover a { color: #000000; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 0%,rgba(255,255,255,.7) 95%,rgba(255,255,255,.7) 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ }
header nav ul li.nav-selected, header nav ul li.nav-path-selected { border-radius: 3px; border-color: transparent #FFFFFF #FFA32A transparent; }
header nav ul li a:hover { color: #000; }
header nav ul ul { display: none; position: absolute; left: 0; margin: 48px -184px; background-color: #FFFFFF; z-index: 110; line-height: 15px; text-align: center; width: 960px; top: -13px; border-radius: 8px; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.3); -webkit-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.3); }
header nav ul ul:hover a{ color: #6CB5DA; }
header nav ul li:hover ul { display: block; }
header nav ul li ul li { float: left; width: 19.7%; padding-bottom: 0px; border-color: #FFFFFF #FFFFFF #FFFFFF #FFFFFF; border-radius: 8px}
header nav ul li ul li.lastItem { float: right; margin: 0 auto; }
header nav ul li ul li a { min-height: 280px; border-width: 1px; padding: 20px 15px 20px 20px; color: #0069AE; font-size: 15px; top: 0px; display: block; position: relative; text-align: left; text-decoration: none; }
header nav ul li ul li span { display: block; margin: 10px auto; color: #5D5A51; line-height: 20px; letter-spacing: .5px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
header nav ul li ul li a:hover { background: none; color: #000; background: -moz-linear-gradient(-55deg, rgba(125,185,232,.4) 0%, rgba(125,185,232,0) 80%); /* mozilla */ background: -webkit-linear-gradient(-55deg, rgba(125,185,232,.4) 0%,rgba(125,185,232,0) 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-55deg, rgba(125,185,232,.4) 0%,rgba(125,185,232,0) 80%); /* Opera 11.10+ */ background: -ms-linear-gradient(-55deg, rgba(125,185,232,.4) 0%,rgba(125,185,232,0) 80%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b75af', endColorstr='#0b75af',GradientType=0 ); /* IE6-8 fallback on horizontal gradient */}
header nav ul li ul li:hover { color: #000; }
header nav ul li ul li.nav-selected { border: none; }
Any help would be appreciated.
sorry it's so crazy looking, it's formatted lengthwise in notepad++
JordanLev has a great tutorial on creating a custom nav template with Classes and ID's to your liking.
Here is the link. I hope it helps out a bit.
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Here is the link. I hope it helps out a bit.
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Sorry for the late reply, I've had a bunch of other issues as I made the site live. I was too far along with having edited the php of the autonav that came with my theme to start a new template. The way I managed to solve this problem was by using the :first-child css selector. I applied different widths to the children of the first li, as the rest of the menu. I know that if the site gets developed further I'll have to go back and redo the menu completely with a new template to achieve my objectives but this will do for now on the live site. thanks for the help.
