 |  |  |  |  |  |  |  |
Style Sheet Gradient to single cell
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Jun 2009
Posts: 130
Reputation: 
Solved Threads: 1
Junior Poster
In CSS I was wanting to know if there is a way to set up a html table cells with tags
(i will post as solved)
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)
Last edited by peter_budo; Jul 2nd, 2009 at 5:05 am. Reason: Editing post because of readibility issue
Steven Petersen
Web Designer / Web Master
Web Designer / Web Master
•
•
Join Date: Jun 2009
Posts: 130
Reputation:
Solved Threads: 1
Junior Poster
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
(i will post as solved)
sorry about my text wrap im still new to the site (New-b)
Steven Petersen
Steven Petersen
Web Designer / Web Master
Web Designer / Web Master
•
•
Join Date: Jan 2009
Posts: 1,346
Reputation:
Solved Threads: 163
the table is styled directly
where you want to style elements inside the table
these demonstrate the form for a <p> or <div> that is the directly inside a table
styles any element that is any child grandchild or lower child of a td
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
css Syntax (Toggle Plain Text)
css Syntax (Toggle Plain Text)
[element] >(first child) [element] generic css Syntax (Toggle Plain Text)
css Syntax (Toggle Plain Text)
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; Last edited by almostbob; Jun 30th, 2009 at 5:33 pm.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
•
•
Join Date: Jun 2009
Posts: 130
Reputation:
Solved Threads: 1
Junior Poster
Can you show me how it would look on the style sheet and how the table would look in the HTML page?
Steven Petersen
Web Designer / Web Master
Web Designer / Web Master
•
•
Join Date: Jan 2009
Posts: 1,346
Reputation:
Solved Threads: 163
css Syntax (Toggle Plain Text)
Last edited by almostbob; Jul 1st, 2009 at 3:22 pm.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
•
•
Join Date: Jun 2009
Posts: 130
Reputation:
Solved Threads: 1
Junior Poster
Is there away to stretch instead of repeat?
Steven Petersen
Web Designer / Web Master
Web Designer / Web Master
•
•
Join Date: Jun 2009
Posts: 130
Reputation:
Solved Threads: 1
Junior Poster
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;
} Steven Petersen
Web Designer / Web Master
Web Designer / Web Master
•
•
Join Date: Jan 2009
Posts: 1,346
Reputation:
Solved Threads: 163
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
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
Last edited by almostbob; Jul 1st, 2009 at 4:31 pm.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
•
•
Join Date: Jun 2009
Posts: 130
Reputation:
Solved Threads: 1
Junior Poster
Thank you,
P.S. now i have to learn about
again thank you for everything.
P.S. now i have to learn about
@media all {
@media print {
@media screen {again thank you for everything.
Steven Petersen
Web Designer / Web Master
Web Designer / Web Master
•
•
Join Date: Jan 2009
Posts: 1,346
Reputation:
Solved Threads: 163
@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
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
Last edited by almostbob; Jul 2nd, 2009 at 2:38 pm.
Failure is not an option It's included free
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it
Please mark solved problems, solved
 |
Similar Threads
- Page numbers displayed in single cell in asp.net datagrid, why? (ASP.NET)
- CSS external style sheet EW2 can not use a:hover etc (HTML and CSS)
- CSS, Style Sheet Internally or Externally ? (HTML and CSS)
- CSS Style sheet (HTML and CSS)
- form menu style sheet changer (HTML and CSS)
- Single cell query! (MySQL)
Other Threads in the HTML and CSS Forum
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
Related Forum Features
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
