10 replies [Last post]
pacodub
pacodub's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT-4
Joined: 2005-09-13
Posts: 8
Points: 4

I am trying to get away from using 3x3 table and want to use css/nested divs to create a 3x3 grid. I can get it to work if the images do not have a transparent dropshadow.

This is what I have so far...

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css"\>
#3x3-container {
	width: 500px;
}
#top {
	background-image: url(3x3a_images/t.png);
	background-repeat: repeat-x;
	background-position: top;
}
#bottom {
	background-image: url(3x3a_images/b.png);
	background-repeat: repeat-x;
	background-position: bottom;
}
#left {
	background-image: url(3x3a_images/l.png);
	background-repeat: repeat-y;
	background-position: left;
}
#right {
	background-image: url(3x3a_images/r.png);
	background-repeat: repeat-y;
	background-position: right;
}
#topleft {
	background-image: url(3x3a_images/tl.png);
	background-repeat: no-repeat;
	background-position: top left;
}
#topright {
	background-image: url(3x3a_images/tr.png);
	background-repeat: no-repeat;
	background-position: top right;
}
#bottomleft {
	background-image: url(3x3a_images/bl.png);
	background-repeat: no-repeat;
	background-position: bottom left;
}
#bottomright {
	background-image: url(3x3a_images/br.png);
	background-repeat: no-repeat;
	background-position: bottom right;
}
#middle {
	background-image: url(3x3a_images/m.png);
	padding: 17px 0px;
	margin: 0px 17px;
}
</style>
</head>
<body>
<div id="3x3-container">
  <div id="topleft">
    <div id="topright">
      <div id="bottomleft">
        <div id="bottomright">
          <div id="top">
            <div id="bottom">
              <div id="left">
                <div id="right">
                  <div id="middle">This is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is textThis is text</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

I can't seem to figure this out... any help would be greatly appreciated.

AttachmentSize
b.png163 bytes
bl.png302 bytes
br.png307 bytes
l.png161 bytes
m.png118 bytes
r.png153 bytes
t.png155 bytes
tl.png245 bytes
tr.png289 bytes
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 48 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

why dont you show us a

why dont you show us a picture of how you want it to look?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If the content is tabular it

If the content is tabular it belongs in a table. That's what tables are for.

Since you haven't really shown us any content we can't tell if the content is tabular, but why would you want a grid structure otherwise?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

pacodub
pacodub's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT-4
Joined: 2005-09-13
Posts: 8
Points: 4

here is what i want it to

here is what i want it to look like...

i guess i just see these some of these websites... and they all just use divs/css to style them. And I was trying that...

AttachmentSize
table_image.png 985 bytes
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 48 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

use css3 to create this box,

use css3 to create this box, no images or needless html.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

pacodub wrote: here is what i

pacodub wrote:

here is what i want it to look like...

i guess i just see these some of these websites... and they all just use divs/css to style them. And I was trying that...

Since apparently all you want are curvy corners I agree with TPH, just use the CSS3 rules to make them visible on compliant browsers.

But once again I repeat that what counts is the content, not the visual aspects. Without seeing actual content we have no logical way of advising you how to mark it up. You seem to think like a graphics designer, and in the context of the web, that's a bad thing.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 48 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Quote: ...I agree with

Quote:

...I agree with TPH...

Pineapple?

pacodub
pacodub's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT-4
Joined: 2005-09-13
Posts: 8
Points: 4

I would love to use css3 if I

I would love to use css3 if I could... but it has to supported in browsers that don't support css3.

As far as content... it is just going to be text inside the box and stretch vertically and horizontally.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CupidsToejam wrote: Quote:

CupidsToejam wrote:
Quote:

...I agree with TPH...

Pineapple?

sorry.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

pacodub wrote: I would love

pacodub wrote:

I would love to use css3 if I could... but it has to supported in browsers that don't support css3.

As far as content... it is just going to be text inside the box and stretch vertically and horizontally.

Well, I disapprove of your attitude toward content. I think that actually, content is everything, content is what people come for, and styling and layout are only there to make the content useable and, one hopes, stylish. HTML is meant to mark up content because on the web it is content that is king. Little minor details like curvy corners are really not very important, fun as they may be.

The main browsers other than IE all have properties you can use to do curvy corners and that's the reccommended way to do it. Yeah, visitors using IE won't see them. Do you think they care? Will they come back to your site more often? If you think so then I think you are dreaming.

Yeah, using images and CSS placement you can make curvy corners for all browser, at the expense of extreme complexity in your code and extreme difficulty in making any future changes. If my salary depended on that I could figure out how to do it, if I had to, I guess. But it doesn't, so ta heck with it.

Spend the time and effort on things that really matter is my plan, and it's good content that people want to read that really matters in the long run. IMO.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 21 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

CupidsToejam wrote: Quote:

CupidsToejam wrote:
Quote:

...I agree with TPH...

Pineapple?

Yes, even when not posting, I am posting. How do you think I got Over NINE THOUSAND posts?

Verschwindende wrote:
  • CSS doesn't make pies