Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Houston, TX
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    VERY basic HTML, CSS, DIV question

    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

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well a simple way would be to give each table a unique id name then style the name separately. For example:

    Code:
    <table id="recipeTable">
    Your recipe Table
    </table>
    CSS:

    Code:
    #recipeTable {
          border: none;
    }

  • #3
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Houston, TX
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    43
    Thanks
    4
    Thanked 2 Times in 2 Posts
    What I'm going to suggest is what I think you want to know, but if it's not, ignore me!



    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.

    Code:
    # 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:

    Code:
    <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:

    Code:
    <table width="###" cellpadding="0" ...and so on>
    Add the following to that <table.....> area:

    Code:
    <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!

  • Users who have thanked Stubworth for this post:

    amateurcoderJJS (11-20-2010)

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Houston, TX
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Stubworth View Post
    What I'm going to suggest is what I think you want to know, but if it's not, ignore me!



    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.

    Code:
    # 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:

    Code:
    <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:

    Code:
    <table width="###" cellpadding="0" ...and so on>
    Add the following to that <table.....> area:

    Code:
    <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!
    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:
    Code:
    <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:
    Code:
    <div id="rightside">
    After the last change I went to both of the following in my current CSS and changed the border to 0:
    Code:
    #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:
    Code:
    <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

  • #7
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Houston, TX
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    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

  • #8
    New to the CF scene
    Join Date
    Nov 2010
    Location
    Houston, TX
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #9
    Banned
    Join Date
    Jul 2010
    Posts
    66
    Thanks
    0
    Thanked 1 Time in 1 Post
    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

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by santhoshj400 View Post
    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!

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    43
    Thanks
    4
    Thanked 2 Times in 2 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •