|
CSS - Slide Show Rollover
I was wondering if anyone could explain how this works.
http://alt-web.com/DEMOS/CSS-Disjoi...-Rollover.shtml What I am not understanding is the role of the: <div id="defaultImage"> <img src="DefaultImage.jpg" /></div> and the <div id="Relative"></div> what do they do and why are they needed? Or maybe you cold steer me in a direction. Thank you Similar TutorialsI am a novice at web authoring. I am working a jQuery slide show. I would like to make this slide show automatically resize to fit the browser window. But the show is contained in a div element which requires a fixed size in pixels. When I try to substitute percentages for pixel values, the images no longer appear. Please advise if there is a way to accomplish this resizing. Due to a prohibition against posting URLs for new user accounts, I can't provide a link to the slide show I am trying to resize, or a link to an example of the resizing behavior which I would like to emulate. Thanks for taking the time to read my question. I've almost got what I want. I would like my link, on hover, to "slide" to the right a bit and change background color. My problem is the flickering. I think it's because I'm using a class on the <li> and a class on the <a>, but I'm not sure how else to accomplish what I'm trying to do. I know it would be better if I didn't have a class on the <a>.... I think. Any ideas? Thanks, Brad 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title></title> <link href="Nav.css" rel="stylesheet" type="text/css"/> </head> <body> <ul class="NavList"> <li class="NavListItem1"><a href="#" class="NavListItem">Home</a></li> <li class="NavListItem2"><a href="#" class="NavListItem">About</a></li> <li class="NavListItem3"><a href="#" class="NavListItem">Contact</a></li> </ul> </body> </html> CSS: Code: ul.NavList {
List-style-type: none;
border-left: solid 5px #3366CC;
padding: 0px;
margin: 0px;
}
.NavListItem {
color: #000000;
background-color: aqua;
display: block;
width: 60px;
padding-left: 3px;
}
.NavListItem1 a:hover {
width: 50px;
display: block;
margin-left: 5px;
background-color: red;
width: 60px;
padding-left: 3px;
}
.NavListItem2 a:hover {
width: 50px;
display: block;
margin-left: 5px;
background-color: green;
width: 60px;
padding-left: 3px;
}
.NavListItem3 a:hover {
width: 50px;
display: block;
margin-left: 5px;
background-color: orange;
width: 60px;
padding-left: 3px;
}
Hello, I'm using a 'slide-out' navigation on an intranet, however I need it to go to a 3rd level and for the life of me I cannot get the combonation for expanding the list to 3 levels. Here is a 'demo' of what I'm trying to do, if you go to Office support, and resources it needs to come out when you hover. DEMO *This site was designed with IE 6.0 in mind. Code: /*Navigational CSS*/
#navigation ul
{
position: absolute;
margin: 0;
padding: 0;
list-style: none;
width: 185px; /* Width of Menu Items */
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-family:"trebuchet MS", Garamond, arial;
}
#navigation li
{
position: relative;
}
#navigation a
{
display: block;
}
#navigation li ul
{
left: 185px;
top: -0px;
display: none;
}
#navigation ul li a, #navigation li a
{
display: block;
text-decoration: none;
color: #fff;
background-color: #0F2344;
padding: 3px;
font-family:"trebuchet MS", Garamond, arial;
}
#navigation li
{
position: relative;
z-index: 10;
}
#navigation li ul li
{
position: relative;
z-index: 15;
}
#navigation ul li a:hover, #navigation li a:hover
{
color: #000;
background: #467BB4;
}
#navigation li ul li a
{
padding: 2px 5px;
}
#navigation li:hover ul, #navigation li.over ul
{
display: block;
}
Thanks for the assistance.. Hey all, I downloaded this DHTML script for a Dynamic-Fx Slide-In Menu from http://www.dynamicdrive.com and i'm facing some trouble. The menu suits my needs perfectly with only 1 problem. I want to position the menu in a fixed location on my website somewhere other than the edge of the screen, so i adjust the xy coordinates in the ssmItems.js file to do so...the problem is that the menu changes location depending on whether the window is maximized or not and on the resolution of the monitor. I want it to stay in 1 place ALWAYS! How? PLEASE HELP! there are two .js files associated with this scrip, ssmItems.js & ssm.js and a bit of html in the <head> section of the file into which the menu is placed. Please find all 3 below: HTML code in <head> section: <STYLE> <!-- A.ssmItems:link {color:black;text-decoration:none;} A.ssmItems:hover {color:black;text-decoration:none;} A.ssmItems:active {color:black;text-decoration:none;} A.ssmItems:visited {color:black;text-decoration:none;} //--> </STYLE> <SCRIPT SRC="ssm.js" language="JavaScript1.2"> </SCRIPT> <SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT> <script type="text/javascript"> Code from ssmItems.js file <!-- /* Configure menu styles below NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors */ YOffset=188; // no quotes!! XOffset=0; staticYOffset=30; // no quotes!! slideSpeed=20 // no quotes!! waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuBGColor="feb300"; menuIsStatic="yes"; //this sets whether menu should stay static on the screen menuWidth=210; // Must be a multiple of 10! no quotes!! menuCols=2; hdrFontFamily="Arial"; hdrFontSize="2"; hdrFontColor="#feb300"; hdrBGColor="#000066"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="15"; linkFontFamily="arial"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#feb300"; linkTarget="_top"; linkAlign="Left"; barBGColor="#feb300"; barFontFamily="Arial"; barFontSize="2"; barFontColor="#000066"; barVAlign="center"; barWidth=20; // no quotes!! barText="RESOURCES MENU"; // <IMG> tag supported. Put exact html for an image to show. /////////////////////////// // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header ssmItems[0]=["Apologetics Resources"] //create header ssmItems[1]=["Christ the Teacher Series", "http://www.lumenverum.org",""] ssmItems[2]=["Lord of History Series", "http://www.lumenverum.org",""] ssmItems[3]=["Other Booklets", "http://www.lumenverum.org", ""] ssmItems[4]=["Catholic Q&A Message Board", "http://www.lumenverum.org", ""] ssmItems[5]=["Ask us a question directly", "http://www.lumenverum.org", ""] ssmItems[6]=["LVA Catalogue"] //create header ssmItems[7]=["Books", "http://www.lumenverum.org", ""] ssmItems[8]=["Tapes / CD's", "http://www.lumenverum.org", ""] ssmItems[9]=["Other", "http://www.lumenverum.org", ""] ssmItems[10]=["Lumen Verum's..."] ssmItems[11]=["Consitution", "http://www.lumenverum.org", ""] ssmItems[12]=["Patron Saint", "http://www.lumenverum.org", ""] buildMenu(); //--> Code from ssm.js file NS6 = (document.getElementById&&!document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") tempBar='';barBuilt=0;ssmItems=new Array(); moving=setTimeout('null',1) function moveOut() { if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)} else {clearTimeout(moving);moving=setTimeout('null',1)}}; function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} function moveBack1() { if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)} else {clearTimeout(moving);moving=setTimeout('null',1)}} function slideMenu(num){ if (IE) {ssm.pixelLeft += num;} if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;} if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}} function makeStatic() { if (NS||NS6) {winY = window.pageYOffset;} if (IE) {winY = document.body.scrollTop;} if (NS6||IE||NS) { if (winY!=lastY&&winY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - YOffset + staticYOffset);} else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));} else {smooth=0} if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) bssm.pixelTop+=smooth; if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth lastY = lastY+smooth; setTimeout('makeStatic()', 1)}} function buildBar() { if(barText.indexOf('<IMG')>-1) {tempBar=barText} else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}} document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')} function initSlide() { if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style; bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";} else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";} else if (NS) {bssm=document.layers["basessm1"]; bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"]; bssm2.clip.left=0;ssm.visibility = "show";} if (menuIsStatic=="yes") makeStatic();} function buildMenu() { if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">'); for(i=0;i<ssmItems.length;i++) { if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1} else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1); if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')} if(!ssmItems[i][1]){ document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')} else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget; document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')} if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1} if(ssmItems[i][4]!="no"){document.write('</TR>')}} document.write('</table>') if (NS6){document.write('</TD></TR></TABLE>')} if (IE||NS6) {document.write('</DIV></DIV>')} if (NS) {document.write('</LAYER></ILAYER></LAYER>')} theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)} I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option. Here's the jQuery script: Code: $('#sideTabMain .button').toggle(function() {
$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});
And the basic CSS for the div: Code: #sideTab {
position: absolute;
z-index: 1000;
top: 50px;
right: -650px
}
The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas? Thanks for your help. I don't know if this is a weird question or not, but this is what I was thinking of doing... I was going to build my footer to extend a couple hundred pixels below the actual footer content, then use a png with transparency gradient to blend the bottom of the footer back into the page background to account for pages with very limited content on them where the footer may not be close to the actual bottom of the browser window. The problem I ran into when trying to do this was trying to stop the page from including the bottom of the footer on longer pages when there WAS enough content to push the footer to the bottom. I tried a couple different ways, setting various div positions and sliding them off screen, but they just causes the browser to stretch farther to display the entire footer. So, is this something you can do? I seem to remember playing around with a 'sticky footer' a little while back that moved content off screen, but I don't remember what caused this. Thanks for any help. I've been toying with this for some time and I've been messing with it so long that I probably wouldn't see the problem if i was hit with a brick. Essentially the link posted is to an html page where I have a portion of the left side of my main page. This page will have vertically listed navigation which upon hover will slide out a panel and so on. I cannot seem to get the elements correct, the sliding out list items are correct but the other main listing is not sitting correctly, and the navigation box gets all elongated when I hover. This code and page is designed to work with IE 6x for work. Any help would be appreciated. Thanks. http://mcpherson-racing.com/dave/Slideout.htm Also I'm wondering if you see a problem with the page and the navigation that I'm attempting to make, Also if you have any design tips for this 'demo' I'd be happy to hear them.... I'm a bit lost on the 'footer' what to put there... http://mcpherson-racing.com/dave/demo2.htm The site isn't done, its about 30% so I know links are busted and not pointing to the right places. If you have a second..... Doing a design for my brother and I have this idea that seems so simple but I can't figure it out. I attached a image that explains it better than I could in an a post. Here is the site: anthemcompanies.com/index2.html Here is the image to explain it (can't insert an image so it is a link) anthemcompanies.com/screen.png I would like to use just CSS to accomplish it but I have no idea how. I have searched everywhere online. I have tried adapting some jquery scripts and some js stuff but nothing has worked for me. Advice, links, completely explained solution, or I have no idea, would be most appreciated. 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? 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 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. 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. 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? I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help! http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html 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 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. :/ 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 have a problem with my rollovers. they work fine in ff and safari, and shockingly do not work in ie6. i've been at it for a couple of days now, and can't seem to make headway on it. i'm also new to this forum, so im hoping i do this right: html: <div id="banner"><img src="assets/banner.png" alt="xxx" width="450" height="145" border="0" /> <ol> <li><a href="index.html" id="home">home</a></li> <li><a href="about.html" id="about">Aboutx</a></li> <li><a href="portfolio.html" id="portfolio">xPortfolio</a></li> <li><a href="services.html" id="services">Servicesx</a></li> <li><a href="news.html" id="news">Latest News</a></li> <li><a href="contact.html" id="contact">Contact </a></li> </ol> </div> css: @charset "utf-8"; body,td,th { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; } body { background-color: #000000; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; font-family: Verdana, Arial, Helvetica, sans-serif; background-repeat: repeat-y; } div { background-position: center; } #container { width: 100%; background-color: #0000000; } #containertopout { width: 100%; background-image: url(topbg.png); background-repeat: repeat-x; height: 300px; } #containertopin { width: 900px; margin-right: auto; margin-left: auto; } #banner { height: 245px; width: 450px; float: left; } #flash { width: 450px; float: left; padding: 0px; top: auto; height: 228px; margin-top: -0.7em; margin-right: auto; margin-bottom: -20px; margin-left: auto; } #flashcontent { margin: 0px; padding: 0px; height: 228px; width: 450px; } #footer { display: inline; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 850px; } #containermiddle { width: 850px; margin-right: auto; margin-left: auto; background-repeat: repeat-y; background-color: #000000; float: none; padding: 0px; } #body { background-repeat: repeat-y; background-color: #000000; } #containerbottomout { width: 100%; background-image: url(botbg.png); background-repeat: repeat-x; height: 120px; clear: both; overflow: auto; } #containerbottomin { width: 850px; margin-right: auto; margin-left: auto; clear: both; float: none; } .col1 { border-right-width: 2px; border-right-style: ridge; border-top-color: #071E3C; border-right-color: #071E3C; border-bottom-color: #071E3C; border-left-color: #071E3C; } #navlinks li { display: inline; list-style-type: none; margin-left: 0.25em; padding-left: 0.5em; border-left-width: 1px; border-left-style: solid; border-left-color: #18457B; } #navlinks .first { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; margin-left: -0.75em; } #navlinks a { font-size: 10px; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; color: #4480d5; } #navlinks p { margin-top: -1.5em; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #navigation { padding-top: 1em; text-align: center; } .style1 { font-size: 20px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #FF9B21; } .style2 {font-size: 16px} .style3 { color: #4480d5; font-size: 12px; line-height: 20px; } .style4 { color: #FF9B21; font-size: 12px; line-height: 20px; } a:link { color: #4480D5; font-size: 12px; line-height: 20px; text-decoration: none; } a:hover { color: #FFC51B; text-decoration: underline; } a:active { color: #4480d5; } a:visited { color: #FF9B21; text-decoration: none; } #banner li{ float:left; margin-top: -0.6em; list-style-type: none; } #banner a{ text-decoration: none; display: block; float: left; text-indent: -5000px; } #banner #home { background-image: url(navbut/home.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; margin-left: -3.35em; } #banner #home:hover { background-position: 0 -95px; } #banner #about { background-image: url(navbut/aboutus.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #about:hover { background-position: 0 -95px; } #banner #portfolio { background-image: url(navbut/portfolio.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #portfolio:hover { background-position: 0 -95px; } #banner #services { background-image: url(navbut/services.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #services:hover { background-position: 0 -95px; } #banner #news { background-image: url(navbut/news.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #news:hover { background-position: 0 -95px; } #banner #contact { background-image: url(navbut/contact.png); background-repeat: no-repeat; background-position: 0 0; width: 75px; height: 95px; } #banner #contact:hover { background-position: 0 -95px; } free happy thoughts from me for whoever can help me out! 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!! |
|||||||