|
CSS - Same Styles... Different Class Names.
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 Similar TutorialsI 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? Can you have the a class name as follows: <tr class="row one"> . 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 I have a unique problem: I am working inside of a content management system. This system uses tables EVERYWHERE. I need to place a simple border around the table (or tbody tag, which does define a style, but still no class, and covers the same area i'm looking to place the border around) defining the main body of the site. I cannot edit this table to use an id or a class, and unfortunately, unlike in the past, I cannot hijack this table's class because this is one where it is not defined. I have tried using Code:
<style type="text/css">
tbody[style]
{
border: 1px solid #000000 !important;
}
</style>
which works, but only in firefox, and not IE7, or Google Chrome. I'm guessing i've exhausted my options. But i'm not sure. Any help would be GREATLY appreciated. Also, I do hope i've explained what i'm trying to do clearly. I sometimes have a tendency to not clarify certain things as much as i should 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 -- new to this forum. My questions concerns a problem I've run into many times. I'm trying to be CSS-moral and use style sheets as much as possible, or a least place properties in the Header. But here's what I run into. Many times I find it necessary to have different properties for the same tag within the Body. Currently, I use CSS to create the Menu items at the top of each web page, an Unordered List, using the "li" tags. Ok, but I just discovered that by using a new CSS statement, I can use custom bullets in the Body's li tag: list-style-image : url(bullet.gif) . Cool!!! So, I went about making a little dog bone .gif and used it for my bullet graphic halfway down the page. Voila! It worked. Voila! I suddenly have dog bones in my menu (which I don't want !), which also use the li tag. I only know two workarounds. 1) is to go back to the BAD practice of using the taboo in-line style="images/dogbone.gif" in each li within the body and NOT put the statement in the Header style section or 2) at least try to use CSS in the header by making a class like li.bone { list-style-image : bone} and then repeat class="bone" for each li in the body, which is only slightly shorter than just putting in the style="xxx" in the first place. So, how do we handle using different style properties for the same tag within the body? Perplexed, Mike I'd like to seperate blocks of text with a horazontal rule. I'd like it to be dashed. So, I've come up with this: Quote: hr { border: none 0; border-top: 1px dashed #000; width:98%; height: 1px } However, although this works well in IE, it Firefox there is too much space between the HR and the text block under it. In other words, the text above the HR comes right up to the line, but the text under the line, there is a larger gap. Any way to close the gap? Any ideas? Unfortunately I am not very experienced and I am trying to edit some coding that has been done for me. The code is as follows <div title="[[TITLE]]" style='background-image: url ([bg]); padding: 5%; width:90%; height:100%; padding-left: 6%; padding-right: 6%; background-size: 100% 100%; '> Now what happens is the words I type in this box are beautifully laid out because of the padding... The images placed in the box should stretch border to border - but obviously don't because of the padding.... Can anyone please tell me what I can change to give my text padding but images with no padding? Thanks so much 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 Ok so what is the css substitute for the valign tag? Thanks! I have a header.inc and a css style sheet that are called to each page of a website via php. In the style sheet there are two styles that I would like to change depending on the section of the website. For example: in the style sheet css id "subnav" has background: #E8EDF5 and cssi id "subtitle" has background #E8EDF5 however in each major section of the website I would like to change the background colors of the divs that have id "subnav" and "subtitle". Is there type of php statement that I could place at the top of my website pages that would allow me to specify the colors of these two css ids? Hope I have made this clear. Hi, I remember reading that there is a css attribute for removing all browser-specific formatting from an element, for example forms, H tags and divs (which are pre-formatted differently in ie and firefox) but I can't recall what it was! Does anyone know how this is achieved as I find it very laborious when creating stylesheets to have to remember to reset all of these elements' formats. - before anyone says it, I know I could set up a generic, cross-browser-ready stylesheet for use with all my sites, and this is a system I already employ, I am simply concerned with saving bytesize and achieveing smaller stylesheets that are more easy to work with. I remember it was something like this: instead of: form{ margin:0px; padding:0px; } I'm sure you can do something like: form{ preformatting:none; } Does anyone know what I'm talking about? Or did I dream it?... cheers in advance Hi, I have an issue where my css loads fine with Safari and Firefox. However, I have no styling when it comes to any versions of IE. I have listed the code below. Any help would be greatly appreciated. (There is a bit of php, but css is not loaded through it). Code:
<?php require_once("php/includes/sitewide.php"); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<?php keywords(); ?>
<?php description(); ?>
<link href="css/sitestyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="active"><a href="<?php echo $link1; ?>"><?php echo $namelink1; ?></a></li>
<li><a href="<?php echo $link2; ?>"><?php echo $namelink2; ?></a></li>
<li><a href="<?php echo $link3; ?>"><?php echo $namelink3; ?></a></li>
<li><a href="<?php echo $link4; ?>"><?php echo $namelink4; ?></a></li>
<li><a href="<?php echo $link5; ?>"><?php echo $namelink5; ?></a></li>
<li><a href="<?php echo $link6; ?>"><?php echo $namelink6; ?></a></li>
<li><a href="<?php echo $link7; ?>"><?php echo $namelink7; ?></a></li>
</ul>
</div>
<!-- end #menu -->
<div id="header">
<h1><a href="<?php echo $link1; ?>"><?php echo $site_title; ?></a></h1>
<h2 style="color: #FFFFFF;"><?php echo $statement; ?></h2>
</div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post hr">
<h1>Welcome to <em>Site Title</em></h1>
<img src="images/building_1.jpg" alt="" width="120" height="120" class="left" />
<p><strong>SiteTitle</strong>performs home inspections that exceed the standards of the American Society of Home Inspectors. After accompanying us during the inspection, reading the inspection report, the client will know more about the home they are planning to purchase and quite often will know more about the condition of the house than the seller!*</p>
</div>
<div class="post">
<h2>Home Inspections</h2>
<p><strong>Home Inspections</strong> are a necessity for homebuyers in South Carolina when purchasing a new or existing Home.*Potential homebuyers MUST be knowledgeable and informed of any and all problems that may exist prior to closing. The challenge is to find a qualified home inspector with the experience and knowledge of performing a thorough and comprehensive inspection of the property that the buyer can trust and can rely on the accuracy of the inspection.</p>
<h3>Join Us</h3>
<p>Join the hundreds of satisfied clients who have retained us to help them with their real estate transactions.</p>
<blockquote>
<p><?php quotes(); ?> </p>
</blockquote>
</div>
</div>
<!-- end #content -->
<div id="sidebar">
<div id="updates" class="orangebox">
<h2><?php echo $header1; ?></h2>
<ul>
<li><a href="<?php echo $inspectlink_1; ?>"><?php echo $inspectname_1; ?></a></li>
<li><a href="<?php echo $inspectlink_2; ?>"><?php echo $inspectname_2; ?></a></li>
<li><a href="<?php echo $inspectlink_3; ?>"><?php echo $inspectname_3; ?></a></li>
<li><a href="<?php echo $inspectlink_4; ?>"><?php echo $inspectname_4; ?></a></li>
<li><a href="<?php echo $inspectlink_5; ?>"><?php echo $inspectname_5; ?></a></li>
<li><a href="<?php echo $inspectlink_6; ?>"><?php echo $inspectname_6; ?></a></li>
<li><a href="<?php echo $inspectlink_7; ?>"><?php echo $inspectname_7; ?></a></li>
</ul>
<h2><?php echo $header2 ?></h2>
<ul>
<li><a href="<?php echo $categorylink_1; ?>"><?php echo $categoryname_1; ?></a></li>
<li><a href="<?php echo $categorylink_2; ?>"><?php echo $categoryname_2; ?></a></li>
<li><a href="<?php echo $categorylink_3; ?>"><?php echo $categoryname_3; ?></a></li>
<li><a href="<?php echo $categorylink_4; ?>"><?php echo $categoryname_4; ?></a></li>
<li><a href="<?php echo $categorylink_5; ?>"><?php echo $categoryname_5; ?></a></li>
<li><a href="<?php echo $categorylink_6; ?>"><?php echo $categoryname_6; ?></a></li>
<li><a href="<?php echo $categorylink_7; ?>"><?php echo $categoryname_7; ?></a></li>
</ul>
</div>
</div>
<!-- end #sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end #page -->
<div id="footer">
<p id="legal"><?php echo COPYRIGHT; ?></p>
</div>
<!-- end #footer -->
<?php analytics(); ?>
</body>
</html>
Here is the css. Code:
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(../images/img01.gif) repeat-x;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666666;
}
h1, h2, h3 {
color: #333333;
}
h1, h2 {
margin-bottom: 20px;
font-weight: normal;
}
h1 {
font-size: 197%;
}
h2 {
font-size: 152%;
}
h3 {
font-size: 100%;
}
p, ul, ol {
margin-bottom: 20px;
line-height: 1.8em;
}
ul, ol {
margin-left: 3em;
}
blockquote {
padding-left: 3em;
background: url(../images/img08.gif) no-repeat;
font-style: italic;
}
a:link {
color: #1953A7;
}
a:active {
color: #ED5C0C;
}
a:visited {
color: #666666;
}
a:hover {
text-decoration: none;
color: #067600;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 20px 10px 0;
}
/* Menu */
#menu {
width: 770px;
height: 65px;
margin: 0 auto;
border-right: 1px solid #EDEBD5;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
width: 109px;
height: 45px;
padding: 20px 0 0 0;
border-left: 1px solid #EDEBD5;
text-transform: lowercase;
text-decoration: none;
text-align: center;
font-size: 144%;
color: #BABABA;
}
#menu a:hover {
background: #F7F7F4;
}
#menu .active a {
background: #F49A24;
color: #FFFFFF;
}
/* Header */
#header {
width: 770px;
height: 170px;
margin: 0 auto;
}
#header h1 {
float: left;
width: 220px;
height: 100px;
margin: 0;
padding: 70px 0 0 0;
background: url(../images/header_left.jpg) no-repeat;
text-align: center;
font-size: 36px;
}
#header h2 {
float: right;
width: 530px;
height: 86px;
margin: 0;
background: url(../images/header_right.jpg) no-repeat;
padding: 84px 20px 0 0;
text-align: right;
}
#header a {
text-transform: lowercase;
text-decoration: none;
font-style: italic;
font-weight: normal;
color: #FFFFFF;
}
/* Page */
#page {
width: 770px;
margin: 0 auto;
padding: 20px 0;
}
/* Content */
#content {
float: left;
width: 550px;
padding-top: 10px;
}
#submitButton:hover {
}
.submitButton {
border-width: 1px;
padding: 5px;
border-style: solid;
margin: 5px;
border-color: #000000;
color: inherit;
}
.input {
border-width: 1px;
padding: 5px;
border-style: solid;
margin: 5px;
border-color: #000000;
color: inherit;
}
.inputSmaller {
border-width: 1px;
padding: 5px;
border-style: solid;
margin: 5px;
border-color: #000000;
color: inherit;
}
.post {
margin-bottom: 20px;
padding: 0 20px;
}
.hr {
border-bottom: 1px solid #EDEBD5;
}
/* Sidebar */
#sidebar {
float: right;
width: 210px;
padding: 5px;
background: #EDEBD5;
}
#sidebar h2 {
margin: 0;
padding: 5px 15px;
color: #FFFFFF;
}
#sidebar h3 {
font-size: 85%;
color: #FFFFFF;
}
#sidebar ul {
margin: 0;
padding: 15px;
list-style: none;
}
#sidebar li {
}
#sidebar a {
color: #FFFFFF;
}
.orangebox {
background: url(../images/img05.gif) repeat-y;
}
.orangebox h2 {
background: url(../images/img06.gif) repeat-y;
}
/* Footer */
#footer {
clear: both;
height: 100px;
padding: 25px 0;
background: #EDEBD5 url(../images/img04.gif) repeat-x;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
color: #666666;
}
is it possible to modify the look of a checkbox input field with CSS? (background, check color, border, etc) thanks, --Lone Hi for some reason some style are getting lost when ie is displaying the page i am developing, if somone could have a look that would be fantastic edited links because question has been answered Thanks everyone |
|||||||