|
CSS - Creating Second Link Style In Same Menu
I have a menu where the submenu li's have a blue/darker blue background color and hover color.
I have one set of submenu items where I would like to change the background and hover colors for that set only, but haven't been successful in writing the second set of code, the original colors still show up Here's the part of my styles for the list that I'm trying to change.. Code:
/* original backgrounds for the menu */
ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
Is it the way I tried to rename the style? Code:
/* change backgrounds to shades of green for one sub menu */
.green ul.menu li ul li a {
background: #afe4bf;
color: #000;
padding-left: 20px;
}
.green ul.menu li ul li a:hover {
background: #88b796;
border-left: 5px #000 solid;
padding-left: 15px;
}
thanks in advance for any help, Kathy Similar Tutorialsis it possible to create this in css ? if so, does anyone have a tutorial on how to ? or what its called so i may research it more (content box? container box?) ty btw, just the style not the stuff inside them lol The application I'm writing currently uses a Custom tag to generate a table of images and input images to represent tabs. It is working just fine. After implementing a liquid layout on the application the tabs still work, but do not grow larger based on the size of the screen. Also there are always only 7 tabs max per row. I'm looking to try to change this so that the tabs will fit to the space provided. I'm hoping to come up with a style sheet solution that can be applied to code that my custom tag would generate. Here is an example of what my custom tag would generate currently. It is all tables, but could easily be modified to divs or such. I realize this is going to take a bit of work, so I'm just hoping someone may have a suggestion on the direction I could take this. Something that might change the number of tabs on a row as the browser is expanded or contracted.... Code: <div id="content" class="ParentDivBrowse"> <div id="subContent" class="ChildDiv"> <table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr> <td> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_off.gif" /> <input type="image" src="/AppName/images/Properties_0_en_US_off.jpg" alt=" Properties" name="Properties" value="15" onClick="buttonClick(this)"> <img src="/AppName/images/offOff.gif" /> </td> <td nowrap='nowrap' colspan="6"> <input type="image" src="/AppName/images/Fields_0_en_US_off.jpg" alt=" Fields" name="Fields" value="14" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_off.gif" /> <input type="image" src="/AppName/images/DLG_FEOV_0_en_US_off.jpg" alt=" DLG_FEOV" name="DLG_FEOV" value="7" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_FLST_0_en_US_off.jpg" alt=" DLG_FLST" name="DLG_FLST" value="10" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_SHOV_0_en_US_off.jpg" alt=" DLG_SHOV" name="DLG_SHOV" value="8" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_TLOV_0_en_US_off.jpg" alt=" DLG_TLOV" name="DLG_TLOV" value="9" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_OCUR_0_en_US_off.jpg" alt=" DLG_OCUR" name="DLG_OCUR" value="11" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_NOTE_0_en_US_off.jpg" alt=" DLG_NOTE" name="DLG_NOTE" value="12" onClick="buttonClick(this)"> </td> <td nowrap='nowrap' colspan="1"> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_FILT_0_en_US_off.jpg" alt=" DLG_FILT" name="DLG_FILT" value="13" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap'> <table border='0' cellspacing='0' cellpadding='0'> <tr> <td nowrap='nowrap'> <img src="/AppName/images/leftExtreme_on.gif" /> <input type="image" src="/AppName/images/DLG1_T381_FUND1_0_en_US_on.jpg" alt=" DLG1_T381_FUND1" name="DLG1_T381_FUND1" value="0" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/onOff.gif" /> <input type="image" src="/AppName/images/DLG3_T381_FUND2_0_en_US_off.jpg" alt=" DLG3_T381_FUND2" name="DLG3_T381_FUND2" value="1" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG6_T381_TO_FROM_0_en_US_off.jpg" alt=" DLG6_T381_TO_FROM" name="DLG6_T381_TO_FROM" value="2" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG7_T381_MISC_0_en_US_off.jpg" alt=" DLG7_T381_MISC" name="DLG7_T381_MISC" value="3" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_ADER_0_en_US_off.jpg" alt=" DLG_ADER" name="DLG_ADER" value="4" onClick="buttonClick(this)"> </td> <td nowrap='nowrap'> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_PTDE_0_en_US_off.jpg" alt=" DLG_PTDE" name="DLG_PTDE" value="5" onClick="buttonClick(this)"> </td> <td nowrap='nowrap' colspan="1"> <img src="/AppName/images/offOff.gif" /> <input type="image" src="/AppName/images/DLG_COOV_0_en_US_off.jpg" alt=" DLG_COOV" name="DLG_COOV" value="6" onClick="buttonClick(this)"> <img src="/AppName/images/rightExtreme_off.gif" /> </td> </tr> </table> </td> </tr> <tr> <td nowrap='nowrap' colspan='2'> <img width='100%' style='min-width:837px;' src='/AppName/images/strip_on.gif'> </td> </tr> </table> </td> </tr> </table></div></div> One of the most common problems i am sure most of us are having it different browsers rendering css in different. What is the best or good way to detect what browser the visitor is using and then give them the right style sheet for their browser? I am unable to use any real server side script like php or .asp Thanks! hi, i have this style for a div hover effect, but how cani stop my other links having this efect? i want 2 different link styles. Code: <style type="text/css">
a:link
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:active
{
text-decoration:none;
color:#000000;
background: #A2D389;
width: 200px;
display:block;
}
a:visited
{
text-decoration:none;
color:#000000;
background:#B1DB9D;
width: 200px;
display:block;
}
a:hover
{
text-decoration:none;
color:#000000;
width: 200px;
background: #A2D389;
display:block;
}
</style>
Any ideas? I know how to use the class etc but i can't get he link part right. Thanks I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page: a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; } However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code? td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; } I can't do something like making another link class like this either a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; } I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here? i want to have two seperate styles for links on my page - how can i do this. i am using dreamweaver. i can only work out how to use one link style, i.e. the a:hover etc.. I have one css file which is linked to all my html pages That css file defines a style for all my <a> tags ie - a:link, a:visited, a:hover etc. Theres one html file where i need a different style for some of the <a> tags ive set a sepecific class on these tags ie: <a class="set1" etc and in my css file ive tried the following .set1 a:link { etc } but for some reason this doesnt override the style on the generic a tags ie it seems to keep using a:link { } ignoring the .set1 a:link { etc } help! I have a webpage that has a Link tag that links to a style sheet Code: <html> <head> <link rel="stylesheet" type="text/css" href="http://cdn-media.madaboutbrighton.net/css/main-min-v1.4.css" /> </head> <body> Test 0.0.1 </body> </html> However, when viewing the source of this page in IE, Chrome and Firefox the Link tag has transformed into a Style tag which contains a dump of the linked style sheet Code: <html> <head> <style type="text/css" style="display:none">body... whole style sheet content dumped in here...</style> </head> <body> Test 0.0.1 </body> </html> This is a fairly old site, and nothing has changed recently. But when i first published the site the Link tag appeared normally. I have tried passing it a css file with no content or with just one definition in it, but it keeps changing the Link tag into a Style tag. I obviously don't want the css dumped into a Style tag each time as this is very inefficient and bypasses all my caching/expires settings. You can see an example of this here madaboutbrighton.net/test This is not an isolated case and is effecting some but not all sites on my webserver, which were all displaying correctly the last time i checked but now have this problem. Even though all sites have the same settings. I am baffled. All ideas most welcome, or even just let me know if you are having the same problem. Cheers!!! Hello, My unvisted links within a div section are not working, they default to Red which is set up in the CSS as a catch-all. I see this happenning with IE 6.x and FireFox 1.5 and netscape 7 Example HTML code where the unvisited link appears in Red and it should be in Grey: Code: <div class=medGray> <a href="/data/tmp/E300vV60cB.s5ukal.diblu.tmp">Download</a> extracted device records (4 records). </div> Here's my snippet from my CSS file: Code:
a.medGray:link {
text-decoration: underline;
FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Tahoma, sans-serif;
}
a.medGray:visited { color:#666666; }
a.medGray:hover { text-decoration: underline; }
a.medGray:active { color:#666666; }
/*-- Default Red--*/
a:link {
text-decoration: underline;
font-family:Verdana, Arial, Helvetica; font-size:12px; color:#CC0000; }
a:visited { color:#999999; }
a:hover { text-decoration:underline }
a:active { color:#CCCCCC; }
Can someone tell me why css style settings for links won't effect a mailto: link? Is there anyway to make it happen without individually coding style into each mailto: link? Thanks, HeadElf I'm trying to set a link style for thumbnail images I have on my site but am having difficulty getting the style to take over the a { } and a:hover { } styles. Here is an example of the styles I have set; Code:
a {
color: #005D93;
text-decoration: none;
}
a:hover {
color: #990000;
text-decoration: underline;
}
#thumb {
position: relative;
float: left;
padding-left: 21px;
padding-bottom: 10px;
}
#thumb img {
width: 96px;
height: 145px;
}
#thumb img a {
text-decoration: none;
border: 2px;
border-color: #F5F6F7;
border-style: solid;
}
#thumb img a:hover {
border-color: #990000;
}
An example image tag is as follow; Code: <div id="thumb"><a href="details/page2.html" onclick="NewWindow(this.href,'name','640','460','yes');return false;"><img src="Images/2714.jpg"></a></div> With the above mentioned, the thumbnail is surround by the a color of #005D93 and not the border color I expected. An example can be seen here - Example. I know it must be something fairly obvious I'm missing. Any help would be greatly appreciated. Regards, JT this is what i got: a menuBox Code:
<tr align="center" valign="top" height="120">
<td height="120">
<div class="menuBox">
<div class="menuBoxHeader">Menu</div>
<p><a href="blah-blah4">4.</a></p>
<p><a href="blah-blah5">5.</a></p>
<br>
<p>some text>
</div>
</td>
</tr>
I use for the links Code: a:link, a:visited, a:active { color: #336699; text-decoration: none;
font: bold 11px/1px Verdana, Arial, Helvetica;
}
for the menuBox Code:
.menuBox { color: #c36;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 2px; font-family: Verdana;
background-color: #fef;
border: solid 1px #c36 }
and for the menuBoxHeader Code: .menuBoxHeader {
color: #efe;
font-style: normal;
font-weight: bold;
font-size: 9px;
line-height: 13px;
font-family: Verdana, Arial, Helvetica;
background: #c36 0px 0px;
margin: 1px 0px 0px;
position: relative;
top: 0px;
left: 0px;
width: 130px;
height: 16px }
So now my two questions. 1. What do I have to do to let it look in all the browsers the same? In Netscape 7.2 the links are to close to each other. In IE6 to width ( vertical ). 2. The menuHeader is on the most browsers correct ( mac and Win ) except MS. There is no 1px between the border and the red area. Or... are the others wrong and MS right? I hope that someone can help me? hey guys i have this so far
Code: div#navbar2 {
height: 30px;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #000 1px;
background-color: #99b3b4;
text-align:center;
}
div#navbar2 ul {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
color: #FFF;
line-height: 30px;
white-space: nowrap;
}
div#navbar2 li {
list-style-type: none;
display: inline;
}
div#navbar2 li a {
text-decoration: none;
padding: 7px 10px;
color: #FFF;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:hover {
font-weight: bold;
color: #000000;
background-color: #e4ebeb;
}
but what i can figure out is how to show the link they are on as a selected button so having the button be red if they are on that link... Code: <div id="navbar2"> <ul> <li><a href="index.php?page=update">Basic</a></li> <li><a href="link2.html%20">Button 2</a></li> <li><a href="link3.html%20">Button 3</a></li> </ul> </div> When viewing my website, the font is too small in IE/Opera/Crazy Browser. I am a Firefox user and the site looks the way I want when viewed in Navigator & Firefox. I don't want to change that. I'm thinking that I can use java script to make a page link to a specific style sheet, based on the user's browser. Unfortunately, I'm not a scripter and I haven't managed to find one that suits my purpose. Is there a simpler way to accomplish this? Thanks Hi, I have a series of images that act as hyperlinks to other pages. I want the image border to initially be set to none, but when I rollover the image I want it to turn white, 1px wide. Tried doing this with normal link styles, but it ain't workin. So how do you do this? Thanks mM Hi, I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the index page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour. I also want the whole title to be on one line. I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other! My page code: <div id="garden-designer-title"><a href="(*website address*)" title="home">Joe Blogs</a><h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1> </div> My stylesheet code: #garden-designer-title { position:relative; left:0px; top:0px; padding: 0; margin: 0; width:526px; height:51px; z-index:7; } #garden-designer-title a { position:relative; font-size: 46px; font-family: verdana, arial, helvetica, sans-serif; color: #009999; font-weight: normal; text-decoration: none; } #garden-designer-title h1 a { display: inline; font-size: 29px; font-family: verdana, arial, helvetica, sans-serif; color: #9482A4; font-weight: normal; text-decoration: none; } Does anyone know what I'm doing wrong?! Many thanks! On this page: http://www.prioritypie.f2s.com/tremaer/_location/location.htm I have a rollover menu (courtesy of Bon Rouge's tutorial) that nicely runs in a line when viewed in FF, but in IE it reverts to a vertical list. Is there a way to stop this? And why doesn't the background for the containing div show up in FF when it does in IE? I had hoped a glass of red wine would help.... I'm trying to create an expanding menu using CSS and no Javascript. So far, it works only sometimes in IE, and only works in FF with the mouse button is pressed down (If I let go of the mouse button, it disappears). Can anyone suggest any fixes on what I should do to get it working properly. Thanks. So far what I have is this: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <link rel=stylesheet href="dd.css" type="text/css"> <title>Page title</title> </head> <body> <div id="links"> <a href="#">Links<span><br> Sublink 1<br> Sublink 2<br> </span></a> </div> <div id="links2"> <a href="#">Links 2<span><br> Sublink 3<br> Sublink 4<br> </span></a> </div> </body> </html> Quote: My CSS looks like this: div#links a span {display:none;} div#links a:active span {display:block; font:10px Verdana, sans-serif; } div#links2 a span {display:none;} div#links2 a:active span {display:block; font:10px Verdana, sans-serif; } I want to create a menu that will float on the side of my page and stay in the same position on the screen as the user scrolls down. Is this done with CSS, Javascipt, or a little bit of both? thanks. |
|||||||