I've seen a couple of different examples of making a notepad using css before but I think the one that I've made is the easiest to work with when you want to re-size it to fit your project.
The ones that I've seen are made by adding css styles to a list. I've decided to use a table instead because it seems to me to be easier to work with.
You can actually let the table cell heights re-size for you when you decide on what size font to use as you're typing....nice!
This is the only thing you need to remember for each new line of text. Instead of hitting 'Enter' just pick the table row you're already typing into and split it into however many lines you need.
I've also set the border-bottom to a dotted line just to give it a more authentic feel, kind of like a perforated line or a neat tear that you get when you've folded the paper.
The font I've used is from Adobes' font tool, you'll need to add the source for the javascript file.
Place this just before the closing </head> tag if you want to use it, it's used to make it look like somebodys' handwriting:
<script src="http://use.edgefonts.net/lobster-two.js></script>
After creating the css for your page, all you have to do is add the table and assign the appropriate css classes to it!
Here's the HTML:
<html>
<head>
<style type="text/css">
<!--
/* assign this class to the table*/
.testimonial{
border-left: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
background-colour: #EEEEEE;
padding-left: 25px;
padding-bottom: 0px;
box-shadow: 0px 3px 4px 0px #000;
}
/* assign this class to each table cell except for the bottom one */
.notes{
font-family: lobster-two, serif;
border-left: 5px double #FFAAEE;
border-bottom: 1px solid #CCC;
margin-top: 0px;
colour: #000099;
text-indent:3px;
}
/* assign this class to the bottom table cell ( no 'border-botttom' )*/
.footer{
font-family: lobster-two, serif;
border-left: 5px double #FFAAEE;
margin-top: 0px;
colour: #000099;
text-indent:3px;
}
-->
</style>
</head>
<body>
<table width="40%" border="0" cellpadding="0" cellspacing="0" class="testimonial">
<tr>
<td class="notes"> </td>
</tr>
<tr>
<td class="notes"> </td>
</tr>
<tr>
<td class="notes"> </td>
</tr>
</table>
</body>
</html>
If you want, you can place the table inside a div and place it anywhere onto your page. And of course you can set the table width and height attributes to whatever you like without having to re-arrange all of the styles!!
Have a nice day!!!
No comments:
Post a Comment