|
CSS - Odd Shaped Vertical Rollover Nav Menu Problem
i have a vertical rollover menu which has odd shaped boxes, i'd like these to rollover without hiding those parts of the image that protrude.
[IMG](URL address blocked: See forum rules)[/IMG] basically they have to butt up underneath each other, but not loose the outside top edges on the rollover state. i also want the text aligned right, but have a negative indent of 10 or so pixels. you'll see what I mean upon viewing the example. thanks in advance! current CSS; ul { list-style: none; margin: 0; padding: 0; text-align: right; position: relative; } ul a { display: block; width: 141px; height: 44px; line-height: 58px; text-decoration: none; background: url(../images/gif/menuOverA.gif) no-repeat left; } #home #menu .home a, #about #menu .about a, #choose #menu .choose a, #services #menu .services a, #health #menu .health a, #testimonials #menu .testimonials a, #contact #menu .contact a { background: url(../images/gif/menuOverA.gif) no-repeat right; cursor: default; color: White; } #menu a:hover { background: url(../images/gif/menuOverA.gif) no-repeat right; color: White; } #about #menu .about li { background-color: Aqua; } and html; <div id="menu"> <ul> <li class="home"><a href="index.html">HOME</a></li> <li class="about"><a href="aboutUs.html">ABOUT US</a></li> <li class="choose"><a href="whyChoose.html">WHY CHOOSE US</a></li> <li class="services"><a href="services.html">SERVICES</a></li> <li class="health"><a href="healthSafety.html">HEALTH & SAFETY</a></li> <li class="testimonials"><a href="testimonials.html">TESTIMONIALS</a></li> <li class="contact"><a href="contactUs.html">CONTACT US</a></li> </ul> </div> Similar TutorialsLink: http://ajwells.org/mtmp/index.html How do I get the menu there to center on the screen? Ive tried a number of things and nothings worked as of yet. Or better yet, is there an easy way to make the menu on the left side going downward rather than left to right? Either would be great. thanks for the help. Hi ! Me again :P So this is a simple test i made to try this out. But I ran into a problem. Take a look for yourself: (view-source for xhtml and css) http://fotoz.hit.bg/test/menu.html The problem is that annoying flickering that happens when you roll over. Any ideas how to fix it ? And most importantly why does it occur? Thanks! p.s I should explain what i wanted to do here. Basicly 1 big background image to the <div>. It will be holding the "over" state of all the buttons. At the same time the <a> elements will be holding images of the "normal" state buttons, and when you hover over them they will disappear and you will see the "hover" state below. It works but I get the flickering with visibility:hidden and even if i just move the img out of the way I have a vertical flyout menu setup on the left side of the page with the associated links arranged in vertical columns next to each menu selection. It is working fine 99% of the time but I am getting some reports that the vertical columns do not touch the main selection column so that when the user moves the cursor to the right to go to the selection list there is a break between the columns and the column disappears before a selection can be made. I have not been able to duplicate this on my IE8 and it works fine with Firefox. This makes it rather hard to trouble shoot so I am hoping someone else has had this problem and know what I am talking about. It seems to only happen to users with IE7 and IE8 but not most IE8 users. Is there perhaps some code I need to add to the CSS file that will solve this problem? THX EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hello guys Please see the attached .zip, it contains a .swf file which shows what I am trying to accomplish in css, and a html file with the progress i've made. I would like there to be no images involved. I have been trying for a good few days now. I can almost get it to work in IE (Except the 1px gap between button and end-block), but in other browsers its just not working. Any help is greatly appreciated, Cheers, Rob I've finally finished a site, but I am having slight problems with the rollover menu. I was able to post it online, so check out this page, first in Firefox, then in IE. http://uwopartners.org/students/schuhm65/Plexus/main.html I believe the problem is that the conditional IE statements add a table within the main menu links. This is to get around using javascript, but when you hover over the main links, the background is changed and expanded to include the submenu. Can anyone figure out a work around for this, so the appearance is similar to Firefox? Here is the css: Code:
html {
margin:0;
padding:0;
}
body {
margin: 0;
padding: 5px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 76%;
background-color: #eee;
color: #000;
}
.clear {
margin:0;
padding:0;
clear:both;
font-size:0;
line-height:0;
}
/* Header container */
#header {
margin: 0;
padding: 0;
border: 1px solid #000;
color: #fff;
text-align: center;
background: url("images/classroom.gif") repeat-x;
}
img#logo {
margin: 10px 0px 0px 0px;
border: 4px solid #FFF;
}
#header h1 {
margin: 5px 0px 5px 0px;
font-size: 2.5em;
font-weight: bold;
letter-spacing: 0.125em;
}
#banner
{
margin: 0;
padding: 0;
background: #235 url("images/banner.gif") no-repeat 50% 50%;
border: 1px solid #000;
}
#banner img
{
width: 0;
margin-left: -200px;
padding-left: 1px;
}
/*topNav Container */
#topNav {
margin: 10px 0px;
padding: 0;
/* border: 1px solid #ff0; */
}
#searchBox {
margin: 0;
padding: 0;
float: left;
width: 150px;
height: 125px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
#nav {
margin: 0px 0px 0px 153px;
padding: 0px;
/* border: 1px solid #0f0; */
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li#nav-foundation, #nav li#nav-submission, #nav li#nav-recipients, #nav li#nav-volunteer {
margin: 0px 0px 0px 8px;
padding: 0;
float: left;
display: inline;
width: 23%;
height: 125px;
border: 1px solid #000;
background-repeat: no-repeat;
background-position: 50% 100%;
}
#nav table {
border-collapse: collapse;
}
#nav a.mainMenu {
display: block;
font-size: 18px;
color: #FFF;
background-color: #c7013f;
text-decoration: none;
text-align: center;
}
#nav ul ul {
margin: 0 auto;
padding: 0;
display: none;
width: 90%;
/* border: 1px solid #0f0; */
}
#nav ul ul li {
margin: 4px 0px;
padding: 0;
border: 1px solid #fff;
}
#nav table a {
font-size: 15px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
background-color: #c7013f;
}
#nav ul ul li a {
font-size: 15px;
display: block;
color: #fff;
text-decoration: none;
text-align: center;
background-color: #c7013f;
}
#nav ul li:hover a.mainMenu , #nav ul a.mainMenu:hover {
background-color: #235;
}
#nav ul li:hover ul, #nav ul a.mainMenu:hover ul{
display: block;
}
#nav ul ul li:hover a, #nav ul ul a:hover {
background-color: #235;
}
/* nav Headings
#foundation #nav-foundation a.mainMenu, #submission #nav-submission a.mainMenu,
#volunteer #nav-volunteer a.mainMenu, #recipients #nav-recipients a.mainMenu {
background: #235;
}
#charter #nav-foundation ul, #committee #nav-foundation ul, #schedule #nav-foundation ul {
display: block;
}
#charter #nav-foundation ul #nav-charter a, #committee #nav-foundation ul #nav-committee a,
#schedule #nav-foundation ul #nav-schedule a {
background: #235;
}
*/
/* Side Navigation */
#sideNav {
float: left;
width: 151px; /* 1px adjustment for no border */
margin-right: 10px;
}
/* sideNav Boxes */
#sideNav .box {
margin-bottom: 10px;
padding: 5px 5px 5px 50px;
border: 1px solid #000;
height: 90px; /* add 10 for padding */
background: #235;
color: #fff;
background-repeat: no-repeat;
}
#sideNav a {
font-size: 1em;
color: #fff;
text-decoration: none;
}
#sideNav #calendar {
margin: 0px;
}
#sideNav img {
border-style: none;
width: 150px;
height: 150px;
}
#sideNav a:hover {
font-weight: bold;
}
/* Main Content Container */
#main {
float: auto;
padding: 10px;
border: 1px solid #000;
background: #fff;
margin-left: 165px;
}
/* Page Footer */
#footer {
clear: both;
background: #235;
border: 1px solid #000;
color: #aaa;
text-align: center;
margin: 10px 0px 0px 0px;
padding: 20px;
}
#footer a {
color: #fff;
font: underline;
}
#footer a:hover {
font-weight: bold;
letter-spacing: .1em;
}
And here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Welcome!</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link href="style.css" rel="stylesheet" media="screen" type="text/css" /> </head> <body> <!-- Header --> <div id="header"> <span> <img id="logo" src="images/plexusLogo.jpg" alt="Plexus"/>®</span> <h1>Helping Hands</h1> <div id="banner"> <img src="images/banner.gif" width="200" height="30" alt="Providing Resources - Supporting Communities - Affecting Lives"> </div> </div> <!-- Navigation Menu --> <div id="topNav"> <!-- Search Box --> <div id="searchBox"> Welcome, <b>John Doe</b>! [<a href="#">Admin</a>] [<a href="#">Sign Out</a>] <form action="" name="search"> <input type="text" size="14" name="searchQuery" /> <input type="submit" value="Search" /> </form> </div> <div id="nav"> <ul> <li id="nav-foundation" style="background-image: url(images/foundation.jpg)"> <a class="mainMenu" href="#">Foundation <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li id="nav-charter"> <a href="#">Charter</a> </li> <li id="nav-committee"> <a href="#">Committee</a> </li> <li id="nav-schedule"><a href="#">Schedule</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="nav-submission" style="background-image: url(images/submission.jpg)"> <a class="mainMenu" href="#">Submission <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li id="nav-guidelines"> <a href="#">Guidelines for Giving</a> </li> <li id="nav-submit"> <a href="#">How to Submit a Request</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="nav-recipients" style="background-image: url(images/recipients.jpg)"> <a class="mainMenu" href="#">Recipients <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li> <a href="#">Sub One</a> </li> <li> <a href="#">Sub Two</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li id="nav-volunteer" style="background-image: url(images/volunteer.jpg)"> <a class="mainMenu" href="#">Volunteer <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li id="nav-program"> <a href="#">Volunteer Program</a> </li> <li id="nav-tracking"> <a href="#">Tracking Hours</a> </li> <div class="clear"> </div> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <div class="clear"> </div> </ul> <div class="clear"> </div> </div><!-- nav --> <div class="clear"> </div> </div><!-- topNav --> <!-- Side Navigation --> <div id="sideNav"> <div class="box" style="background-image: url(images/CompanyEvents.gif)"> <a href="#">Check out the events at Plexus!</a></div> <div class="box" style="background-image: url(images/CommunityEvents.gif)"> <a href="#">Check out the community events sponsored by Plexus!</a></div> <div class="box" style="background-image: url(images/EventPhotos.gif)"> <a href="#">Check out the photos from previous events!</a></div> <div class="box" style="background-image: url(images/AddEvent.gif)"> <a href="#">Check out the photos from previous events!</a></div> <div id="calendar"> <a href="#"><img src="images/calendar.jpg"/></a> </div> </div> <!-- Main Content --> <div id="main"> The Foundation's goal is to provide support that can have a meaningful impact in markets and communities that are strategically alligned with Plexus Corp.'s mission as the Product Realization Company. To accomplish this goal, the PCCF's charitable giving is allocated into three primary categories: <br /><br /> <ul style="padding-left: 32px;"> <li><b>1. Technology:</b> Supporting innovation and technology-related education</li> <li><b>2. Healthca </b> Enhancing the quality of medical care</li> <li><b>3. Community:</b> Making the communities we live in a better place</li> </ul> <br />Maecenas ut quam rutrum lacus tempus fringilla. Maecenas aliquam tempus libero. Mauris porttitor. Etiam at risus a est sodales cursus. Cras ut ipsum. Vivamus at turpis ac lorem posuere rutrum. Vestibulum nisi nulla, rhoncus a, rhoncus sit amet, placerat ac, justo. Nam consequat mauris ut orci. Etiam eleifend. Ut sem mauris, imperdiet vitae, consectetuer a, ullamcorper non, nibh. Curabitur sapien. Fusce ultricies, ligula eget scelerisque tempus, nisi nisl convallis dui, ut scelerisque magna est sit amet leo. Suspendisse facilisis tortor faucibus elit. Sed diam. Duis imperdiet blandit mauris. Etiam cursus erat vel ligula. <br /><br />Sed vel urna. Quisque mattis orci sit amet dolor. Sed commodo felis at diam. Aenean ut nisl a mauris varius hendrerit. Vivamus feugiat risus in lacus. Ut eleifend velit. In blandit. Mauris bibendum, nunc at ullamcorper egestas, eros nibh faucibus diam, tincidunt placerat purus justo vel sapien. Curabitur feugiat scelerisque odio. Nullam nec augue ut libero faucibus ornare. Suspendisse tortor mauris, luctus sit amet, tempor vel, facilisis ac, lacus. Phasellus ultrices, massa eget consequat dapibus, dui felis interdum sapien, sed fringilla magna neque eu est. Vestibulum luctus vehicula eros. <br /><br />Phasellus massa metus, blandit eget, porttitor at, faucibus ac, lorem. Integer id augue vitae magna ullamcorper varius. Nam id turpis. Integer venenatis tincidunt est. In hac habitasse platea dictumst. Proin id turpis fermentum neque sodales ullamcorper. Quisque ante. Morbi sit amet quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nulla erat, sollicitudin in, imperdiet vitae, elementum eu, sapien. Nulla nonummy nisi eget quam. Suspendisse potenti. <br /><br />Morbi quis enim ac libero pulvinar scelerisque. Morbi eleifend, nulla eget egestas tincidunt, augue libero rutrum neque, non pharetra orci risus vel diam. Nunc eget lorem. Integer vitae erat. Donec non diam. Nulla a risus sit amet orci consectetuer tincidunt. Morbi sapien. Ut scelerisque, ipsum quis egestas blandit, magna nisl laoreet ligula, at ornare lorem augue nec purus. Praesent scelerisque, lectus sed venenatis lacinia, ipsum nulla accumsan nibh, id dapibus lectus libero ultricies ipsum. Etiam aliquet vehicula nisi. Praesent consectetuer, odio eget posuere blandit, dui sapien pharetra enim, id iaculis elit est sed libero. Praesent in eros non augue commodo nonummy. <br /><br />Nulla placerat feugiat neque. Vivamus commodo condimentum neque. Aenean at enim et justo malesuada molestie. Cras lacinia tincidunt magna. Vivamus convallis, tellus nec convallis blandit, diam nisi facilisis justo, ut consectetuer lectus neque et sapien. Quisque mattis dolor vel mi. Aliquam risus odio, euismod at, sodales non, auctor a, leo. Pellentesque imperdiet odio quis velit. Quisque pharetra, quam vel volutpat molestie, mi mauris auctor neque, eget tempus massa nibh vel enim. Donec vitae arcu at pede feugiat suscipit. Quisque sollicitudin. Cras ac enim a lorem nonummy consectetuer. Donec tortor nulla, porttitor mattis, molestie eu, pharetra elementum, libero. Integer nonummy viverra quam. Sed posuere urna non elit. Morbi et sem quis neque tempor tincidunt. <br /><br />Nam velit. Nam eget lectus sit amet nibh aliquam pulvinar. Pellentesque quam. Integer mauris est, dapibus eu, laoreet at, vehicula nec, tellus. Nam urna diam, nonummy ac, dictum ut, accumsan id, orci. Ut iaculis. Praesent sapien quam, vehicula vitae, imperdiet vitae, dictum at, lorem. Morbi nisl purus, interdum nec, sollicitudin at, eleifend vel, sem. Phasellus lacinia. Duis ut ligula. Morbi ut felis ac quam feugiat eleifend. Vestibulum nibh mauris, interdum ac, vehicula a, porttitor accumsan, ligula. Aenean vehicula tortor vel turpis. In hac habitasse platea dictumst. Suspendisse id sem. Sed fermentum, nisi at vestibulum cursus, sem nibh aliquet arcu, non vehicula turpis felis et dui. Pellentesque ligula augue, hendrerit quis, rhoncus vitae, hendrerit fringilla, nibh. </div> <div id="footer"> <a href="#">Feedback</a> | <a href="#">Contact</a> | <a href="#">Site Map</a> | <a href="#">Privacy</a> | <a href="#">Legal</a> <br /><br /> Donec aliquet tincidunt velit. Aliquam erat volutpat.<br /> Mauris ante. Suspendisse a leo ut leo tristique porta.<br /> Aliquam iaculis sem tristique massa fringilla faucibus. </div> </body> </html> hi, been trying to do this for a few hours now and pretty much struggling a bit. basically I have a <ul> and when I hover the mouse over one of the list links, I wantt a sub menu to appear which can also be clicked. I have trawled around abit to see if I could get anything but have come up empty handed. can someone point me in the right direction here. thanks!! Hi guys I am trying to place a top menu on the side of my site, I can't seem to get the rollover to work. This is what I have on my css. Thanks in advance #topmenu ul { list-style: none; margin: 20px; padding: 0; } #topicons { width: 76px; position: absolute; left: 800px; background: url(../images/top-icons.gif); margin: 0px; padding: 50px; height: 146px; } #topicons li { list-style-type:none; margin: 0; } #topicons li a { background-image:url('../images/top-icons.gif'); background-repeat:no-repeat; margin: 0; padding: 0; display: block; height: 44px; text-indent: -9999px; overflow: hidden; } #topicons li a.item1 {background-position:0px 0px;} #topicons li a:hover.item1 {background-position:0px -49px;} #topicons li a.item2 {background-position:0px -90px;} #topicons li a:hover.item2 {background-position:0px -144px;} #topicons li a.item3 {background-position:0px -188px;} #topicons li a:hover.item3 {background-position:0px -280px;} Hello everyone, I have a fairly basic CSS question to ask, but since I'm new to CSS, I'm a bit stumped. If you check out my Blog (at http://goblinsatemyblog.com), on the sidebar you'll see that the menu hovers are colored green. However, on a few of the widgets displayed, rolling over the menu truncates the link down a few pixels, which doesn't look that great. I applied "display: block" tags and a background color to the widgets to create the rollover, but some still work properly and others don't. What do I need to do to keep the rollover links from acting up? Here's the code pertaining to the two CSS files in the theme. Code: .custom li.widget li a:hover, .custom li.linkcat li a:hover { display: block; padding: 0 0 0 0.3em; color: #fff; background: #009933; }
Code: #rss { width: 20em; height: 190px; margin: 0 0 1.0em 0; background: url('images/rss.png') 50% 0 no-repeat; text-align: center; }
#rss a { display: block; width: 202px; height: 184px; margin: 0 auto; }
ul.sidebar_list { list-style: none; }
ul.sidebar_list li.widget, ul.sidebar_list li.linkcat { width: 16.6667em; margin: 0 0 2.8em 0; font-size: 1.2em; line-height: 1.6667em; float: left; border-bottom: 2px solid #009933; }
li.widget p { margin: 0 0 1.66667em 0; }
li.widget ul, li.linkcat ul { list-style: none; margin: 0 0 0.8333em 0; }
li.widget li, li.linkcat li { padding: 0 1.0em 0 1.16667em; background: url('images/bullet.gif') 0 0.4167em no-repeat; }
li.widget li a:hover, li.linkcat li a:hover { color: #575757; }
I picked out the part of the CSS files that I think are relevant, but I can past the entire code if requested. Thank you in advance! I'm having a problem getting the text of an <a> tag to be what I want where I want. No one in the javascript forum wants to tackle this. maybe it is a css thing. I made this interlocking tabbed menu which I do by javascript updating the position of the background graphic and its neighbor. I have done buttons before with a background and text overlayed. but they were always <input>'s and whatever I put in the value field just kinda showed up on top of the background graphic. These are actually <a>'s I assumed the text I put in between the <a> and the </a> tag would just show up but it doesn't. I tried making special divs for them but then I run in to position problems. If I make it absolute the first one is fine, then they all pile on top of it. If I make it relative, NONE of them show. Here is a test http://colleenweb.com/tests/bartest.php There is nothing like css for turning my brain into industrial waste. This has to be doable. Someone who understands this stuff please advise? If you look at Lakelandedc.com you notice the menu is very weird when trying to go from each link to the other links... how can i fix the menu so it is easier to navigate? Code: /* CSS Document */
#menu
{
text-align:left;
width:155px;
background-color:#084D9C;
margin:0;
padding:0;
}
#menu ul
{
list-style:none;
margin:0;
padding:0;
}
#menu a, #menu h2
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
display:block;
border-width:1px;
border-style:solid;
border-top:solid 2px;
border-color:#ccc #888 #555 #bbb;
margin:0;
padding:2px 3px;
}
#menu h2
{
color:#fff;
background:#BA5D92;
text-transform:uppercase;
}
#menu a
{
color:#FFF;
text-decoration:none;
}
#menu ul a:hover
{
color:#fff;
background-color:#091F51;
text-decoration:none;
}
#menu ul
{
position:relative;
}
#menu ul ul
{
position:relative;
top:0;
left:10%;
width:100%;
}
s#menu a:hover {
}
.submenu
{
background-color:#9A1F61;
color:#fff;
}
div#menu ul ul,
div#menu ul ul li:hover ul ul
{
display:none;
}
div#menu ul:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
I have a vertical menu with a sub menu. To clarify the sub menu, there is a red vertical bar. It has a problem with IE 7 - when hovering over the links, the bar goes away and comes back. This is pretty hard to explain, so here is one of the webpages with this problem: http://030c1db.netsolvps.com/business-solutions.php (we are using a temp hosting server until it is finished - thus the odd domain name). If you look on the left, under the "In this section" you will see the vertical red bar. (the problem is only in IE7). Here is my css and code: CSS: Code:
.redbar {
background-image: url(/images/NavSubBar.jpg);
background-repeat: repeat-y;
background-position: 26px;
}
#wrapper #container #content #content_inner #leftnav_i ul #leftnav_i_sub a {
background:none;
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 11px;
margin-left:25px;
margin-top:-6px;
}
Code: <ul> <div class="redbar"> <!--........Main Links...... --> <li div id="leftnav_i_sub"><a href="#">Main Menu 1</a></li> <li div id="leftnav_i_sub"><a href="#">Main Menu 2</a></li> </div> </ul> <div class="clear"></div> <!--........Sub links...... --> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <!--........Main Links Continued...... --> <li div id="leftnav_i_sub"><a href="#">Main Menu 3</a></li> <li div id="leftnav_i_sub"><a href="#">Main Menu 4</a></li> </ul> tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.html tomm[.]bnesfinest[.]net/underattackwebsite/test/menu.css For some reason, it refuses to rollover... in the actual site I've tried implementing it, all of them come up in the secondary start (black text, blue bg) rather than the default state (white text, transparent bg). Neither times does it actually "rollover". What am I doing wrong? Code from: webvamp[.]co[.]uk/blog/coding/graphical-css-rollover-menu/#example hi, yeah I got a rollover menu working on my comp (localhost), but when I view it from outside my LAN (MSIE v6) my rollover events are not working; the menu item text is not changing colour on rollover, and my sub menu is not coming up either. does this ring any bells? help much appreciated! Hi... I have a big problem with FireFox, and especially Safari... http://www.laventanaband.com/Music%20Samples.htm When you roll over a pop out menu item (like "music and pics") these problems occur: In FireFox... if you roll past the edge of the frame, the menu item disappears. In Safari... the pop up menu section disappears below the content menu (!). I this doesn't happen on the main page because the content area does not use overflow:auto; .... it uses overflow:hidden; Somehow the use of that cause those problems... Here is my css doc. Any ideas? Thanks in advance! Regards, -Max Dykstra Long time reader, first time poster. I have an issue with a css vertical menu I've made but first things first. My target browser is IE7, this is a corporate intranet so I have some control over this. However, we do run alot of pcs with Firefox but, of course, the problem doesn't exist with this browser. Here's the issue: The div#leftbox contains the menu but when the list elements extend into the center div (div#middlebox) you can see the anchors and finger them but if you try to move to the next list item the submenu disapears? It's like it recognizes the display: block on the list element but not on the anchor? Another weird thing is that if I extend the div#leftbox width to accommodate the size of the menu and the submenu it works fine but only if i have a background-color applied to the #leftbox. If I leave it transparent it behaves as before. Here's the markup and css... index.asp Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title>Intranet</title>
<link href="/styles/<%Response.Write(Session("session_theme"))%>/screen.css" type="text/css" media="screen" rel="stylesheet" />
<link href="/styles/print.css" type="text/css" media="print" rel="stylesheet" />
<style type="text/css">@import url(/styles/<%Response.Write(Session("session_theme"))%>/calendar-win2k-1.css);</style>
<script type="text/javascript" src="/calendar/calendar.js"></script>
<script type="text/javascript" src="/calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="/calendar/calendar-setup.js"></script>
<link rel="SHORTCUT ICON" href="/favicon.ico" />
</head>
<body>
<div id="topbar">
<!--#include virtual="/inc/toolbar.asp" -->
</div>
<div id="leftbox">
<!--#include virtual="/inc/menu.asp" -->
</div>
<div id="rightbox">
<!--#include virtual="/inc/rightbox.asp" -->
</div>
<div id="middlebox">
<h1> Welcome to the IntraNET</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac pede. Cras tristique, ipsum in scelerisque lobortis, diam nisl lobortis ipsum, eu ultricies orci justo a purus. Integer pellentesque, dui ut ullamcorper pellentesque, diam sapien venenatis augue, id rutrum lorem nibh non ligula. Nullam mattis. Donec eget pede. Donec blandit rhoncus erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque lobortis cursus augue. Maecenas elit. Nullam viverra justo sed mi. Cras porta tellus non justo. Fusce adipiscing molestie elit. Nullam vulputate felis sed mi. Curabitur velit sem, bibendum ut, tempus sed, sodales vitae, libero. Aliquam nisl. Pellentesque tellus dolor, elementum sed, semper suscipit, pretium vitae, mauris. Vivamus sem.
</p>
</div>
</body>
</html>
Here's the menu.asp include... Code: <ul id="nav"> <li><a href='/departments/reports/index.asp'>Reports</a> <ul> <li><a href=''>EOD<span>End of Day Reports</span></a></li> <li><a href=''>EOM<span>End of Month</span></a></li> <li><a href=''>On Demand Reports<span>Reports sent to the web queue</span></a></li> <li><a href=''>Office Reports<span>A collection of front office and customer service reports</span></a></li> <li><a href=''>Warehouse Reports<span>A collection reports for warehouse operations</span></a></li> <li><a href=''>Merchandising Reports<span>EIS and vendor reports for merchandising</span></a></li> <li><a href=''>Accounting Reports<span>A collection of account reports</span></a></li> </ul> </li> <li> <a href='/index.asp'>Home</a> </li> </ul> and here's the css Code:
body {background: #fff; font-size: 62.5%; color: #033; font-family: Verdana, Arial, san-serif;}
.alignright {margin-top: 0; text-align: right;}
.small {font-size: .9em;}
.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}
p { font-size: 1.2em; line-height: 1.5em; }
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #099;
z-index: 1;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #006;
background: #ccc;
padding: 5px;
border: 1px solid #006;
border-bottom: 0;
}
ul li a:hover { color: #600; background: #fff; display: block;} /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/* Begin Tool Tip Span */
span {
display: none;
}
a:hover span {
z-index: 1;
position: absolute;
top: 1px;
left: 200px;
width: 220px;
display: block;
background: #fff;
border: 2px solid #006;
padding: 10px 10px 10px 5px;
}
/* End Tool Tip Span */
/*******************************************************************************
Positioning rules
*******************************************************************************/
div#leftbox {
position: absolute;
left: 10px;
width: 150px;
color: #333;
padding-top: 10px;
background-color: #fff;
z-index: 1;}
#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #ccc;
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
padding: 10px;
background-color: #efefef;
}
div#rightbox {
position: absolute;
right: 25px;
width: 30%;
color: #666;
padding-top: 10px;
background-color: transparent;}
div#topbar {
margin: 0;
padding: 0;
width: 100%;
background-image: url('/images/default-topbar-bg.jpg');
background-repeat: repeat-x;
}
div#search {
color: #ffc;
font-size: 1.1em;
letter-spacing: .75em;
margin: 0;
padding: 0;
position: absolute;
top: 16px;
left: 20px;
word-spacing: 1em;
}
Your help and advice is most welcome and appreciated. Mark html code: Code: <div id="sidebar"> <h2>South Winds Park Info</h2> <ul> <li><a href="park-info/contact-info" title="Contact Info">Contact Info</a></li> <li><a href="park-info/homes-for-rent" title="Homes for Rent">Homes for Rent</a></li> <li><a href="park-info/homes-for-sale" title="Homes for Sale">Homes for Sale</a></li> <li><a href="park-info/office-services" title="Office & Services">Office & Services</a></li> <li><a href="park-info/meet-the-staff" title="Meet the Staff">Meet the Staff</a></li> </ul> <h2>South Winds Resources</h2> <ul> <li><a href="calendar" title="Calendar">Calendar</a></li> <li><a href="resources/forms-and-documents" title="Forms and Documents">Forms and Documents</a> <ul> <li><a href="resources/forms-and-documents/by-laws" title="By Laws">By Laws</a></li> <li><a href="resources/forms-and-documents/prospectus" title="Prospectus">Prospectus</a></li> <li><a href="resources/forms-and-documents/rules-regulations" title="Rules & Regulations">Rules & Regulations</a></li> </ul> </li> <li><a href="resources/special-events" title="Special Events">Special Events</a></li> <li><a href="resources/maintenance" title="Maintenance">Maintenance</a> <ul> <li><a href="resources/maintenance/fees" title="Fees">Fees</a></li> <li><a href="resources/maintenance/trash" title="Trash">Trash</a></li> </ul> </li> <li><a href="resources/faq" title="FAQ">FAQ</a></li> </ul> </div> CSS Code: Code: #sidebar ul{
margin:10px 0 30px 0; padding: 0;
text-align:right;
}
#sidebar li a, #nav li {
display:block;
}
#sidebar li {
list-style: none;
position: relative;
}
#sidebar li a {
padding: 1em 2em;
text-decoration: none;
color: white;
background:url(images/design/listBottomLine.png) bottom right no-repeat;
}
#sidebar li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#sidebar li ul {
display: none;
position: absolute;
left: 100%;
top: 0px;
padding: 0; margin: 0;
z-index:100;
}
#sidebar li:hover > ul {
display: block;
}
#sidebar li ul li, #nav li ul li a {
float: none;
z-index:1000;
}
#sidebar li ul li {
_display: inline; /* for IE6 */
}
#sidebar li ul li a {
width: 150px;
display: block;
background-color:#2c9091;
}
This is a vertical menu (in the sidebar of a wordpress site). It works everywhere, except IE7. I have jquery that overcomes the hover issue for IE (I know it works because I got it from http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/ I have searched the internet for a solution: using csshover.htc (doesn't work) The one issue I think it might be is because I'm using an ancher tag, but using hover on the li element. (the ancher is child of li) I have read tutorials on this, so my anchor is display block, it has the width and height fixed. The other is I'm using z-index to pull the elements in front. I don't know if IE7 has issues with z-index. I'm sorry I cannot show a working (broken) example, it's a wordpress site on my local machine. I even used the exact css code from the tutorial linked above (slightly modified to be vertical not horizontal) which he says it works in every browser. What else could it be? Since the code should work. What else around this menu could be my problem? Thank you so much for your help (ready to pull my hair out) Hi, i'm tryin to make a vertical drop down menu for the left side of the menu shown here i was using the 'Suckerfish' tutorial as seen here, but i'm not exactly sure what is needed to make it a vertical style as opposed to a horizontal. I had the horizontal one functioning properly, but that's it. i was originally gonna go with the dhtml style drop down, but it seemed awful chunky. thanks I've followed a tutorial before in a book called Stylin' with CSS to create a CSS based horizontal drop down menu. Although not in the book, the code to create the equivalent vertical version was supplied. I've altered it to make it more like my horizontal version and it works in Firefox perfectly. In IE 7 and 6 however it does not. On the second level, a transparent 'top padding' appears, but it's not padding, or a margin. The code for the whole page is: (by the way this is my first post so I'm sorry if I used the wrong tool!) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {font:1em verdana, arial, sans-serif; behavior:url(csshover.htc);}
* {margin:0; padding:0;}
div#listmenu {float:left; font-size:.8em; background: #777; margin:20px;}
div#listmenu ul {margin:0; width:10em;}
div#listmenu ul li {position:relative; list-style-type:none; background: #AAA; border:1px solid #333; border-
top:none; font-weight:bold;}
div#listmenu ul li:first-child {border-top:1px solid #333;}
div#listmenu ul li:hover {background: #555;}
div#listmenu a {display:block; padding-left:6px; text-decoration:none; color:#666;}
div#listmenu a:hover {color:#EEE;}
* html div#listmenu ul {float:left; border-top:1px solid #333;}
div#listmenu ul li ul {margin:0 0 0 10em; position:absolute; width:13em; left:-2px; display:none; top:-1px;}
div#listmenu ul li ul li {width:100%; border:1px solid #333; border-top:none; background:#BBB; font-weight:normal;}
div#listmenu ul li ul li:first-child {border-top:1px solid #333;}
div#listmenu ul li ul li:hover {background:#999;}
div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {display:block;}
div#listmenu ul li ul li ul {visibility:hidden; top:-1px; left:3em;}
div#listmenu ul li ul li:hover ul {visibility:visible;}
</style>
</head>
<body>
<div id="listmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">The DYJA</a>
<ul>
<li><a href="#">About DYJA</a></li>
<li><a href="#">The Jazz Centre</a></li>
<li><a href="#">The Ensembles</a>
<ul>
<li><a href="#">Youth Stageband</a></li>
<li><a href="#">Youth Swing Orchestra</a></li>
<li><a href="#">Youth Jazz Orchestra</a></li>
<li><a href="#">Jazz Orchestra</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Exchanges</a>
<ul>
<li><a href="#">Herten (Germany)</a></li>
<li><a href="#">Limonest (France)</a></li>
</ul>
</li>
<li><a href="#">Recordings</a>
<ul>
<li><a href="#">Discography</a></li>
<li><a href="#">Ordering Information</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I can't understand why the code works in Firefox, but then the spaces appear in IE. I've uploaded it to my site as well at http://www.wattersisere.co.uk/devshed_vertical.html Thanks in advance for any help. i have a rollover menu that i made with image in a row absolutly positioned. for each button the html code is <div class="art"> <a href="#"> <span class="marginoffset"> Link text here (end tags) and the css is .art {z-index:2;position: absolute; left: 55px; top:0px; display:block; width:600px; height:70px; background: no-repeat 0px 0px; text-indent: -55px; line-height: 14.5em; text-decoration:none; color:#000; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: normal;} .art a {position: absolute;display:block; background:url(menuimg/btn.art_repro.jpg) no-repeat 0px 0px;line-height: 16.5em; text-align:left; text-decoration:none; text-wrapping: no-wrap; color:#999; font-size:0.7em;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:hover {position: absolute; background: url(menuimg/btn.art_repro_f2.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} .art a:active {position: absolute; background: url(menuimg/btn.art_repro_f3.jpg) no-repeat 0px 0px; line-height: 14.5em; text-align:left; text-decoration:none; color:#000; font-size:11px;font-family: Verdana, Arial, Helvetica, sans-serif;} . marginoffset ( position: relative; left: 0px; top:0px; |
|||||||