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
#rightmenulike in the other layout, with a
#headerthat reaches all the way across at the top and a
#footerthat reaches all the way across at the bottom. However, there are a couple more divs needed for styling purposes than in the stretching layout -
#layoutholds everything and keeps it centered,
#containerholds the three main divs as it did in the other one, and
#leftcontainerholds the content and left menu and is necessary only for keeping the source order as we want it. Don't touch the widths on
#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
#contentput together, 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
#container. Of course, this should not be too much of a problem; what I recommend is simply putting a 779px wide background image on
#containerthat 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
#contentto 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 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 either check out the other free layout, or learn more HTML and CSS before trying to make your own website.