|
CSS - Printable Color Square
Hi,
I was trying to display a small colored square using <table> tag. It worked fine on the screen but when I do print preview, the square shows up as white. I used both: <table width="15" height="15" style="border: 1px solid #000; background:#00cc00"> ... </tabel> and <table width="15" height="15" style="border: 1px solid #000"> <tr><td bgcolor="00cc00"></td></tr> </table> but none works. Can someone tell me why this does not get printed? Is there a CSS method to create this that would print? Similar TutorialsI have created a css file to make the a printable page. This works fine. I was wondering if there is a way (using css) to make the page automatically load up in landscape format rather than portrait? Thanks in advance wabirdman I'm trying to create a printable version of a website that uses two columns of text. But then I have to know where the page will end, and this depends on the default header & footer margins of the browser. Is there some kind of coding trick for getting this to work? Hello All, Is it possible to include square brackets in CSS classes? And if so, how can you reference them in CSS, since square brackets in CSS definitions are for attributes? Code: <div class="foo[bar]" cool="yes"></div> How would I reference this element in CSS? Could somebody give me some kind of hint how to do this. Appreciate your help, chris I'm beginning to suspect that this just isn't possible without javascript, but I'm throwing it out here just in-case I get lucky. Basically, what I want is a square-div that is no more than 90% of the window-height or 90% of the window-width, and will scale to fit the smaller of the two sizes. So, say the viewable area of the page is 800 x 600, the div would scale to be 540 by 540. If the size were 400 x 500, then it would be 360 by 360. I know that of course it's trivial to do with fixed-width divs by specifying a size in pixels, but is there any-way to do it for anything else? Images work nicely, as they will try to remain at the same aspect-ratio when stretched. I'm trying to make a nice simple interface composed of a few large, elements, that is able to scale seamlessly from desktop to mobile screen-sizes. Here's the code:
Code: <html>
<head>
<title>Sample Font Shorthand</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body { margin: 0; behavior: url("../htcmime.php?file=csshover2.htc") }
div { }
table { width: 100% }
.sttable { background-color: #000080 }
tr { }
td { vertical-align: top }
.sttd { font: bold 12px Arial #FFFFFF }
</style>
</head>
<body>
<table class="sttable">
<tr>
<td class="sttd">Catalog > Categories</td>
<td class="sttd">Cart Total: $ 0.00</td>
<td class="sttd">Date</td>
</tr>
</table>
</body>
</html>
Would someone please tell me why the color of the text isn't rendering white? hello, about the well-known color warnings (and in the best interest of good accessibility practices) is setting "background-color: inherit" a proper solution? it supresses the errors, but does it solve the problem of having good contrast between different elements/the use of custom stylesheets? i'm asking because i have a stylesheet with different classes for text which are used over different background-colors (from the parent elements). so unless i make a class for each possible application of these text styles, i don't see a way to specify a fixed background-color... i hope i explained my issue properly... thanks for any thoughts or suggestions on this I'm making a game that revolves around four teams. For developmental purposes, I made the team colors blue, red, green, and yellow. And now I'm at the stage where I'm designing a layout. The theme is set in the 1800's, and my first idea was to have a different color scheme for each team (in accordance with their team color,) but my layouts ended up having nothing to do with the 1800's -- just colors (I want to give a very real effect to this website.) So I tried making a universal layout with a sort of tea-stained, burnt edges, parchment look, with a black background, but I had trouble making it tile nicely (partly the burnt edges, partly the stains in the paper.) So this is where I am. I need help designing a layout! I can change the team colors to whatever, I have beginner/intermediate photoshop skills (though, I'm quite competent,) and all suggestions are warmly welcomed! Hi, I am a wannabe css compiler... Have the following problem. wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen. I cannot figure out how to compensate the (top/left) position to cover both type screens... Anyone help me? Hi, Im trying to validate with CSS 3, but am getting one warning, which I really want to get rid of: Code:
body {
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 15px;
}
#header {
clear: both;
}
#topmenu {
width: 100%;
height: 30px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 20px;
font-weight: normal;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 1px;
clear: both;
}
#topmenu a {
width: 150px;
height: 28px;
color: #ffffff;
background-color: #990000;
text-align: center;
text-decoration: none;
border-right: 1px solid #ffffff;
padding-top: 2px;
float: left;
}
#topmenu a:hover {
width: 150px;
color: #990000;
background-color: #ffffff;
text-align: center;
text-decoration: none;
border-right: 1px solid #990000;
float: left;
}
#body {
color: #000000;
background-color: #ffffff;
margin: 10px 0px 10px 0px;
clear: both;
}
#footer {
width: 100%;
color: #000000;
background-color: #ffffff;
font-family: sans-serif;
font-size: 12px;
font-weight: normal;
text-align: center;
border-top: 2px solid #990000;
padding-top: 5px;
clear: both;
}
#footer a {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#footer a:hover {
color: #990000;
background-color: #ffffff;
font-weight: normal;
text-decoration: underline;
}
#leftmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-right: 0.5%;
float: left;
}
#contents {
color: #000000;
background-color: #ffffff;
width: 58.5%;
padding-left: 0.5%;
padding-right: 0.5%;
float: left;
}
#rightmenu {
color: #000000;
background-color: #ffffff;
width: 19.5%;
padding-left: 0.5%;
float: right;
}
.contentbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.menubreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 10px;
clear: both;
}
.footerbreaker {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 2px;
clear: both;
}
.menutoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.contenttoptitle {
width: 100%;
height: 26px;
color: #ffffff;
background-color: #990000;
font-family: sans-serif;
font-size: 19px;
font-weight: bold;
text-align: center;
border-bottom: 1px solid #ffffff;
padding-top: 1px;
padding-left: 1px;
padding-right: 1px;
}
.menu {
width: 100%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
float: left;
}
.menu a {
width: 98%;
height: 19px;
color: #000000;
background-color: #eeeeee;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menu a:hover {
width: 98%;
height: 19px;
color: #ffffff;
background-color: #990000;
font-weight: normal;
text-decoration: none;
border-bottom: 1px solid #990000;
padding-left: 2%;
float: left;
}
.menucontent {
width: 96%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-bottom: 5px;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.menucontent a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.menucontent a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.subcontentright {
color: #000000;
background-color: #ffffff;
text-align: right;
}
.content {
width: 98%;
color: #000000;
background-color: #eeeeee;
font-family: sans-serif;
font-size: 15px;
border-left: 1px solid #990000;
border-right: 1px solid #990000;
border-bottom: 1px solid #990000;
padding-left: 1%;
padding-right: 1%;
padding-bottom: 5px;
float: left;
}
.content a {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: none;
}
.content a:hover {
color: #990000;
background-color: #eeeeee;
font-weight: bold;
text-decoration: underline;
}
.input {
color: #000000;
background-color: #ffffff;
width: 100%;
height: 13px;
}
.menuformcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
clear: both;
}
.menuformsubcontainer {
color: #000000;
background-color: #ffffff;
width: 100%;
clear: both;
}
.menuformlabels {
color: #000000;
background-color: #ffffff;
width: 50%;
padding-top: 2px;
padding-bottom: 2px;
float: left;
}
.menuformfields {
color: #000000;
background-color: #ffffff;
width: 48%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 2%;
float: left;
}
.menuformsubmit {
color: #000000;
background-color: #ffffff;
width: 100%;
text-align: right;
padding-top: 2px;
padding-bottom: 2px;
clear: both;
}
http://jigsaw.w3.org/css-validator/...ut+with_options Please make sure you select CSS 3 and Warnings = ALL in order to see the 32 warnings... Thanks! Yours sincerely, speedbooster! I am looking a sitting for Peach color like this #000000 not the word. Dose anyone know how to do this or know the sitting for it? any ideas why this page : http://tampabay-online.org/avaacc/ has blue borders around the images in IE it looks like it should in firefox. is there some work around for this? thanks Hey everyone, I am using a template, and I thought i changed all of the colors, however, i am still getting blues and i want them gone. Help me please! Sarah CSS: /* Global Styles */ body { margin:0px; } td { font:11px arial; color:#333333; } a { color: #cc0000; text-decoration:none; font-weight:bold; } a:hover { color: #990000; text-decoration:underline; } /* ID Styles */ #navigation a { font:10px arial; color: #ffffff; text-decoration:none; letter-spacing:.1em; } #navigation a:hover { color: #99CCFF; } #padding { padding:20px 5px 20px 5px; } #calendar td { border: 1px solid rgb(0,51,153); } #noborder td { border: 0px; } #weekdays th { font:11px arial; color: #ffffff; font-weight:bold; border: 0px; padding:2px; } #calheader td { font-weight:bold; } /* Class Styles */ .logo { font:18px times new roman; color: #990000; letter-spacing:.3em; font-weight:bold; line-height:22px; } .tagline { font:11px times new roman; color: #CC3300; letter-spacing:.2em; } .smallText { font:12px times new roman; color: #CC3300; line-height:18px; } .pageHeader { font:30px times new roman; color: #CC3300; letter-spacing:.1em; line-height:38px; } .bodyText { font:11px arial; color:#333333; line-height:24px; } .pageName { font:20px georgia; color: #8F0000; letter-spacing:.1em; line-height:26px; } .subHeader { font:14px times new roman; color: #990000; font-weight:bold; line-height:20px; letter-spacing:.1em; } .navText { font:10px arial; color: #333300; letter-spacing:.1em; } Hi, Is their any way to change the cursor color in css or javascript? Thanks Rishu I'm building a site (still sort of a novice) using CSS and I can't seem to get the border colors to display correctly. I would like the top-border to be the same color as right and left. When viewed in Dreamweaver, the border appears orange but when viewed in browser, the border is black. How do I get the top border to be orange? Here is my CSS: Code: #right_body {
width: 708px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
display: inline;
border-top: 3px;
border-top-style: solid;
border-top-color: FF6A00;
border-left: 2px;
border-left-style: solid;
border-left-color: #FF6A00;
border-right: 2px;
border-right-style: solid;
border-right-color: #FF6A00;
}
And my HTML: Code: <div id="left_side">left</div>
<div id="right_body"> middle </div>
<div id="right_side">right</div>
I have an image that is gray-scale, and I want to dynamically change the color using CSS. Is this possible? #example { background-image:url('gray_button.png'); } I could change the opacity/transparency of the image. How do I "set" a color on Top of this image though? Any help appreciated. I have table in html with 3 col and 15 rows. I want to set the color of the even rows 'red' and odd 'blue'. How it is possible. please help? Adil Hi there people, I have a question about CSS but before I start off asking this question I'll introduce myself. I'm a new user of this great forum, my name is Dwight and I'm a student on the "Graphical Lyceum Amsterdam" where I follow the education for "Multimedia Designer". Ok so now you know me a little, I'll start off asking my question. Question: I have to change the layout for a html page that askes for information from different asp pages, but that's not my problem . The problem is that I have to make some td's a different color -the background that is- but the problem is that I can't change the html page itself (it is automaticly generated and I don't have permission to change it). So my question is can someone tell me how I can change the color of some (not all!) td's with CSS without making classes? Tnx, Dwight Hello, can anyone helpme ? i'm searching a command to change the combobox color... i mean, not the background or font.. something like the button (arrow button) ... does anyone know how to do it with CSS ?? thanks |
|||||||