PDA

View Full Version : Using tables in conjunction with style sheets



Codenoob2
08-08-2010, 06:37 PM
I'm using a div element and I'm giving it a class name "tablestyle." I'm using an external style sheet called OurBlog.css and I'm using a class selector (therefore a "." in the style sheet) and I've tried using an id selector. The first occurence of the class selector .tablestyle in the style sheet produces the results I want (i.e. a gold background, and adjusted font size). The second occurence which I named .tablestyle1, seems to do nothing even though I specified it in the style sheet. I will post my code here and maybe I'm making a significant mistake which can be pointed out. Here is the HTML document code:
<!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>
<link rel="stylesheet"
type="text/css" href="http://www.christ-alive-community-church.com/Blog/OurBlog.css" />
<title>Our Blog</title>
</head>
<body>
<script language="JavaScript">
<!-- Hide the script from old browsers --

var img0_on = new Image(400,400);
img0_on.src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg";
var img0_off = new Image(400,400);
img0_off.src="http://www.christ-alive-community-church.com/images/throne-of-grace.jpg";

function swap_image(parm_name,over) {
document[parm_name].src = window[parm_name + (over?"_on":"_off")].src;
}
// --End Hiding Here -->
</script>
<TABLE>
<TR>
<TD>
<a href="http://www.christ-alive-community-church.com" onmouseover="swap_image('img0',true);" onmouseout="swap_image('img0')">
<img src="http://www.christ-alive-community-church.com/images/SynaxisAngels.jpg" border="0" name="img0" width="400" height="400">
</a>
</TD>
</TR>
<TR>
<TD>
<div class="tablestyle">
So this blog is new and I don't have much to say,
<br>
I'm going to add more to it soon.
<br>
I've figured out how to get the images to swap.
<br>
I need to collaborate with the church to know what to
<br>
put on the website.
</div>
</TD>
</TR>
<TR>
<TD>
<div id="tablestyle1">
<p>07/08/2010
<br>
I'm STILL working on this website and I have a long way to go. I'm applying a style sheet now to make things clearer.</p>
</div>
</TD>
</TR>
</TABLE>
</body>
</html>


and here is the OurBlog.css style sheet code:


body {background-color:blue;}

.tablestyle
{
background-color:gold;
font-family:"Times New Roman", Times, serif;
font-size:2.0em;
font-weight:bold;
]
#tablestyle1
{
background-color:gold;
font-family:"Times New Roman", Times, serif;
font-size:2.0em;
font-weight:bold;
}



Thanks.

_Aerospace_Eng_
08-08-2010, 06:40 PM
Check your CSS again. Typos can cause things not to work. ] is not }.

Ugh...and why are you using tables for page layout? Read the link in my sig. Tables are not meant for page layout.

Codenoob2
08-08-2010, 07:56 PM
Ok, I read your sig about using transitional or table-less layout. But what do I do to avoid using tables?
Is there a site you can point me to? I feel like so much of what I've learned is being tossed in the garbage.

_Aerospace_Eng_
08-08-2010, 10:49 PM
www.bonrouge.com has some really good tips on CSS layouts.

jdswebservice
08-09-2010, 01:12 AM
If you really want to create a blog, my suggestion would be to use a CMS. WordPress is one that i would use.

Even if you're blog doesn't exactly look like your homepage then thats fine. I took a look at your code and noticed it was for a church.

I own a web design business and for churches and non-profit organizations i do all my work for free. If you would like me to help you i am more then glad to help you with this!

J-

PM me for my phone number and i'll get you hooked up so you don't have to worry about the hassle of creating your own CMS using PHP and other misc BS.