homepage Welcome to WebmasterWorld Guest from 23.22.217.122
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Best Way to Code a CSS Chart
What's the best way to code this chart?
a0731370




msg:3031363
 12:34 pm on Aug 2, 2006 (gmt 0)

Hi.

I'm looking for suggestions on how to make a chart is CSS.

Here is the style in ascii form.
______________________________
.............____________________
.............____________________
.............____________________
.............____________________
______________________________
.............____________________
.............____________________
.............____________________
.............____________________
______________________________
.............____________________
.............____________________
.............____________________
.............____________________
______________________________
.............____________________
.............____________________
.............____________________
.............____________________
______________________________

Basicly I need one div on the left for 130x130px images. Next, another div in the center divided in 4 smaller
175x37 boxes for text.

Then another div on the right divided in to 4 smaller 175x37 boxes for additional text.

This style or layout needs to repeat because I have 80 images.
This CSS will be for a 1st Grade Japanese Kanji chart.

Help with this is greatly appreciated.

[edited by: engine at 11:29 am (utc) on Aug. 7, 2006]
[edit reason]
[1][edit reason] <br>[1][edit reason] formatting [/edit]
[/edit][/1] [/edit][/1]

 

willybfriendly




msg:3031436
 1:32 pm on Aug 2, 2006 (gmt 0)

Use a table. It looks like tabular data anyway, and there are times that <tr>'s and <td>'s are the best way to go...

WBF

moltar




msg:3031447
 1:38 pm on Aug 2, 2006 (gmt 0)

Second the table! Def a table job.

Setek




msg:3032465
 4:43 am on Aug 3, 2006 (gmt 0)

Tabular data goes into tables - that's its purpose.

There's no real reason to make life complicated for seemingly semantic CSS-P, when it's actually more semantic to be in a table :)

a0731370




msg:3032923
 1:57 pm on Aug 3, 2006 (gmt 0)

Pretty vague posts people.

You talking with CSS or with out CSS? Got any examples of how to make this type of chart.

You all suggested tables.
How are tables any better for this then divs?

Sure I can use a table generator and make a simple 2 column 4 row table.

What about the extra cell on the left for the 130x130px image?
How would you add that?

How do you get all 80 tables to repeat down the page so you can scroll and read all 80 Kanji?

[edited by: engine at 10:23 am (utc) on Aug. 7, 2006]
[edit reason]
[1][edit reason] formatting [/edit]
[/edit][/1]

jessejump




msg:3033379
 7:08 pm on Aug 3, 2006 (gmt 0)

<table width="620" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="4">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

a0731370




msg:3035031
 3:40 am on Aug 5, 2006 (gmt 0)

Thank you for the table code.

david_uk




msg:3035118
 6:50 am on Aug 5, 2006 (gmt 0)

The table could have easily be generated by Front Page. Just copy the generated table into whatever you use to create pages.

Setek




msg:3036759
 2:02 am on Aug 7, 2006 (gmt 0)

You talking with CSS or without CSS? Got any examples of how to make this type of chart.

If you want a plain, unstyled table, then don't use any CSS on it. If you do, you can put padding on the th/tds, a border colour, a background colour, whatever you want to make it look how you want.

You all suggested tables. How are tables any better for this then divs?

It is tabular data - as in, one value in one column corresponds to the value in the same row, in another column - and that is why a table is better than a div. Someone say, on lynx, or on a screen-reader, will not be able to understand your div version as well as they would if it were a table. Just because you -can- CSS divs to make it resemble a table, -doesn't- mean you should. Everything has its purpose, this is a table's purpose.

What about the extra cell on the left for the 130x130px image? How would you add that?

...
<tr>
<td><img src="/images/kanji/kanji01.jpg" /></td>
<td>romanji counterpart</td>
<td>english meaning</td>
<td>contextual usage</td>
</tr>
...

N.B.: This is an incomplete representation of a table, in fact, just a single row in your table, and can be repeated as per every kanji.

How do you get all 80 tables to repeat down the page so you can scroll and read all 80 Kanji?

You don't. Not 80 tables. 80 rows in 1 table. All corresponding data.

<table summary="Table of Kanji and meanings">
<caption>Table 1: Kanji and their meanings, with contextual examples</caption>
<thead>
<tr>
<th scope="col">Kanji</th>
<th scope="col">Romanji</th>
<th scope="col">English</th>
<th scope="col">Example</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="/images/kanji/kanji01.jpg" /></td>
<td>romanji counterpart</td>
<td>english meaning</td>
<td>contextual usage</td>
</tr>
<tr>
<td><img src="/images/kanji/kanji02.jpg" /></td>
<td>romanji counterpart for kanji02</td>
<td>english meaning for kanji02</td>
<td>contextual usage for kanji02</td>
</tr>
... [repeat for all 80 characters]
</tbody>
</table>

Pretty vague posts people.

To be clear, they're not vague responses, they're pretty indicative as to what you should use, and why. We naturally assumed you have a greater understanding of HTML, semantics for the web, etcetera. But that's okay, I hope this clarifies.

a0731370




msg:3036970
 8:00 am on Aug 7, 2006 (gmt 0)

After using the table code posted by jessejump
I was able to construct this layout.
So just copy and paste and check it out.

XHTML

[2]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Grade 1 Kanji</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="hdrbox"></div>
<div id="mainbox">
[/2]

[2]
<!--____________________ Table____________________ -->
<table border="1" width="500" cellpadding="2" cellspacing="0">
<tr>
<td rowspan="4" align="center" width="70"><img src="img/01.png" alt=""></img></td>
<td width="130">Hiragana</td>
<td>&nbsp;</td>
</tr>
[/2]

[2]
<tr>
<td width="130">On Reading</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="130">Kun Reading</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="130">Meanings</td>
<td>fire</td>
</tr>
</table>
[/2]

CSS

[2]
body {
background-image: url(img/bg_img.png);
background-color: #EFEFEF;
color: #FFFFFF;
font-family: verdana, geneva, arial, sans-serif, century;
font-size: x-small;}
[/2]

[2]
#container {
text-align: center;
margin-left: auto;
margin-right: auto;}
[/2]

[2]
#mainbox {
position: relative;
width: 550px;
height: 510px;
overflow: auto;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: #DDDDDD;
color: #000000;
border-top: 0px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;}
[/2]

[2]
#hdrbox {
background-image: url(img/hdr_img.png);
position: relative;
width: 550px;
height: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-color: #FFFFFF;
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;}
[/2]

[2]
div#mainbox table {
background-color: #FFFFFF;
color: #000000;
margin-top: 10px;
margin-bottom: 10px;}
[/2]

chuckstarks




msg:3042564
 1:00 pm on Aug 11, 2006 (gmt 0)
Combine tables and CSS with id="name" class="someclass", e.g.
-------------------- HTML
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="index" class="navbar" onclick="javascript:ReplaceSelf('index');" title="some title">
<noscript><a href="index.html"></noscript>
index page foreground text
<noscript></a></noscript>
</td>
<td id="about" class="navbar"
onclick="javascript:ReplaceSelf('about');"
title="About ...">
<noscript><a href="about.html"></noscript>
about foreground text
<noscript></a></noscript>
</td>
.
.
.
</tr>
</table>
-------------------- CSS, if you use images as backgrounds, be sure to use no-repeat
.navbar {
font-family: Arial, Helvetic, sans-serif;
color: RGB(0,0,255); /* #0000FF */
text-align: center;
vertical-align: middle;
font-size: 14px;
background-image: url(images/navbutton.gif);
background-position: left center;
background-repeat: no-repeat;
background-attachment: scroll;
width: 87px;
height: 36px;
}
pageoneresults




msg:3043997
 5:38 pm on Aug 12, 2006 (gmt 0)

Out of all the choices provided, I'd have to choose Setek's solution as it provides a "proper semantic structure" for the tabled data.

Nice examples Setek!

jessejump




msg:3044020
 5:50 pm on Aug 12, 2006 (gmt 0)

It doesn't match what the OP asked for.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved