Blah blah blah
What you see here is an example. This is exactly what the layout looks like if you don't edit anything, and as you can see it's not particularly attractive, so by all means remember to go wild and edit it!
Copy the code inside the text area and paste it into a text editor, then edit at will.
How to edit this layout
- The three main divs are
#rightmenu, their purposes being rather obvious.
#headeris the header (which will contain some sort of a top banner). #container is just what it says, a container for the main divs; you can leave it completely alone in your editing unless you want the whole site to cover only a portion of the browser window; then you can set it to for example
80%. (Technically you can also set it to a fixed width in pixels and make an image-based layout if you know your stuff in that.)
- To change fonts, font colors or font sizes for the whole page, change the
body; to change them for the individual main divs, you should obviously just add similar declarations under the styles for that div.
- The CSS for backgrounds is
background:whatever;, with "whatever" being either a hexadecimal color code or an image in the form
url(filename)(or both). Borders can be added with something like
border:1px solid #000000;, obviously changing the width and the color as you like, and then you can change the "solid" to for example "dashed", "dotted" or "double" for different types of borders. Backgrounds and borders on the three main divs will only reach as far as to the bottom of each individual div's content; I'm afraid this layout can not make the background/border reach all the way to the bottom.
- Depending on the height of your banner, I recommend changing the
#headerto the same height.
- To remove one of the menus, delete it in the code and stylesheet and change either the
#content, depending on which menu you removed, to 0. To change the width of the menus or their padding, just make sure to change the left or right (depending on which menu you edit) margin of
#contentby the same amount.
- If you put backgrounds on all three main divs and don't want there to be space between the backgrounds on the menus and the background on the content, change the margins of
#contentto be the exact same as the width of the menu on that side plus twice the combined width of the padding and border. If you have borders on all three and want the borders where they meet to appear like one border rather than two side-by-side, do the same but subtract the width of the content's border on each side.
- The way the menus are made may appear alien to many, but basically, it's made with lists. If you don't get how it works, just be sure to leave the
#leftmenu ul, #rightmenu ulstuff alone in the CSS and copy and paste when you add new categories and menu items. (I double spaced around the code that makes one category to help with that.)
- To make a different background image for the sublinks in the menus, use
#leftmenu ul li ul, #rightmenu ul li ulas the selector.
- To edit the link styles only for the menus, use
#leftmenu a:link, #rightmenu a:link, #leftmenu a:visited, #rightmenu a:visitedfor the normal links and
#leftmenu a:active, #rightmenu a:active, #leftmenu a:hover, #rightmenu a:hoverfor the links on hover. To remove the underline on any of them, change the
- To make everything except the content appear the same on every page, you need to make sure your host supports SSI. If it does, cut out everything above the content in the code in your files and put in a separate file called for example
top.txt, and the same for what is below the content except calling it something else, such as
bottom.txt. Instead of that code, put
<!--#include file="top.txt" -->above the content and
<!--#include file="bottom.txt" --> below it.. Save the pages (not the menus) with the .shtml extension. Edit
rightmenu.txtwhen you want to edit the menus, and it will be edited everywhere.
- It is also usually better to cut and paste everything between the
</style>tags (not including the tags themselves) into a separate file called something like
stylesheet.cssand then externally link to it by replacing the
<link href="stylesheet.css" rel="stylesheet" type="text/css">. Then the stylesheet will also be the same on every page, making a new style will be a breeze, and it will be completely separated from your HTML.
- If you're going to link back, please visit the Link to Me section to find the most fitting button for your color scheme.
If you did not understand the instructions, it is probably best for you to learn more HTML and CSS before trying to make your own website.