♪Windchime~~♪ Letting your heart be your guide!~

☆Building a Header Template☆

Live template preview | Install pre-made template
Quick guide to the properties used here and what they do

Below, I'll walk you through how to create a Neocities layout similar to the one above. I'll show you how to code the header, 2 content elements, and a footer. (Or you can install the pre-made one).

There are many different ways to code, but everything I code looks like this. If you don't already have something, feel free to use this:

<!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> {CustomCss} </style> </head> <body> </body> </html>

Let's start with the container.
The container is what holds everything together. It's useful for moving all of the content at once, having all elements be the same size, so on.

<!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> #container{ width:650px; margin:15px 0 15px 0; border:1px solid blue; position:absolute; left: 50%; transform: translateX(-50%); } {CustomCss} </style> </head> <body> </body> </html>

In this, you'll see that I've included margin and some positioning properties. The margin is the space above and below the container - it distances it from the top and bottom parts of the pages. You can remove this if you want no space, or change the numbers as you like.

Position, left, and transform put the container at the center of the page. Remove or adjust to your liking. (Note that "position:absolute" is needed for the transformation to work, though).

In my template, I made the header image a background of the element instead of a regular image inside it. "Object-fit: fill;" and "background-position: 50% 30%;" make it where your header will fit into the element without overflowing, and you can adjust the position of the image instead of having to alter the image itself.

You'll have something that looks like this:

(Of course, change your header image to whatever you want).

After this, we can make the "links" element. You can put anything in this box, but I chose to put links inside.

<!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> #container{ width:650px; margin:15px 0 15px 0; position:absolute; left: 50%; transform: translateX(-50%); } #header{ height:175px; border:1px solid blue; margin:10px 0 10px 0; } #header_img{ width:100%; height:100%; object-fit: fill; background-position: 50% 30%; background-image:url('https://64.media.tumblr.com/526124f8a638b719d95a55e527b09be5/0594f8b711bfe6e2-e7/s1280x1920/a640f6e70a90f4a99500f43a068259b899162bec.jpg'); } #links{ border:1px solid blue; margin:0 0 10px 0; text-align:center; background:white; padding:5px; } {CustomCss} </style> </head> <body> <div id="container"> <div id="header"> <div id="header_img"> </div> </div> <div id="links"> <a href="/">Link 1</a> | <a href="/">Link 2</a> | <a href="/">Link 3</a> | <a href="/">Link 4</a> | <a href="/">Link 5</a> </div> </div> </body> </html>

I added "margin:10px 0 10px 0;" to #header so that the links and header have space between them instead of being smushed together.

Now, you can add the actual content. You can put anything here! I left it mostly empty, but when making sites, I like to use things like tables, and include information such as about the site, me, or updates.

<!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> #container{ width:650px; margin:15px 0 15px 0; position:absolute; left: 50%; transform: translateX(-50%); } #header{ height:175px; border:1px solid blue; margin:10px 0 10px 0; } #header_img{ width:100%; height:100%; object-fit: fill; background-position: 50% 30%; background-image:url('https://64.media.tumblr.com/526124f8a638b719d95a55e527b09be5/0594f8b711bfe6e2-e7/s1280x1920/a640f6e70a90f4a99500f43a068259b899162bec.jpg'); } #links{ border:1px solid blue; margin:0 0 10px 0; text-align:center; background:white; padding:5px; } #content{ border:1px solid blue; background:white; padding:10px; margin:0 0 10px 0; } {CustomCss} </style> </head> <body> <div id="container"> <div id="header"> <div id="header_img"> </div> </div> <div id="links"> <a href="/">Link 1</a> | <a href="/">Link 2</a> | <a href="/">Link 3</a> | <a href="/">Link 4</a> | <a href="/">Link 5</a> </div> <div id="content"> The content box! </div> </div> </body> </html>

If you want the content to be a certain height and scroll, then add "max-height:200px" (number can be changed to your liking) and "overflow-y:auto." This makes it where when the box exceeds a certain height, it won't get bigger, but will just develop a scroll function.
But if not, then the box will get bigger as more things is added to it, and your entire page will eventually scroll (like this one).

Finally, the footer. Remember that you don't have to stop here, you can continue to stack boxes on each other as you see fit!

<!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> #container{ width:650px; margin:15px 0 15px 0; position:absolute; left: 50%; transform: translateX(-50%); } #header{ height:175px; border:1px solid blue; margin:10px 0 10px 0; } #header_img{ width:100%; height:100%; object-fit: fill; background-position: 50% 30%; background-image:url('https://64.media.tumblr.com/526124f8a638b719d95a55e527b09be5/0594f8b711bfe6e2-e7/s1280x1920/a640f6e70a90f4a99500f43a068259b899162bec.jpg'); } #links{ border:1px solid blue; margin:0 0 10px 0; text-align:center; background:white; padding:5px; } #content{ border:1px solid blue; background:white; padding:10px; margin:0 0 10px 0; } #footer{ border:1px solid blue; background:white; text-align:center; padding:5px; } {CustomCss} </style> </head> <body> <div id="container"> <div id="header"> <div id="header_img"> </div> </div> <div id="links"> <a href="/">Link 1</a> | <a href="/">Link 2</a> | <a href="/">Link 3</a> | <a href="/">Link 4</a> | <a href="/">Link 5</a> </div> <div id="content"> The content box! </div> <div id="footer"> <a href="/">About</a> | <a href="/">Contact</a> | <a href="/">Site Map</a> </div> </div> </body> </html>

Footers are often used to include things like buttons, contact, maps, text and other links, much more.

The final product looks like this. It's very simple.

Decorate the page as you like i.e background image, fonts, custom links, etc.

<!DOCTYPE HTML> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body{ background-image:url('https://64.media.tumblr.com/9c6669eba2a2baa025a9e87046d2c06f/tumblr_nk03vgtl9l1u289dqo3_250.png'); font-family:ms gothic; font-size:18px; } a{ color:blue; } #container{ width:650px; margin:15px 0 15px 0; position:absolute; left: 50%; transform: translateX(-50%); } #header{ height:175px; border:1px solid blue; margin:10px 0 10px 0; } #header_img{ width:100%; height:100%; object-fit: fill; background-position: 50% 30%; background-image:url('https://64.media.tumblr.com/526124f8a638b719d95a55e527b09be5/0594f8b711bfe6e2-e7/s1280x1920/a640f6e70a90f4a99500f43a068259b899162bec.jpg'); } #links{ border:1px solid blue; margin:0 0 10px 0; text-align:center; background:white; padding:5px; } #content{ border:1px solid blue; background:white; padding:10px; margin:0 0 10px 0; } #footer{ border:1px solid blue; background:white; text-align:center; padding:5px; } {CustomCss} </style> </head> <body> <div id="container"> <div id="header"> <div id="header_img"> </div> </div> <div id="links"> <a href="/">Link 1</a> | <a href="/">Link 2</a> | <a href="/">Link 3</a> | <a href="/">Link 4</a> | <a href="/">Link 5</a> </div> <div id="content"> The content box! </div> <div id="footer"> <a href="/">About</a> | <a href="/">Contact</a> | <a href="/">Site Map</a> </div> </div> </body> </html>

The rest of the page's design is up to you.