Notebook of Paper Website

xli_ne · Aug 8, 2006

I want a design a page for a bakery website with their flavor of cakes on a notebook of paper, something similar to this with typed writing on it with the flavors. What would the best way of doing this without a huge pic as the background of a table or something similar to it. Any ideas would be welcome to lower download speeds.

elppa · Aug 8, 2006

The best thing I can think is to get a small part of the notepad and tile it horizontally downwards. Then maybe you could have a heading with a background image of the top of the notepad and a footer with a background image of the bottom of the notepad.

Use CSS to do all this, then your flavours can be written in text. Getting them to line up with the lines may take a bit of doing, but it's certainly possible.

Below is code showing a quick mock-up of what I mean. All the images are attached. To see it running click here.

I've only tested it on WebKit and Firefox. Some of the padding may need adjusted depending on which font you use to get it to line up with the rules on the page.

You can enlarge the text and the paper will expand horizontally, although the text will not always line up with the rules on the page when text is enlarged.

With a bit of work with the images you could probably get it looking better.

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" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>notepad</title>
	<style type="text/css" media="screen">
		#cake-menu { 
			width: 394px;
			background: url(notepad.png) repeat-y top left;
		}
		
		#cake-menu h3 {
			margin: 0;
			text-transform: lowercase;
			padding: 33px 0 0 75px;
			font: 22px/60px "Zapfino";
			color: #B89764;
			background: url(toppad.png) no-repeat top left;
		}
		
		#cake-menu ul {
			margin:  0;
			padding: 0 0 67px 75px;
			list-style: none;
			background: url(bottompad.png) no-repeat bottom left;
		}
		
		#cake-menu li {
			font: bold 18px "Georgia";
			letter-spacing: 1px;
			color: #020288;
			padding: 13px 0 0;
			margin: 0;
		}
		
		#cake-menu li:first-child {
			padding-top: 8px;
		}
		
	</style>
	
	
</head>

<body>

<div id="cake-menu">
	<h3>Homemade Cakes</h3>
	<ul>
		<li>Carrot Cake</li>
		<li class="first">Lemon Drizzle Cake</li>
		<li>Walnut Cake</li>
		<li>Victoria Sponge Cake</li>
		<li>Ginger Cake</li>
	</ul>
</div>

</body>
</html>

Search

Search

Notebook of Paper Website

xli_ne

macrumors 6502a

elppa

macrumors 68040

Attachments

Our Staff