|
CSS - Displaying A Printed Form On The Screen
Hi,
I have a DOS print file 10 characters per inch and 6 lines to the inch which is printed on a pre printed form. I would like to display the printed form. I have a scanned image of the form. Are there specific css values for font, line-spacing ect to convert the print to screen, or is it just a matter of trial and error?. Any suggestions or pointers appriciated, especialy what units I should be working in ie: em, pc, px mm ? Thanks David Similar TutorialsI am trying to develop a template for CPR cards to be generated by users here at work. Currently, the user uses an old-school typewriter to enter the data, and I think that the Word template provided by the AHA is severely lacking as well. I am very proficient at ASP and database driven sites, so that part is no problem... I am running into problems with CSS (and even table-based design) to accomplish my goal. I am not sure if I should use relative or absolute positioning, or what needs to be done to get this to print correctly. Thanks, Drew Hi, I have a page where I am including a background image via CSS. It looks fine when viewed in a browser, but when I print it the background does not show up. I have my stylesheet include set to both screen and print: <link rel="stylesheet" type="text/css" href="includes/css/form.css" media="screen, print"> The CSS code in question that sets the background image is: #title{ background: url(../../images/title_bg.gif); width: 398px; height: 52px; text-align: right; } <div id="title"> <div class="titleText"><cfoutput>#FormDETAIL.strTitle#</cfoutput></div> </div> Why can I not see this background image when I print the page?? 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? What i want to do is to put a search form (label,input & submit button) on a single line. This happens in FF but guess which browser puts them on different line?? IE. yes you got it! Code:
#searchBox {
float:right;
clear:right;
margin-right:0.2em;
}
#searchBox label {
font-size:0.8em;
}
#searchBox input, #searchBox select {
background-color:#d2c5a2;
}
#searchBox .submit {
background-color:#d2c5a2;
color:#483e2b;
font-size:0.8em;
}
btw if i give the searchbox Div a width, what happens is that in IE the box goes out of the wrapper a bit and in FF the form moves to the left leaving gap between it and right side.. site: http://www.zahra-zahra.com/ Hi Guys, I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible. What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS? I couldn't figure out why people were telling me they couldn't see my page but i could see it just fine in two different locations. Come to find out I use firefox and IE is showing a blank page. Can someone help me with this? how can i get a div in the middle of the y-axis of the browser window? <html> Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>All Fore U Golf Clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "nav.css";
</style>
<style type="text/css" media="screen">
</style>
</head>
<body>
<div id="header">header thing</div>
<div id="wrapper">
<div id="container">
<div id="content">
<h1>content</h1>
<p>Sum Stuff goes here...</p>
<p class="last">...and here</p>
</div>
</div>
<div id="sidebar">
<h1>navigation</h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Golf Stuff</a>
<ul>
<li><a href="#">Clubs stuff</a></li>
<li><a href="http://www.google.com">accessories stufff</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
<br>
</div>
<div class="clearing"> </div>
</div>
<div id="footer">footer thing</div>
</body>
</html>
CSS: Code:
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
/*<![CDATA[*/
#wrapper {
background: #f1f2ea;
}
#header {
background: #d7dabd;
}
#container {
width: 100%;
background: #f1f2ea;
float: right;
margin-right: -200px;
}
#content {
background: #f1f2ea;
margin-right: 200px;
}
#sidebar {
width: 200px;
float: left;
}
#footer {
background: #d7dabd;
}
h1 {
margin-top: 0;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
/*]]>*/
Works fine in IE, but when displayed in firefox the id=content extends off the screen. I have a page dien all in css that is all set for 800x600 resolution. Does any one know how I can detect larger screen size/resolutions and center the entire page for these instances thanks JT Hi All, This is my first post in CSS forums. I want to display a DIV in the center of screen. I am using this DIV for the showing the progress image in my search page (So it is is visible only in some cases.) How can I make it visible in the center of the visible screen (above all other elements). Note: User may have scrolled down the screen. I hope this is possible with CSS In IE 7.0 Why is the text displaying the way it is in this screen shot: http://www.larreamma.com/screens/lmma.png It should display like this: http://www.larreamma.com/screens/lmma_ie8.png (I do not have access to IE 7 to readly test various options). Thank you in advance. I've run into yet another IE "feature" that i'd like to ask you, dear colleagues, how to solve. I have a relatively positioned div and i need to absolute position another div inside of it to fill almost all width and height of the parent. I need it to have a 20px margin from top and bottom. Here's what works in real browsers: Code:
.somediv{
position: absolute;
left: 0;
top: 20px;
bottom: 20px;
right: 0;
}
Now how do i make it work in a developer's nightmare IE? There are 2 more divs in top and bottom both 20px high so the new div shouldn't overlap with them. I am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions. Does anyone have any ideas what is causing this problem. After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links. Below is the css I am using, I have also added the xhtml at the bottom. Code:
#top_button li {
margin: 0;
display: inline;
list-style-type: none;
}
#top_button a:link, #top_button a:visited {
float: left;
overflow: hidden;
height: 0px;
}
#top_nav {
margin: 0;
padding: 0;
}
#top_button {
position: relative;
top: 0px;
left: 157px;
height: 19px;
list-style: none;
margin: 0;
}
#t1 a:link, #t1 a:visited {
background-image: url(../images/top_nav_home_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 47px;
}
#t1 a:hover, #t1 a.current {
background-position: 0px -19px;
}
#t2 a:link, #t2 a:visited {
background-image: url(../images/top_nav_services_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 63px
}
#t2 a:hover, #t2 a.current {
background-position: 0px -19px;
}
#t3 a:link, #t3 a:visited {
background-image: url(../images/top_nav_portfolio_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 65px;
}
#t3 a:hover, #t3 a.current {
background-position: 0px -19px;
}
#t4 a:link, #t4 a:visited {
background-image: url(../images/top_nav_resources_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 72px;
}
#t4 a:hover, #t4 a.current {
background-position: 0px -19px;
}
#t5 a:link, #t5 a:visited {
background-image: url(../images/top_nav_contact_1.gif);
background-repeat: no-repeat;
padding-top: 19px;
width: 59px;
}
#t5 a:hover, #t5 a.current {
background-position: 0px -19px;
}
{
xhtml Code:
<div id="top_nav">
<ul id="top_button">
<li id="t1"><a class="current" href="/" title="home"></a></li>
<li id="t2"><a href="/services" title="services"></a></li>
<li id="t3"><a href="/portfolio" title="portfolio"></a></li>
<li id="t4"><a href="/resources" title="resources"></a></li>
<li id="t5"><a href="/contact" title="contact"></a></li>
</ul>
</div>
I would appreciate any suggestions! I have finally got my page set up as required. There is one minor niggle. The footer sits at the bottom of the page when the browser is maximised and has no content. If the browser is not maximised or the content introduces scroll bars the footer is bumped up one pixel in IE. How can I get around this? The footer CSS is below, if you require any more CSS let me know which elements (roughly) as there is a lot of it. PHP Code: #wrap { margin-left: auto; /*center the wrapper CSS2 compliant (all except IE*/ margin-right: auto; margin-top: -21px; width: 760px; top: 21px; min-height: 100%; position: relative; left: 0px; background-image: url(../images/content_bg.gif); text-align: left; } * html #wrap { height:100%; padding-bottom: -20px; } #clear_footer { clear: both; height: 21px; overflow: visible; z-index: 1999; /*background-color: green; Used for demonstration purposes only, remove after testing*/ } #contain_footer { left: 0; margin-top: -21px; width: 100%; height: 21px; background-color: red; background-image: url(../images/contain_footer_bg.gif); padding-bottom: 0px; z-index: 2002; } #footer { position: absolute; bottom: 0; margin: 0 auto; width: 760px; height: 21px; line-height: 21px; vertical-align: center; background-image: url(../images/footer_bg.gif); z-index: 1999; } Hi All, I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about. http://img192.yfrog.com/img192/5572/1280x768.gif Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround. the CSS code is below Code:
#footer
{
position: fixed;
top: auto;
left: auto;
width: auto;
}
here is the HTML Code:
<html>
<head id="Head1" runat="server">
<link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
<title></title>
<style type="text/css">
.style1
{
width: 800px; background-color:White
}
.style2
{
height: 391px;
}
.style3
{
text-align: right;
}
</style>
</head>
<body bgcolor="#d7d7d7">
<form runat="server">
<div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px"
align="center">
<table align="center" class="style1">
<tr>
<td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;"
class="style3">
<asp:ContentPlaceHolder ID="StatusBar" runat="server">
</asp:ContentPlaceHolder>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" />
</td>
</tr>
<tr>
<td class="style2" align="left" valign="top">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--<td style="background-color: #FF9933; height: 15px;">
</td>--%>
</tr>
</table>
<div id="footer">
</div>
<%-- <table align="center" class="style1">
<tr>
<td>
<div id="footer">
<img src="../images/footer.png" alt=""/>
</div>
</td>
</tr>
</table>
--%> </div>
</form>
</body>
</html>
I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need I was wondering if there was anyway to make a div appear at the bottom of the monitor. In other words, on my laptop, I have a site that I need to scroll down for. It goes as far down as a copyright notice. The copyright notice has a black border on top, right, and left, but not the bottom. That's fine because when it gets to that item, it stops scrolling and lines up with the bottom of the monitor. However, at home, I have a 21" monitor, and the bottom element is just floating there because everything easily fits within the screen. I wanted to see if I could get that bottom element to line up at the bottom of the viewable area somehow. Is this possible? Thanks. Ok so I got a big one here... At least it is to me. I know absolutely NOTHING about CSS. I use GoDaddy.com and their program WebSite Tonight to build my website. http://www.thebdsmith.com My problem is this. I build the site using a Macbook Pro 15 inch. I always felt I was rather limited with space. I was on my brother in laws computer, he has a PC with a widescreen monitor. When viewing the site on HIS computer there was so much empty space on the right hand side. So I got excited and redesigned the site (after redesigning just 2 a week earlier). The outcome was so much better than before. NOW, this is the problem. When I go back to my Macbook area is missing again and I have to scroll right to see it. I do NOT like that. I emailed GoDaddy support one guy gave me the dumbest reply I've ever heard that was the OPPOSITE of what I had stated. Another said my template design is a fixed width and I'd have to edit the CSS coding to fix it. I don't know where in the CSS code to edit. This is GoDaddy default CSS that I am just wanting to edit and reuse. I know nothing of CSS so I don't see why not. Code: /**
* @file
* @project 675
* @package sftheme
* @site app1
*/
/**
* ------------------------------------------------------------------
* @section RESETS
* ------------------------------------------------------------------
*/
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 11px;
color: #ffffff;
background-color: #051417;
background-image: url(images/675_background.jpg);
background-position: center top;
background-repeat: no-repeat;
}
a:link{color: #ffffff;}
a:visited{color: #ffffff;}
a:hover {color: #ffffff;}
.sf_navigation ul li a {color: #ffffff;}
.sf_navigation ul li a:visited {color: #ffffff;}
.sf_navigation ul li a:hover {color: #ffffff;}
.sf_navigation .subnav li a {color: #ffffff;}
.sf_navigation .subnav li a:visited {color: #ffffff;}
.sf_navigation .subnav li a:hover {color: #ffffff;}
.sf_footer {color: #ffffff;}
.sf_pagetitle {color: #ffffff;} /*(WST Only)*/
.sf_outer_wrapper {
}
.sf_main_header {
color: #ffffff;
font-size: 32px;
font-family: Verdana, Geneva, Kalimati, sans-serif;
padding-left: 29px;
}
.sf_pagetitle {
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
.sf_pagetitle h1{
font-family: Verdana, Geneva, Kalimati, sans-serif;
font-size: 24px;
font-weight: normal;
margin: 0;
padding-top: 0px;
}
/**
* ------------------------------------------------------------------
* @section HEADER
* ------------------------------------------------------------------
*/
.sf_outer_wrapper {
border-left:1px solid #2D4461;
border-right:1px solid #2D4461;
}
* html .sf_outer_wrapper {
width: 1200px;
}
.sf_main_wrapper{
width: 600px;
float: left;
margin-left: 67px;
}
* html .sf_main_wrapper{
margin-left: 0px;
}
.sf_wrapper {
margin:0 0;
padding:0px 10px;
width: 1000px;
}
* html .sf_wrapper {
width: 1200px;
}
.sf_wrapper:after {
clear:both;
content:".";
display:block;
font-size:1px;
height:0pt;
visibility:hidden;
}
.sf_region3 {
height: 150px;
}
.sf_main_header {
padding-top: 33px;
margin: 0px 33px;
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section NAVIGATION
* ------------------------------------------------------------------
*/
.sf_region4 {
float: left;
font-size: 14px;
width: 200px;
overflow: visible;
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 53px;
margin-left: -24px;
.margin-left:-14px;
}
.sf_navigation .nav a {
width: 139px;
padding: 10px;
font-size: 18px;
}
.sf_navigation .sf_first_nav_item {
background-repeat: no-repeat;
background-position: 0px 0;
padding-top: 12px;
border: 0;
}
.sf_navigation {
float: left;
padding-bottom: 50px;
padding-right: 50px;
text-decoration: none;
margin-top: 0px;
width: 159px;
margin-left: 77px;
z-index: 1000;
position: relative;
}
* html .sf_navigation {
margin-left: 33px;
}
.sf_navigation .nav .subnav a {
background-image: none;
font-size: 12px;
padding-bottom: 12px;
padding-top: 12px;
background-color: #051417;
background-repeat: no-repeat;
background-position: top right;
border: none;
z-index: 1000;
}
.sf_navigation .nav .subnav a{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:link{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:visited{
background-color: #051417;
color: #ffffff;
}
.sf_navigation .nav .subnav a:hover {
background-color: #051417;
color: #ffffff;
}
.sf_navigation ul {
padding: 0 0 12px 0;
margin: 0;
list-style: none;
float: left;
background-position:0 bottom;
background-repeat:no-repeat;
}
.sf_navigation:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
font-size: 1px;
clear: both;
}
.widget {
margin-left: 24px;
}
* html .widget {
margin-left: 24px;
}
.sf_region4 .sf_navigation .nav a:hover {
text-decoration: none;
}
.sf_navigation ul li {
float: left;
}
.sf_navigation ul li a {
width: 214px;
display: block;
text-decoration: none;
padding: 0;
padding-bottom: 12px;
width: 200px
}
.sf_navigation li ul.subnav {
padding: 0;
margin: 0;
list-style: none;
float: left;
width: 160px;
position: absolute;
left: -999em;
margin-left: 158px;
margin-top: -43px;
z-index: 1000;
padding:5px 5px 0;
background-image: none !important;
background-color:#051417;
}
.sf_navigation .subnav li {
float: left;
margin-bottom: -1px;
width: 176px;
}
.sf_navigation .subnav li a {
width: 11em;
display: block;
color: #000000;
text-decoration: none;
padding: 0;
margin-bottom: 0px;
}
.sf_navigation .subnav li a:visited {
color: #000000;
}
.sf_navigation .subnav li a:hover {
color: #000000;
text-decoration: none;
}
#Nav1 li:hover,
#Nav1 li.hover {
position: relative;
}
/* lists nested under hovered list items */
#Nav1 li:hover ul,
#Nav1 li.sfhover ul {
left: auto;
}
#Nav1 iframe{
position: absolute;
left: 0;
top: 0;
z-index: 0;
display: none;
}
* html #Nav1 iframe {
display: inline;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
.sf_navigation .widget_header{
display: none;
}
.sf_navigation ul.subnav a {
color: #FFFFFF;
}
.sf_navigation ul.subnav a:hover {
color: #a4bedf;
}
.sf_navigation ul.subnav a:visited {
color: #FFFFFF;
}
/**
* ------------------------------------------------------------------
* @section MAINCONTENT
* ------------------------------------------------------------------
*/
.sf_pagetitle {
margin-left: 316px;
width: 600px;
margin-bottom: 20px;
padding-bottom: 10px;
}
* html .sf_pagetitle {
margin-left: 5px;
}
.sf_pagetitle h1 {
padding-right: 22px;
}
.sf_main_wrapper {
margin-top:-25px;
padding-bottom: 50px;
}
.sf_content {
padding-left:27px;
padding-top:21px;
float: left;
width: 600px;
}
* html .sf_content {
padding-left:0px;
width: 700px;
}
/**
* ------------------------------------------------------------------
* @section FOOTER
* ------------------------------------------------------------------
*/
.sf_footer{
width: 425px;
margin: 0px auto;
padding-top: 60px;
padding-bottom: 20px;
}
a:hover {
text-decoration: none;
}
* html a {position:realtive}
Sorry for the huge post and thanks for taking the time to read and any help you may offer! B.D.Smith Suppose I have the following script that creates a div element and set its width and height to fill the whole screen: Code:
<script type="text/javascript">
var oDiv = document.createElement('div');
oDiv.style.width = window.screen.availWidth + "px";
oDiv.style.height = window.screen.availHeight + "px";
//oDiv.style.width = window.screen.width + "px";
//oDiv.style.height = window.screen.height + "px";
oDiv.style.border = "solid 1px #ccc";
document.body.appendChild(oDiv );
</script>
well, the code above actually does the job, BUT a scrollbar (vertical and horizontal) is also created ... how to get rid of the scrollbars? Hi, I am having some trouble with stretching a div to the bottom of my page. My background is blue, but I have a centered "main" div over it that is white and I have a fixed, white bar at the bottom with an "about" link and things of that nature. I havae a "content" div to hold text and actual content inside of the "main" div. When there is enough content, the white areas of the page should form a sort of "top hat" over the blue background. However, some pages do not have enough content to stretch the white foreground all the way to the bottom. Is there anyway to essentially add extra whitespace through CSS? Code:
div#main {
margin-left:auto;
margin-right:auto;
width:40%;
height:auto;
background-color:#fff;
}
div#content {
height:100%;
}
div#disclaimer {
background-color:#fff;
position:fixed;
bottom:0px;
left:0px;
width:100%;
}
Those are the pertaining bits of code. The actual content and text of the site are under "content" and "main" is just used for alignment and is a holder for other divs like the header. Any help would be appreciated, thanks! I created a footer that sits on the bottom of the screen using this code: .footer { padding-top:5px; margin-top:5px; font-size:8pt; color:#FFFFFF; position:absolute; bottom:0px; background-image:url('gfx/bg-bottom.jpg'); height:22px; width:100%; } It looks fine when the window is expanded to the size of the screen, but when you shrink it down (so the scroll bar will appear) and then scroll, the footer bar scrolls with the page.. It's kind hard to explain, just give it a try he http://www.juiceboxseo.com/do-it.php Is there a way to make sure it stays on the bottom? |
|||||||