SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Non-Member DesignVHL's Avatar
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS - newbie NEEDS help with Company site!!

    Hi there,

    I am currently working on my company's website. It's been up for months, but
    I still have to get our product information in there. I'd like to represent
    specs in a chart/table format.

    I am very new to CSS, still trying to grasp some concepts. I'm more of a
    creative than an analytical thinker, so sometimes it takes me twice as long to
    understand certain "programming" concepts. I use dreamweaver, and even using
    those panels seems like a pain. I think I'd rather hard code it myself to be
    sure it works properly.

    I've done a lot of research on CSS, and have read a lot of tutorials. Some
    contradict one another! While I THINK i understand how it works, I guess I just am not sure how to visually make it work yet.

    I'd like to start off with just using CSS to stylize the data that i'm going to
    be using. These Product Specifications will be very similar to our Sister Company's website, located here:

    http://www.gepco.com/products/cable/...o/hidefsdi.htm

    We both deal in wire & cable. So while we both sell different products-and my company is a manufacturer, they are a distributor, our specs are pretty similar. I am not sure if the tables styles were done in CSS or not, but I do know that SOME CSS was used inline.

    How can I design tables similar to the ones at the bottom of the page listed
    above? I'm not sure how to go about coding it. Should I use the actual TABLE TAG, and just format how it will look using CSS? OR should I do the layout with CSS boxes or CSS coded "tables". I do know that i for sure would
    prefer an external CSS that will link to my product pages, so that my table fonts, colors, and styles are all consistant. My friend said to
    use classes, but I can't grasp the concept of how to only apply it to the
    Table/spec chart. I used tables to lay the site out also, and I'd like to start
    to move away from it if possible, with the "boxes-css concept"....I am going to
    slowly adding in CSS to replace those tables eventually, but I have another
    website for my company that I really need to get rolling on, it's going to take
    me a few months I think. I don't have time to do a full CSS site rehaul, but it's
    important for me to get these product specs up online ASAP!!! How can I be sure that the CSS table styles won't interfere with my current layout. ALSO,
    please keep in mind that each spec/table may not be configured exactly the same way. There may be less columns or rows. Or 2 different tables on one page. I have done a few tutorials, but I am not ready to take off those training wheels just yet. I really can't wait until I become more proficient in this area, I feel that CSS can do a lot in respect to a lot of things. I think it is opening up some doors for me, I can't wait to really dive in!!

    I think my biggest problem is that I don't know where to get started!!!
    Should I design it first in an HTML table to get it how I would like it to look, and
    THEN "transfer" it to CSS? I have done these spec tables in Adobe InDesign for our printed catalog that never got printed. I'd like to import these tables -
    with no styles and then put it how it should look if possible, so I don't have to re-do all these tables, which took me some time! I just can't seem to
    visualize how to make this work! I need easy explainations! LOL!

    I'd really appreciate it if someone could help me to explain all this stuff
    to me, in a way that I will understand how to do this properly. Examples of
    other similar charts would help, and perhaps a process/step by step procedure.

    I really appreciate any help with this, for I've been wasting too much time
    reading, and not enough time designing. After I finish this project, I'm going
    to be working on a freelance project - small website that I"m going to do in
    CSS to get me rollling and to learn more. I hear that CSS is the way to go
    these days!! Most sites i visit use it.

    Anyways, thanks again for your time, and for reading this LONG post! I'm a
    rambler, so please bare with me! =) Also, thanks in advance for your help, it's much appreciated!!

    Valerie

  2. #2
    Non-Member DesignVHL's Avatar
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Link to Site

    The link I supplied may give an error, might not have typed in full URL, so just in case, here it is again:


    Gepco Product Spec Chart

  3. #3
    SitePoint Wizard jax502's Avatar
    Join Date
    Jul 2003
    Location
    Jacksonville, FL
    Posts
    1,031
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you use the <table> tag for the tables at the bottom of the page, because that's what the <table> tag is originally for, then use CSS for the layout of your site. I just finished converting my company's site to CSS from table-based layout. I agree it's hard to start because the whole design concept is different from what you're used to. Here's what I would suggest to get you started. SInce you already have the table-version of your site, I would just print out a page and draw boxes for each sections of your site. It doesn't have to be accurate, you can always change it later. Those will be your divs. then start coding those in CSS and HTML with borders so everytime you display the html file, you'll see where and how they appear on the screen, and make your adjustments. You don't necessarily need to complete every section, just make blank boxes so you'll be able to determine the size and positions you want. From there you can fill in your divs.
    jax502

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    think my biggest problem is that I don't know where to get started!!!
    Should I design it first in an HTML table to get it how I would like it to look, and
    THEN "transfer" it to CSS? I have done these spec tables in Adobe InDesign for our printed catalog that never got printed. I'd like to import these tables -
    with no styles and then put it how it should look if possible, so I don't have to re-do all these tables, which took me some time! I just can't seem to
    visualize how to make this work! I need easy explainations! LOL!
    To answer all your questions would take a book and more time than I have at present

    Anyway I'll try and point you in the right direction. I've looked at the page you linked to in your post and seen the format you have. The data you have on the page is exactly suited to tables and that is what they were designed for. There doesn't seem much point in using css layout for the table data aspect of the site.

    You can use tables but style them with CSS and have a much cleaner,lighter page than you have already.

    I've taken one of your tables and styled it with css to give you some ideas of how to style it with css and you can compare the layout with your own. You may find the css a little confusing at first as it is quite complicated to begin with but makes sense after a while.

    I've added features for accessibility which is the main reason for not using tables which may make the table look a bit complicated but its straight forward really. I've used table headers for the header and column and "scope" attributes to identify the cells etc.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    table.tbl1 {
     font-family:Verdana, Arial, Helvetica, sans-serif;
     width:100%;
    }
    table tr {font-size: xx-small;}
    table.tbl1 .border {border-bottom:2px solid #999;width:5%}
    table th.td1 {width:12%;text-align:center;}
    table .td2 {width:5%}
    table .td3 {width:9%}
    table .td4 {width:12%}
    table .td5 {width:13%}
    table .td6 {width:12%}
    table .td7 {width:8%}
    table .td8 {width:15%}
    table .td9 {width:6%}
    table .td10{width:8%}
    table.tbl1 .tblheaderborder th {border-bottom:2px solid blue;font-weight: bold;}
    table.tbl1 .part {
     font-size:x-small;
     font-weight:bold;
     color: #0033CC;
     padding-left:5px;
    }
    table.tbl1 td.divider {
     background:#dcdcdc;
     font-style: italic;
     padding-left:5px;
     border-bottom:2px solid #999;
    }
    
    .table.tbl1 th {text-align:left}
    table.tbl1 {border-collapse:collapse}
    </style>
    </head>
    <body>
    <table class="tbl1" cellspacing="0" cellpadding="0" summary="table for xxxx etc.">
    		<tr class="tblheaderborder"> 
    		  <th scope="col" class="td1">Part #</th>
    		  <th scope="col" class="td2">#of<BR>Cond.</th>
    		  <th scope="col" class="td3">Nominal<BR>OD</th>
    		  <th scope="col" class="td4">Conductor</th>
    		  <th scope="col" class="td5">Insulation<BR> (type, OD)</th>
    		  <th scope="col" class="td6">Shield</th>
    		  <th scope="col" class="td7">Jacket<BR>Type</th>
    		  <th scope="col" class="td8">Jacket<BR>Colors</th>
    		  <th scope="col" class="td9">UL<BR>Type</th>
    		  <th scope="col" class="td10">Approx.<BR>Weight</th>
    		</tr>
    		
      <tr> 
    		  <th scope="row" class="part">VHD1100</th>
    		  <td>1</td>
    		  <td>.405&quot;</td>
    		  <td>14 AWG<BR>Solid BC</td>
    		  <td>Foam PE,<BR> .285&quot;</td>
    		  <td>95%TC Braid,<BR> 100% Foil</td>
    		  <td>PVC</td>
    		  <td style="whitespace:no-wrap">Black, others by spec. order</td>
    		  <td>CMR</td>
    		  <td>80lbs/Mft</td>
    		</tr>
      
    		<tr> 
    		  <td class="border"></td>
    		  <td class="divider" colspan="9">Extended Distance RG11</td>
    		</tr>
    		
      <tr> 
    		  <th scope="row" class="part">VHD7000</th>
    		  <td>1</td>
    		  <td>.320&quot;</td>
    		  <td>16 AWG<BR> Solid BC</td>
    		  <td>Foam PE,<BR>.223&quot;</td>
    		  <td>95% TC Braid,<BR> 100% Foil</td>
    		  <td>PVC</td>
    		  <td>Black, others by spec. order</td>
    		  <td>CMR</td>
    		  <td>60 lbs/Mft</td>
    		</tr>
    		
      <tr> 
    		  <td class="border"></td>
    		  <td colspan="9" class="divider">Extended  Distance RG7</td>
    		</tr>
    		
    		<tr> 
    		  <th scope="row" class="part">VSD2001</th>
    		  <td>1</td>
    		  <td>.272&quot;</td>
    		  <td>18 AWG<BR>Solid BC</td>
    		  <td>Foam PE,<BR>.180&quot;</td>
    		  <td>95% TC Braid,<BR>100% Foil</td>
    		  <td>PVC</td>
    		  <td>Black, Brown, Red,<BR>
    			Orange, Yellow, Green,<BR>
    			Blue, Violet, Grey, White</td>
    		  <td>CMR</td>
    		  <td>42 lbs/Mft</td>
    		</tr>
    		
      <tr> 
    		  <th class="border"></th>
    		  <td class="divider" colspan="9">Low-loss RG6</td>
    		</tr>
    		<tr> 
    		  <th scope="row" class="part">VSD2001TS</th>
    		  <td>1</td>
    		  <td>.237&quot;</td>
    		  <td>18 AWG<BR>Solid BC</td>
    		  <td>Foam PE,<BR>.170&quot;</td>
    		  <td>95% TC Braid,<BR>100% Foil</td>
    		  <td>Plenum<BR>PVC</td>
    		  <td>White</td>
    		  <td>CMP</td>
    		  <td>40 lbs/Mft</td>
    		</tr>
    		
      <tr> 
    		  <td class="border"></td>
    		  <td class="divider" colspan="9">Low-loss RG6: Plenum</td>
    		</tr>
    		<tr> 
    		  <th scope="row" class="part">VPM2000</th>
    		  <td>1</td>
    		  <td>.242&quot;</td>
    		  <td>20 AWG<BR>Solid BC</td>
    		  <td>Foam PE,<BR>.146&quot;</td>
    		  <td>95% TC Braid,<BR>100% Foil</td>
    		  <td>PVC</td>
    		  <td>Black, Brown, Red,<BR>
    			Orange, Yellow, Green,<BR>
    			Blue, Violet, Grey, White</td>
    		  <td>CMR</td>
    		  <td>35 lbs/Mft</td>
    		</tr>
    		
      <tr> 
    		  <td class="border"></td>
    		  <td class="divider" colspan="9">Standard RG59</td>
    	  </table>
    </body>
    </html>
    Once you've put the css in an external file then the table is about a third of the size of your table and the presentation can be changed via the css file without touching the html.

    However the rest of the layout can be a css layout as it is pretty straightforward although you will need to understand positioning with css layouts first.

    There are no short cuts - you have to learn all the correct rules as well as all the browser bugs and quirks but in the end it will be worth it.

    Hope that's given you something to work on.

    Paul

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    To answer all your questions would take a book and...
    This book as a matter of fact.

    If you are already familiar with the CSS syntax but still need to make the 'mental leap' into designing with CSS I can highly recommend it. And no, I'm not getting commision.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You wouldnt going to see the potential of CSS until you start to use it. Give it a try even in the most simple design.
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  7. #7
    Non-Member DesignVHL's Avatar
    Join Date
    Jan 2004
    Location
    Chicago
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This has been extremely helpful. Thank you guy's so much!

  8. #8
    SitePoint Member
    Join Date
    Oct 2004
    Location
    uk-hampshire
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Intresting post as I too have just started to get into css, and not being from a coding background not the easiest of things to grasp, the basic syntax is not that hard to grasp but just understanding how it all fits in, theres just so much to consider.
    And as for where to start I totally agree in ...........where do you start...photoshop to html and tables is so simple...but obviously with css the flexibilty is incredible it makes sense to go that route.

    Im going to stick with it and try and get my head round it all.

    Tough times ahead I think!!!!.


    Jaime


Bookmarks

Posting Permissions

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