Style Sheet Gradient to single cell

Question

stevenpetersen 35 Junior Poster

14 Years Ago

In CSS I was wanting to know if there is a way to set up a html table cells with tags h1, h2, that are controlled with a style sheet. I would still need to know how to put the Gradient on each cell.
(i will post as solved)

[TEX]Thank you,
Steven Petersen[/TEX]

web-design

3 Contributors
13 Replies
149 Views
1 Year Discussion Span
Latest Post 13 Years Ago Latest Post by veneta1

All 13 Replies

almostbob 866 Retired: passive income ROCKS

14 Years Ago

the table is styled directly

table { bla bla }
td { bla blah }

where you want to style elements inside the table

td > p { bla bla ]
td > div { bla bla }

these demonstrate the form for a <p> or <div> that is the directly inside a table [element] >(first child) [element] generic

td * { bla bla }

styles any element that is any child grandchild or lower child of a td

td > p > h1 {bla bla }

any h1 child of a p child of a td

a gradient background ius usually a 1px * (huge)px or a (huge)px * 1px gradient image repeated in the 1px direction
for a 1*100 image background:#0f0 url('gradient.gif') repeat-x;

almostbob 866 Retired: passive income ROCKS

14 Years Ago

body { font:100% verdana,arial; text-align:left;  }
@media all {
.dontall {display:none; }
}
@media print {
body { line-height:100%; font-size:12pt; font-family: verdana, arial; }
.dontprint { display:none; }
p { padding: 1px; margin:0; line-height:100%; list-style-type:square; }
p:first-line { font-weight:bold; }
p:first-letter { font-size:150%; float:left; }
}
@media screen {
.dontshow { display:none; }
.doshow { display:inline; }
}
a { text-decoration: none; }
a:hover { background-color: #66cdaa; text-decoration: none; }
a:focus { background-color: #66cdaa; text-decoration: none; }
a:active { background-color: #66cdaa; text-decoration: none; }
a.button { background-color: #e4e0d8; color: #000000; cursor: pointer; }
a.button:hover  { background-color: #66cdaa; }
a.button:focus  { background-color: #66cdaa; }
a.button:active { background-color: #66cdaa; }
img { border: 0px; }
p { padding: 1px; font-size: 100%; line-height:135%; list-style-type:square; }
p:first-line { font-weight:bold; }
p:first-letter { font-size:200%; float:left; }
table { padding: 1px; }
td { background:url('YOUR GRADIENT IMAGE.gif') repeat-x; }
td > p { font-size: 85%; font-weight:bold; float:right; }
td > div { font-size:150%; font-weight:bold; float:right color:#ff00ff; }

I'm not going to create the page for you,

almostbob 866 Retired: passive income ROCKS

14 Years Ago

a gradient fill is 1 px x huge, or huge x 1px
you repeat the 1px side,
_______________________ << example repeat-y becomes a red rectangle
the attachment is a gradient fill for repeat-y where the larest possible x dimension for the div its from is 390px,
on repeat-x/y/both there are no margins borders padding in the repeat, so that there are no blank spaces

W3C recommendations, font sizes be set in relative sizes, ems and % in screen display,
the 12pt 16px fonts set throughout your css are not good, I am visually restricted, not bad enough to consider myself impaired, but I loathe web sites with fixed fonts set in the stylesheets, it makes it that much harder to read, as the fonts override my browser settings, 16px on a 24inch 2850 * 2140px screen is .15inch high very very small,
screens get bigger, dot sizes on those screens get smaller with each generation, pixels get smaller and smaller
the 12pt font set in @media print in the demo css is a print(paper) setting, not a screen setting,
target cost $1million because their site uses fixed fonts, is not lawfully accessible and they got sued..
onscreen fixed font sizes cannot be resized to suit the visual impairment of the user,
you lose customers, and the law suit.
one lawsuit has created precedent, there is likely to be a rash of them.

keep ahead, its easier than catching up

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

stevenpetersen 35 Junior Poster · Answer 1 · 2009-06-30T22:30:39+00:00

In CSS I was wanting to know if there is a way to set up a html table cells with tags that are controlled with a style sheet. I would still need to know how to put the Gradient on each cell.
(i will post as solved)
sorry about my text wrap im still new to the site (New-b)
Steven Petersen

stevenpetersen 35 Junior Poster · Answer 2 · 2009-07-01T23:10:10+00:00

Can you show me how it would look on the style sheet and how the table would look in the HTML page?

stevenpetersen 35 Junior Poster · Answer 3 · 2009-07-02T01:01:22+00:00

stevenpetersen 35 Junior Poster

14 Years Ago

Is there away to stretch instead of repeat?

stevenpetersen 35 Junior Poster · Answer 4 · 2009-07-02T01:02:28+00:00

body 
{
background-color: white;
font-family: Times New Roman;
font-size: 12pt; 
}

h1 
{
color: #008000; 
text-align:left;
font-family: Times New Roman;
font-size: 12pt; 
font-style:italic; 
font-weight:bold; 
text-decoration:underline; 
letter-spacing:0pt
} 

h2 
{
color: #008000; 
text-align:left;
font-family: Times New Roman;
font-size: 12pt; 
font-style:italic; 
font-weight:bold
}

p 
{
color: #008000; 
text-align:left;
font-family: Times New Roman;
font-size: 12pt; 
font-style:italic; 
font-weight:bold
}

a:link    
{
color:#000000; 
text-decoration:underline; 
font-size:16px; 
font-style:italic; 
font-weight:bold
}

a:visited 
{
color:#CCCC00; 
text-decoration:underline; 
font-size:16px; 
font-style:italic; 
font-weight:bold
}

a:active  
{
color:#CCCC00; 
text-decoration:underline; 
font-size:16px; 
font-style:italic; 
font-weight:bold
}

a:hover   
{
color:#CCCC00; 
text-decoration:underline; 
font-size:16px; 
font-style:italic; 
font-weight:bold
}


table 
{ 
padding: 0px; 
}

td 
{ 
background:url('YOUR GRADIENT IMAGE.gif') repeat-x; 
}

td > p 
{ 
font-size: 12pt; 
font-weight:bold; 
float:right; 
}

td > div 
{ 
font-size:12pt; 
font-weight:bold; 
float:right color:#ff00ff; 
}

stevenpetersen 35 Junior Poster · Answer 5 · 2009-07-02T21:54:57+00:00

Thank you,
P.S. now i have to learn about

@media all {
@media print {
@media screen {

again thank you for everything.

almostbob 866 Retired: passive income ROCKS · Answer 6 · 2009-07-02T23:33:23+00:00

@media are a way of setting styles for different media in the same stylesheet,
printers accept the layout defined in @media print {}
the demo css is a subset of styles.css.php file ( .php because gzip is enabled for php on my server )
there are media types for screen, print, handheld devices, assisted devices(screen readers for the blind), and others, that are better/worse supported.
@media screen print all; are pretty well supported.
body 12pt margin 1 inch,
P firstline indent,
P first character Bold Cap
works pretty well on paper, but looks crap onscreen,
a screen layout, looks crap on paper.
using media specific css you can make the layout similar enough to be identified as your site, on paper, pc, blackberry, by using styles, that the devices can render accurately.
serve icons to blackberry instead of 800*600 img (on a 200*200 screen?)
print with copyright watermarks
hide links in print

long n rambling,
but the topic is almost unlimited

stevenpetersen 35 Junior Poster · Answer 7 · 2009-07-03T00:06:53+00:00

@media are a way of setting styles for different media in the same stylesheet,
printers accept the layout defined in @media print {}
the demo css is a subset of styles.css.php file ( .php because gzip is enabled for php on my server )
there are media types for screen, print, handheld devices, assisted devices(screen readers for the blind), and others, that are better/worse supported.
@media screen print all; are pretty well supported.
body 12pt margin 1 inch,
P firstline indent,
P first character Bold Cap
works pretty well on paper, but looks crap onscreen,
a screen layout, looks crap on paper.
using media specific css you can make the layout similar enough to be identified as your site, on paper, pc, blackberry, by using styles, that the devices can render accurately.
serve icons to blackberry instead of 800*600 img (on a 200*200 screen?)
print with copyright watermarks
hide links in print
long n rambling,
but the topic is almost unlimited

should i post a new Thread on how to set up?

@media all {
@media print {
@media screen {

almostbob 866 Retired: passive income ROCKS · Answer 8 · 2009-08-26T09:40:53+00:00

should i post a new Thread on how to set up?
@media all {
@media print {
@media screen {

resurrecting the dead thread but,
@media all gives the same result as css without a media definition, gets applied to everything unless overwritten

I have @media all { /* generic styles */ } set because I tend to come back in months (as in this thread) and have to work out what the **expletive deleted** I have done to make 'this' do 'that' @media screen { /* watermarks for images (transparent png overlays, take that you right click save as), auto resizing em font sizes to be user friendly, web safe colors */ } and @media print { /* logo image top left, menus display:none, pt font sizes, all black text, images without copysafe overlays */ } all css within the displayable ability of the device works, its just a matter of deciding exactly how you want the page to display on certain devices, and putting the css in place

veneta1 0 Newbie Poster · Answer 9 · 2010-10-10T23:04:14+00:00

veneta1 0 Newbie Poster · Answer 10 · 2010-10-10T23:04:51+00:00

veneta1 0 Newbie Poster

13 Years Ago

http://www.vbox7.com/groups/56fed1e2/members/

Style Sheet Gradient to single cell

Recommended Answers Collapse Answers

All 13 Replies

Recommended Answers