PDA

Click to See Complete Forum and Search --> : Table Question

jonathanhou
12-23-2004, 12:01 PM
If i wanted to create a table (table I think is what I would use) that looked like a box, but I wanted to divide the inside of the box up into four equal sections, with a "+" (+ is a .jpg) in the middle, how would I do this?
andyshep
12-23-2004, 12:20 PM
slice the "+" jpeg into 4 smaller images..
place and position these into the 4 cells.

andy
MstrBob
12-23-2004, 12:21 PM
That's not tabular data. So why would you use a table? :confused:

Something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Content-Style-Type" content="text/css">
<title>Website Title</title>
<style type="text/css">
<!--
#container {
width:400px;
height:400px;
background:url('check.jpg') top left no-repeat;
}

.box {
color:#0066cc;
float:left;
width:200px;
height:200px;
}

.box img {
float:left;
margin:2px;
padding:0;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="pic1.jpg" alt="Picture Description Here" width="100" height="100">
<p>This is the top left box. Fake latin follows. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In erat mauris, faucibus ac, consectetuer ut, commodo id, tellus. Nunc erat. Curabitur est.</p>
</div>
<div class="box">
<img src="pic2.jpg" alt="Picture Description Here" width="100" height="100">
<p>This is the top right box. Fake latin follows. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In erat mauris, faucibus ac, consectetuer ut, commodo id, tellus. Nunc erat. Curabitur est.</p>
</div>
<div class="box">
<img src="pic3.jpg" alt="Picture Description Here" width="100" height="100">
<p>This is the bottom left box. Fake latin follows. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In erat mauris, faucibus ac, consectetuer ut, commodo id, tellus. Nunc erat. Curabitur est.</p>
</div>
<div class="box">
<img src="pic4.jpg" alt="Picture Description Here" width="100" height="100">
<p>This is the bottom right box. Fake latin follows. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In erat mauris, faucibus ac, consectetuer ut, commodo id, tellus. Nunc erat. Curabitur est.</p>
</div>
</div>
</body>
</html>


Then make your checkboxes with the little cross the background image for #container.
jonathanhou
12-23-2004, 12:25 PM
MstrBob, when I used the code that you gave me, it pulls all of them in a row, not dividing them up in four squares. Any suggestions?
MstrBob
12-23-2004, 12:40 PM
Interesting. It works like it should in IE 6, Firefox 1.0, and Opera 7.5 May I ask what browser you are using?
NogDog
12-23-2004, 12:46 PM
Here's what I came up with:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
body {
margin: 0;
padding: 10px;
}
.topleft {
float: left;
margin: 0;
padding: 5px;
width: 190px;
height: 190px;
overflow: auto;
background-color: aqua;
}
.topright {
float: right;
margin: 0;
padding: 5px;
width: 190px;
height: 190px;
overflow: auto;
background-color: silver;
}
.bottomleft {
float:left;
margin: 0;
padding: 5px;
width: 190px;
height: 190px;
overflow: auto;
background-color: silver;
}
.bottomright {
float: right;
margin: 0;
padding: 5px;
width: 190px;
height: 190px;
overflow: auto;
background-color: aqua;
}
.container {
margin: 0;
padding: 0;
background: white url(/img/plus.gif) no-repeat 50% 50%;
margin: 0;
width: 400px;
}
</style>
</head>
<body>

<div class=container>

<div class=topleft>
<p>This is a test. It is only a test. This is the left column.
This is a test. It is only a test. This is the left column.
This is a test. It is only a test. This is the left column.</p>
</div>

<div class=topright>
<p>This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.</p>
</div>

<div class=bottomleft>
<p>This is a test. It is only a test. This is the left column.
This is a test. It is only a test. This is the left column.
This is a test. It is only a test. This is the left column.</p>
</div>

<div class=bottomright>
<p>This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.</p>
</div>

</div>

</body>
</html>
MstrBob
12-23-2004, 12:51 PM
NogDog, I had the same approach, originally, but for:

1) One class cuts down the code
2) Each box having a background image would hide the background of the container.
NogDog
12-23-2004, 12:57 PM
Originally posted by MstrBob
NogDog, I had the same approach, originally, but for:

1) One class cuts down the code
2) Each box having a background image would hide the background of the container.
1. Yeah, I don't like the way my code looks, but it was the first thing I got to work. :)
2. Hmmmm....good point. :(