Hiatus Layout #1

Hiya there~ Welcome to my first hiatus layout! It's very easy to edit and customize, and when you put your site down for maintenence or hiatus, why not make something for your site's front/splash page that your visitors can enjoy? ;)

To the left of this text your could put a banner image with your website's name, and maybe 'hiatus' or something like that~ :D

Help?

If you need any help at all in editing this layout, just contact me at the email address below! Don't be afraid to ask~ I'll always be happy to help! ^_^

wishjiirachii@gmail.com

Browser Compatibility

This layout is tested and works the best in Firefox, but can also be viewed in Google Chrome and Internet Explorer without any problems at all, except for the fact that the little circle dot thingies on the left side of some headers/titles won't show up... D: (they only do on Firefox, and rectangular dot thingies show up in Google Chrome, but none show up in Internet Explorer) but that's not really a big deal anyway. ^-^

Crediting Me

Please leave the credits back to my website Kasumi on the banner~! I worked hard typing out the code for this layout for you to use, and I'd really appreciate it if you'd just leave the credits be. <3 That way, others will be able to find where you got this awesome layout!=D

Download this layout?

Now, if you've got up to the point when you must have this hiatus layout, then you've come to the right place~ :D Just copy all the code in the box below (click somewhere in the box below, and then hold Ctrl and A on your keyboard to Select All, and then hold down Ctrl and C to Copy all the selected text. Then just paste it into a Notepad document to edit. You could also paste it directly into a new file at your website host! ^^ If you need any help on this, just see the Help section above!

<html>
<head>

<title>Hiatus Layout Template #1</title>

/*******************************************/

/* The CSS stylesheets start here!~ This section is what controls the style of your layout. 
    Depending on how you edit it, it make your layout very pretty, or plain and simple. Don't worry though! 
    I will be here in these comments to guide you all the way! Remember to NOT edit anything other than what 
    the comments tell you to edit unless you know what you're doing though! */

/*******************************************/

/*
   Now, this body section below... you see the 'background-color: #F9F9F9' part below? 
   Well... the F9F9F9 is a hex color code! Right now in computer language, F9F9F9 translates 
   to a light grey color. Just replace the F9F9F9 with another hex color code of your choice! 
   That will influence the background-color of your layout!
   You can find some hex color codes here: www.html-color-codes.info
   Same with the 'color: #696969; part below! Depending on what hex color code you put there, 
   it will change the color of the text on your layout! Just remember not to remove the # symbol 
*/

body {
background-color: #F9F9F9;
color: #696969;
margin:5px 0px 0px 5px;
font-family: Tahoma, sans-serif;
font-size: 11px;
}

/*******************************************/

/*
   Moving on... here is the section that controls the banner of the layout! 
   You see those brackets below after 'url', you know, the ones that look like this: (' and ')
   Well in-between those brackets, you can put a direct link to a banner image! 
   Just upload the image of your choice to www.tinypic.com, and Tinypic will generate 
   a bunch of codes up! One of them will be Direct Link. Just copy that one, and paste it
   in-between the (' and ') brackets! Remember to delete the text inside the (' and ')
   brackets before you put in a direct link though. 
*/
	
#banner {
background-image: url(' BANNER DIRECT LINK HERE ');
position: absolute;
left:1%;
height: 500px;
width: 335px;
border: 1px solid;
top:50px;
background-color:#FFFFFF;
}

/*******************************************/

/* 
   Now this section below controls the properties of the content area. 
   Yes, the area with all the content and text. ^^ 
   No need to edit anything here 
*/

#content {
background-color: #FFFFFF;
padding: 2px;
position: absolute;
left: 360px;
width: 361px;
top:50px;
border: 1px solid;
}

/*******************************************/

/* 
   This section below makes the credits on the layout look pretty! 
   Please don't touch anything though */

#credits {
text-align: right;
font-family: small fonts, verdana, sans-serif;
font-size: 8px;
width: 1px;
}

/*******************************************/

/* 
   These sections below control what your headers on the top of each page or topic will look like. 
   You don't have to edit these at all for your headers to look great, but if you'd like to change it 
   a bit, then please know what you're doing ;)
*/
		
h1 {
font-size: 17px;
border-bottom: 1px dashed;
font-variant: small-caps;
}

h2 {
font-size: 14px;
text-align: right;
border-left: 10px dotted;
border-bottom: 1px dotted;
}

/*******************************************/

/* The CSS stylesheet (also known as the part of the coding that styles a layout) finishes here! */

</style>
</head>
<body>
<div id="banner">
<div id="credits">

Hiatus Layout Template by <a href="http://kasumi.netii.net">Kasumi</a>.

</div>
</div>

Put your content right here!

</div>
</body>
</html>