|
CSS - Class, Style And Selected Options
I've got a dynamically generated <select> list, where the <option>s are styled using both 'class' and 'style' - like in the following example:
PHP Code: <style> .thm_img { height:30px; } </style> <select> <option class="thm_img" style="background: #99CC00;" value="1" >Image 1</option> <option class="thm_img" style="background: #FF3300;" value="2" >Image 2</option> <option class="thm_img" style="background: #CC9999;" value="3" selected="selected" >Image 3</option> </select> No big deal - pretty standard stuff. The "selected" <option> displays in the 'visible' part of the field and also as part of the drop list ... as one would expect. But, and this is where I am baffled - the attributes from both class and style show up in the option listing, whilst only the 'class' attributes show up in the 'visible' part of the list. If I'm not making any sense here, just cut and paste the above code into an html editor to see what I mean. You'd note that 'Image 3' has a white background in the visible part of the field, but a coloured background in the drop list. Would anyone know why the attributes from the 'style' aren't being applied but that from the 'class' is ? ... and how (if possible) would I resolve this without combining the style into the class (since combining them is not an option - no pun intended). Cheers Similar TutorialsHi all I have two questions about the great Firefox extensions Web Developer Toolbar. 1) Is there a way to keep selected options (e.g. Images > Display Alt Attributes) even when reloading the page? Or even forever (until I deselect them)? 2) Can I alter the default CSS used to display information? E.g. I want the displayed alt attributes of images to be displayed absolutely and with an opacity of 50% or so. This way I always see while working on a web when there is no alt attribute or an inappropriate one (maybe from copy pasting or so)... Thanks a lot for help :-) Josh I have a website/application that I want to give the users the option to select from multiple CSS's on their browser. How do I go about letting the user change the style sheet? -Dynasty Hi, Looking to make menus out of an unordered list. I want one of the menus to be highlighted when the corresponding page is being displayed. I might have more than one menu on a given page. http://css.maxdesign.com.au/listamatic/ shows examples on how to do so. In the HTML, they use <li id="active"> to target the menu link to highlight. If I have two menus on a given page, this would result in two identical ID's, however, they could be uniquely identified since they exist in different menu ID's. Is this a problem? Would it be better to use <li class="active"> instead of how Listamatic's use of id? Thanks Hi, I have this style for font size. I then use span class to use it, but it only works in IE and not FF. Any ideas why? Have i got something wrong with it? PHP Code: .11px { font-family: verdana, arial, tahoma; font-size: 11px; } I am trying to retrieve the color and background attributes of a CSS class defined in a .css external file. I would like to retrieve the attributes in a JavaScript function, given the class name. I am trying to invert the colors of a table cell background and hyperlink text. --begin style sheet-- table.submenu { background:#66CCFF; position:absolute; visibility:hidden; font:8pt Arial; font-weight:bold; color:#FFFFFF; text-decoration:none; } a.menulink:link,a.menulink:visited,a.menulink:active { color:#FFFFFF; text-decoration:none; font-weight:bold; } --end style sheet- --begin javascript-- function invertmenu(elmntID,elmntClass) { //the first two lines of code do not work var textColor = elmntClass.style.color; var backColor = elmntClass.style.background; document.all[elmntID + "link"].style.color = backColor; document.all[elmntID].style.background = textColor; } --end javascript-- --begin html code-- <tr><td class="submenu" id="techdept1" onmouseover="invertmenu('techdept1','submenu')" onmouseout="invertmenu('techdept1','submenu')"><a href="t40/default.asp" class="menulink" id="techdept1link">T-40</a></td></tr> --end html code-- thanks for your help! - tim I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 Hi Friends, I'm very new to CSS.I put one menu control with the help of css and javascript.This menu control was working fine.But after selecting a particular menu tab , i want that should be in diffrent color,i.e., activated postion i write as .horizontalcssmenu a:active{ background:red; } but after page refrest it went and it comes to original color Here i want till i cliclk a new tab i want to put my current clicked link background color to red. Thanks in adavance. Avinash Please help me, urgent for me. I have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! hey, I got a table, every <td> in the table got the css class .regular. (<td class='regular'>). When the user moves their mouse over a row, that row should change color. This works with the following code: <tr onmouseover='this.className=\"hoverRow\"'> However, this only works if the td's in that row have no class set yet. And since all td's in my table have a class set allready, i cant use this. How can i overwrite the class of the td's by the class for the whole row? thanks in advance Using the following example: 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=utf-8" />
<title>Test</title>
<style type="text/css">
a
{
display: block;
}
a.one.on, a:hover.one, a:hover.one.on
{
color: red;
}
a.two.on, a:hover.two, a:hover.two.on
{
color: orange;
}
a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
</style>
</head>
<body>
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<p> </p>
<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>
</body>
</html>
Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style: Code: a.three.on, a:hover.three, a:hover.three.on
{
color: green;
}
(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE. I've read several forums and know that the technique I'm trying to achieve is possible, however I can't seem to get it to work. Basically I'm trying to shift the background positions of both the list item I'm hovering over and the next list item. I'm sure its just a syntax error and not a logic error, anyways the code is below - any help would be greatly appreciated! Code:
HTML Code
<div class="menu">
<ul>
<li><a href="#" class="search"></a></li>
<li><a href="#" class="battery"></a></li>
<li><a href="#" class="cart"></a></li>
<li><a href="#" class="contact"></a></li>
</ul>
</div>
CSS
.search, .contact, .cart, .battery
{
width:100px;
height:30px;
margin-left:-1px;
display:block;
}
.search
{
background-image:url(Images/search.png);
}
.contact
{
background-image:url(Images/contact.png);
}
.cart
{
background-image:url(Images/cart.png);
}
.battery
{
background-image:url(Images/battery.png);
}
ul li a.search:hover
{
background-position:0px 60px;
}
ul li a.search:hover ul li a[class=battery]
{
background-position:0px 60px;
}
Hello, I work with ASP.NET and I never liked the way some controls are rendered. Fortunately .NET 3.5 has a new control, ListView, which lets me render my HTML code the way I want. I need do display tabular data on various pages of a web site. Should I use tables? Should I use lists? What other option is best and which should I use? And if I use a table what is the cleaner and better table code I should have? For example, should I consider this a good code: <div class="PrettyGridView" id="GridView1"> <div class="AspNet-GridView"> <div class="AspNet-GridView-Pagination AspNet-GridView-Top"> <a href="javascript:__doPostBack('GridView1','Page$1')">1</a> <a href="javascript:__doPostBack('GridView1','Page$2')">2</a> <span>3</span> </div> <table cellpadding="0" cellspacing="0" summary=""> <thead> <tr> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort $Operation')">Operation</a></th> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Reps')">Repetitions</ a></th> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Duration')">Total test</a></th> <th scope="col"><a href="javascript:__doPostBack('GridView1','Sort$Average')">Average</ a></th> </tr> </thead> <tbody> <tr> <td>Sin</td> <td>27124</td> <td>31</td> <td>1.1521</td> </tr> <tr class="AspNet-GridView-Alternate"> <td>Sinh</td> <td>19777</td> <td>31</td> <td>1.5801</td> </tr> </tbody> </table> <div class="AspNet-GridView-Pagination AspNet-GridView-Bottom"> <a href="javascript:__doPostBack('GridView1','Page$1')">1</a> <a href="javascript:__doPostBack('GridView1','Page$2')">2</a> <span>3</span> </div> </div> </div> Thanks, Miguel I'm using the max-width in IE in my site - specifically I'm using it to set the minimum height of certain elements. Now that it has become a key part of my design, I realized that it generates errors in the W3 validator. Does anyone know a valid way to use the min-height that will work with IE? Hi, I have used the UL and LI elements to build a tree as follows: Code:
<div class="tree">
<ul>
<li>
<span>One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
<ul>
<li>
<span>Child of One</span>
<span class="controls">
<input type="radio" ... />
<input type="button" ... />
</span>
</li>
</ul>
</li>
...
</ul>
</div>
The result of the above XHTML would be somethings as follows: Code: - One <Radio> <Button> - Child of One <Radio> Button> ... Now I want to try and get the following result through CSS: Code:
- One <Radio> <Button>
- Child of One <Radio> Button>
- Another Child <Radio> Button>
- Second Child <Radio> Button>
- Two <Radio> Button>
- Child of Two <Radio> Button>
...
That is in other words I want to have still have elements indented for every child element but all the controls of the elements are under each other at the right side of the div element. Is this possible? If so are there any example I can use? I have wrapped the controls inside a span because I felt that this would help. However I do not know how I can change the width of each 'li' element depending on its position in the three! (unless I use javascript, which I am trying to avoid). Also I do not know if CSS wise this is the best way forward. Thanks for any suggestions. Regards, Sim085 Hi, I am new at this. I am using a software to create my website . I dont want the customer to see a shipping option on the checkout page as my product cannot be shipped. How do I remove the shipping information part and show only the billing information from the checkout page? Someone gave me this css: <style type="text/css"> #DisplayShippingSpeedChoicesTD { display: none !important; } #CalcShippingDivContainer { display: none !important; } </style> Where should I put this css? SHould it go in the main css file or html template? Any particular location in the css? Thanks Sorry for the lousy title, can't come up with better wording.... What I'm trying to say is can someone give me an example code of a css syntax that accept one css classname and add a few more properties to it under a different class name. Sort of like merging two classname into one. Thanks... Well I really don't know how else to explain this error, I have had it for a long time, and even as I am making a new layout the bug is again appearing, this appears to be a firefox issue and not one of ie. However as I do use firefox it's annoying that this bug exists. Because my style sheet and such is all rather long I will just link to the areas, this page is a new layout so your not gonna get any crap on it. http://www.unlimitedgamer.net/test_e.htm css: http://www.unlimitedgamer.net/style_e.css I know my style sheet is a mess and I intend on cleaning it up, but I am still not some css/div master as I can never figure out these little bugs. Bug 1: when you click on the left area where there is nothing but background, anywhere about 150 pixels down, the entire layout (aside from the header) is selected, this is annoying as anything becuase I am always clicking back and forth between windows causing this to occur. Bug 2: the yahoo ad is floating when you scroll, however the image beside it that is in the same div does not? Thanks for any help. Hi, I have asp menu in my aspx page. There are 3 menu items. If the user clicks on a menu item, I want to highlight the menu with a different color and by default the other menu items should have another color. So only the currently selected menu, should have the different color, and the other menu items should have the default color. How to achieve this? Thank you Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? Hello, In the css below, why I can't set it on the same time? Code:
background: #FFF url(../images/main_bottom.gif) no-repeat bottom ;
background: #FFF url(../images/main_top.gif) no-repeat top ;
|
|||||||