|
CSS - Using - In Class Names Causes Problems
Similar TutorialsCan you have the a class name as follows: <tr class="row one"> . I have an asp page that displays some text which is formatted by a stylesheet. The colour of the text box depends on the text itself. For example, the information displayed is a risk. If the risk is 'None', the box is white, if it is 'High', the box is red, etc. The class is determined programmatically, according to the actual risk. In the stylesheet I have a class called 'None', another called 'High', etc. The problem I have is that one of the risks is 'No Risk' which obviously has a space in it. The text MUST say 'No Risk' so the solution is not to have text with no space in. How do I create a class in my stylesheet called No Risk? If I type it literally, with the space, it doesn't recognise it. I have a procedure that selects the Risk from a database table. The asp page has the following line to set the class: Response.Write "<td class=" & chr(34) & Replace((rs.Fields.Item("risk").Value) , " ", "") &"2" & chr(34) & ">" & (rs.Fields.Item("risk").Value) & "</td>" Any help would be very gratefully receive it as I am rapidly running out of hair! Thank you. Hi, I was just wondering whether it is valid to use the following names in CSS for classes or ID's Code: .class1 .class2 #id3 #id4 Are alphanumeric names allowed? Hey, I just started learning all of this stuff, and I had a question. I'm trying to set it up so that in my CSS I have two different sets of styles for links. Technically they are the same styles, I just want this class and this other class named differently, and it wont let me. It keeps taking the second one back to default. Is there a way I can get around that and get it to work? Thanks, JennyO Hello everyone, l just wanted to know what browsers support the following: Code: <style>
td.test1 {
background-color: pink;
}
td.test2{
border-style: dotted;
border-width: 10;
border-color: orange;
}
</style>
<table>
<tr><td class="test2 test1">
THIS IS A TEST .. YAYA!!
</table>
Which is 1 element, with 2 class names... It seems to work with the latest netscape, IE, and opera, just wanted to know if this is something l should be using on my web pages, or not due to the possible compatibility issues, any help is greatly appreciated, gents Samantha Gram. i've been searching the web for a couple weeks trying to find a simple way to swap CSS classes onMouseOver, making a simple, and elegant Rollover button. i've found tons of examples with really complex methods, but i really need to do it with CSS classes. so i've read repeatidly that by putting the following code as your TD tag you'll be able to change class names. and it simply doesn't work at all. the code i'm having a problem with reads like this: <td class="out" onMouseOver="this.className='over'" onMouseOut="this.className='out'"> it just doesn't work. anyone at all who can give me a code that does work, i'd be more than appreciative. oh, and by the way i'm using IE 6.0.2600 Hi all, Not exactly sure where this post truely belongs (CSS, HTML, JS forums) but firt trying this forum. I'm trying to create a simple expandable link but the link jumps up and down when expands/collapses. The code attached, any ideas any one. Code demonstrates the problem so please save it as .html and view it. -- Thanks. Code:
<style type="text/css">
.faq_hidden
{
visibility: hidden;
}
.faq_shown
{
visibility: visible;
}
</style>
<script type="text/javascript">
function showReview(n)
{
document.getElementById(n+'_r').className = 'faq_hidden';
document.getElementById(n+'_f').className = 'faq_shown';
}
function hideReview(n)
{
document.getElementById(n+'_f').className = 'faq_hidden';
document.getElementById(n+'_r').className = 'faq_shown';
}
</script>
<div id="r1_r" class="faq_shown">
<a onclick="showReview('r1'); return false;" href="#">
<div>
Completing the questions 1
</div>
</a>
</div>
<div class="faq_hidden" id="r1_f">
<a onclick="hideReview('r1'); return false;" href="#">
<div>
Completing the questions
</div>
</a>
<p>
Completing the questionnaire should take 8 - 10 minutes of your time.
Be honest, answer as you would normally behave and act, in response to
the statements and questions.
</p>
</div>
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;
}
Howdy, Does anybody have, or has anyone ever seen a table for any form of database with CSS color names and/or hex codes in it? I'm sure some web design sites have something like it, but I could be wrong. If I don't get a reply in a couple of days, I'll go ahead and make my own and make it publically available (most likely in Access format). Thanks in advance. -colin Hey guys, I'm SURE this has been asked before but I just can't find it. Is there any way to use a * in a selector name to match multiple selectors? Something like this: Code:
row* { padding-top: 10px; }
Which would match all of the following: Code: <div id="row1"> ... </div> <div id="row2"> ... </div> <div id="row3"> ... </div> I'm thinking there's not, as the code above doesn't work. I'm thinking that the only alternative for dynamic ID names is in-line CSS styles, but I figured I'd ask just in case. Thanks in advance 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 am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
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. In CSS, which would be more appropriate (or I suppose semantically correct) to use, p.text or .text p ? P representing the <p> tag, and "text" representing the class "text". Any info or links to pages with info on this matter would be greatly appreciated! Which is better to use id (#) in CSS or to use class (.) ?? does it affect website rank? 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! So I want to create a really simple css file that uses a lot of the same styles. For example I may create a box that takes up two fifths of the page, and is floated left or right, similarly I may have a box that takes up three fifths, or four fifths etc. The main thing here is that I'm thinking the specifics will be placed inside an ID like so: Code:
#twoFifths {width:275px; padding: 0px 12px 0px 50px;}
#threeFifths {width:375px; padding: 0px 50px 0px 12px;}
And then to handle the float I'd use a class like so: Code:
.floatRight{float:right;}
.floatLeft{float:left;}
Is this considered good practice? Obviously as I generate layouts I may want to float either right or left so having an ID for every single thing I may want to use would be a little overwhelming. The problem with this of course is that I can't call an ID twice in a page, and I can't have more than one class... so for example: Code: <div id="templateBlueBox" class="floatRight"> <h2>Six free lessons</h2> <p>These free Lessons are great to read online or print out and carry with you.</p> </div> <div id="templateGreenBox" class="floatRight"> <h2>New Features</h2> <p>Some fun, helpful study tools to help you get more out of every Lesson. Check them out!</p> </div> <div id="templateOrangeBox" class="floatRight"> <h2>Sign up for email updates</h2> <p>So we can let you know when you can subscribe to get it every week.</p> </div> <div id="templatePinkBox" class="floatleft"> <h2>Send us feedback</h2> <p>Is it the coolest thing ever (or is it just okay)? Tell us what you think!</p> </div> <div id="templateBlueBox" class="floatLeft"> <h2>Submit photos</h2> <p> You can be part it..</p> </div> So as you can see I'm having to repeat the id templateBlueBox. Is there a better approach for accomplishing this? |
|||||||