/    Sign up×
Community /Pin to ProfileBookmark

Table Question

Copy linkTweet thisAlerts:
Dec 23.2004

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?

[upl-file uuid=98475b08-ac37-42d3-8b52-4a99c9bdd926 size=30kB]example.jpg[/upl-file]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@andyshepDec 23.2004 — slice the "+" jpeg into 4 smaller images..

place and position these into the 4 cells.

andy
Copy linkTweet thisAlerts:
@MstrBobDec 23.2004 — That's not tabular data. So why would you use a table? ?

Something like this:

[SIZE=1]<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en" dir="ltr"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;meta name="Content-Style-Type" content="text/css"&gt;
&lt;title&gt;Website Title&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
#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;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;div class="box"&gt;
&lt;img src="pic1.jpg" alt="Picture Description Here" width="100" height="100"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="box"&gt;
&lt;img src="pic2.jpg" alt="Picture Description Here" width="100" height="100"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="box"&gt;
&lt;img src="pic3.jpg" alt="Picture Description Here" width="100" height="100"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;div class="box"&gt;
&lt;img src="pic4.jpg" alt="Picture Description Here" width="100" height="100"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
[/SIZE]

Then make your checkboxes with the little cross the background image for #container.
Copy linkTweet thisAlerts:
@jonathanhouauthorDec 23.2004 — 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?
Copy linkTweet thisAlerts:
@MstrBobDec 23.2004 — Interesting. It works like it should in IE 6, Firefox 1.0, and Opera 7.5 May I ask what browser you are using?
Copy linkTweet thisAlerts:
@NogDogDec 23.2004 — Here's what I came up with:
[code=php]
<!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>
[/code]
Copy linkTweet thisAlerts:
@MstrBobDec 23.2004 — 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.
Copy linkTweet thisAlerts:
@NogDogDec 23.2004 — [i]Originally posted by MstrBob [/i]

[B]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. [/B][/QUOTE]
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. ?
×

Success!

Help @jonathanhou spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...