Layout Template #4

Hiya there! This here is a 2-columned layout template with a little navigation bar thingy below the banner as well!~ :D The layout template is 700px in width, and compatible and can be used with Firefox, Google Chrome, and Internet Explorer, but is best viewed in Firefox and Google Chrome. Basic HTML knowledge is required to edit this layout, but for the less advanced, I've left numerous comments throughout the layout. These comments won't appear on your actual layout though, just in the coding where only you can see them. ^_^

Crediting Me

Please have credit and a link back to Kasumi somewhere on your site. You can just leave it on the navigational bar, or you could move it to a Credits/Thanks page. ^_^

Help...?

If you need any help at all, I repeat ANY help at all in editing this layout template, just contact me at the email address below. I'll be more than happy to help you!~

wishjiirachii@gmail.com

Download

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

<html> <head>  <title>Layout Template #4</title>  <style> /* Now, you see that '#FFFFFF' thing below? Well, it's called a 'hex color code'! You can find many hex color codes here: http://html-color.codes.info Replace 'FFFFFF' with another hex color code of your choice. By doing this, you'll change the background color of your layout! */ body { background-color: #FFFFFF; } /* This section below controls what color your links look like. Just replace '585858' with your desired hex color code */ a:link, a:visited, a:active { text-decoration: none; color: #585858; } /* This section below controls what color your links look like when your mouse pointer hovers over them. Just replace '585858' with your desired hex color code. */ a:hover { text-decoration: underline overline; color: #585858; } /* Don't change anything here except the '000000' hex color code. Depending on the hex color code you put there, that will be the color of your text */ #container { color: #000000; font-family: Tahoma; Verdana; sans-serif; font-size: 11px; border: 1px solid; width: 700px; margin: auto; } /* Change the 'FFFFFF' below. You can put another hex color code there. I reccomend a light color, since whatever hex color code you put there will be the background color of the content. Refrain from using dark/bright colors, because then the text in the content area will be harder to read */ #content { background-color: #FFFFFF; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; width: 548px; float: left; margin: auto; } /* Nothing really needs to be changed here except the 'FFFFFF' hex color code */ #navibar { background-color: #FFFFFF; border: 1px solid; text-align: right; width: 148px; float: right; margin: auto; } /* Nothing needs to be changed here except the 'FFFFFF' hex color code */ #menubar { background-color: #FFFFFF; width: 698px; margin: auto; border-top: 1px solid; border-right: 1px solid; text-align: center; padding: 2px; } /* OK!~ Now here's something interesting! You can put a direct link to a banner image below, in-between the (' and ') brackets. To get a direct link from a banner, try uploading it to www.tinypic.com . Tinypic should generate a bunch of codes. One of them will say 'Direct Link for Layouts' Copy that one, and put it inbetween the (' and ') below. All banners should be 700px (pixels) in width, and 200px in height. */ #banner { background-image url(' '); background-color: #FFFFFF; margin: auto; width: 100%; height: 200px; text-align: center; } /* You don't have to edit anything here unless you know what you're doing. */ h1 { border-bottom: 2px dashed; font-variant: small-caps; } /* You can change the 'D8D8D8' to a different hex color code. This will change the background color of the headers on the navigational bar. You may also change the '000000' underneath it to another hex code. This will change the header's text color. */ h2 { font-weight: none; background-color: #D8D8D8; color: #000000; } /* Nothing to edit here ._. */ h3 { text-align: right; border-bottom: 1px dashed; } </style> </head> <div id="container"> <div id="banner"> </div> <div id="menubar">  <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> | <a href="#">Link</a> |  </div> <div id="content">  <h1>Layout Template #4</h1> Hiya there! This here is a 2-columned layout template with a little navigation bar thingy below the banner as well!~ :D The layout template is 700px in width, and compatible and can be used with Firefox, Google Chrome, and Internet Explorer, but is best viewed in Firefox and Google Chrome. Basic HTML knowledge is required to edit this layout, but for the less advanced, I've left numerous comments throughout the layout. These comments won't appear on your actual layout though, just in the coding where only you can see them. ^_^ <h3>Crediting Me</h3> Please have credit and a link back to <a href="http://kasumi.netii.net">Kasumi</a> somewhere on your site. You can just leave it on the navigational bar, or you could move it to a Credits/Thanks page. ^_^<p> <h3>Help...?</h3> If you need any help at all, I repeat ANY help at all in editing this layout template, just contact me at the email address below. I'll be more than happy to help you!~<p> <center><b><u>wishjiirachii@gmail.com</u></b></center> <h3>Download</h3> If you'd like to download this layout template, just right-click in the text-box below, and then choose "Select All". Right-click in the box again, but this time choose "Copy". Then just paste into an empty Notepad document to start editing, or directly into a new file at your website host. <p> -Misakii<br> <i>http://kasumi.netii.net<br> wishjiirachii@gmail.com</i>  </div> <div id="navibar">  <h2>Header</h2> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h2>Header</h2> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h2>Header</h2> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h2>Header</h2> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <a href="#">Link Here</a><br> <h2>Best Viewed</h2> <a href="http://firefox.com">Firefox</a><br> <a href="http://www.google.com/chrome">Google Chrome</a><br>  <h2>Credits</h2> <a href="http://kasumi.netii.net" target="_blank">{ Layout Template }</a>    </div> </div> </body> </html>