Is this possible with CSS?

Hello,

I am trying to replicate a table design that I created for Print in
Photoshop:

http://www.wikifortio.com/504226/Test.jpg

Is it possible to create this with CSS?

I created a table with thead, tfoot and tbody tags.
The tags thead and tfoot use tr and th. The tag tbody uses tr and td.

I have been trying to style this with CSS but no success. Is this
possible?

Thanks,
Miguel

Scripsit shapper:

Hello,

Please get to the point. Preferably in the Subject line. Now the most
significant part (given the context, which implies that everything here
deals with CSS) is "this". Does this give clue?

I am trying to replicate a table design that I created for Print in
Photoshop:

http://www.wikifortio.com/504226/Test.jpg

Can't you explain the idea in words? Do we have to look at the picture
before we even know what on &Planet; you are talking about?

Is it possible to create this with CSS?

Probably not. Most things in the world aren't possible to create with
CSS.

I created a table with thead, tfoot and tbody tags.
The tags thead and tfoot use tr and th. The tag tbody uses tr and td.

That's trivial and fairly irrelevant. You're effectively just saying
"I'm using table markup".

I have been trying to style this with CSS but no success.

But you don't share your best effort with us.

Is this possible?

It depends on what "this" is.

Oh well, I peeked. And most of it is possible with CSS, though the
rounded corners would require some hackery (or the use of a background
image and _fixed_ dimensions, in pixels, for the content). I'd estimate
it might take about 4 hours.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Mar 1, 1:20 pm, "Beauregard T. Shagnasty"
<a.nony.m... (AT) example (DOT) invalid> wrote:

shapper wrote:
I am trying to replicate a table design that I created for Print in
Photoshop:

http://www.wikifortio.com/504226/Test.jpg

http://k75s.home.att.net/show/wikifortio.jpg

Find a place to upload your screenshot that does not require anyone to
have to download the graphic file, save it, and use their own image
editor. Like my link.

If you're working on a web site project, you must have access to a
server somewhere...

--
-bts
-Friends don't let friends drive Vista

Jukka,

calm down ... no stress. I admit I didn't post it the best way ...
.... but there was an image to download describing what I am trying to
do.

Beauregard,

I am following your advice:

http://www.27lamps.com/_lab/Table.htm

Basically my problems are:

1. Add the background image on each header cell with a 1px white space
between the background and the border.

The problem here is how to have the 1px white space between the
background color and the border.

2. Add the small icon on the bottom right corner of each header table
cell.

I have no idea how to do it unless I use background image ... but
then I will not be able to use the other one, right?

This is what I have:

..Grid
{
border-collapse: collapse;
margin: 20px;
color: #505050;
font-size: 70%;
width: 600px;
}
..Grid td, .Grid th
{
border: solid 1px #B6CBE7;
}
..Grid thead th
{
background: url(Images/GridHeaderBackground.jpg) repeat-x;
padding: 1px;
}

Thank You,
Miguel

Scripsit shapper:

calm down ... no stress. I admit I didn't post it the best way ...
... but there was an image to download describing what I am trying to
do.

So the URL you originally posted did not refer to something that
illustrates what you want? Instead we were supposed to _indirectly_
download an image, which was assumed to tell what "this" is.

That was even more clueless than I expected. Are you surprised to hear
that I lost all interest in trying to help you?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Mar 1, 2:44 pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit shapper:

calm down ... no stress. I admit I didn't post it the best way ...
... but there was an image to download describing what I am trying to
do.

So the URL you originally posted did not refer to something that
illustrates what you want? Instead we were supposed to _indirectly_
download an image, which was assumed to tell what "this" is.

That was even more clueless than I expected. Are you surprised to hear
that I lost all interest in trying to help you?

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Jukka,

This is starting to be a soap opera ...

In my initial post the problem was not explained the best way ... or
not the way usually is done here.

I tried to improve it following Beauregard tips.

Obviously it is up to each person to help me or not ... I am not going
to discuss that.

Thank You,
Miguel

Scripsit shapper:

In my initial post the problem was not explained the best way ... or
not the way usually is done here.

And you still haven't explained the problem verbally, in words, in plain
English.

Obviously it is up to each person to help me or not ... I am not going
to discuss that.

But you _are_ making pointless postings that say what you are not going
to do, as if that were of any interest to anyone.

I'm not trying to explain anything to you. Others may benefit from the
observation that people should help others to help them, using things
like
- meaningful Subject line
- clear explanation of the problem
- posting a URL without having been asked
- not posting useless babbling.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit shapper:

In my initial post the problem was not explained the best way ... or
not the way usually is done here.

And you still haven't explained the problem verbally, in words, in plain
English.

Obviously it is up to each person to help me or not ... I am not going
to discuss that.

But you _are_ making pointless postings that say what you are not going
to do, as if that were of any interest to anyone.

I'm not trying to explain anything to you. Others may benefit from the
observation that people should help others to help them, using things
like
- meaningful Subject line
- clear explanation of the problem
- posting a URL without having been asked
- not posting useless babbling.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Jukka,

I think more then this I can't do:

1. What I am trying to do:
http://www.27lamps.com/_lab/Table.htm

2. What I have:
http://www.27lamps.com/_lab/TableHtml.htm

Thank You,
Miguel

On Mar 1, 3:29 pm, shapper <mdmo... (AT) gmail (DOT) com> wrote:

On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:



Scripsit shapper:

In my initial post the problem was not explained the best way ... or
not the way usually is done here.

And you still haven't explained the problem verbally, in words, in plain
English.

Obviously it is up to each person to help me or not ... I am not going
to discuss that.

But you _are_ making pointless postings that say what you are not going
to do, as if that were of any interest to anyone.

I'm not trying to explain anything to you. Others may benefit from the
observation that people should help others to help them, using things
like
- meaningful Subject line
- clear explanation of the problem
- posting a URL without having been asked
- not posting useless babbling.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Jukka,

I think more then this I can't do:

1. What I am trying to do:http://www.27lamps.com/_lab/Table.htm

2. What I have:http://www.27lamps.com/_lab/TableHtml.htm

Thank You,
Miguel

Jonathan,

The white space I mean is the the background in each table header cell
to have a margin of 1px.

Please, see the links I just posted.

Thank You,
Miguel

shapper wrote:

Jonathan,

The white space I mean is the the background in each table header cell
to have a margin of 1px.

Please, see the links I just posted.

Already told you cannot be done, padding will be the background color.
Other than the way I show in the example in my other post you would have
to nest extra block elements within each table cells...yuck...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On 1 mar, 10:29, shapper <mdmo... (AT) gmail (DOT) com> wrote:

On Mar 1, 3:06 pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:


Others may benefit from the
observation that people should help others to help them, using things
like
- meaningful Subject line
- clear explanation of the problem
- posting a URL without having been asked
- not posting useless babbling.

I think more then this I can't do:

1. What I am trying to do:http://www.27lamps.com/_lab/Table.htm

2. What I have:http://www.27lamps.com/_lab/TableHtml.htm

Miguel,

Jukka is absolutely right. Basically, if you want help, try to be as
helpful as possible. And very important: show or try to provide as
much useful, helpful info that explains, that presents the issue, the
whole picture.

Words like "this", "0000001", "Table", "n00000001", etc.. are either
meaningless, irrelevant or misleading or confusing. It irritates a
very wide majority of readers of posted messages to have to read and
visit webpages just to try to figure out what is the problem, issue,
etc...

What you want to get as a layout may not be logical, coherent from a
web design perpective. What is the content of your table? Is it
tabular data? If not, then you may be misusing tables.

Usually, column headers in a table are centered, not left-aligned:
that is true for all text and graphical browsers. Even for most
printed material.

What's the purpose of that small image at bottom right corner? within
your page context? within your webpage situation? Is it for cosmetic,
ornemental purposes? etc.
We have no idea, no clue, no explanations.

a 1px white space between the background and the border

I do not see a 1px white space between the background and the border.
I see a 1px white border around the table cell though. The blue
between the 1px solid white borders may be the background-color of the
wrapping block container. Again, we don't know, we just see a chunk of
an image.

If you want a white border surrounding the table header cells, then
choose a 1px white border.

.Grid thead th
{
border: solid 1px #B6CBE7;

not a #B6CBE7 color.

Regards, Gérard