Blah blah blah

This is the float layout; as you can see if you resize your browser window, the width of everything is fixed. And as I said, this is much trickier to edit than the other layout.

How to edit this layout

  • The three main divs are #content, #leftmenu and #rightmenu like in the other layout, with a #header that reaches all the way across at the top and a #footer that reaches all the way across at the bottom. However, there are a couple more divs needed for styling purposes than in the stretching layout - #layout holds everything and keeps it centered, #container holds the three main divs as it did in the other one, and #leftcontainer holds the content and left menu and is necessary only for keeping the source order as we want it. Don't touch the widths on #layout and #container, but if you edit the widths of the anything, always remember to make sure #leftcontainer's width is equal to the widths and double paddings of #leftmenu and #content put together, and #leftcontainer and #rightmenu's width and double padding put together should always equal 779.
  • To change fonts, font colors or font sizes for the whole page, change the font-family:verdana, sans-serif, color:#000000 and font-size:10pt; specified under 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). However, this is slightly more complicated than in the stretching layout: in order to make a background on the menus continue all the way down to the footer, you need to put the backgrounds on #layout or #container. Of course, this should not be too much of a problem; what I recommend is simply putting a 779px wide background image on #container that has the content's background as well as the backgrounds for the menus, and if you want the lists of links or whatever to have different background images, you can put that in separately without fear.
  • Removing a menu is also more complicated in this layout than the other one. Remove the menu from the HTML, remove the start and end tags for #leftcontainer, remove both of them from the CSS, and then change the width of #content to add the width and double the padding of the menu you removed (unless, of course, you choose to take some of that width and put it on the other menu instead).
  • 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 ul stuff 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 ul as the selector.
  • To edit the link styles only for the menus, use #leftmenu a:link, #rightmenu a:link, #leftmenu a:visited, #rightmenu a:visited for the normal links and #leftmenu a:active, #rightmenu a:active, #leftmenu a:hover, #rightmenu a:hover for the links on hover. To remove the underline on any of them, change the text-decoration to none.
  • 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 leftmenu.txt and rightmenu.txt when 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> and </style> tags (not including the tags themselves) into a separate file called something like stylesheet.css and then externally link to it by replacing the <style> tags with <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 either check out the other free layout, or learn more HTML and CSS before trying to make your own website.