|
CSS - Css Class Reference
Hi all, new css user here and have a slight problem.
I am trying to change the color of the 'post date' on my forum that i am creating. In the source code for this area, there is no div id, but just three classes namely, "top-post forum-post clear-block", "post-info clear-block", and "posted-on", with the first being the most outer class. In my css sheets there are references to the latter two classes, but adding 'color:#fffff', does not change the text color. I have tried listing them all from outer to inner and then declaring the color but also this did not work. I am using drupal and the advanced forum module, and saw using inspect element that another site just had the color specified under 'posted-on', and it was working, but not for me. Even with an !important tag, it just comes up with an exclamation mark on the 'inspect element. I was wondering if anyone had any suggestions as to how to change this? Any help massively appreciated! Similar TutorialsReally basic question. I've created a CSS text class. How do I reference it to apply to a text sample? I've been using this page as my guide: http://www.htmlgoodies.com/beyond/css/article.php/3470231 But they only reference commands such as <I class="name"> and <U class="name">. I don't want to add any Italics or Underlines, so how do I only reference the class? I am creating a standalone (included with <script src>) script to display a slideshow of images, and need the images' container DIV to resize to the height and width of the largest image, PLUS the border width. I can get the height easily enough, but the border is giving me problems. The code I'm using now is: Code:
function getcss(myclass,element) {
var CSSRules;
if (document.all) { CSSRules = 'rules'; }
else if (document.getElementById) { CSSRules = 'cssRules'; }
for (var i = 0; i < document.styleSheets[0][CSSRules].length; i++) {
alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');
if (document.styleSheets[0][CSSRules][i].selectorText == myclass) {
return document.styleSheets[0][CSSRules][i].style[element]
}
}
}
function InitializeImageRoller() {
for (var q = 0; q < Files.length-1; q++) {
var hidden = eval('hiddenpicture' + q);
if (MaxW < hidden.width) { MaxW = hidden.width }
if (MaxH < hidden.height) { MaxH = hidden.height }
Container.style.height = MaxH;
Container.style.width = MaxW + getcss('Container','borderWidth');
hidden.style.display = "none";
}
}
right now I'm testing, and in the first function, I have a line " alert ('.' + document.styleSheets[0][CSSRules][i].style['border'] + '.');". This works fine, but returns ALL the properties of the border. I need it to only give me the width. What should the ['border'] be changed to to accomplish this? 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. Can anyone recommend a reference book. I have the Jeffrey Zelman book but would like something that covers a bit more detail. Is the Eric Meyer on CSS any good? cheers, steven. Hi I am new to flex and i am suppose to change the css file so that it references a a swc file instead of an programmatic skin. I know the syntax is classreference... for the action script. I just want to to know what i should replace it as. Thanks I ran into this very strange problem. CSS reference works on first load, but not on subsequent postbacks. I stared at it for whole evening not sure what to do, hope some of you have seen this before. Here's code fragment: <%@ page language="java" %> <%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %> <%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %> <%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %> <%@ page import="com.aa.samples.constants" %> <%@ include file="includes/header.jsp" %> <!-- REF: TabPane http://webfx.eae.net/dhtml/tabpane/tabpane.html --> <html:html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>Login Page</title> <link rel="stylesheet" type="text/css" href="../pages/includes/common.css" /> </head> <body> <script type="text/javascript" src="includes/tabpane.js"></script> <link type="text/css" rel="StyleSheet" href="includes/tab.webfx.css" /> <div class="tab-pane" id="tab-pane-1"> <script type="text/javascript"> var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) ); </script> <div class="tab-page" id="tab-page-0"> <h2 class="tab">Login</h2> <html:form action="/authenticateUsersAction.do"> <table class=TABLE > ... and the rest of it ... Thanks in advance! Norman Fung Hi, I have a script that refers to a css file (cbw.css). I want to place the css file in a subdirectory but it does not work. If I place it root directory, it works. I even tried referring to entire url, and it still does not work PHP Code: echo "<head>"; echo "<link media='screen' type='text/css' href='127.0.0.1/phpfusion7/cbw/css/cbw.css' rel='stylesheet'/>"; echo "</head>"; but if I put the url directly in the browser, it brings up the css file, so I know that the reference to the directory is correct. Thanks in advance. UPDATE Found answer - link to images in css file was incorrect. This problem is in Internet Explorer. Here's the first page that looks the way it should: http://www.invistation.com/invite_me/contact.php And here's the other page, that references the same css file, but rendered differently: http://www.invistation.com/invite_me/resetpass.php My CSS File: http://www.invistation.com/invite_me/css/index2.css What gives? It doesn't make any sense why the form on the resetpass page is shifted more to the right than the form on the contact page. I'm using the same div for the two forms. Hi! I need a very good CSS2 quick reference where I can rapidly see what is supported in which browsers and a short description of the property. Thank you! Hi, I am trying to remove the annoying url and page numbers that appear at the bottom of a page when you print a website - I want to do this using CSS so that anybody who prints my site wont get those annoying references, not change my browser. Anybody got any ideas on how to do so? Dom. 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... Greetings all, Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it. I was wondering if there are any good references/books you'd suggest purchasing or looking at online? Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this: ___________________________ |[ i m a g e ]....................text | However, it comes out looking like this: ___________________________ |[ i m a g e ]..........................| |.....................................text| I suspect it is due to the align: right of the text, but am not sure how to correct it. Relevant snippets of code: testpage.html Code: ... <div class=header> <img src="image.jpg"><h1>TEXT</h1> </div> ... style.css Code:
...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}
#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}
Thanks for any advice. 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? 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? 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! The book i am reading does not clear this up. When would you use class vs id to put elements in different catagories? why not use all id? It seems to make more sense.. ie. make all headers id="header" and divs also class. thank you in advance Which is better to use id (#) in CSS or to use class (.) ?? does it affect website rank? |
|||||||