|
CSS - How Can I Do This Menu Effect?
Hi guys,
This site Valentino dot com has the menu slide out another transparent image when you mouse over it. How is this done? How can I do this? What is the code etc? Peter Similar TutorialsI'm perplexed. I have a div, Code: <div class="classname"> containing a table in muliple pages. I tried applying css style to the div using .classname{ css }, backgroundcolor took affect but color and font-size didn't, its works on others pages though. So I tried Code: <table style="color: red; font-size: 12px;"> This worked! I can't understand why the css would not affect the div itself. Talk about annoying. If anyone has any possible explanations, I'd like to hear. css are assigned to individual div's. body has backgroundcolor only. Along the left side of bing are some text links in a table cell. When bing loads you can see a semi-transparent block to give the text contrast if the background has a light color. Also, there is a rollover effect that shades the text. 1. How do I get the semi-transparency? 2. how do Iget the rollover effect? I'm creating a menu and use margin as a separator between menu elements. On the first and second level, margin works but no matter what I put on the third, they're all stick together. html4strict Code: Original - html4strict 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)" lang="en" xml:lang="en"> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/menu.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="menu_1st_normal"> <a href="default.asp?catID=17">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=5">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=44">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=45">abcde</a> </div> <div class="menu_3rd_normal"> <a href="default.asp?productID=46">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=6">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=7">abcde</a> </div> <div class="menu_2nd_normal"> <a href="default.asp?catID=8">abcde</a> </div> <div class="menu_1st_normal"> <a href="default.asp?catID=9">abcde</a> </div> </body> </html>
menu.css: css Code: Original - css Code .menu_1st_top{font-size:12px;padding:3px 2px 4px 12px; background: url(../images/menu_top_left.gif) no-repeat #0066CC 0px 0px; font-weight:bold;margin:0px 0 1px 0;color:white} .menu_1st_top a{color:white; font-weight:bold;} /* 1st level menu normal*/ .menu_1st_normal{font-size:12px;padding:3px 2px 4px 12px; background: #0066CC 0px 0px; font-weight:bold;margin:0 0 1px 0;color:white} .menu_1st_normal a{color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* 2nd level menu normal*/ .menu_2nd_normal{font-size:11px;padding:3px 2px 4px 20px; background:#3399FF;margin:0px 0px 1px 0px;} .menu_2nd_normal a{font-size:11px;color:white;font-weight:bold;} /* 3r level menu normal */ .menu_3rd_normal{font-size:11px;padding:3px 2px 4px 28px; background:#33CCFF;margin 0px 0px 1px 0px;} .menu_3rd_normal a{font-size:11px;color:white;font-weight:bold;} /*----------------------------------------------------------------------------------------------------------*/ /* bottom image */ .menu_bottom_image{width:155px;height:10px;background:url(../images/menu_bottom_155.gif) no-repeat;font-size:1px;margin:0 0 1px 0;}
I have try with both firefox and IE, the result is the same. Any ideas? Thank you. The url has been blocked? So I'll try this way: spidersandmilkdotcomforwardslashspiderdotcss Hi there, I am trying to acheive an effect like the image below.. so when the link is hovered on, there is a light gray bg, but with a 1px space above and below the bg. This is my CSS I have, but it is displaying what looks like a 2px border because my link has a top and bottom gray border. Any ideas how I can acheive this effect? PHP Code: #categories_home a{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; padding: 2px 2px 2px 25px; border-bottom: 1px solid #ececec; border-top: 1px solid #ececec; display:block; } #categories_home a:hover{ background-image: url('images/nav_arrow.gif'); background-repeat:no-repeat; background-position:left; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #6dbd00; text-decoration: none; display:block; padding: 2px 2px 2px 25px; background-color: #f6f6f6; border-bottom: 1px solid #ffffff; border-top: 1px solid #ffffff; } Im trying to a hover effect with css kinda like the one here http://tabbywrocks.tumblr.com/ on images. i was wondering if anybody could give me a site to some example code that i could look at or something. i looked a bit myself but i couldnt find anything that had exactly what i wanted. Im hoping you don't need JavaScript for it but i think you might can some one please help me out in creating that red areas... is any method possible using CSS tht cutting border margin effect... or is using a image the only option. even with using image. how can i get the right side one ? the corner part where its cut cross .. http://www.meyerweb.com/eric/css/ed...ral/glassy.html Doesn't work in IE (surprise surprise) but apart from that it is an extremely cool effect! I am making this page and I have a css link thing on my pages and on the mycss.ccs has the code to change the kind of button but I only want it to take a effect with the buttons that I give them a name that matches the name of the buttons it should effect. Thank you. The web page that I am having a problem editing is: www dot postalstampssale dot com We are having a problem getting the mouse over effect on the three (3) jpg images in the upper right hand corner. We have added the appropriate CSS mouse over coding just under the <TITLE> are on the top. We have a;sp added the CSS coding at the end of the page. However, we can not figure out how to attach the proper coding to each image. The current coding is: <img src="Images/Canada/Canada_Scott_356_Front.jpg" width="90" height="60" alt="" border="0" align="right"> <img src="Images/Germany/Germany_Scott_65.jpg" width="89" height="62" alt="" border="0" align="right"> <img src="Images/Bermuda/Bermuda_Scott_55.jpg" width="54" height="64" alt="" border="0" align="right"> Can someone please suggest how to modify the above coding. Thank you in advance. My current code is very simple, My links are text inside div tags which are placed over an image. I assign the div to the style sheet. Upon rollover of the image the style sheet makes the image invisible so that the background image is viable. Hence the rollover effect. What i need is that when the link is the same as the current page being viewed the image behind the text will be the same as the rollover image and upon rollover, nothing will change. So far i have asigned the Div tags an id and created some code to identify when the link is the same as the current page. My problem is that because of my method of rolling over i have no idea how to get my desired result. Any help please? Below are 2 scripts. The first is the code i created to identify when the link is the same as the current page. The second code is my rollover efect script without the first script in it. Code:
body#home a#home,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
background: url(images/02.png) no-repeat;
}
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
.cssnav
{
position: relative;
font-family: BrowalliaUPC;
font-size: 25px;
background: url(images/02.png) no-repeat;
white-space: nowrap;
display: block;
width: 100;
height: 30;
margin: 0;
padding: 0;
}
.cssnav a
{
display: block;
color: #000000;
font-size: 25px;
width: 211px;
height: 44px;
display: block;
float: left;
color: white;
text-decoration: none;
}
.cssnav img
{
width: 100px;
height: 30px;
border: 0
}
* html a:hover
{
visibility:visible
}
.cssnav a:hover img
{
visibility:hidden
}
.cssnav span
{
position: absolute;
left: -1px;
top: -1px;
margin: 0px;
padding: 0px;
cursor: pointer;
width: 100px;
}
</style>
<title>Untitled Document</title>
</head>
<body id="home">
<div class="cssnav">
<a href="http://www.URL.com" id="home"><img src="images/01.png" alt="Alternative text" width="100" height="30" />
<center>
<span>Home</span>
</center></a></div>
</body>
</html>
hi , how to simulate (nowrap) effect using CSS thanks The third row as it is behaves as it should, spanning 3 columns. When I change the display style to none, the final row dissapears, which again is fine. However, when I click on the Show Description button, the textarea appears, but the first cell in the first row expands to the same width as the textarea two rows below, overwriting the colspan of the bottom row. Can anyone explain why its behaving this way? How can I fix this? Code: <table border="1" style="width:100%;"> <tr> <td width="400" align="left"></td> <td width="200" align="left"><span class="red"></span></td> <td width="312" align="left"><span class="red"></span> </td> </tr> <tr> <td align="center" valign="middle" colspan="3"> <input type="button" id="ShowDescription" value="Show Description" onclick="Desc(this);"> </td> </tr> <tr> <td id="desc1" align="center" colspan="3" style="display: block;"> <textarea cols="100" rows="15"></textarea> </td> </tr> </table> Code: <script type="text/javascript">
var state = true;
function Desc(obj)
{
if(state)
{
obj.value = 'Close Description'; document.getElementById("desc1").style.display = "block"; } else{ obj.value = 'Open Description'; document.getElementById("desc1").style.display = "none"; } state = !state; } </script>
Having trouble with using CSS for email link. The problem is that mouse hover produces a black background - this is the intention. However, after clicking on link to open email client, the link (on that page) doesn't have the balck background effect. Other pages in the site are OK - until I click them once. Am I missing a section from the css file below that would give me the same hover effect even after the action of clicking the mailto: link has been done? Many thanks a:link.link1 { color: #CDBC75; text-decoration: none; background-color: transparent } a:visited.link1 { color: #CDBC75; text-decoration: none; background-color: transparent } a:hover.link1 { color: #CDBC75; text-decoration: none; background-color: #000000 } a:active.link1 { color: #CDBC75; text-decoration: none; background-color: transparent http://www.moridin.moved.in/blog/ That says about it all. Thank you for your time I just got done with the second CSS tutorial for today. Please drop a comment telling me what you think. http://www.majd-gfx.com/tutorials.php?cmd=view&cat=css&id=16 I have a style sheet, now I am modifying some buttons on some of my pages. So I added the following to my style sheet: INPUT.NEW { background-color: EDEDED; border-color: EDEDED; color: 024467; font-family: arial, verdana, ms sans serif; font-size: 7pt; } And used the following line to call it in the button: <input class="INPUT.NEW" type="button" value="Back" onclick="document.location.href='whatever.jsp?theFlag=1'"> Which doesn't work, but if I rename "INPUT.NEW" to just "INPUT" on both pages it works. But I can't have it called INPUT because one already exists on the page. This is a style sheet that I did not write, someone else did, so I'm trying to make this change. Any help would be appreciated. I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is: Quote: .leftblock a{display: block; border-top: 1px solid #ffffff; font-weight: bold; color: #21536A; text-decoration:none; background-color:#CCCCFF; } Quote: .leftblock a:hover{border-top: 1px solid #cccccc; background-color: #DDEEFF; font-weight: bold; text-decoration: none; } I added display:block to the a:hover class as well to try that to no avail. http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks. I was trying to achieve the same effect as tables do with CSS yesterday but I can't figure out a clean way to do it. Example he http://unoriginalblog.com/projectanisaga.php I was thinking of defining two different <p> classes. Have one floating left, and the other with a big left margin. I don't think that's the neatest way to do it, so I've used tables here. Can anyone share some light with me? Second thing: I've seen several CSS documents with a specific fix for IE - but I can't remember what it is, I can't remember which selector was changed for IE... I think it might have been HTML - but could someone explain to me why? Thanks in advance!! I have asked a lot here Edit: FIXED link Hi, I'm having problem with my onMouseOver effect. It works perfectly fine on the internal browser of MS-Frontpage, but not the external browser like IE6 etc. Couldn't figure out where gone wrong. SOmeone out there please help me. Thanks lots. web_illiterate HEAD : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Language" content="en-us"> <title>My first website ever</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <meta name="keywords" content="Keywords here"> <meta name="description" content="Description here"> <META NAME="robots" CONTENT="index, follow"> <META NAME="revisit-after" CONTENT="30 days"> <META NAME="distribution" CONTENT="global"> <META NAME="rating" CONTENT="general"> <META NAME="Content-Language" CONTENT="english"> <script language="JavaScript" type="text/JavaScript" src="images_web/test.js"></script> <link href="images_web/test.css" rel="stylesheet" type="text/css"> </head> My test.css : /* Testing css */ .sidetable { border-top-width: 1px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #2271A0; font-size: 14px; font-style: normal; font-weight: bold; font-variant: normal; text-decoration: none; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; } .sidetable2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; } .sidelinks { font-family: Verdana, Arial, Helvetica, sans-serif; color: #2271A0; font-size: 10px; font-weight: bold; } .baseline { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000000; } .sidelinks2 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px; font-weight: normal; text-decoration: none; } .sidelinks2:a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FFFFFF; font-size: 10px; font-weight: normal; text-decoration: underline; } h2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; } .producthdr { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #2271A0; font-weight: bold; } a { color: #000000; text-decoration: none; } a:hover { color: #000000; text-decoration: underline; } My test.js : // Testing Js <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> Body : <body onload="runSlideShow()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="86"><table width="79" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="352" rowspan="2"><img src="images_web/toplogo.gif" width="352" height="87"></td> <td width="39" rowspan="2"><img src="images_web/topmidspace.gif" width="39" height="87"></td> <td background="images_web/topbg.gif"><img src="images_web/topbg.gif" width="1" height="54"></td> </tr> <tr> <td background="images_web/navbasebg.jpg" width="460"><img src="images_web/btn_home.gif" name="btn_home" width="71" height="33" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images_web/btn_home_dn.gif',1)" onClick="window.location='index.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_contact.gif" name="btn_contact" width="75" height="33" id="btn_contact" onMouseOver="MM_swapImage('btn_contact','','images_web/btn_contact_dn.gif',1)" onClick="window.location='contact.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_members.gif" name="btn_members" width="93" height="33" id="btn_members" onMouseOver="MM_swapImage('btn_members','','images_web/btn_members_dn.gif',1)" onClick="window.location='members.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_projects.gif" name="btn_projects" width="70" height="33" id="btn_projects" onMouseOver="MM_swapImage('btn_projects','','images_web/btn_projects_dn.gif',1)" onClick="window.location='projects.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"><img src="images_web/btn_downloads.gif" name="btn_downloads" width="78" height="33" id="btn_downloads" onMouseOver="MM_swapImage('btn_downloads','','images_web/btn_downloads_dn.gif',1)" onClick="window.location='downloads.html'" onMouseOut="MM_swapImgRestore()"><img src="images_web/navspacer.gif" width="1" height="33"></td> </tr> </table></td> </tr> </body> |
|||||||