Layout Template #5

Hi there!~ <3 Welcome to this new layout template I just made! ^_^ I am really happy with the result... plus the fact that I coded it from scratch and it works in Internet Explorer, Firefox, Lunascape, and Google Chrome! :D I based it on a nested-DIV type thing, since I 'd just learned how to nest tables using HTML from LissaExplains. I decided to use the idea with a div layout instead, and it worked! So yeah, this is like, the bestest layout ever I coded entirely by myself~ <3

About this layout template

This layout template is 640px in width, and 400px in height. That means it will fit on almost every computer screen without any large annoying scrollbars at the bottom of the page! This layout uses scrollbars though~ For the content, affililate and navigation menu boxes. ^_^ As I said above, it also works in all the major internet browsers! Unfortunately though... this layout can be quite hard to edit for a beginner... so I'd suggest using this layout template if you 're fairly fluent with HTML. But for the beginners, don't worry! You can still use this layout, you just might find it confusing and stuff <3 If you 'd like to check out the other awesome layout templates at Kasumi though, you're free to do so! [click here].

Help?

If you're unsure, feel pressured, or are confused about anything to do with editing, using, or well... basically, if you need any help at ALL, just drop me an email at the email address below! I'll reply as soon as possible! (usually the maximum time you gotta wait is about 3 days :P)

wishjiirachii@gmail.com

Don't feel scared or anything! I'm very happy to try my best to help you!

Crediting Me

Please leave the credits where they are on the navigational menu to the right of the content area. You could also move it to another page... (eg. Credits/Thanks page) but please make sure the link is visible and can be seen and isn't in a teeny-winsy little font if you're putting it on another page. Crediting isn't about making me more popular or well-known or any of that stuff... to me, crediting me will help others find the place that you got this awesome layout template. It's not only helping me (getting more visitors for Kasumi), but it's also helping other people. ^_^

Download This Layout Template?

If you'd like to download this layout template, just right click in the text box below. Then choose "Select All". Right click again, but this time choose "Copy". Then just paste in Notepad to edit, or directly into a new file at your website host/FTP to start editing!~

<html>
<head>

<title>Layout Template #5</title>

<style>

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

/* 
   Now, the CSS stylesheets begin here!
   The CSS stylesheet is the part of the page 
   that controls all the pretty colors and fonts and stuff.

Remember to not touch anything you don't know about, 
   and these comments here will guide you through the CSS Stylesheet!
   Please read them carefully! Start below~ <3
*/

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

/* 
   Now, here's one of these comments! Right below, we have a section called
   the body section. A section will begin with the { symbol, and end with the 
   } symbol, as seen below. Nothing much, except you see that 
   FFFFFF thing? Well it's a color code. It'll change what color will be on
   your layout's background-color. You can find loads of color codes at 
   this website: www.html-color-codes.info
   Just copy one of the color codes at the website link above, 
   and replace the FFFFFF with it. FFFFFF is the color code for white
   by the way ^_^ 
*/

body {
background-color: #FFFFFF;
}

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

/*
   Wow... alot of stuff below. Most of it, you don't need to worry 
   about. The one thing you should change though, is the 000000
   color code you can see below. That'll influence the color of the 
   text in the layout. 000000 is the color code for black. 
*/

#layoutdiv {
color: #000000;
width: 640px;
height: 400px;
text-align: center;
border: 1px solid;
font-family: Verdana, sans-serif;
font-size: 11px;
border: 1px solid;
border-top: 0px solid;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;
}

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

/* Nothing to edit here in this section below ^^ */

#header {
width: 640px;
height: 160px;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 0px solid;
}

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

/* 
   This section below controls the properties of the 
   banner. You don't need to edit anything here, except, you see 
   those brackets below? You know, the (' and ') ones. They have 
   the text BANNER DIRECT LINK HERE inside them. Well... as you 
   probably can guess, you have to put a banner direct link there, 
   in-between those brackets. Just go to www.tinypic.com   , 
   and upload your banner image that you're going to use as your 
   banner. Tinypic will generate a bunch of codes for you. One 
   them is 'Direct Link'. Don't use the HTML Code inside the brackets,
   it won't work. You have to copy the Direct link, ok?
   After copying the direct link, just backspace the text inside 
   those brackets below, and paste in your direct link. 
*/

#banner {
background-image: url(' BANNER DIRECT LINK HERE ');
width: 615px;
height: 130px;
border: 1px solid;
margin: 10px;
border: 1px solid;
}

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

/* Nope, nothing to edit here */

#navi {
width: 200px;
float: left;
padding: 2px;
margin: 10px;
top: -400px;
height: 284px;
overflow: auto;
text-align: justify;
border: 1px solid;
}

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

/* Or here either */

#links {
width: 200px;
height: 50px;
overflow-y: auto;
margin: 10px;
border: 1px solid;
text-align: justify;
padding: 2px;
float: left; }

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

/* Yup, you guessed it, there's nothing for you to edit here either */

#content {
margin: 10px;
text-align: justify;
padding: 2px;
width: 360px;
height: 360px;
float: left;
overflow: auto;
border: 1px solid;
}

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

/* Now HERE's something to edit!~ :D These sections below 
    control your link colors! Just replace both the 585858 color 
    codes below with another color code of your choice! 
*/

A:link, A:visited, A:active
{ text-decoration: none; 
color: #585858; }

A:hover 
{ color: #585858; 
text-decoration: underline; }

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

/* 
   Now, editing these sections below is optional!~ That means that 
   you don't have to if you don't want to. They control what the 
   headers/headings at the top of each paragraph/page will look like.
   I'd suggest leaving these as they are unless you are fluent with 
   HTML and have an idea about what you want to do with them. 
*/

h1 {
font-family: "Times New Roman", serif;
border-bottom: 1px dotted;
border-left: 10px solid;
font-style: italic;
text-align: right;
font-weight: none;
}

h2 {
font-family: "Times New Roman", serif;
border-bottom: 1px dotted;
font-style: italic;
text-align: center;
}

h3 {
font-family: "Times New Roman", serif;
font-style: italic;
border-bottom: 1px dotted;
line-height: 10px;
padding-top: 0px;
}

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

/* The CSS Stylesheet ends here! YAY! */

</style>
</head>
<body>
<center>
<div id="header">
<div id="banner">
<h3>Banner Here</h3>
</div>
</div>
<div id="layoutdiv">
<div id="content">

<h1>Layout Template #5</h1>
Hi there!~ <3 Welcome to this new layout template I just made! ^_^ 
I am really happy with the result... plus the fact that I coded it from scratch and 
it works in Internet Explorer, Firefox, Lunascape, and Google Chrome! :D 
I based it on a nested-table type thing, since I'd just learned how to nest tables using HTML from 
<a href="http://lissaexplains.com" target="_blank">LissaExplains</a>. I decided to use the idea with a 
div layout instead, and it worked! So yeah, this is like, the bestest layout ever I coded entirely by myself~ <3<p>

<h2>About this layout template</h2>
This layout template is 640px in width, and 400px in height. That means it will fit on almost every computer screen <b>without</b> any large annoying 
scrollbars at the bottom of the page! This layout uses scrollbars though~ For the content, affililate and navigation menu boxes. ^_^ 
As I said above, it also works in all the major internet browsers! Unfortunately though... this layout can be quite hard to edit for a beginner... 
so I'd suggest using this layout template if you're fairly fluent with HTML. But for the beginners, don't worry! You can still use this layout, you just might 
find it confusing and stuff <3 If you'd like to check out the other awesome layout templates at Kasumi though, you're free to do so! 
<a href="http://kasumii.tk/layouttemplates.php">[click here]</a>.

<h2>Help?</h2>
If you're unsure, feel pressured, or are confused about anything to do with editing, using, or well... basically, if you need any help at <b>ALL</b>, 
just drop me an email at the email address below! I'll reply as soon as possible! (usually the maximum time you gotta wait is about 3 days :P) <p>

<center><u><b>wishjiirachii@gmail.com</b></u></center><p>

Don't feel scared or anything!~ I'm very happy to try my best to help you!

<h2>Crediting Me</h2>
Please leave the credits where they are on the navigational menu to the right of the content area. You could also move it to another page... (eg. Credits/Thanks page) 
but please make sure the link is visible and can be seen and isn't in a teeny-winsy little font if you're putting it on another page. Crediting isn't about making me more 
popular or well-known or any of that stuff... to me, crediting me will help others find the place that you got this awesome layout template. It's not only helping me 
(getting more visitors for Kasumi), but it's also helping other people. ^_^

</div>
<div id="links">
<h3>Affiliates</h3>

</div>

<h3>Main Navigation</h3>

<h3>Header</h3>

<h3>Header</h3>

<h3>Header</h3>

<h3>Credits</h3>
<a href="http://kasumi.netii.net" target="_blank">Layout Template</a><br>

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

-Wishjirachi