FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

CSS Class problem SOLVED

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


woundedhealer
I've got two tables on my page, and I want to have different styles for them.
The link for the first css is <link href="../../../css/.links.css" rel="stylesheet" type="text/css"> and I've put class="links" in the table tag.

My second link is <link href="../../../css/.contents.css" rel="stylesheet" type="text/css"> with class="contents" in the second table tag.

The problem is the second table has got the style of the first table. If I use one class stylesheet, both tables are affected. Does anyone know what's going on here and what the solution is?

Last edited by woundedhealer on Thu Mar 22, 2007 10:49 pm; edited 1 time in total
LukeakaDanish
woundedhealer wrote:
I've got two tables on my page, and I want to have different styles for them.
The link for the first css is <link href="../../../css/.links.css" rel="stylesheet" type="text/css"> and I've put class="links" in the table tag.

My second link is <link href="../../../css/.contents.css" rel="stylesheet" type="text/css"> with class="contents" in the second table tag.

The problem is the second table has got the style of the first table. If I use one class stylesheet, both tables are affected. Does anyone know what's going on here and what the solution is?


The name of the style sheet has NOTHING to do with class names. Smile

Instead add the following to your style sheet:

Code:

.contents {#styles#}
.links {#styles#}


...of course replacing the #styles# bit with your own style definitions!

BTW: incase you haven't managed this: tables should have class="contents" and class="links"

then, to modify the cells inside the table with css use:

Code:

.contents td {}
.links td {}


and insert your code there.
woundedhealer
LukeakaDanish wrote:
woundedhealer wrote:
I've got two tables on my page, and I want to have different styles for them.
The link for the first css is <link href="../../../css/.links.css" rel="stylesheet" type="text/css"> and I've put class="links" in the table tag.

My second link is <link href="../../../css/.contents.css" rel="stylesheet" type="text/css"> with class="contents" in the second table tag.

The problem is the second table has got the style of the first table. If I use one class stylesheet, both tables are affected. Does anyone know what's going on here and what the solution is?


The name of the style sheet has NOTHING to do with class names. Smile

Instead add the following to your style sheet:

Code:

.contents {#styles#}
.links {#styles#}


...of course replacing the #styles# bit with your own style definitions!

BTW: incase you haven't managed this: tables should have class="contents" and class="links"

then, to modify the cells inside the table with css use:

Code:

.contents td {}
.links td {}


and insert your code there.


I've already got

a: link {code} etc. Do I really need to also add td?

I've tried this, and putting both codes into one sheet, but I've still got problems, they've just changed. Links in .links table are the right size but wrong color. Links in .contents table are the right color but wrong size. And in case you're wondering, I haven't got them muddled up on the stylesheet.
LukeakaDanish
Can you please either:

Post complete CSS + HTML

OR

Link me to your site

Smile

This is definitely a very easy problem to solve - promise Smile
woundedhealer
Quote:
This is definitely a very easy problem to solve - promise

I'll take your word for that. I'm sure what you wrote makes sense, dyslexia can make the simplest explanation look mind boggling.

I've tried so many ways to sort this out, I might have messed my code up.

This is the file I'm working on


Code:
<head>
<title>Mabinogi Contents</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="../../../css/background.css" rel="stylesheet" type="text/css">
<link href="../../../css/.contents.css" rel="stylesheet" type="text/css">
<link href="../../../css/.links.css" rel="stylesheet" type="text/css">
</head>
<div align="center"><?php include( "../../../links.php"); ?>
<br><br>
<table width="100%" border="0" cellpadding="0" class="contents" >
  <tr>
    <td valign="top"><div align="center">
   </p>
    <table width="99%" border="0" cellpadding="6">
      <tr>
        <td height="54"  valign="top"><div align="center">
            <h3>The Four Branches Of The Maginogi</h3>
            <a href="theladyofthefountain.php">The Lady of the Fountain</font></a>
            <BR>
            <a href="peredurthesonofevrawc.htm"> Peredur the Son
            of Evrawc</a>
            <BR>
            <a href="geraintsonoferbin.htm"> Geraint the son of
            Erbin</a>
            <BR>
            <a href="kilhwchandolwen.htm"> Kilhwch and Olwen</a>
            <BR>
            <a href="thedreamofrhonabwy.htm"> The dream of Rhonabwy</a>
            <BR>
            <a href="pwyllprinceofdyved.htm"> Pwyll Prince of Dyved</a>
            <BR>
            <a href="branwendaughterofllyr.htm"> Branwen the daughter
            of Llyr</a>
            <BR>
            <a href="manawyddansonofllyr.htm"> Manawyddan the son
            of Llyr</a>
            <BR>
            <a href="mathsonofmathnwy.htm"> Math the son of Mathonwy</a>
            <BR>
            <a href="thedreamofmaxenwledig.htm"> The dream of Maxen
            Wledig</a><BR>
            <a href="thestoryoflluddandllevelys.htm"> The story
            of Lludd and Llevelys</a><BR>
            <a href="taliesin.htm"> Taliesin </a></font></div>
              </td>
          </tr>
    </table>
   </body>
</html>


This is the code for the include file.
Code:
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div align="center"><img src="http://www.celticawen.frih.net/images/celticawen.gif"></div>
<br>
 
<table width="100%" height="25" align="center" border="#CFB58D" align="center" bgcolor="#663300" class=links>
  <tr>
    <td width="150">&nbsp;</td>
    <td width="125" height="21">&nbsp;</td>
    <td width="125">&nbsp;</td>
    <td width="127"><div align="center"><a href="http://www.celticawen.frih.net/index.php">HOME</a></div></td>
    <td width="128"><div align="center"><a href="http://www.celticawen.frih.net/mythology/welsh/mabinogi/contents.php">MYTHOLOGY</a></div></td>
    <td width="127"><div align="center"><a href="mailto:celticawen@tiscali.co.uk">CONTACT</a></div></td>
    <td width="126">&nbsp;</td>
    <td width="126">&nbsp;</td>
    <td width="*">&nbsp;</td>
   
  </tr>
</table>
 
</div>


Here's the code for the links (include) file
Code:
<style type="text/css">
.links
a:link {
   color: #FFFFCC;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
   
a:visited {
color: #FFFFCC;
text-decoration: none;
text-transform: uppercase;
text-decoration: none;
font-size: xx-small;
font-weight: bold;
}
a:hover {
   color: #CFB58D;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
a:active {
   color: #BD9777;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
</style>


And this is the code for the contents file

Code:
<style>
<style type="text/css">
.contents
h3{
   color: #006666;
   font-family: Georgia;
   text-transform: uppercase;
}

a:link {
   color: #793D00;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: bold;
   font-family: Georgia;

}
   
a:visited {
color: #793D00;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
font-family: Georgia;
}


a:hover {
   color: #CFB58D;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: bold;
   font-family: Georgia;
}

a:active {
   color: #BD9777;
   text-decoration: none;
   text-transform: uppercase;
   font-weight: bold;
   font-family: Georgia;

}
</style>


This is the link to this file:
http://www.celticawen.frih.net/mythology/welsh/mabinogi/contents.php

Now I know I've messed up, my background.css isn't working Sad
LukeakaDanish
Ok...this can be solved!

Firstly: put all your css lines inside ONE file and call it anything (i suggest main.css). Include this file the way you normally would.

Secondly: Inside your css documents you have some <style> and </style> tags. They shouldn't be there - delete them!

Thirdly: If i understand what you're trying to do correctly, you're trying to style all <a>'s that are inside your "links" table. The correct way to do that is:

Code:

.links a:link {
   color: #FFFFCC;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
   
.links a:visited {
color: #FFFFCC;
text-decoration: none;
text-transform: uppercase;
text-decoration: none;
font-size: xx-small;
font-weight: bold;
}

.links a:hover {
   color: #CFB58D;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
.links a:active {
   color: #BD9777;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}


Notice how I've added the .links before all your definition.


Hope this helps - otherwise, I will go right in there and do it for you! - then you can study HOW I've done it.
woundedhealer
I've got .contents working as it should, but for some reason .links isn't working, the hyperlinks are in default size and color. It was fine until I uploaded it, everything was working as it should be. I was Very Happy for a few minutes I've even managed to specify line-height in .contents. I'm wondering if the problem has anything to do with .links being a php include file. When I tested it in my browser I had both tables in one file.

I also want to include the background image and the table colors in the stylesheet to make it easier if I want to change them in the future.

I'm going to have to leave it for a few hours so maybe the solution will come to mind while I'm away from my laptop.
Azmo
damn, that's alot of td's.. rly hope you sort that out.. cause it looks like a real mess.. I always see it as a challange to keep the html to as few rows as possible (using div's tho) and do as much as possible with it with so few css rows as possible.. kinda have a competition with a friend.. the one who can do most with as few rows css and html as possible.. everything to keep it clean, show of skills and improve your work..

he managed to build a whole site, including all links and stuff with just 168 rows of css.. kinda big site too.. I'm still at 200 rows.. blehe.. working on it tho.. blaiming my 30 extra rows on harder positioning and stuff Smile

anyways, good luck with your work Smile
woundedhealer
Quote:
damn, that's alot of td's.. rly hope you sort that out.. cause it looks like a real mess..

That's for new topics......when I get round to doing them. The first links bar I did was with divs and sub menus but I couldn't get It to work as an include. I wanted to do this one with divs instead of tables, but I also wanted it centered so it would look good but I couldn't get it right. This is a quick temporary one until I finally manage to figure out the problem with the sub menu one. As it's done as an include, all I have to do is give the new links bar the same name as the present one and all the files will have been updated.

There is a lot of styling to this file. The top part is the links bar with a dark background and the bottom part is a table of contents on the light background, so they need different font colors. I want as much detail as possible on the stylesheets in case I need to make any changes to things like background and font colors. My choices look fine on my laptop, but may look awful when viewed elsewhere. This is also going to finish up a big site.

Time I got back to finding out what I've done wrong.

[EDIT] I forgot to show the new code. This is the .links code:
Code:
.link a:link {
   color: #FFFFCC;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
   
.link a:visited {
color: #FFFFCC;
text-decoration: none;
text-transform: uppercase;
text-decoration: none;
font-size: xx-small;
font-weight: bold;
}
.link a:hover {
   color: #CFB58D;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}
.link a:active {
   color: #BD9777;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
}

This is the table code.
Code:
<table  width="100%" height="25" align="center" border="#CFB58D"  bgcolor="#663300" class="links">

I know I've probably missed something that's very obvious.

Last edited by woundedhealer on Thu Mar 22, 2007 5:46 pm; edited 1 time in total
traxion
Azmo wrote:
damn, that's alot of td's.. rly hope you sort that out.. cause it looks like a real mess.. I always see it as a challange to keep the html to as few rows as possible (using div's tho) and do as much as possible with it with so few css rows as possible.. kinda have a competition with a friend.. the one who can do most with as few rows css and html as possible.. everything to keep it clean, show of skills and improve your work..

he managed to build a whole site, including all links and stuff with just 168 rows of css.. kinda big site too.. I'm still at 200 rows.. blehe.. working on it tho.. blaiming my 30 extra rows on harder positioning and stuff Smile

anyways, good luck with your work Smile


lol a site off CSS.. u got on link?
woundedhealer
I said it would be something obvious, and it was. I used .links in the html and link in the css. It's perfect now I've changed it.

Next to tackle the background image and table colors, get them in the css sheets. Then change my files from html to php + change links in them to php. I

f anyone wants to give any imput as to adding the background image and table colors to this css, all contributions will be greatly appreciated. Very Happy Wink
LukeakaDanish
woundedhealer wrote:
I said it would be something obvious, and it was. I used .links in the html and link in the css. It's perfect now I've changed it.

Next to tackle the background image and table colors, get them in the css sheets. Then change my files from html to php + change links in them to php. I

f anyone wants to give any imput as to adding the background image and table colors to this css, all contributions will be greatly appreciated. Very Happy Wink


Good job! - I noticed the mistake with the (s) as well - forgot to tell you Smile

If the advice you need is how to do bg's in css here is a quick tutorial from me Smile

Background color
Code:
elem {background-color: #hex;}
OR
elem {background-color: blue;}


Background image
Code:

elem {
    background-image: url(images/bg.png);
    background-repeat: repeat-x OR repeat-y OR repeat OR no-repeat;
    background-position: left top OR right bottom OR px values eg 20px 50px;
}


Hope thats good enough Smile
woundedhealer
Quote:
If the advice you need is how to do bg's in css here is a quick tutorial from me

I've got the background image sorted now. I don't know what I did differently, but what ever it was it worked. I don't normally have a problem with background colors, but for some reason I can't get the table background and borders done in css. I somehow did it when I was having all the problems, but I had to remove it because it was adding color to the second table.

Ignorance time. What's elem? [EDIT] Got it, Embarassed elements. I've got my table background and border colors sorted. I know, you're all shouting EASY. I got there in the end. Smile Thanks for all the advice. LukeakaDanish, you've been a huge help. I couldn't have done it without you

Last edited by woundedhealer on Thu Mar 22, 2007 10:51 pm; edited 1 time in total
LukeakaDanish
By elem I meant any elemt...eg. #title or .content or h1 or body or WHATEVER Smile
woundedhealer
LukeakaDanish wrote:
By elem I meant any elemt...eg. #title or .content or h1 or body or WHATEVER Smile

When I first read your post I was thinking, what sort of selector is elem? Dyslexia raises it's ugly head again. It suddenly came to me when I was working on my stylesheet.....element.....shortens to elem.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.