Le Dolci

Designer's Comments

Look carefully for specific instructions

Yummy cupcakes! XD

Please do not change the images in any way. DO NOT REMOVE THE CREDIT. You can edit the navigation/content/etc as you want. :) Tested in Firefox and Internet Explorer, and it should work in most screen resolutions. (made in 1200 x 800 Firefox) Thanks to fixtatik for helping me fix the nav coding. :]

Oh, pls check out my little website. :)

---------------------
Credits
Images was found here on StockXchange.

Layout Code

Copy and paste to Template HTML

Help

<title>Le Dolci: Il Mio Amore</title>

#content A, #content A:link, #content A:visited {font-family: georgia; text-decoration: none; color:#5ea4af; cursor: crosshair; font-size: 8pt; border-bottom: 1px dotted #a3ccd4; font-weight: bold;}
#content A:hover {font-family: georgia; text-decoration:none; color:#7aaf5e; cursor: crosshair; font-size: 8pt; border-bottom: 1px dotted #86b9c3; font-weight: bold;}

#navigation A, #navigation A:link, #navigation A:visited {display: block; text-decoration: none; font-family: georgia; color: #eee9bb; background-color: #c51641; border-bottom: 2px solid #c51641;}
#navigation A:hover {display: block; cursor: ne-resize; text-decoration: none; font-family: georgia; color: #fff; background-color: #34867f; border-bottom: 2px solid #ae8b5e;}

b {font-weight: bold; color: #b93556;}
i {font-family: trebuchet ms; font-size: 9pt; font-style: italic; color: #188682;}
u {text-decoration: underline; color: #756536; border-bottom: 1px dashed #4faa69;}

p {margin-bottom: -5px; _margin-bottom: -10px;}

body {
	background: #8cb69b;
	text-align: center;
   	min-width: 489px;}

div.wrapper {
  	 text-align: left;
  	 margin-left: auto;
  	 margin-right: auto;}

#container {
	background: transparent;
	width: 489px; 
	margin: 0 auto;}

#header1 {width: 489px; height: 100px; background: url(http://cbimg9.com/layouts/08/11/32350aa.jpg) no-repeat; z-index: 1;}
#header2 {width: 489px; height: 100px; background: url(http://cbimg9.com/layouts/08/11/32350ab.jpg) no-repeat; z-index: 1;}
#header3 {width: 489px; height: 100px; background: url(http://cbimg9.com/layouts/08/11/32350ac.jpg) no-repeat; z-index: 1;}
#header4 {width: 489px; height: 100px; background: url(http://cbimg9.com/layouts/08/11/32350ad.jpg) no-repeat; z-index: 1;}
#header5 {width: 489px; height: 100px; background: url(http://cbimg9.com/layouts/08/11/32350ae.jpg) no-repeat; z-index: 1;}
#header6 {width: 489px; height: 43px; background: url(http://cbimg9.com/layouts/08/11/32350af.jpg) no-repeat; z-index: 1;}

#content {
	width: 463px;
	height: 230px;
	overflow: scroll;
	position: relative;
	margin-top: -130px;
	_margin-top: -120px;
	margin-left: 20px;
	text-align: justify;
	z-index: 2;
	overflow-x: hidden;
	padding-right: 6px;
}
#navigation {
	width: 110px;
	position: relative;
	left: -96px;
	text-align: center;
	margin-top: -240px;
	line-height: 18px;
}

#zone1 {    /* imagemap */
float: left;
width : 85px;
height: 28px;
margin-left: 14px;
margin-top: 15px;
text-decoration: none;
border: none;
cursor: hand;
}
body {color:#494136;font-family: arial; font-size: 8pt; line-height: 13px;}

h1 { display: block; margin-left: auto; margin-right: auto;  text-align: center; font-family: "arial"; font-weight: bold; font-size: 10pt; letter-spacing: 1px; color: #c51641; text-decoration: none; height: 9px; border-bottom: 8px solid #c1e8b7; background-color: #e8b7c0; margin-bottom: -6px; _margin-bottom: -14px; padding-top: 1px;}
h2 {display: block; text-align: center; font-family: verdana; font-size: 7pt; letter-spacing: 1px; text-transform: uppercase; color: #c51641; background-color: #eee9bb; border-top: 4px dotted #acd1b9; margin-bottom: 1px;}

</style></head>
<body>
<div id="container">
<div id="header1"><a id="zone1" href="http://dreamgurl36.createblog.com" title="Designed & Coded By: dreamgurl36"></a></div><div id="header2"></div><div id="header3"></div><div id="header4"></div><div id="header5"></div><div id="header6"></div>
<div class="wrapper">

<div id="navigation">
<h2>Navigation</h2>
<a href="#">Home</a>
<a href="#">Content</a>
<a href="#">Webmistress</a>
<a href="#">Affiliates</a>
<a href="#">Site History</a>
</div>

<h1>About This Layout :: Le Dolci</h1>

<p><b>Things I love about this layout:</b> <i>yummy image, complimentary colors, and it's cute small size.</i> Woooo~ Cuppycakes. XD Just some coloring magic in photoshop and <u>BOOM!</u> A fabulous image is created. The rest of the layout was made in GIMP, the only thing I know how to use effeciently (or let's say... my <i>tool of choice</i>). Anyway... I'm very pleased with how it turned out. Oh yeah, it looks best in higher screen resolutions, I believe. :) If it's viewed from on a small screen, the page scrollbar will appear... and for some reason I can't stand that. It looks perfectly nice in my resolution of <b>1280x800</b>.</p>

<p>So... this is where your main content will go~! Fill up as much or as little as you want! XD It's all up to you! Please do NOT change the images/layout in any way. And it goes without saying.... <b>do not remove the credit</b>. I mean... I've taken the ultra long time to code this, so the least you can do is leave the credit there. But of course.... you may edit the navigation, contents, and such to suit your website needs. ^^ I think you'd need some basic knowledge of <u>html and css</u> to be able to fully make use of this layout. But it's nothing too complicated. There are plenty of tutorials on the web, and even some on <a href="http://www.createblog.com" target="_blank">CreateBlog</a> too.

<p>This layout was tested in both Internet Explorer and Firefox. In Firefox, the font of the text will be slightly different. Other than that, it works perfectly fine, <u>compatible in both browsers</u>. ^^ Oh, and it works in all resolutions too. :) Hope you enjoy it!</p>

<p><b>bold text</b>, <i>italic text</i>, <u>underlined text</u>, <a href="#">a link</a></p>

<h1>Header Title Goes Here</h1>
<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

<p>content content content content content content content content content content content content content content content content content content content content content content content content  content content content content content content content content content content content content</p>

</div>

</body>
</html>