A nice tutorial on this confusing subject.
CSS Positioning
Leave a reply
Tag Archives: CSS
Web Fonts
After some frustration trying to understand how to install web fonts, this tutorial cleared it all up.
This web font article is also quite good.
Based on many recommendations Font Squirrel is the go to place for web fonts.
Printing Hyperlinks
This article on A List Apart has many good ideas for formatting a web page for printing, including how to print hyperlinks parenthetically.
Style Sheets for Printing
Modified the paralegal internet research page, to display answers to the lab problems after a code is given in a form. Used a php header statement to redirect to the print page if the correct code was given.
I freaked out a little. After doing a lot of work to get this page to work correctly, I tried to print the hand out. The print-out looked nothing like what displayed on screen. The answers were not indented, the font color was missing, the automatic numbers were gone.
Turns out, it was a problem with my stylesheet reference. I had been using
<link rel=”stylesheet” type=”text/css” href=”http://www.glenpritchard.com/css/global-styles.css” media=”screen”>
The problem was ‘media=”screen”‘. I did not know that you can specify different style sheets for printing and on-screen viewing. Specifying ‘media=”screen”‘ means that the style sheet will be used for what is displayed on the screen and not what prints. Using ‘media=”print”‘ will work for printing, but not anything else. To use the same style sheet for all purposes, ‘media=”all”‘ may be used.
W3C has a nice reference about style sheets. It also has a reference about media types.
Update: Because the style sheets are cascading, there was no need to redirect the research page to a separate print template. The same page can be used for screen and print! For future reference, the redirect code, which must go at the top before the <html> tag, looks like this:
<?php
if($_GET[“code”]==”reject4053″) {
header(“Location:http://www.glenpritchard.com/paralegal/print.php”);
}
?>
Centering Images on a Page
I was having a hard time centering an image on a page with the ‘margin:auto’ declaration. I learned that you must add the ‘display:block’ declaration.
Modify WordPress Default 1.6 Theme Background
Edited stylesheet.css as follows (added text is green; commented out text is red):
/* Begin Typography & Colors */
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
background-image:url(‘/img/space2.gif’);
background-attachment:fixed;
/*GRP Edit background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’);*/
color: #333;
text-align: center;
}