|
CSS - Css List Navigation With Rollover Background
I am going to heck right now trying to get this navigation to work.
Here is what it is A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise? Similar TutorialsHi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! hey guys. wanna use an UL as navigation. my problem is I am unsure how to get this centered and get that tail of black off. here is the code. Code: ul#navlist
{
padding: 0;
margin: 10;
list-style-type: none;
float: center;
width: 85%;
color: #fff;
background-color: #000000;
}
ul#navlist li { display: inline; }
ul#navlist li a
{
float: center;
width: 5em;
color: #fff;
background-color: #000;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}
ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}
html Code: <ul id="navlist"> <li><a href="#">Home</a></li> <li><a href="#">Band<font face="Times New Roman"> </font>Bios</a></li> <li><a href="#">Multimedia</a></li> <li><a href="#">Shows</a></li> <li><a href="#">Lyrics</a></li> <li><a href="#">Merchandise</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Guestbook</a></li> </ul> I'm just wondering everyones opinions on what the best way to do a rollover navigation button is. Should I use two background images and on hover switch the background image? Is using one background image and moving the background up or down to switch between the images better? Is there another better way to do rollovers that i'm missing? I'm not really sure if I like the loading time that it takes to load the roll over image, and am wondering what method you guys use to achieve a similar effect. i have set up my navigation menu like so: PHP Code: <style type='text/css'> div#nav { border:1px solid #000000; background-color:#F2F2F2; height:auto; } div#nav a { display:block; color:black; border:1px solid #FFFFFF; } div#nav a:hover { color:red; border:1px solid #000000; background-color:white; } </style> <div class='nav'> <a href='page1.html'>Page 1</a> <a href='page2.html'>Page 2</a> <a href='page3.html'>Page 3</a> <a href='page4.html'>Page 4</a> </div> the above works perfectly in Firefox, but doesnt in IE. IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row. Does IE not understand the display:block? as i think this is whats causing it... Hi All, I want to use images for a vertical navigation menu. I don't want to use background images, since I can't set width=100% with background images and I want the navigation panel to scale with em's. Instead, I want to use image swapping with the z-index. Rather than post my buggy solution and ask for help, maybe there is already a good sample I can work from? I want to avoid using a table with one column for this. I am new to CSS but here is my outline for what I am trying to do... Basically I want some block divs going down the navigation column. Each div represents a menu button showing the "off" image until someone hovers over it and then the z-index changes, allowing the "rollover" image to show instead. I would like the button div's to flow naturally down the column, but within each div I want to position the 2 images at top=0 left=0 relative to the button div. Seems simple right? Thanks for any suggestions or links. Savoye Hi, Could someone please help me to fix this error in my code. I created this website for my school, http://www.rit.edu/~cie/ but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this. Thanks in advance I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image. I would really like your help on this been trying to do it for weeks now!! Cheers Hey peeps, having trouble getting background images to display rollOvers for a <td> tag in IE (pc and mac). Works fine in firefox and safari. Heres me code: CSS: Code: .house_menu_cell {
background-image: url(../images/nav/homes/glo_house_nav_bg_0.gif); cursor:pointer;
}
.house_menu_cell:hover {
background-image: url(../images/nav/homes/glo_house_nav_bg_1.gif); cursor:pointer;
}
HTML: Code: <td class="house_menu_cell"> Any help would be great. Ive spent about an hour trauling the net with no luck! Cheers mish I can't seem to find this solution anywhere I want an image rollover with CSS to work in IE, but IE hates me so I can't get it. Here is one of my buttons: CSS: #tab_nav #home_tab { background: url(images/home.jpg) no-repeat; width: 97px; height: 33px; cursor: pointer; } #tab_nav #home_tab:hover {background: url(images/home-over.jpg) no-repeat; width: 97px; height: 33px; } Here is the HTML too in case you want it: <div id="tab_nav"> <div id="home_tab" onClick="javascript:window.location.href='index.php';"></div> </div> Now, the rollover works well in Mozilla, but it doesn't work in IE. Does anyone know how I can acheive this? Thanks BTW, here is the page Disregard pot I simply transposed li and a tag thanks anyway... Hi everyone, I just worked for two days to make my menu work on IE6. Now it works perfectly on IE6, but ironically it doesn't work on IE7 anymore. Basically, I have a two line menu bar. Each line consists of 9 squares, some are images that are links and some are just decoration images. Each line ("menu1" and "menu2") is an unordered list, with a background image of one of the menus. When one of the link squares is hovered, I want just this square to show a different place on the bottom of the background image. So what doesn't work? Only IE7 doesn't recognizes the link squares as links. No hover, No link. I can't navigate anywhere in IE7... Please help me...!! I've attached the relevant code, added comments and colored the parts that I think might cause the problem. html: Code: <div id="globalnav">
<ul id="menu1">
<li id="nav_home"><a href="../home/" title="Home">home</a></li>
<li id="nav_about"><a href="../about/main.htm" title="About us">about us</a></li>
<li id="nav_recruit"><a href="../recruit/" title="Recruit">recruit</a></li>
</ul>
<ul id="menu2">
<li id="nav_company" name="nav_company"><a href="../company/outline.htm" title="Company">company</a></li>
<li id="nav_clients" name="nav_clients"><a href="../clients/clients.htm" title="Clients">clients</a></li>
<li id="nav_contacts" name="nav_contacts"><a href="../contacts/" title="Contacts">recruit</a></li>
</ul>
</div>
css: Code: @charset "utf-8";
/* English Menu bar */
/* Box for the entire menu (two rows of ul) */
#globalnav {
height: 130px;
width: 675px;
}
/* Create box and put background image for each menu line */
#globalnav ul#menu1 {
height: 62px;
width: 675px;
background: transparent url(../images/menu1.jpg) top left no-repeat;
padding: 0;
position: relative;
margin: 0 0 5px 0;
}
#globalnav ul#menu2 {
height: 62px;
width: 675px;
background: transparent url(../images/menu2.jpg) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
/* Boxes for each link square on the menu */
#globalnav li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
width: 75;
}
#globalnav li, #globalnav a {
height: 62;
display: block;
}
#globalnav a {
line-height: 62px;
text-decoration: none;
text-indent: -9999px;
display: block;
}
/* Define the area on the background image of the ul which coressponds to each link box */
#nav_home {left: 0; width: 75px;}
#nav_about {left: 225px; width: 75px;}
#nav_recruit {left: 525px; width: 75px;}
#nav_company {left: 150px; width: 75px;}
#nav_clients {left: 375px; width: 75px;}
#nav_contacts {left: 600px; width: 75px;}
/* Maybe the next part is unnecessary... */
#nav_home {background: transparent url(../images/menu1.jpg) 0 0 no-repeat;}
#nav_about {background: transparent url(../images/menu1.jpg) -225px 0 no-repeat;}
#nav_recruit {background: transparent url(../images/menu1.jpg) -525px 0 no-repeat;}
#nav_company {background: transparent url(../images/menu2.jpg) -150px 0 no-repeat;}
#nav_clients {background: transparent url(../images/menu2.jpg) -375px 0 no-repeat;}
#nav_contacts {background: transparent url(../images/menu2.jpg) -600px 0 no-repeat;}
/* Hovered menu items */
/* the background image in the link box should change to a diffetent part on the big image, which isn't normally shown - doesn't work in IE7 */
#nav_home a:hover {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
#nav_about a:hover {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
#nav_recruit a:hover {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
#nav_company a:hover {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
#nav_clients a:hover {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
#nav_contacts a:hover {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
/* Active menu items */
/* This part just makes the page we are currently in appear as hovered - works fine in all browsers */
body#home #nav_home {background: transparent url(../images/menu1.jpg) 0 -62px no-repeat;}
body#about #nav_about {background: transparent url(../images/menu1.jpg) -225px -62px no-repeat;}
body#recruit #nav_recruit {background: transparent url(../images/menu1.jpg) -525px -62px no-repeat;}
body#company #nav_company {background: transparent url(../images/menu2.jpg) -150px -62px no-repeat;}
body#clients #nav_clients {background: transparent url(../images/menu2.jpg) -375px -62px no-repeat;}
body#contacts #nav_contacts {background: transparent url(../images/menu2.jpg) -600px -62px no-repeat;}
By the way - before changing it, I had all the squares in a table. Worked on IE7, but not IE6. Oh and I'm using transitional DTD. is that ok? Hi guys. This is my first post and I'm relatively new to CSS so I apologize if my post reeks of newcomer! I'm currently setting up my site with an external stylesheet. Everything has been coming along fine until I decided to setup a menu with css rollover image links. For some reason I simply cannot get the image to appear whatsoever. Everything else is working (such as position and size (I have temporarily given it a border for locational purposes)) within the code but the image just does not appear. I have looked this up for some time now and cannot come to a resolution. I have tried altering the code, changing paths, etc. etc. But I can't get it. Would really appreciate some help. Here is the rollover portion of my css: Code: #rollhome
{
display:block;
float:left;
margin: 0 auto;
width:122px;
height:50px;
text-decoration: none;
background-image:url("images/topmenu_home.png") no-repeat 0 0;
border:#000000 solid 2px;
text-indent:-99999px;
z-index:20;
}
#rollhome:link, #rollhome:visited
{
background-position: 0;
}
#rollhome:hover
{
background-position: 0 -50px;
}
And here is the rollover portion of my html: Code: <div id="rollovers"> <a id="rollhome" href="#"title="rollhome">Home</a>< /div> Any help would be most appreciated! Hi Everyone, I'm new to Dev Shed so appologises if I miss anything vital! I'm also quite new to CSS, but do have some experience. I am trying to develop a rounded corners, drop shadow solution for a header: Here it is so far, now the problem occurs when I have added the navigation bar, if you roll the mouse over any of the nav links a small chunk of border appears on the bottom right of the header?? The hoover div tag is: a.nav:hover {background-color: #99CDFF;} The nav images are gifs that do not change on rollover just the back ground color. If I remove the hover div tag the strange chunk of border does not occur. Can anyone advise why this may be happening? Or what I could do to improve this? I am having this issue in IE6.0 firefox 2.0 seems fine. I appreciate any help! Thanks in advance, Jon Hey, I have a problem with IE and my CSS. I have a table with a background-image and I wan that to change to a certain color on rollover. div.special {background-image: url(../images/pinkfade_bg.gif);} div.special:hover { background:#F8F8F8; } div.normal { background:#FFFFFF; } div.normal:hover { background:#F8F8F8; } Now this works fine in Mozilla, Safari etc. Just not IE Any ideas? I'm making a horizontal navigation menu using lists and CSS. It looks fine in IE, but in Mozilla, the double border on the bottom appears just beneath the top one, and the next line shows up after the unordered list. Hard to explain - you'd basically have to check it out for yourself: http://www.michaelaparicio.com/ Any help would be greatly appreciated! Thanks. Regards, Mike Aparicio Helllo all: I am having difficulty getting a navigation list to display as separate boxes. I get one large box with all the clickable links therein. I want one box with each link place on it. Here is my HTML code for the list: <ul id="nav"> <li><a href="hey therel">flight1</a></li> <li><a href=" Eaglesoft">Eaglesoft</a></li> <li><a href="state police"">State Police</a></li> </ul> Here is the associated style rule:#nav{font-family:arial;border-styleutset; padding:10px;list-style-type:none; color:#000066;position:absolute;top:2.5in;left:9in; background-color:#ffff00;width:2.7in;text-align:center;display:block;} Can anyone tell me why this list is being parked in one box rather that three separate boxes. The name of my text editor is CoffeeCup. Please understand that I realize that the above html coding does not creat a link..this forum blocked my links..thanks Hi I've been trying make an <a> anchor nested within a <li> list tag appear on the same row as the bullet, with no avail. It's hard for me to explain exactly, so I've uploaded two images: This is how I'd like the list items to appear, substract the extra list item which I have no idea why it appears the Image 1 This is how the list items appear: Image 2 Here's the HTML: Code:
<div id="primary-sidebar">
<div class="shadow">
<div class="tlc"></div>
<div class="trc"></div>
<h2 class="box-title">
Games list
</h2>
<div class="box-content-lhz">
<ul id="games-list">
<li>
<a href="/intersection.html?anarchy_online">Anarachy Onlins</a>
</li>
<li>
<a href="/intersection.html?Aion">Aion</a>
</li>
<li>
<a href="/intersection.html">Aries Online</a>
</li>
<li>
<a href="/intersection.html">Cabal Online</a>
</li>
<li>
<a href="/intersection.html">Eve Online</a>
</li>
<li>
<a href="/intersection.html">Guild Wars</a>
</li>
<li>
<a href="/intersection.html">Harrier</a>
</li>
<li>
<a href="/intersection.html">Jaxsos' world</a>
</li>
<li>
<a href="/intersection.html">Kal Online</a>
</li>
<li>
<a href="/intersection.html">Lemmings</a>
</li>
<li>
<a href="/intersection.html">Leiviathan Online</a>
</li>
<li>
<a href="/intersection.html">Party Online</a>
</li>
<li>
<a href="/intersection.html">World of Warcraft (US)</a>
</li>
<li>
<a href="/intersection.html">World of Warcraft (EU)</a>
</li>
</ul>
</div>
<div class="blc"></div>
<div class="brc"></div>
</div>
</div>
Here's the CSS Code:
ul {
padding-left: 2em;
list-style: square;
}
#games-list {
list-style-image: url("/_images/bullet1.gif");
list-style-position: inside;
margin: 0px;
padding: 0px;
}
#games-list li {
}
#games-list a{
font-weight: bold;
font-family: verdana, Arial, Helvetica, sans-serif;
font-size: .9em;
color: #424547;
text-decoration: none;
display: block;
background: url(/_images/sprite-list.png) top left no-repeat;
padding: 5px;
padding-left: 20px;
}
#games-list a:hover{
background-position: left -40px;
color: #00a2ff;
}
I'd appreciate anyway help at all, as this has been on my mind for a while. Hello all, Working on this page: http://gatehouse.graffetto.com/rollover.html When you roll over a story, the background color changes with javascript and CSS. However, in IE 6 and 7, you have to rollover the text in order for the background color to change. Mac FF, Mac Safari, and PC FF change background color when mousing over the containing div. Any ideas how to rig this up for IE? Here's the simple version of the code: Code: <div class="story" onmouseover="this.style.background = '#E8E4D7'; style.cursor = 'pointer'" onmouseout="this.style.background = '#ffffff'; style.cursor = 'default';"> <div class="storyTitle"><a href="VAR_LINK_TO_STORY">Seniors lose a friend</a></div> <div class="storyByline">1/7/07 - By Max Bowen</div> <div class="storyTeaser">Flags at town hall were flown at half-staff to mark the passing of Beverly Borges, the town's council on aging director, who often went above and beyond in her work with Rockland's seniors.</div> </div> any help would be great, thanks! |
|||||||