...

View Full Version : VERY basic HTML, CSS, DIV question



amateurcoderJJS
11-20-2010, 12:29 AM
Hello, hope someone can help me with some basics. I manage several websites I originally built in FrontPage, all tables, no css. I paid to have the site I'm working on today converted to XHTML 1.0 Strict with CSS and Div. I now use Dreamweaver. All testing and changes were completed and it's now mine to modify. I'm kind of wandering through the new page layout. Here's my EASY problem.

I still appropriately have some tables in my website: www.alaskashack.com they are for some calendar pages and some recipe pages. Currently ALL tables on this website have the same one pixel border (for both cells and table outline.) I want NO borders on my "recipe" pages tables, but I want to keep them on my calendar pages. One set of CSS styles ALL the tables in my website (I think). So....could someone detail how to change my CSS and HTML to get TWO different styles of tables, one with borders and one without.

Here is the relevant CSS:

#rightside table{
border: 1px solid #aeaeae;
color: #333333;
}
#rightside table td, #rightside table th{
border: 1px solid #aeaeae;
padding: 3px;
font-size: 12px;
}
#rightside table.calendar td{
height: 110px;
width: 80px;
}
#rightside table.calendar th{
height: 30px;
}
I could post the HTML but I think it would be easier to just view the source on a couple of example pages.
http://www.alaskashack.com/baja-fish-taco.php for a recipe page and
http://www.alaskashack.com/july-2011-calendar.php for a calendar page.

Please keep it real basic and with examples if possible, I'm doing my best to understand the whole CSS, DIV, CLASS, ID thing, but this part is all new to me.

Thanks for ANY help.

John

teedoff
11-20-2010, 12:56 AM
Well a simple way would be to give each table a unique id name then style the name separately. For example:


<table id="recipeTable">
Your recipe Table
</table>


CSS:



#recipeTable {
border: none;
}

amateurcoderJJS
11-20-2010, 05:06 AM
I think I see your point, but I really don't want a seperate ID for every single table, as I just have the two types of tables. One with borders and one without. I have 5 calendar pages that can all use the same table properties. Then I have 15+ recipe pages that can all have a table without borders. Can I keep my changes simple instead of having individual CSS for every single table.

Can you get more basic on the implementation? I can cut and paste the CSS but I'm not sure what parts of the table code themselves in the HTML I need to change. Sorry this is so basic, but I have a ways to go with implementing CSS into my websites and I'm trying!

Thanks for you help,
John

teedoff
11-20-2010, 05:14 AM
Thats the point of giving your tables ID's. You will use one stylesheet. but by naming a table, you differentiate it from a table with no id or a table with a different id. Thats about as basic as you can get. To style two tables differently in the stylesheet, you have to name the tables diffferently.

You cuold give all your recipe tables an id like the one I gave above, and leave the calendar tables as is and then set the style rule for the recipe tables like above.

Stubworth
11-20-2010, 05:24 AM
What I'm going to suggest is what I think you want to know, but if it's not, ignore me!

:thumbsup:

Right, here goes:

Create a new file in Dreamweaver called 'tablestyles.css' and put it in a new directory (folder) called 'css'. (It's always good to have a separate CSS folder you see).

In this 'tablestyle.css' file, put your two table styles, whatever the CSS for them is, e.g.



# recipetable
{
border: none;
}

# othertable
{
border: 1px solid;
}


Save that file, but make sure you save it as a .css file and that it is saved in your new 'css' directory.

Now, go to your first page that you want to use the table styles on and put this code in the header:


<link rel='stylesheet' type='text/css' href='path/to/the/folder/css/tablestyle.css'>

This code loads your CSS file when the page loads.

Now, find the code for your table and the bit where it says:


<table width="###" cellpadding="0" ...and so on>

Add the following to that <table.....> area:


<table id="recipetable".....> or <table id="othertable".........>

You can keep the rest of the normal table formatting details in there, e.g. cellspacing, cellpadding etc. but remove the 'border' property, from the <table> tag, as you don't want a conflict.

Now, if all goes to plan, this should allow you to format your tables from a remote file.

Of course, you can add extra ID's to your tablestyle.css file as you wish.

Make sure that every page has the <link rel="......> at the top of it.

As a final point, if you were unaware, to add an ID to an element in your file, you just put id="id-name" in the tag. As long as ID is functional with the tag!

Hope that makes sense. Any more questions or if I've totally gone done the wrong path, let me know! :)

Best of luck! :D

amateurcoderJJS
11-20-2010, 06:55 AM
What I'm going to suggest is what I think you want to know, but if it's not, ignore me!

:thumbsup:

Right, here goes:

Create a new file in Dreamweaver called 'tablestyles.css' and put it in a new directory (folder) called 'css'. (It's always good to have a separate CSS folder you see).

In this 'tablestyle.css' file, put your two table styles, whatever the CSS for them is, e.g.



# recipetable
{
border: none;
}

# othertable
{
border: 1px solid;
}


Save that file, but make sure you save it as a .css file and that it is saved in your new 'css' directory.

Now, go to your first page that you want to use the table styles on and put this code in the header:


<link rel='stylesheet' type='text/css' href='path/to/the/folder/css/tablestyle.css'>

This code loads your CSS file when the page loads.

Now, find the code for your table and the bit where it says:


<table width="###" cellpadding="0" ...and so on>

Add the following to that <table.....> area:


<table id="recipetable".....> or <table id="othertable".........>

You can keep the rest of the normal table formatting details in there, e.g. cellspacing, cellpadding etc. but remove the 'border' property, from the <table> tag, as you don't want a conflict.

Now, if all goes to plan, this should allow you to format your tables from a remote file.

Of course, you can add extra ID's to your tablestyle.css file as you wish.

Make sure that every page has the <link rel="......> at the top of it.

As a final point, if you were unaware, to add an ID to an element in your file, you just put id="id-name" in the tag. As long as ID is functional with the tag!

Hope that makes sense. Any more questions or if I've totally gone done the wrong path, let me know! :)

Best of luck! :D

Ok, I thought this might be basic enough for me, so I attempted it, but...it's not working for me. I think I still have conflicting code. I copied and pasted your CSS directly to my file named style.css, I put it in there with my other CSS code for the website, so that I didn't need to link to the CSS page again in the header, since this was already done.

Then I went to the HTML in the recipe page and it now looks like this:


<table id="recipetable" table cellspacing="0" cellpadding="0" border="0" width="70%">


It may be important to note and could be part of what I'm missing here that both these tables are in a part of the page named:


<div id="rightside">


After the last change I went to both of the following in my current CSS and changed the border to 0:


#rightside table{
border: 0px solid #aeaeae;
color: #333333;
}
#rightside table td, #rightside table th{
border: 0px solid #aeaeae;
padding: 3px;
font-size: 12px;
}


Of course, as would be expected, and as I wanted, my recipe page tables and cells have no borders.

Then I went to the calendar page and changed the HTML to this:


<table id="othertable" table border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" class="calendar">


but now my calendar table and cells have no border.

I must be close. I haven't uploaded this to my live server, but my current CSS can be seen at alaskashack.com/style.css if that were to help.
I really appreciate the assistance and think I must be getting close here.

Thanks,
John

amateurcoderJJS
11-20-2010, 06:58 AM
Thats the point of giving your tables ID's. You will use one stylesheet. but by naming a table, you differentiate it from a table with no id or a table with a different id. Thats about as basic as you can get. To style two tables differently in the stylesheet, you have to name the tables diffferently.

You cuold give all your recipe tables an id like the one I gave above, and leave the calendar tables as is and then set the style rule for the recipe tables like above.

Teedoff, if you're still interested and have any thoughts on where I'm going wrong here I'd apprecaite your input.

Thanks,
John

amateurcoderJJS
11-20-2010, 07:12 AM
I got it guys!!! Just had to add the border to the CSS in the existing Class=Calendar tag.

Now if it will validate??

Thanks,
John

santhoshj400
11-20-2010, 11:40 AM
Hi
you can add classes and ids for table to make it appear different form because classes and ids are unique and used to differentiate same object using them

teedoff
11-20-2010, 03:06 PM
Hi
you can add classes and ids for table to make it appear different form because classes and ids are unique and used to differentiate same object using them

Thats what I said in the first place. I thought he wanted the most basic and easiest way to differentiate a table element.

But I will say I was wrong. The easiest way would have been to add a style to each table on each page IN your html.


<table border="0">

Anyway, glad you got it working!

Stubworth
11-20-2010, 11:02 PM
Did it validate?!

Don't leave us in suspense!

Also, when it comes to CSS validation, don't panic if you have loads of warnings. It's the errors that you need to really worry about!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum