Daily Archives: November 8, 2007

CSS for “Terminal Screen”

0
Posted by James Strickland on November 8, 2007 – 5:49 pm
Filed under General

Here's some CSS that I used to make a pretend "Terminal Screen:"

You can see an example here. 

  1.  
  2. /* my [typed] Piece of Paper CSS */
  3.  
  4. html{height: 100%;} 
  5.  
  6. body {
  7.   font-family: terminal, sans-serif;
  8.   color: #00FF33;
  9.   padding: 20px 20px 20px 20px;
  10.   margin: 0px;
  11.   background-color: #4682B4;
  12.  
  13. }
  14.  
  15. /* The Terminal Window */
  16. #main
  17. { width: 640px;
  18.   height: 480px;
  19.   padding: 10px 10px 10px 10px;
  20.   margin-left: auto;
  21.   margin-right: auto;
  22.   background: #000000;
  23.   color: #00FF33;
  24. }
  25.  
  26. #top {
  27.   position:absolute;
  28.   padding: 50px 50px 50px 50px;
  29.   margin-left: 3cm;
  30.   margin-right: auto;
  31.   background: #FFFFFF;
  32.   color: #000000;
  33.   width: 780px;
  34.   height: 150px;
  35.   top: 50px;
  36.   bottom: 100px;
  37.  
  38. }
  39.  
  40. a:link {color: #ffffff}     /* unvisited link */
  41. a:visited {color: #ffffff}  /* visited link */
  42. a:hover {  /* mouse over link */
  43.   color: #FFf0FF
  44.  
  45. }
  46. a:active {color: #0000FF}   /* selected link */ 
  47.  
  48. /* positioning - left, right and center */
  49. .left
  50. { float: left;
  51.   padding: 0px 8px 0px 0px;
  52. }
  53.  
  54. .right
  55. { float: right;
  56.   padding: 0px 0px 0px 8px;
  57. }
  58.  
  59. .center
  60. { display: block;
  61.   text-align: center;
  62.   margin: 0 auto;
  63. }

Typed Paper CSS

0
Posted by James Strickland on November 8, 2007 – 5:33 pm
Filed under Web

Did this CSS to make a page look like a "typed" piece of paper.

  1.  
  2.  
  3. /* my [typed] Piece of Paper CSS */
  4.  
  5. html{height: 100%;}
  6.  
  7. body {
  8. font-family: "courier new", courier, terminal, sans-serif;
  9. color: #ffffff;
  10. padding: 20px 20px 20px 20px;
  11. margin: 0px;
  12. background-color: #404040 ;
  13.  
  14. }
  15.  
  16. /* The Piece of Paper */
  17. #main
  18. { width: 780px;
  19. height: 800px;
  20. padding: 50px 50px 50px 50px;
  21. margin-left: 3cm;
  22. margin-right: auto;
  23. background: #FFFFFF;
  24. color: #000000;
  25. line-height: 1em;
  26. letter-spacing: .05em;
  27. word-spacing: .2em;
  28.  
  29. }
  30. #top {
  31. position:absolute;
  32. padding: 50px 50px 50px 50px;
  33. margin-left: 3cm;
  34. margin-right: auto;
  35. background: #FFFFFF;
  36. color: #000000;
  37. width: 780px;
  38. height: 150px;
  39. top: 50px;
  40. bottom: 100px;
  41.  
  42. }
  43.  
  44. a:link {color: #000000}     /* unvisited link */
  45. a:visited {color: #000000}  /* visited link */
  46. a:hover {  /* mouse over link */
  47. color: #FF00FF
  48. text
  49. }
  50. a:active {color: #0000FF}   /* selected link */
  51.  
  52. /* positioning - left, right and center */
  53. .left
  54. { float: left;
  55. padding: 0px 8px 0px 0px;
  56. }
  57.  
  58. .right
  59. { float: right;
  60. padding: 0px 0px 0px 8px;
  61. }
  62.  
  63. .center
  64. { display: block;
  65. text-align: center;
  66. margin: 0 auto;
  67. }

Internet Explorer -vs- Firefox

0
Posted by James Strickland on November 8, 2007 – 5:54 am
Filed under Linux, Web

Ok, I see a big difference when viewing my website with Internet Explorer and Mozilla Firefox.  The formatting is totally different.  It seems that in Interent Explorer (IE) Some of my widgets doesn't show up.  I've been playing with different "themes" to see which one is best viewed with both IE & Firefox.  I thought the current theme was, but apparently not.  Now at the house I do not use IE because I use Linux, but I do get to test out my css, code, html, and whatever at work using IE.  Wish I could use Firefox at work, but it is banned from Government Computers.  Anyway, guess this is a plea for those of you out there still using Internet Explorer, there is something better out there.  Please visit http://mozilla.org/firefox and download your copy today.

Get Firefox