Forum Moderators: not2easy
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]
WBF
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 :)
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]
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
thtdYou 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
divdivdivWhat 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.
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> </td>
</tr>
[/2][2]
<tr>
<td width="130">On Reading</td>
<td> </td>
</tr>
<tr>
<td width="130">Kun Reading</td>
<td> </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]
Nice examples Setek!
