|
CSS - Navigation Rollover Buttons
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. 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! My vertical CSS navigation menu buttons overflow when adding 10 or more buttons. The new buttons end up to the right side of the top buttons. If I change the html format for paragraph format it stops this, but in IE there becomes big space between the buttons. Here is the site: http:// bradleyrose . net / WaterStreetRestaurant 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 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... I need to get away from "text-graphics" as much as possible because I am writing multilingual apps where the translator configures the translations of all the control words that appear on the menus. Besides it causes downloading lots of little images and this is not good. I would like to do a submit button in a form with a rollover, using the background-image property. Any text on that button is just superimposed on the image via html form. This will be bandwidth friendly as well as easier to make a translation, as I can use the same background image for all the buttons and if the user wants to reskin it all he has to do is put a different bg grc in the css file and resize it. Here is what I have to mess with right now: Code:
#button_btn1 {
font-family: Tahoma, sans-serif;
text-align: center;
font-weight: bold;
font-size: 12pt;
background-image: url(http://localhost/~me/testing/img/BlurMetalLa7.gif);
color: #003300;
border: none;
height: 24px;
width: 126px;
cursor: help;
}
Code: <form action="foo.php"> <input type='submit' id='button_btn1' name='submit' value='Click me' /> </form> It displays the image all right, now I want to rollover. It seems like I need to write a javascript invoked onMouseover to alter the background-image property. I don't know how to do this. I've looked at rollovers that fool with the visibility property and I've even messed with them myself, but they seem very dicey and with each new brower version they break in yet another novel way. 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 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? 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've created navigation buttons in Photoshop by making an 818px wide document, spacing out the words, then slicing them up. My navigation division is 818px wide but when I insert the buttons I created, they don't fit. I do not have any borders around them that I can tell. Why would this happen? http://www.oharenoise.org/new/2009_news_releases.htm 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 I am trying to line 4 div tags in a horizontal line. It's pretty much consists of 4 buttons on a horizontal panel. I can do this with a table with 4 columns. How do I do this with div tags? Thanks in advance. Hello I'm a newbie on this forum and have a CSS problem I could do with some help on. On this website www . glewstonecourt . com (please remove spaces as I can't post links just yet!) I've been told by the client that some website visitors are experiencing problems with the navigation..... the first few buttons are appearing fine, but then the subsequent ones aren't.... but I can't seem to replicate the problem! Any suggestions anyone? bren Hey folks, I'm having issues with a dropdown menu in IE 6 to the tune of it not showing up when it's rolled over. Here's the page in question. Here's the CSS I"ve used for it: Code:
/* LANDING PAGE MENU LAYOUT */
#landingMenu {
width:960px;
height:450px;
position:relative;
background:transparent none;
}
#landingMenu li {
float:left;
font-size:14px;
font-weight:bold;
}
#landingMenu li a {
width:192px;
float:left;
background:#ffc000 url(images/landingMenu_bg.jpg) no-repeat top;
display:block;
text-align:center;
min-height:255px;
padding-top:15px;
}
/* ENTER TOP PADDING AND ACCORDING HEIGHT FOR EACH DIVISION (NORMAL HEIGHT IS 360PX, ADJUSTED FOR FOOTER HEIGHT CLEARANCE)
#landingMenu li#CDS_menu a { min-height:255px; padding-top:35px;}
*/
#landingMenu li li {
background:transparent none;
float:none;
padding:0;
height:auto;
text-transform:none;
list-style:disc;
margin-left:40px;
margin-top:5px;
font-size:14px;
color:#0f1190;
font-weight:bold;
}
* html #landingMenu li li { margin-left:20px; }
#landingMenu li li.landingCaption { list-style:none;margin-top:10px;margin-left:25px; }
* + html #landingMenu li li { margin-left:-160px;width:150px;}
* + html #landingMenu li li.landingCaption { width:150px;display:block;margin-left:-160px; }
#landingMenu li ul {
display: none;
position: absolute;
margin-top:125px;
background:transparent none;
z-index:600;
width:192px;
}
#landingMenu li > ul { top: auto; left: auto; }
#landingMenu li:hover ul, li.over ul { display: block; }
/* END LANDING MENU */
Main issue is that I don't even have a copy of IE 6 to fix for, and I've been going off of screen shots from the client. Any thoughts? Hi, I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE. Dom. Quote: .nav-cell-main-nonsel { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle1.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } .nav-cell-main-sel, .nav-cell-main-nonsel:hover { font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva; font-size: 10px; font-weight: normal; color: #333333; vertical-align: middle; text-align: left; padding: 0px 0px 0px 5px; background-image: url(../../images/[ps]triangle2.gif); background-position: left; background-repeat: no-repeat; border-bottom: 1px solid #EDEDED; padding: 0px 0px 0px 20px; } Cheers, Dom. I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text. <style type="text/css"> #nav a:hover { background: url("arrow_hover.png") no-repeat; } #nav a img { width: 88px; height: 67px; position: absolute; top: 200px; left: 500px; border: 1px solid black; visibility: hidden; } #nav a:hover img { visibility:visible; } </style> <div id="nav"> <ul> <li><a href="#">Link1<img src="camera.jpg" alt="" /></a> <li><a href="#">Link2<<img src="home.png" alt="" /></a></li> <li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li> <li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li> </ul> </div> Hi, q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text. q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image? Hi, I have a button as follow: Code:
#memberlogin .login{
background:url(/images/memberlogin_btn.gif) no-repeat left top;
display:block;
width:130px;
height:31px;
border:0;
}
I need to make a rollover. This is one image, same as this method: http://www.nowcss.com/links/image-rollover-with-css I tried it this way Code:
#memberlogin a.login span {
display: none;
}
#memberlogin a.login:hover {
background: url(/images/memberlogin_btn.gif) repeat 0px -31px;
}
but it's not working, do you know what I'm doing wrong here? Thanks in advance. Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at: http://www.francesli.myubertor.com/ Doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML for Menu: Code: <!-- --------------- main menu --------------- --> <div id='menu_outer'> <div id='menu_inner'> <ul> <li id="up_menu1" class="sel"> <a class="sel" href="/" title="" target="" rel="">Home</a> </li> <li id="up_menu2" class="unsel"> <a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a> <ul> <li id="up_menu2_1" class="unsel"> <a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a> </li> </ul> </li> <li id="up_menu3" class="unsel"> <a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a> <ul> <li id="up_menu3_1" class="unsel"> <a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a> </li> </ul> </li> <li id="up_menu4" class="unsel"> <a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a> <ul> <li id="up_menu4_1" class="unsel"> <a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a> </li> </ul> </li> <li id="up_menu5" class="unsel"> <a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a> </li> <li id="up_menu6" class="unsel"> <a class="unsel" href="/Links.php" title="" target="" rel="">Links</a> </li> <li id="up_menu7" class="unsel"> <a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a> <ul> <li id="up_menu7_1" class="unsel"> <a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a> </li> </ul> </li> </ul> </div> </div> CSS for Menu: Code:
/* Navigation Menu */
#menu_outer {
top: 77px;
background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
height: 42px;
padding-top: 7px;
text-transform: uppercase;
}
#ubertor #menu_outer li a {
color: #FFFFFF;
font-weight: bold;
}
/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}
#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}
#up_menu1.unsel{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 60px;
height: 27px;
}
/* Properties */
#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 90px;
height: 27px;
}
#up_menu2.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 90px;
height: 27px;
}
/* For Buyers */
#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 99px;
height: 27px;
}
#up_menu3.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 99px;
height: 27px;
}
/* For Sellers */
#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 101px;
height: 27px;
}
#up_menu4.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 101px;
height: 27px;
}
/* Blog */
#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 58px;
height: 27px;
}
#up_menu5.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 58px;
height: 27px;
}
/* Links */
#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 65px;
height: 27px;
}
#up_menu6.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 65px;
height: 27px;
}
/* Contact */
#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel a{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
text-indent: -1000em;
width: 82px;
height: 27px;
}
#up_menu7.unsel ul li a:hover {
background-color: #CCCCCC;
background-image: none;
text-indent: 0;
width: 82px;
height: 27px;
}
#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}
#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px}
Help will be very appreciated, I'm supposed to have this done today. :/ My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css: Code: css a { text-decoration: none; }
a:link { color: #0000FF; }
a:active { color: #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
color: #0000FF;
border: 1px solid #0000FF;
padding: 5px;
width: 190px;
background-color: #ffffff;
}
body
{
color: #ffffff;
background-color: #2F4F4F;
}
div
{
margin-top: 50px;
margin-bottom: 50px;
}
Thx for your help =) EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions? |
|||||||