|
CSS - Assigning A Class To A Listbox
Hi All...
New to CSS, forgive my ignorence... I have started using CSS to assign classes to form elements, this works fine with input boxes but has no effect when assigning the same class to a dropdown listbox "<select>" - no change is apparrent in their appearance... Can anyone help please? Is this anything to do with 'contextual selectors'? If so how can I perform what i want to do? Sample of my code... Title: <select name="CUSTTITLE" class="formelements" > <option value="" <?php if (!(strcmp("", $form->value("CUSTTITLE")))) {echo "SELECTED";} ?>></option> <option value="Mr" <?php if (!(strcmp("Mr", $form->value("CUSTTITLE")))) {echo "SELECTED";} ?>>Mr</option> <option value="Mrs" <?php if (!(strcmp("Mrs", $form->value("CUSTTITLE")))) {echo "SELECTED";} ?>>Mrs</option></option> <input name="CUSTFIRSTNAME" type="text" class="formelements" size="15" maxlength="40" value=" <? if($form->value("CUSTFIRSTNAME") == ""){ echo $session->userinfo['CUSTFIRSTNAME']; }else{ echo $form->value("CUSTFIRSTNAME"); } ?>"> .formelements { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; color: #000000; margin: 1px; border: 1px solid #CCCCCC; } Any help would be appreciated. Thanks Arco Similar TutorialsHi guys, I'd like to find out if there is any way to change the color of the scrollbar in a listbox using the css. And also, is there a way to change the width of the scrollbar as well? Thanks in advance. Hi all, I've got problm in css Listbox properties, I put list box within a normal html .. and there are 3 option to list like this.., 1.name 2.Address of a person 3.Phone no: resident so i give width=80px; in css and it will show the list box width correctly. but drop down part also the same width . so i want to expand the width as when we entered option text width. how can i achieve this ? pls help me......! Prachalitha Can someone point me to a tutorial on creating html listbox with images (select tag), like the one on this picture? Thank you. Hi people, I am completely new to programming and have only spent this weekend learning it! I have managed to create a decent website already, however i am stuck at a point. On my main page, i have attached a CSS stylesheet with all the formatting for my page. My problem however is that when i try to format one section (<div id="gallery">) the formatting messes with the rest of the page. Is there a way that i can assign a style sheet to only that <div id="gallery"> without it applying to the entire html page. Any help is greatly appreciated! Thanks Chris I have a container DIV a with absolute position containing DIV's b,c,d each with absolute position. Code: <DIV class="a"> <DIV class="b"></DIV> <DIV class="c"></DIV> <DIV class="d"></DIV> </DIV> <DIV class="e"></DIV> DIV e has no asssigned position and is not displayed(floating in the background). I want to replace any of b,c or d (setting display to none) with e, displaying e in the position of either b,c or d. How do I assign the style of one DIV to another that is not its parent? I could if necessary place e inside a and do a swap, but I have quite a lot of DIV's like a, and would rather not have to repeat the code in each container DIV. Hope this makes sense! hello guys! i have a form that contains a listbox, and am using IE6, and i put up a link to my external css file, but the appearance of listbox scroll bars didn't change, only the size of the font was changed, do i am missing something? or this is not possible to change the appearance of scrollbars for the listbox? below is my HTML code: PHP Code: <html> <head> <title>Test Page</title> <LINK href="styles.css" type=text/css rel=StyleSheet> </head> <body> <form method="POST" action="test.htm"> <p><select size="5" name="test"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> <option value="4">four</option> <option value="5">five</option> <option value="6">six</option> <option value="7">seven</option> <option value="8">eight</option> <option value="9">nine</option> <option value="10">ten</option> </select><input type="button" value="Submit" name="B1"></p> </form> </body> </html> and below is my stylesheet: PHP Code: BODY { FONT: 8pt verdana, arial; COLOR: navy } TD { FONT: 8pt verdana, arial; COLOR: darkslateblue } .helphead { FONT: bold 16pt verdana, arial; COLOR: navy; TEXT-ALIGN: center } H2 { FONT-SIZE: 11px; FONT-FAMILY: verdana, arial COLOR: white } A:link { COLOR: navy } A:visited { COLOR: navy } A:hover { COLOR: #ff9900 } .funhead { FONT: 10pt Arial,Helvetica; COLOR: navy } .deschead { FONT: 600 10pt Arial,Helvetica; TEXT-ALIGN: center } .clsDescTab { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; BORDER-LEFT: lightsteelblue 1px solid; BORDER-BOTTOM: lightsteelblue 1px solid; BACKGROUND-COLOR: aliceblue } INPUT { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; BORDER-LEFT: lightsteelblue 1px solid; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1px solid; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial TEXT-ALIGN: left } SELECT { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; BORDER-LEFT: lightsteelblue 1px solid; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1px solid; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial } .button { BORDER-RIGHT: lightsteelblue 1px solid; BORDER-TOP: lightsteelblue 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: lightsteelblue 1px solid; WIDTH: 70px; COLOR: #000000; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1px solid; FONT-FAMILY: verdana, arial; } TEXTAREA { BORDER-RIGHT: lightsteelblue 1pt solid; BORDER-TOP: lightsteelblue 1pt solid; BORDER-LEFT: lightsteelblue 1pt solid; COLOR: navy; BORDER-BOTTOM: lightsteelblue 1pt solid; FONT-SIZE: 11px; FONT-FAMILY: verdana, arial } Hi, I am trying to change the border color of a listbox. But i could not find the exact CSS code. I wanted the border to be 1px solid #FF0000. But still i am getting the default blue color. Please help. I seperately wrote a css code, .listmenu{ border-width:1px solid #FF0000; font: 12px Arial, Helvetica, sans-serif; color:#FF0000; width:200px; height:20px; } I have a loop in PHP that runs through sets of data and assigns positioning based on its place in the loop. For some reason the styles for position aren't being applied. Any ideas what i'm doing wrong? Code: <html>
<head>
<style>
#wrapper {width:100%; height:100%;}
#box {background-color:gray; width:100px;}
</style>
<body>
<div id=wrapper>
<div style="postion:absolute; left:50px; top:100px" id=box>AA</div>
<div style="postion:absolute; left:100px; top:100px" id=box>BB</div>
<div style="postion:absolute; left:150px; top:100px" id=box>CC</div>
</div>
Hi I'm trying to add a background image to a list box however it works in firefox well but in IE i cannot see the background image. Can someone helpme Here is the code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
.listbox_picture {
padding-left:22px;background:url(icon_photo.gif) left center no-repeat;border:solid 1px white;border-bottom-color:#f0f0f0;
}
.listbox_video {
padding-left:22px;background:url(icon_video.gif) left center no-repeat;border:solid 1px white;border-bottom-color:#f0f0f0;
}
-->
</style>
</head>
<body>
<form name="form1" method="post" action="">
<select name="select" size="2">
<option value="sss" class="listbox_picture">sss</option>
<option value="sss" class="listbox_video">ssssa</option>
</select>
</form>
</body>
</html>
Hi Everyone. I'm a new member and so please forgive me if I don't immediately understand all the jargon. However I have a problem and I was hoping someone might be able to help. I have searched the web and W3 schools but couldn't find the answer I was looking for. I am using strict HTML with an external CSS style sheet. I have a several paged website I am creating for part of a University assignment. I have several links which have 3 colours for 3 states. Link, visited and highlight. These work perfectly. (For me anyway). I have now been told to remove 'circular references'. I understand this to be; If I am on the 'Home' page, then 'Home' is no longer a link. (The cursor turns to a text bar instead of a hand) I have removed href from the html to stop this happening. leaving just <a>Home</a> This is fine, however, the colours that I specified in the css now no longer apply and the text is just black. I have followed the instructions in the web pages that I have seen to retain the colours, or add them to an inline style sheet, but nothing seems to work. I can only achieve adding one colour (but not making it change when visited or hovering) or changing the colour of ALL links. Sorry if this is confusing.. I hope someone can help! The relevent code is below. HTML <head> <style type="text/css"> .homebut a:link {color: red;} .homebut a:visited {color: purple;} .homebut a:hover {color: orange;} <!--none of the above seems to work--> </style> </head> <body> <div class="homebut"> <a>Home</a> </div> CSS /*This is applied to all links but doesn't work when I remove HREF from the HTML*/ a:link { COLOR: #0099FF; text-decoration:none;} a:visited { COLOR: #00FFFF; } a:hover { COLOR: #FFFFFF; } 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 For a navigation I am using, I must use an li height to control spacing in IE6. I'm also using bullets to show a user where they are in the site by only having one bullet display at a time. Unfortunately, the height assignment I use on my li causes IE to misplace the bullet next to its secondary nav. Below is code I'm using to troubleshoot: Code:
<ul><li><a href="#">dog</a></li>
<li><a href="#">cat</a></li>
<li class="here"><a href="#">fish</a></li>
<ul>
<li><a href="#">trout</a></li>
<li><a href="#">angel</a></li>
<li><a href="#">salmon</a></li>
</ul>
<li><a href="#">turtle</a></li>
<li><a href="#">elephant</a></li>
</ul>
Code:
li {height: 20px; list-style-type: none;}
li.here {list-style-type: disc;}
If a user is on the page fish, they will see that bullet point to page salmon. Any recommendations? 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. Hullo, I have an issue here that I have been trying to find a solution for for the past week, but I suppose I don't really know what exactly to look for. I want to make a background that consists of different horizontal color strips. The reason I do not want to use an image and repeat it is because the strips are different in height. I want them to shrink/expand vertically keeping their proportion to each other ( instead of repeating vertically) in case the screen used to view the website is smaller/ bigger than mine. I tried creating different elements using <div id="name"> and assigning a background color and define a percentage for the height, however this doesn't work because the element has to have text inside it to expand according to it. I do not want to assign fixed heights because as I said I want them to expand and shrink proportionally. If you know a way to do this even if it is not CSS please let me know. All help is appreciated. Thanks. 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;
}
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... I'm using ASP.NET 2.0 for my site. I already have a CSS that is working for the site; however, because an ASP.NET lable requires CSS Class, how do I convert my current CSS to a CSS Class? I know that a CSS class start with a period then a unique name. The problem is how do I implement the li, ul, a, and so on. Here is what I have that I want to convert to a CSS Class. #nav { padding: 0; clear: both; } body.main #nav, body.blogger #nav { float:right; width: 220px; \width: 250px; w\idth: 220px; margin: 10px 10px 0 0; padding: 0; } body.second #nav { float:left; width: 200px; \width: 210px; w\idth: 200px; padding:0 0 20px; margin: 0; } body.second #nav img { padding-bottom: 10px; } #nav a { color: #006; } body.second #nav ul { list-style: none; padding: 0 0 0 5px; margin: 0; } body.second #nav ul li { margin: 0 0 7px 0; font-size: 11px; } body.second #nav ul li ul li { margin: 0 0 5px 15px; } .skip { display:none; } /* end #nav */ #content p, #nav p { padding: 0; margin-top: 0; margin-bottom: 10px; line-height: 140%; } #content li, #content ol { margin-top: 0; line-height: 140%; } code, pre { font-family:"Courier New", Courier, mono, monospace; } /* definition lists, all that and a bag of chips! */ #content dl { margin:0px; padding:0; } #content dt { font-weight: bold; } #content dd { margin-top: 0; margin-right: 0; margin-bottom: 10px; margin-left: 0; padding: 0 5px 0 0; } /* end definition list*/ Any help is appreciated. When defining css in a webpage, it can be done using either a class or id. My understanding is that css uses . notation with classes and # notation with id's, regardless of whether the actual css is in the webpage itself of linked externally. Please correct me in error. My css uses classes and external . notation. When I use id's only and # notation exernally, I lose all my styling. Its only when I use the # notation internally that the styling works. In order to use external css I need to declare both a class and id and dot notation. Internally only an id. Is this correct behaviour? Problem solved. I am new to CSS and confused about when to use id # and when to use class . Some enlightenment on the benefits/purpose of each would be helpful. I have read several tutorials - but the same pretty much the same to me so I must be missing something Thanks! |
|||||||