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]
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
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;
Can you show me how it would look on the style sheet and how the table would look in the HTML page?
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,
Is there away to stretch instead of repeat?
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;
}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
Thank you,
P.S. now i have to learn about
@media all {
@media print {
@media screen {again thank you for everything.
@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
@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 printlong 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 {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
<a style='background-color: none; repeat; color: #FF00FF ; font-family: Times new roman; font-size: 16px'>
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.