Tue, 2010-07-13 20:41
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.
| Attachment | Size |
|---|---|
| b.png | 163 bytes |
| bl.png | 302 bytes |
| br.png | 307 bytes |
| l.png | 161 bytes |
| m.png | 118 bytes |
| r.png | 153 bytes |
| t.png | 155 bytes |
| tl.png | 245 bytes |
| tr.png | 289 bytes |
Tue, 2010-07-13 21:39
#1
why dont you show us a
why dont you show us a picture of how you want it to look?
Tue, 2010-07-13 21:49
#2
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?
Wed, 2010-07-14 13:42
#3
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...
| Attachment | Size |
|---|---|
| table_image.png | 985 bytes |
Wed, 2010-07-14 13:56
#4
use css3 to create this box,
use css3 to create this box, no images or needless html.
Wed, 2010-07-14 14:01
#5
pacodub wrote: here is what i
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.
Wed, 2010-07-14 14:11
#6
Quote: ...I agree with
...I agree with TPH...
Pineapple?
Wed, 2010-07-14 14:13
#7
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.
Wed, 2010-07-14 16:43
#8
CupidsToejam wrote: Quote:
...I agree with TPH...
Pineapple?
sorry.
Wed, 2010-07-14 16:53
#9
pacodub wrote: I would love
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.
Mon, 2010-07-19 12:08
#10
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?